From 29d74632c773048987e0a5a708911eed68645770 Mon Sep 17 00:00:00 2001 From: InvalidUsernameException Date: Sat, 15 Feb 2025 16:58:35 +0100 Subject: [PATCH] LibWeb: Move `z-index` to table wrapper box When drawing a table, some of the CSS properties must be moved from the table grid box to an anonamyous table wrapper box. One of these properties is `position`. `z-index` however is not. This leads to the following behavior if a table has both `position` and `z-index`: * The wrapper box has the `position`, but a `z-index` of `auto`. * The grid box has the `z-index`, but `position: static`. This effectively means that the `z-index property is ignored since it has no effect on non-positioned elements. This behavior contradicts what other browsers do and causes layout issues on websites. To align Ladybird behavior with other browser this commit also moves the `z-index` property to the wrapper box. --- Libraries/LibWeb/CSS/ComputedValues.h | 1 + Libraries/LibWeb/Layout/Node.cpp | 11 +++++ .../expected/tables-width-z-index-ref.html | 26 +++++++++++ .../LibWeb/Ref/input/tables-with-z-index.html | 44 +++++++++++++++++++ 4 files changed, 82 insertions(+) create mode 100644 Tests/LibWeb/Ref/expected/tables-width-z-index-ref.html create mode 100644 Tests/LibWeb/Ref/input/tables-with-z-index.html diff --git a/Libraries/LibWeb/CSS/ComputedValues.h b/Libraries/LibWeb/CSS/ComputedValues.h index 4cdad61c9d..ed65144655 100644 --- a/Libraries/LibWeb/CSS/ComputedValues.h +++ b/Libraries/LibWeb/CSS/ComputedValues.h @@ -188,6 +188,7 @@ public: static CSS::Isolation isolation() { return CSS::Isolation::Auto; } static CSS::Containment contain() { return {}; } static CSS::MixBlendMode mix_blend_mode() { return CSS::MixBlendMode::Normal; } + static Optional z_index() { return OptionalNone(); } // https://www.w3.org/TR/SVG/geometry.html static LengthPercentage cx() { return CSS::Length::make_px(0); } diff --git a/Libraries/LibWeb/Layout/Node.cpp b/Libraries/LibWeb/Layout/Node.cpp index 3516d98894..0d9a896d68 100644 --- a/Libraries/LibWeb/Layout/Node.cpp +++ b/Libraries/LibWeb/Layout/Node.cpp @@ -1043,6 +1043,11 @@ void NodeWithStyle::reset_table_box_computed_values_used_by_wrapper_to_init_valu mutable_computed_values.set_clear(CSS::InitialValues::clear()); mutable_computed_values.set_inset(CSS::InitialValues::inset()); mutable_computed_values.set_margin(CSS::InitialValues::margin()); + // AD-HOC: + // To match other browsers, z-index needs to be moved to the wrapper box as well, + // even if the spec does not mention that: https://github.com/w3c/csswg-drafts/issues/11689 + // Note that there may be more properties that need to be added to this list. + mutable_computed_values.set_z_index(CSS::InitialValues::z_index()); } void NodeWithStyle::transfer_table_box_computed_values_to_wrapper_computed_values(CSS::ComputedValues& wrapper_computed_values) @@ -1060,6 +1065,12 @@ void NodeWithStyle::transfer_table_box_computed_values_to_wrapper_computed_value 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()); + // AD-HOC: + // To match other browsers, z-index needs to be moved to the wrapper box as well, + // even if the spec does not mention that: https://github.com/w3c/csswg-drafts/issues/11689 + // Note that there may be more properties that need to be added to this list. + mutable_wrapper_computed_values.set_z_index(computed_values().z_index()); + reset_table_box_computed_values_used_by_wrapper_to_init_values(); } diff --git a/Tests/LibWeb/Ref/expected/tables-width-z-index-ref.html b/Tests/LibWeb/Ref/expected/tables-width-z-index-ref.html new file mode 100644 index 0000000000..5f3a0c4ad8 --- /dev/null +++ b/Tests/LibWeb/Ref/expected/tables-width-z-index-ref.html @@ -0,0 +1,26 @@ + + + +
+
+
+
+
+
+
+
diff --git a/Tests/LibWeb/Ref/input/tables-with-z-index.html b/Tests/LibWeb/Ref/input/tables-with-z-index.html new file mode 100644 index 0000000000..3efa27b32e --- /dev/null +++ b/Tests/LibWeb/Ref/input/tables-with-z-index.html @@ -0,0 +1,44 @@ + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+