From cbea70d1a0d8674afc9959775a397bb419ef2160 Mon Sep 17 00:00:00 2001 From: TIN TUN AUNG <62133983+rayguo17@users.noreply.github.com> Date: Thu, 16 Jan 2025 00:46:37 +0800 Subject: [PATCH] layout: Make non-`normal` `align-content` establish a block formatting context (#34984) * Make non-normal align-content establish a block formatting context Signed-off-by: rayguo17 * Adjust code comment Signed-off-by: Martin Robinson --------- Signed-off-by: rayguo17 Signed-off-by: Martin Robinson Co-authored-by: Martin Robinson --- components/layout_2020/style_ext.rs | 9 ++++ tests/wpt/meta/MANIFEST.json | 12 ++--- .../blocks/align-content-block-001.html.ini | 2 - .../blocks/align-content-block-002.html.ini | 19 +------- .../blocks/align-content-block-004.html.ini | 18 -------- .../blocks/align-content-block-005.html.ini | 44 +------------------ .../blocks/align-content-block-006.html.ini | 18 -------- .../blocks/align-content-block-007.html.ini | 42 ------------------ .../blocks/align-content-block-008.html.ini | 18 -------- .../blocks/align-content-block-009.html.ini | 40 ----------------- .../blocks/align-content-block-010.html.ini | 18 -------- .../blocks/align-content-block-011.html.ini | 43 +----------------- .../blocks/align-content-block-006.html | 2 +- .../blocks/align-content-block-007.html | 2 +- .../blocks/align-content-block-008.html | 2 +- .../blocks/align-content-block-009.html | 2 +- .../blocks/align-content-block-010.html | 2 +- .../blocks/align-content-block-011.html | 2 +- 18 files changed, 24 insertions(+), 271 deletions(-) delete mode 100644 tests/wpt/meta/css/css-align/blocks/align-content-block-001.html.ini diff --git a/components/layout_2020/style_ext.rs b/components/layout_2020/style_ext.rs index c1ce588dd76..ec3befaaec3 100644 --- a/components/layout_2020/style_ext.rs +++ b/components/layout_2020/style_ext.rs @@ -721,6 +721,15 @@ impl ComputedValuesExt for ComputedValues { return true; } + // Per : + // Block containers with an `align-content` value that is not `normal` should + // form an independent block formatting context. This should really only happen + // for block containers, but we do not support subgrid containers yet which is the + // only other case. + if self.get_position().align_content.0.primary() != AlignFlags::NORMAL { + return true; + } + // TODO: We need to handle CSS Contain here. false } diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json index 8871e46b4ba..8b7ac3c181b 100644 --- a/tests/wpt/meta/MANIFEST.json +++ b/tests/wpt/meta/MANIFEST.json @@ -557232,42 +557232,42 @@ ] ], "align-content-block-006.html": [ - "acdb6454bd4b85780b5abc6da476f5c699e89dfa", + "fa45f74a7ed8a2515ca0515636ff19c9d5513a13", [ null, {} ] ], "align-content-block-007.html": [ - "c60f640ab066b35c0fb60b2f5c8d134f61d99b0a", + "7c8a7166866e275bd4803fad840711220f2366ce", [ null, {} ] ], "align-content-block-008.html": [ - "7d088d6ae634e0fb63081dd4b01a578a104dc0b5", + "2325933fb34ebf1838656f8b66927dad1ac4352b", [ null, {} ] ], "align-content-block-009.html": [ - "df45aa588f9ddf7a8b657885a817860d1ef0c022", + "312c3ff3a9f3577b674b760f30b9f0f45636e652", [ null, {} ] ], "align-content-block-010.html": [ - "f3ec7a4e9299d71c4fb26b928866cced2d437eed", + "d0808f0206e842f2b186eb3375edb18cc0d10263", [ null, {} ] ], "align-content-block-011.html": [ - "9210f5a83a7a5c95775c42d7a01d1f3ac6ab440e", + "ff5e24ad5f0fff201dcb3c3f255f126f373f4461", [ null, {} diff --git a/tests/wpt/meta/css/css-align/blocks/align-content-block-001.html.ini b/tests/wpt/meta/css/css-align/blocks/align-content-block-001.html.ini deleted file mode 100644 index 9cec50f1501..00000000000 --- a/tests/wpt/meta/css/css-align/blocks/align-content-block-001.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[align-content-block-001.html] - expected: FAIL diff --git a/tests/wpt/meta/css/css-align/blocks/align-content-block-002.html.ini b/tests/wpt/meta/css/css-align/blocks/align-content-block-002.html.ini index b36ef34ea48..4bdb2e838cf 100644 --- a/tests/wpt/meta/css/css-align/blocks/align-content-block-002.html.ini +++ b/tests/wpt/meta/css/css-align/blocks/align-content-block-002.html.ini @@ -28,21 +28,4 @@ [.test 16: space-around] expected: FAIL - - [.test 1: start] - expected: FAIL - - [.test 4: baseline] - expected: FAIL - - [.test 6: flex-start] - expected: FAIL - - [.test 8: unsafe start] - expected: FAIL - - [.test 11: safe start] - expected: FAIL - - [.test 15: space-between] - expected: FAIL + \ No newline at end of file diff --git a/tests/wpt/meta/css/css-align/blocks/align-content-block-004.html.ini b/tests/wpt/meta/css/css-align/blocks/align-content-block-004.html.ini index c5c745adf80..6f65c97d36a 100644 --- a/tests/wpt/meta/css/css-align/blocks/align-content-block-004.html.ini +++ b/tests/wpt/meta/css/css-align/blocks/align-content-block-004.html.ini @@ -1,37 +1,22 @@ [align-content-block-004.html] - [.test 1: start] - expected: FAIL - [.test 2: center] expected: FAIL [.test 3: end] expected: FAIL - [.test 4: baseline] - expected: FAIL - [.test 5: last baseline] expected: FAIL - [.test 6: flex-start] - expected: FAIL - [.test 7: flex-end] expected: FAIL - [.test 8: unsafe start] - expected: FAIL - [.test 9: unsafe center] expected: FAIL [.test 10: unsafe end] expected: FAIL - [.test 11: safe start] - expected: FAIL - [.test 12: safe center] expected: FAIL @@ -41,8 +26,5 @@ [.test 14: space-evenly] expected: FAIL - [.test 15: space-between] - expected: FAIL - [.test 16: space-around] expected: FAIL diff --git a/tests/wpt/meta/css/css-align/blocks/align-content-block-005.html.ini b/tests/wpt/meta/css/css-align/blocks/align-content-block-005.html.ini index b614323968d..efe91f78c3e 100644 --- a/tests/wpt/meta/css/css-align/blocks/align-content-block-005.html.ini +++ b/tests/wpt/meta/css/css-align/blocks/align-content-block-005.html.ini @@ -1,48 +1,6 @@ [align-content-block-005.html] - [.test 1: start] - expected: FAIL - - [.test 2: center] - expected: FAIL - - [.test 3: end] - expected: FAIL - - [.test 4: baseline] - expected: FAIL - - [.test 5: last baseline] - expected: FAIL - - [.test 6: flex-start] - expected: FAIL - - [.test 7: flex-end] - expected: FAIL - - [.test 8: unsafe start] - expected: FAIL - [.test 9: unsafe center] expected: FAIL [.test 10: unsafe end] - expected: FAIL - - [.test 11: safe start] - expected: FAIL - - [.test 12: safe center] - expected: FAIL - - [.test 13: safe end] - expected: FAIL - - [.test 14: space-evenly] - expected: FAIL - - [.test 15: space-between] - expected: FAIL - - [.test 16: space-around] - expected: FAIL + expected: FAIL \ No newline at end of file diff --git a/tests/wpt/meta/css/css-align/blocks/align-content-block-006.html.ini b/tests/wpt/meta/css/css-align/blocks/align-content-block-006.html.ini index f82eaa0dbd4..fbd3933409a 100644 --- a/tests/wpt/meta/css/css-align/blocks/align-content-block-006.html.ini +++ b/tests/wpt/meta/css/css-align/blocks/align-content-block-006.html.ini @@ -1,37 +1,22 @@ [align-content-block-006.html] - [.test 1: start] - expected: FAIL - [.test 2: center] expected: FAIL [.test 3: end] expected: FAIL - [.test 4: baseline] - expected: FAIL - [.test 5: last baseline] expected: FAIL - [.test 6: flex-start] - expected: FAIL - [.test 7: flex-end] expected: FAIL - [.test 8: unsafe start] - expected: FAIL - [.test 9: unsafe center] expected: FAIL [.test 10: unsafe end] expected: FAIL - [.test 11: safe start] - expected: FAIL - [.test 12: safe center] expected: FAIL @@ -41,8 +26,5 @@ [.test 14: space-evenly] expected: FAIL - [.test 15: space-between] - expected: FAIL - [.test 16: space-around] expected: FAIL diff --git a/tests/wpt/meta/css/css-align/blocks/align-content-block-007.html.ini b/tests/wpt/meta/css/css-align/blocks/align-content-block-007.html.ini index cb515ba2868..29a92b12e88 100644 --- a/tests/wpt/meta/css/css-align/blocks/align-content-block-007.html.ini +++ b/tests/wpt/meta/css/css-align/blocks/align-content-block-007.html.ini @@ -1,48 +1,6 @@ [align-content-block-007.html] - [.test 1: start] - expected: FAIL - - [.test 2: center] - expected: FAIL - - [.test 3: end] - expected: FAIL - - [.test 4: baseline] - expected: FAIL - - [.test 5: last baseline] - expected: FAIL - - [.test 6: flex-start] - expected: FAIL - - [.test 7: flex-end] - expected: FAIL - - [.test 8: unsafe start] - expected: FAIL - [.test 9: unsafe center] expected: FAIL [.test 10: unsafe end] expected: FAIL - - [.test 11: safe start] - expected: FAIL - - [.test 12: safe center] - expected: FAIL - - [.test 13: safe end] - expected: FAIL - - [.test 14: space-evenly] - expected: FAIL - - [.test 15: space-between] - expected: FAIL - - [.test 16: space-around] - expected: FAIL diff --git a/tests/wpt/meta/css/css-align/blocks/align-content-block-008.html.ini b/tests/wpt/meta/css/css-align/blocks/align-content-block-008.html.ini index e5926f3ca56..70f61e87171 100644 --- a/tests/wpt/meta/css/css-align/blocks/align-content-block-008.html.ini +++ b/tests/wpt/meta/css/css-align/blocks/align-content-block-008.html.ini @@ -1,37 +1,22 @@ [align-content-block-008.html] - [.test 1: start] - expected: FAIL - [.test 2: center] expected: FAIL [.test 3: end] expected: FAIL - [.test 4: baseline] - expected: FAIL - [.test 5: last baseline] expected: FAIL - [.test 6: flex-start] - expected: FAIL - [.test 7: flex-end] expected: FAIL - [.test 8: unsafe start] - expected: FAIL - [.test 9: unsafe center] expected: FAIL [.test 10: unsafe end] expected: FAIL - [.test 11: safe start] - expected: FAIL - [.test 12: safe center] expected: FAIL @@ -41,8 +26,5 @@ [.test 14: space-evenly] expected: FAIL - [.test 15: space-between] - expected: FAIL - [.test 16: space-around] expected: FAIL diff --git a/tests/wpt/meta/css/css-align/blocks/align-content-block-009.html.ini b/tests/wpt/meta/css/css-align/blocks/align-content-block-009.html.ini index 697afae1fc8..9d26d113604 100644 --- a/tests/wpt/meta/css/css-align/blocks/align-content-block-009.html.ini +++ b/tests/wpt/meta/css/css-align/blocks/align-content-block-009.html.ini @@ -1,27 +1,4 @@ [align-content-block-009.html] - [.test 1: start] - expected: FAIL - - [.test 2: center] - expected: FAIL - - [.test 3: end] - expected: FAIL - - [.test 4: baseline] - expected: FAIL - - [.test 5: last baseline] - expected: FAIL - - [.test 6: flex-start] - expected: FAIL - - [.test 7: flex-end] - expected: FAIL - - [.test 8: unsafe start] - expected: FAIL [.test 9: unsafe center] expected: FAIL @@ -29,20 +6,3 @@ [.test 10: unsafe end] expected: FAIL - [.test 11: safe start] - expected: FAIL - - [.test 12: safe center] - expected: FAIL - - [.test 13: safe end] - expected: FAIL - - [.test 14: space-evenly] - expected: FAIL - - [.test 15: space-between] - expected: FAIL - - [.test 16: space-around] - expected: FAIL diff --git a/tests/wpt/meta/css/css-align/blocks/align-content-block-010.html.ini b/tests/wpt/meta/css/css-align/blocks/align-content-block-010.html.ini index f6602527850..d44b676e20e 100644 --- a/tests/wpt/meta/css/css-align/blocks/align-content-block-010.html.ini +++ b/tests/wpt/meta/css/css-align/blocks/align-content-block-010.html.ini @@ -1,37 +1,22 @@ [align-content-block-010.html] - [.test 1: start] - expected: FAIL - [.test 2: center] expected: FAIL [.test 3: end] expected: FAIL - [.test 4: baseline] - expected: FAIL - [.test 5: last baseline] expected: FAIL - [.test 6: flex-start] - expected: FAIL - [.test 7: flex-end] expected: FAIL - [.test 8: unsafe start] - expected: FAIL - [.test 9: unsafe center] expected: FAIL [.test 10: unsafe end] expected: FAIL - [.test 11: safe start] - expected: FAIL - [.test 12: safe center] expected: FAIL @@ -41,8 +26,5 @@ [.test 14: space-evenly] expected: FAIL - [.test 15: space-between] - expected: FAIL - [.test 16: space-around] expected: FAIL diff --git a/tests/wpt/meta/css/css-align/blocks/align-content-block-011.html.ini b/tests/wpt/meta/css/css-align/blocks/align-content-block-011.html.ini index 086df1d9746..49c64ebb4d9 100644 --- a/tests/wpt/meta/css/css-align/blocks/align-content-block-011.html.ini +++ b/tests/wpt/meta/css/css-align/blocks/align-content-block-011.html.ini @@ -1,48 +1,7 @@ [align-content-block-011.html] - [.test 1: start] - expected: FAIL - - [.test 2: center] - expected: FAIL - - [.test 3: end] - expected: FAIL - - [.test 4: baseline] - expected: FAIL - - [.test 5: last baseline] - expected: FAIL - - [.test 6: flex-start] - expected: FAIL - - [.test 7: flex-end] - expected: FAIL - - [.test 8: unsafe start] - expected: FAIL - [.test 9: unsafe center] expected: FAIL [.test 10: unsafe end] expected: FAIL - - [.test 11: safe start] - expected: FAIL - - [.test 12: safe center] - expected: FAIL - - [.test 13: safe end] - expected: FAIL - - [.test 14: space-evenly] - expected: FAIL - - [.test 15: space-between] - expected: FAIL - - [.test 16: space-around] - expected: FAIL + \ No newline at end of file diff --git a/tests/wpt/tests/css/css-align/blocks/align-content-block-006.html b/tests/wpt/tests/css/css-align/blocks/align-content-block-006.html index acdb6454bd4..fa45f74a7ed 100644 --- a/tests/wpt/tests/css/css-align/blocks/align-content-block-006.html +++ b/tests/wpt/tests/css/css-align/blocks/align-content-block-006.html @@ -21,7 +21,7 @@ function doTest() { document.body.offsetHeight; // trigger layout - document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet + document.getElementById('initial').disabled = true; checkLayout('.test'); } window.onload = () => { diff --git a/tests/wpt/tests/css/css-align/blocks/align-content-block-007.html b/tests/wpt/tests/css/css-align/blocks/align-content-block-007.html index c60f640ab06..7c8a7166866 100644 --- a/tests/wpt/tests/css/css-align/blocks/align-content-block-007.html +++ b/tests/wpt/tests/css/css-align/blocks/align-content-block-007.html @@ -21,7 +21,7 @@ function doTest() { document.body.offsetHeight; // trigger layout - document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet + document.getElementById('initial').disabled = true; checkLayout('.test'); } window.onload = () => { diff --git a/tests/wpt/tests/css/css-align/blocks/align-content-block-008.html b/tests/wpt/tests/css/css-align/blocks/align-content-block-008.html index 7d088d6ae63..2325933fb34 100644 --- a/tests/wpt/tests/css/css-align/blocks/align-content-block-008.html +++ b/tests/wpt/tests/css/css-align/blocks/align-content-block-008.html @@ -38,7 +38,7 @@ function doTest() { document.body.offsetHeight; // trigger layout - document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet + document.getElementById('initial').disabled = true; checkLayout('.test'); } window.onload = () => { diff --git a/tests/wpt/tests/css/css-align/blocks/align-content-block-009.html b/tests/wpt/tests/css/css-align/blocks/align-content-block-009.html index df45aa588f9..312c3ff3a9f 100644 --- a/tests/wpt/tests/css/css-align/blocks/align-content-block-009.html +++ b/tests/wpt/tests/css/css-align/blocks/align-content-block-009.html @@ -38,7 +38,7 @@ function doTest() { document.body.offsetHeight; // trigger layout - document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet + document.getElementById('initial').disabled = true; checkLayout('.test'); } window.onload = () => { diff --git a/tests/wpt/tests/css/css-align/blocks/align-content-block-010.html b/tests/wpt/tests/css/css-align/blocks/align-content-block-010.html index f3ec7a4e929..d0808f0206e 100644 --- a/tests/wpt/tests/css/css-align/blocks/align-content-block-010.html +++ b/tests/wpt/tests/css/css-align/blocks/align-content-block-010.html @@ -21,7 +21,7 @@ function doTest() { document.body.offsetHeight; // trigger layout - document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet + document.getElementById('initial').disabled = true; checkLayout('.test'); } window.onload = () => { diff --git a/tests/wpt/tests/css/css-align/blocks/align-content-block-011.html b/tests/wpt/tests/css/css-align/blocks/align-content-block-011.html index 9210f5a83a7..ff5e24ad5f0 100644 --- a/tests/wpt/tests/css/css-align/blocks/align-content-block-011.html +++ b/tests/wpt/tests/css/css-align/blocks/align-content-block-011.html @@ -21,7 +21,7 @@ function doTest() { document.body.offsetHeight; // trigger layout - document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet + document.getElementById('initial').disabled = true; checkLayout('.test'); } window.onload = () => {