From 4a35693dd79d3d764a8d949c6b7af61a050b610d Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sun, 7 Jan 2024 13:05:20 +0100 Subject: [PATCH] LibWeb: Improve style propagation to anonymous wrappers - We now propagate changes in font and line-height to anonymous wrappers when doing a partial style update after invalidation. - We no longer (incorrectly) propagate style from table wrapper boxes to the table root, since inheritance works in the other direction. Fixes #22395 --- ...e-invalidation-line-height-propagation.txt | 21 +++++++++++++ ...alidation-propagation-to-table-wrapper.txt | 20 +++++++++++++ ...-invalidation-line-height-propagation.html | 13 ++++++++ ...lidation-propagation-to-table-wrapper.html | 17 +++++++++++ Userland/Libraries/LibWeb/Layout/Node.cpp | 30 ++++++++++++++----- Userland/Libraries/LibWeb/Layout/Node.h | 1 + 6 files changed, 94 insertions(+), 8 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/style-invalidation-line-height-propagation.txt create mode 100644 Tests/LibWeb/Layout/expected/table/style-invalidation-propagation-to-table-wrapper.txt create mode 100644 Tests/LibWeb/Layout/input/style-invalidation-line-height-propagation.html create mode 100644 Tests/LibWeb/Layout/input/table/style-invalidation-propagation-to-table-wrapper.html diff --git a/Tests/LibWeb/Layout/expected/style-invalidation-line-height-propagation.txt b/Tests/LibWeb/Layout/expected/style-invalidation-line-height-propagation.txt new file mode 100644 index 0000000000..41202ffe7b --- /dev/null +++ b/Tests/LibWeb/Layout/expected/style-invalidation-line-height-propagation.txt @@ -0,0 +1,21 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x36 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x20 children: not-inline + BlockContainer
at (8,8) content-size 784x10 children: inline + line 0 width: 98, height: 10, bottom: 10, baseline: 9.796875 + frag 0 from TextNode start: 0, length: 11, rect: [8,8 98x10] + "foo bar baz" + TextNode <#text> + BlockContainer <(anonymous)> at (8,18) content-size 784x10 children: inline + line 0 width: 98, height: 10, bottom: 10, baseline: 9.796875 + frag 0 from TextNode start: 0, length: 11, rect: [8,18 98x10] + "foo bar baz" + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x36] + PaintableWithLines (BlockContainer) [8,8 784x20] + PaintableWithLines (BlockContainer
) [8,8 784x10] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,18 784x10] + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/expected/table/style-invalidation-propagation-to-table-wrapper.txt b/Tests/LibWeb/Layout/expected/table/style-invalidation-propagation-to-table-wrapper.txt new file mode 100644 index 0000000000..a27845aeee --- /dev/null +++ b/Tests/LibWeb/Layout/expected/table/style-invalidation-propagation-to-table-wrapper.txt @@ -0,0 +1,20 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x120 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x104 children: not-inline + BlockContainer
at (8,8) content-size 784x104 children: not-inline + TableWrapper <(anonymous)> at (204,8) content-size 392x104 [BFC] children: not-inline + Box at (204,8) content-size 392x104 table-box [TFC] children: not-inline + Box at (204,8) content-size 388x100 table-row-group children: not-inline + Box at (206,10) content-size 388x100 table-row children: not-inline + BlockContainer
at (207,60) content-size 386x0 table-cell [BFC] children: inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x120] + PaintableWithLines (BlockContainer) [8,8 784x104] + PaintableWithLines (BlockContainer
) [8,8 784x104] + PaintableWithLines (TableWrapper(anonymous)) [204,8 392x104] + PaintableBox (Box) [204,8 392x104] + PaintableBox (Box) [204,8 388x100] overflow: [204,8 390x102] + PaintableBox (Box) [206,10 388x100] + PaintableWithLines (BlockContainer
) [206,10 388x100] diff --git a/Tests/LibWeb/Layout/input/style-invalidation-line-height-propagation.html b/Tests/LibWeb/Layout/input/style-invalidation-line-height-propagation.html new file mode 100644 index 0000000000..2d8039b5af --- /dev/null +++ b/Tests/LibWeb/Layout/input/style-invalidation-line-height-propagation.html @@ -0,0 +1,13 @@ +
foo bar baz
foo bar baz diff --git a/Tests/LibWeb/Layout/input/table/style-invalidation-propagation-to-table-wrapper.html b/Tests/LibWeb/Layout/input/table/style-invalidation-propagation-to-table-wrapper.html new file mode 100644 index 0000000000..3f3c2490ef --- /dev/null +++ b/Tests/LibWeb/Layout/input/table/style-invalidation-propagation-to-table-wrapper.html @@ -0,0 +1,17 @@ +
diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp index 71a94816c3..395bd49dea 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.cpp +++ b/Userland/Libraries/LibWeb/Layout/Node.cpp @@ -846,10 +846,6 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style) } else if (aspect_ratio->is_ratio()) { computed_values.set_aspect_ratio({ false, aspect_ratio->as_ratio().ratio() }); } - if (display().is_table_inside() && is(parent())) { - auto& wrapper_computed_values = static_cast(parent())->m_computed_values; - transfer_table_box_computed_values_to_wrapper_computed_values(wrapper_computed_values); - } auto math_shift_value = computed_style.property(CSS::PropertyID::MathShift); if (auto math_shift = value_id_to_math_shift(math_shift_value->to_identifier()); math_shift.has_value()) @@ -862,13 +858,31 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style) computed_values.set_math_depth(computed_style.math_depth()); computed_values.set_quotes(computed_style.quotes()); - // Update any anonymous children that inherit from this node. + propagate_style_to_anonymous_wrappers(); +} + +void NodeWithStyle::propagate_style_to_anonymous_wrappers() +{ + // Update the style of any anonymous wrappers 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()) { + + // If this is a `display:table` box with an anonymous wrapper parent, + // the parent inherits style from *this* node, not the other way around. + if (display().is_table_inside() && is(parent())) { + auto& table_wrapper = *static_cast(parent()); + transfer_table_box_computed_values_to_wrapper_computed_values(table_wrapper.m_computed_values); + table_wrapper.set_font_list(*m_font_list); + table_wrapper.set_line_height(m_line_height); + } + + // Propagate style to all anonymous children (except table wrappers!) + for_each_child_of_type([&](NodeWithStyle& child) { + if (child.is_anonymous() && !is(child)) { auto& child_computed_values = static_cast(static_cast(const_cast(child.computed_values()))); - child_computed_values.inherit_from(computed_values); + child_computed_values.inherit_from(m_computed_values); + child.set_font_list(*m_font_list); + child.set_line_height(m_line_height); } }); } diff --git a/Userland/Libraries/LibWeb/Layout/Node.h b/Userland/Libraries/LibWeb/Layout/Node.h index 944ee5ca99..2c1e36c378 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.h +++ b/Userland/Libraries/LibWeb/Layout/Node.h @@ -237,6 +237,7 @@ protected: private: void reset_table_box_computed_values_used_by_wrapper_to_init_values(); + void propagate_style_to_anonymous_wrappers(); CSS::ComputedValues m_computed_values; RefPtr m_font_list;