diff --git a/Tests/LibWeb/Layout/expected/table/propagate-style-update-to-wrapper.txt b/Tests/LibWeb/Layout/expected/table/propagate-style-update-to-wrapper.txt new file mode 100644 index 0000000000..5da9b74d0e --- /dev/null +++ b/Tests/LibWeb/Layout/expected/table/propagate-style-update-to-wrapper.txt @@ -0,0 +1,18 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x0 children: not-inline + TableWrapper <(anonymous)> at (8,8) content-size 6x6 positioned [BFC] children: not-inline + Box at (8,8) content-size 6x6 table-box [TFC] children: not-inline + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + Box at (8,8) content-size 2x2 table-row-group children: not-inline + Box at (10,10) content-size 2x2 table-row children: not-inline + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer at (11,11) content-size 0x0 table-cell [BFC] children: not-inline + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/table/propagate-style-update-to-wrapper.html b/Tests/LibWeb/Layout/input/table/propagate-style-update-to-wrapper.html new file mode 100644 index 0000000000..4b6310d47f --- /dev/null +++ b/Tests/LibWeb/Layout/input/table/propagate-style-update-to-wrapper.html @@ -0,0 +1,12 @@ + + + + +
+ + \ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp index a6c2db1af9..cca409a893 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.cpp +++ b/Userland/Libraries/LibWeb/Layout/Node.cpp @@ -26,6 +26,7 @@ #include #include #include +#include #include #include #include @@ -734,6 +735,10 @@ 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); + } } bool Node::is_root_element() const @@ -810,6 +815,24 @@ void NodeWithStyle::reset_table_box_computed_values_used_by_wrapper_to_init_valu mutable_computed_values.set_margin(CSS::InitialValues::margin()); } +void NodeWithStyle::transfer_table_box_computed_values_to_wrapper_computed_values(CSS::ComputedValues& wrapper_computed_values) +{ + // The computed values of properties 'position', 'float', 'margin-*', 'top', 'right', 'bottom', and 'left' on the table element are used on the table wrapper box and not the table box; + // all other values of non-inheritable properties are used on the table box and not the table wrapper box. + // (Where the table element's values are not used on the table and table wrapper boxes, the initial values are used instead.) + auto& mutable_wrapper_computed_values = static_cast(wrapper_computed_values); + if (display().is_inline_outside()) + mutable_wrapper_computed_values.set_display(CSS::Display::from_short(CSS::Display::Short::InlineBlock)); + else + mutable_wrapper_computed_values.set_display(CSS::Display::from_short(CSS::Display::Short::FlowRoot)); + mutable_wrapper_computed_values.set_position(computed_values().position()); + mutable_wrapper_computed_values.set_inset(computed_values().inset()); + mutable_wrapper_computed_values.set_float(computed_values().float_()); + mutable_wrapper_computed_values.set_clear(computed_values().clear()); + mutable_wrapper_computed_values.set_margin(computed_values().margin()); + reset_table_box_computed_values_used_by_wrapper_to_init_values(); +} + void Node::set_paintable(JS::GCPtr paintable) { m_paintable = move(paintable); diff --git a/Userland/Libraries/LibWeb/Layout/Node.h b/Userland/Libraries/LibWeb/Layout/Node.h index 3aeb16e8a2..063f43ad97 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.h +++ b/Userland/Libraries/LibWeb/Layout/Node.h @@ -195,13 +195,15 @@ public: JS::NonnullGCPtr create_anonymous_wrapper() const; - void reset_table_box_computed_values_used_by_wrapper_to_init_values(); + void transfer_table_box_computed_values_to_wrapper_computed_values(CSS::ComputedValues& wrapper_computed_values); protected: NodeWithStyle(DOM::Document&, DOM::Node*, NonnullRefPtr); NodeWithStyle(DOM::Document&, DOM::Node*, CSS::ComputedValues); private: + void reset_table_box_computed_values_used_by_wrapper_to_init_values(); + CSS::ComputedValues m_computed_values; RefPtr m_font; CSSPixels m_line_height { 0 }; diff --git a/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp b/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp index d7615df4a2..e06640854b 100644 --- a/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp +++ b/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp @@ -592,20 +592,7 @@ void TreeBuilder::generate_missing_parents(NodeWithStyle& root) auto& parent = *table_box->parent(); CSS::ComputedValues wrapper_computed_values; - // The computed values of properties 'position', 'float', 'margin-*', 'top', 'right', 'bottom', and 'left' on the table element are used on the table wrapper box and not the table box; - // all other values of non-inheritable properties are used on the table box and not the table wrapper box. - // (Where the table element's values are not used on the table and table wrapper boxes, the initial values are used instead.) - auto& mutable_wrapper_computed_values = static_cast(wrapper_computed_values); - if (table_box->display().is_inline_outside()) - mutable_wrapper_computed_values.set_display(CSS::Display::from_short(CSS::Display::Short::InlineBlock)); - else - mutable_wrapper_computed_values.set_display(CSS::Display::from_short(CSS::Display::Short::FlowRoot)); - mutable_wrapper_computed_values.set_position(table_box->computed_values().position()); - mutable_wrapper_computed_values.set_inset(table_box->computed_values().inset()); - mutable_wrapper_computed_values.set_float(table_box->computed_values().float_()); - mutable_wrapper_computed_values.set_clear(table_box->computed_values().clear()); - mutable_wrapper_computed_values.set_margin(table_box->computed_values().margin()); - table_box->reset_table_box_computed_values_used_by_wrapper_to_init_values(); + table_box->transfer_table_box_computed_values_to_wrapper_computed_values(wrapper_computed_values); auto wrapper = parent.heap().allocate_without_realm(parent.document(), nullptr, move(wrapper_computed_values));