From c49d53b8dd0bfedcfcd03d0bd1ddd44d393910dd Mon Sep 17 00:00:00 2001 From: Oriol Brufau Date: Sat, 9 Aug 2025 10:42:12 -0700 Subject: [PATCH] layout: Paint flex and grid items like inline blocks (#38574) As specified in https://drafts.csswg.org/css-flexbox-1/#painting and https://drafts.csswg.org/css-grid/#z-order Testing: Makes some WPT pass. Fixes: #38573 Signed-off-by: Oriol Brufau --- components/layout/display_list/stacking_context.rs | 8 ++++++-- .../flexbox-items-as-stacking-contexts-002.html.ini | 2 -- .../css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml.ini | 3 --- .../meta/css/css-flexbox/flexbox-mbp-horiz-003.xhtml.ini | 3 --- .../meta/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml.ini | 3 --- .../css/css-flexbox/hittest-overlapping-margin.html.ini | 4 ---- .../css/css-flexbox/hittest-overlapping-order.html.ini | 4 ---- .../grid-inline-items-inline-blocks-001.html.ini | 2 -- .../grid-items/grid-items-inline-blocks-001.html.ini | 2 -- .../css/css-grid/grid-model/grid-item-hit-test.html.ini | 3 --- 10 files changed, 6 insertions(+), 28 deletions(-) delete mode 100644 tests/wpt/meta/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html.ini delete mode 100644 tests/wpt/meta/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml.ini delete mode 100644 tests/wpt/meta/css/css-flexbox/flexbox-mbp-horiz-003.xhtml.ini delete mode 100644 tests/wpt/meta/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml.ini delete mode 100644 tests/wpt/meta/css/css-flexbox/hittest-overlapping-margin.html.ini delete mode 100644 tests/wpt/meta/css/css-flexbox/hittest-overlapping-order.html.ini delete mode 100644 tests/wpt/meta/css/css-grid/grid-items/grid-inline-items-inline-blocks-001.html.ini delete mode 100644 tests/wpt/meta/css/css-grid/grid-items/grid-items-inline-blocks-001.html.ini delete mode 100644 tests/wpt/meta/css/css-grid/grid-model/grid-item-hit-test.html.ini diff --git a/components/layout/display_list/stacking_context.rs b/components/layout/display_list/stacking_context.rs index 132a014b2fc..081dc1068eb 100644 --- a/components/layout/display_list/stacking_context.rs +++ b/components/layout/display_list/stacking_context.rs @@ -930,7 +930,8 @@ struct OverflowFrameData { impl BoxFragment { fn get_stacking_context_type(&self) -> Option { - if self.style.establishes_stacking_context(self.base.flags) { + let flags = self.base.flags; + if self.style.establishes_stacking_context(flags) { return Some(StackingContextType::RealStackingContext); } @@ -943,7 +944,10 @@ impl BoxFragment { return Some(StackingContextType::FloatStackingContainer); } - if self.is_atomic_inline_level() { + // Flex and grid items are painted like inline blocks. + // + // + if self.is_atomic_inline_level() || flags.contains(FragmentFlags::IS_FLEX_OR_GRID_ITEM) { return Some(StackingContextType::AtomicInlineStackingContainer); } diff --git a/tests/wpt/meta/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html.ini b/tests/wpt/meta/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html.ini deleted file mode 100644 index 9e230d746dd..00000000000 --- a/tests/wpt/meta/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[flexbox-items-as-stacking-contexts-002.html] - expected: FAIL diff --git a/tests/wpt/meta/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml.ini b/tests/wpt/meta/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml.ini deleted file mode 100644 index 9ff3e9e9bc1..00000000000 --- a/tests/wpt/meta/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml.ini +++ /dev/null @@ -1,3 +0,0 @@ -[flexbox-mbp-horiz-003-reverse.xhtml] - expected: - if os == "linux": FAIL diff --git a/tests/wpt/meta/css/css-flexbox/flexbox-mbp-horiz-003.xhtml.ini b/tests/wpt/meta/css/css-flexbox/flexbox-mbp-horiz-003.xhtml.ini deleted file mode 100644 index 2b7a79e543d..00000000000 --- a/tests/wpt/meta/css/css-flexbox/flexbox-mbp-horiz-003.xhtml.ini +++ /dev/null @@ -1,3 +0,0 @@ -[flexbox-mbp-horiz-003.xhtml] - expected: - if os == "linux": FAIL diff --git a/tests/wpt/meta/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml.ini b/tests/wpt/meta/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml.ini deleted file mode 100644 index c72caf2f0d2..00000000000 --- a/tests/wpt/meta/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml.ini +++ /dev/null @@ -1,3 +0,0 @@ -[flexbox-mbp-horiz-003v.xhtml] - expected: - if os == "linux": FAIL diff --git a/tests/wpt/meta/css/css-flexbox/hittest-overlapping-margin.html.ini b/tests/wpt/meta/css/css-flexbox/hittest-overlapping-margin.html.ini deleted file mode 100644 index 9bbd2c894b7..00000000000 --- a/tests/wpt/meta/css/css-flexbox/hittest-overlapping-margin.html.ini +++ /dev/null @@ -1,4 +0,0 @@ -[hittest-overlapping-margin.html] - [Flexboxes should perform hit testing in reverse paint order for overlapping elements: negative margin case (crbug.com/844505)] - expected: FAIL - diff --git a/tests/wpt/meta/css/css-flexbox/hittest-overlapping-order.html.ini b/tests/wpt/meta/css/css-flexbox/hittest-overlapping-order.html.ini deleted file mode 100644 index e9be9a9063f..00000000000 --- a/tests/wpt/meta/css/css-flexbox/hittest-overlapping-order.html.ini +++ /dev/null @@ -1,4 +0,0 @@ -[hittest-overlapping-order.html] - [Flexboxes should perform hit testing in reverse paint order for overlapping elements: flex order case (crbug.com/844505)] - expected: FAIL - diff --git a/tests/wpt/meta/css/css-grid/grid-items/grid-inline-items-inline-blocks-001.html.ini b/tests/wpt/meta/css/css-grid/grid-items/grid-inline-items-inline-blocks-001.html.ini deleted file mode 100644 index 1f097be803a..00000000000 --- a/tests/wpt/meta/css/css-grid/grid-items/grid-inline-items-inline-blocks-001.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[grid-inline-items-inline-blocks-001.html] - expected: FAIL diff --git a/tests/wpt/meta/css/css-grid/grid-items/grid-items-inline-blocks-001.html.ini b/tests/wpt/meta/css/css-grid/grid-items/grid-items-inline-blocks-001.html.ini deleted file mode 100644 index 1c0bb4bc56b..00000000000 --- a/tests/wpt/meta/css/css-grid/grid-items/grid-items-inline-blocks-001.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[grid-items-inline-blocks-001.html] - expected: FAIL diff --git a/tests/wpt/meta/css/css-grid/grid-model/grid-item-hit-test.html.ini b/tests/wpt/meta/css/css-grid/grid-model/grid-item-hit-test.html.ini deleted file mode 100644 index 2c02e66e5a2..00000000000 --- a/tests/wpt/meta/css/css-grid/grid-model/grid-item-hit-test.html.ini +++ /dev/null @@ -1,3 +0,0 @@ -[grid-item-hit-test.html] - [grid-item-hit-test] - expected: FAIL