LibWeb: Update anonymous wrappers when applying style changes

Anonymous wrapper boxes inherit style from their layout tree parent, and since style data is per-layout-node, we have to manually sync them from parent to anonymous children when something changes. This is not very elegant or efficient, so I've left a FIXME about solving it in a nicer way. This fixes horizontal dog alignment on https://waffles.dog/ :^)
awesomekling · Jul 3, 2023 · 57ed5e4 · 57ed5e4
1 parent b918ce4
commit 57ed5e4
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 0 deletions.
diff --git a/Tests/LibWeb/Layout/expected/anonymous-wrappers-continue-to-inherit-style-after-change.txt b/Tests/LibWeb/Layout/expected/anonymous-wrappers-continue-to-inherit-style-after-change.txt
@@ -0,0 +1,13 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x89.846250 [BFC] children: not-inline
+    BlockContainer <body> at (8,21.440000) content-size 784x73.846250 children: not-inline
+      BlockContainer <h1> at (8,21.440000) content-size 784x34.9375 children: inline
+        line 0 width: 105.53125, height: 34.9375, bottom: 34.9375, baseline: 27.0625
+          frag 0 from TextNode start: 0, length: 6, rect: [8,21.440000 105.53125x34.9375]
+            "header"
+        TextNode <#text>
+      BlockContainer <(anonymous)> at (8,77.817501) content-size 784x17.46875 children: inline
+        line 0 width: 212.125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 24, rect: [8,77.817501 212.125x17.46875]
+            "anonymously wrapped text"
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/input/anonymous-wrappers-continue-to-inherit-style-after-change.html b/Tests/LibWeb/Layout/input/anonymous-wrappers-continue-to-inherit-style-after-change.html
@@ -0,0 +1,8 @@
+<!doctype html><style>
+body {
+    text-align: center;
+}
+</style><body><h1>header</h1>anonymously wrapped text<script>
+document.body.offsetWidth; // Force a layout.
+document.body.style.textAlign = 'left';
+</script>
diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h
@@ -431,6 +431,11 @@ class ImmutableComputedValues final : public ComputedValues {
 
 class MutableComputedValues final : public ComputedValues {
 public:
+    void inherit_from(ComputedValues const& other)
+    {
+        m_inherited = static_cast<MutableComputedValues const&>(other).m_inherited;
+    }
+
     void set_aspect_ratio(AspectRatio aspect_ratio) { m_noninherited.aspect_ratio = aspect_ratio; }
     void set_font_size(float font_size) { m_inherited.font_size = font_size; }
     void set_font_weight(int font_weight) { m_inherited.font_weight = font_weight; }

diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp
@@ -739,6 +739,16 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
         auto& wrapper_computed_values = static_cast<TableWrapper*>(parent())->m_computed_values;
         transfer_table_box_computed_values_to_wrapper_computed_values(wrapper_computed_values);
     }
+
+    // Update any anonymous children that inherit from this node.
+    // FIXME: This is pretty hackish. It would be nicer if they shared the inherited style
+    //        data structure somehow, so this wasn't necessary.
+    for_each_child([&](auto& child) {
+        if (child.is_anonymous()) {
+            auto& child_computed_values = static_cast<CSS::MutableComputedValues&>(static_cast<CSS::ComputedValues&>(const_cast<CSS::ImmutableComputedValues&>(child.computed_values())));
+            child_computed_values.inherit_from(computed_values);
+        }
+    });
 }
 
 bool Node::is_root_element() const