commit 37fc4ac1d9204fe0fb68340f6542317887e67dd9 parent a31c96c776dd6a0f4dab4310218a28ea942c4cf5 Author: Kevin Ellis <kevers@google.com> Date: Fri, 19 Dec 2025 09:18:36 +0000 Bug 2006732 [wpt PR 56827] - [scoped-vt] Account for ink-overflow when rendering snapshot., a=testonly Automatic update from web-platform-tests [scoped-vt] Account for ink-overflow when rendering snapshot. Bug: 460472405 Change-Id: I4752902f973a600b00f8fad8854509216649b49f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7266186 Reviewed-by: Steve Kobes <skobes@chromium.org> Commit-Queue: Kevin Ellis <kevers@chromium.org> Cr-Commit-Position: refs/heads/main@{#1560132} -- wpt-commits: 8f9ce4d8106d729de7d45376e1e5094279cb4276 wpt-pr: 56827 Diffstat:
21 files changed, 842 insertions(+), 98 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/grid-placement/grid-lanes-grid-placement-named-lines-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/grid-placement/grid-lanes-grid-placement-named-lines-002-ref.html @@ -3,49 +3,49 @@ Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> -<html><head> - <meta charset="utf-8"> - <title>Reference: Definite column placement in a grid-lanes grid (double edge)</title> - <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> - <style> -body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; } +<html> +<head> +<meta charset="utf-8"> +<title>Reference: Definite column placement in a grid-lanes grid (double edge)</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> + body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; } -.grid { - display: grid; - grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px; - position: relative; - border: 1px solid; - grid-auto-flow: dense; - column-gap: 1px; -} + .grid { + display: grid; + grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px; + position: relative; + border: 1px solid; + grid-auto-flow: dense; + column-gap: 1px; + } -x { - background: grey; -} -y { - position: absolute; - border: 1px solid blue; - top:0;height:0;left:0;right:0; - grid-row-end:span 1!important; -} + x { + background: grey; + } - </style> + y { + position: absolute; + border: 1px solid blue; + top:0;height:0;left:0;right:0; + grid-row-end:span 1!important; + } +</style> </head> <body> - <pre>grid-column: / span A-start 2</pre> <div class="grid"> <x style="grid-row:1; grid-column:4"> </x> <x style="grid-row:1; grid-column:7/span 2;">-1</x> <x style="grid-row:2; grid-column:7/span 2;">4</x> -<x style="grid-row:3; grid-column:6/span 3;">-2</x> -<x style="grid-row:4; grid-column:5/span 4;">-3</x> -<x style="grid-row:5; grid-column:4/span 4;">-4</x> -<x style="grid-row:6; grid-column:3/span 2;">-5</x> -<x style="grid-row:6; grid-column:5/span 4;">A -1</x> -<x style="grid-row:2; grid-column:3/span 2;">B -1</x> +<x style="grid-row:4; grid-column:6/span 3;">-2</x> +<x style="grid-row:5; grid-column:5/span 4;">-3</x> +<x style="grid-row:6; grid-column:4/span 4;">-4</x> +<x style="grid-row:7; grid-column:3/span 2;">-5</x> +<x style="grid-row:7; grid-column:5/span 4;">A -1</x> +<x style="grid-row:9; grid-column:3/span 2;">B -1</x> <x style="grid-row:10; grid-column:4/span 4;">A -2</x> -<x style="grid-row:3; grid-column:3/span 2;">A -3</x> +<x style="grid-row:11; grid-column:3/span 2;">A -3</x> <x style="grid-row:12; grid-column:2/span 3;">A -4</x> <x style="grid-row:13; grid-column:1/span 4;">A -5</x> <x style="grid-row:14; grid-column:4/span 4;">A</x> @@ -53,18 +53,18 @@ y { <x style="grid-row:16; grid-column:4/span 4;">A 1</x> <x style="grid-row:17; grid-column:5/span 4;">A 2</x> <x style="grid-row:18; grid-column:8/span 2;">A 3</x> -<x style="grid-row:1; grid-column:9/span 2;">A 4</x> -<x style="grid-row:2; grid-column:10/span 2;">A 5</x> +<x style="grid-row:19; grid-column:9/span 2;">A 4</x> +<x style="grid-row:20; grid-column:10/span 2;">A 5</x> <y style="grid-row:1; grid-column:7/span 2;"></y> <y style="grid-row:2; grid-column:7/span 2;"></y> -<y style="grid-row:3; grid-column:6/span 3;"></y> -<y style="grid-row:4; grid-column:5/span 4;"></y> -<y style="grid-row:5; grid-column:4/span 4;"></y> -<y style="grid-row:6; grid-column:3/span 2;"></y> -<y style="grid-row:6; grid-column:5/span 4;"></y> -<y style="grid-row:2; grid-column:3/span 2;"></y> +<y style="grid-row:4; grid-column:6/span 3;"></y> +<y style="grid-row:5; grid-column:5/span 4;"></y> +<y style="grid-row:6; grid-column:4/span 4;"></y> +<y style="grid-row:7; grid-column:3/span 2;"></y> +<y style="grid-row:7; grid-column:5/span 4;"></y> +<y style="grid-row:9; grid-column:3/span 2;"></y> <y style="grid-row:10; grid-column:4/span 4;"></y> -<y style="grid-row:3; grid-column:3/span 2;"></y> +<y style="grid-row:11; grid-column:3/span 2;"></y> <y style="grid-row:12; grid-column:2/span 3;"></y> <y style="grid-row:13; grid-column:1/span 4;"></y> <y style="grid-row:14; grid-column:4/span 4;"></y> @@ -72,9 +72,8 @@ y { <y style="grid-row:16; grid-column:4/span 4;"></y> <y style="grid-row:17; grid-column:5/span 4;"></y> <y style="grid-row:18; grid-column:8/span 2;"></y> -<y style="grid-row:1; grid-column:9/span 2;"></y> -<y style="grid-row:2; grid-column:10/span 2;"></y> +<y style="grid-row:19; grid-column:9/span 2;"></y> +<y style="grid-row:20; grid-column:10/span 2;"></y> </div> - </body> </html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/grid-placement/grid-lanes-grid-placement-named-lines-002.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/grid-placement/grid-lanes-grid-placement-named-lines-002.html @@ -3,40 +3,40 @@ Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> -<html><head> - <meta charset="utf-8"> - <title>CSS Grid Test: Definite column placement in a grid-lanes grid (double edge)</title> - <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> - <link rel="help" href="https://drafts.csswg.org/css-grid-3/#grid-template-masonry"> - <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int"> - <link rel="match" href="grid-lanes-grid-placement-named-lines-002-ref.html"> - <style> -body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; } +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Test: Definite column placement in a grid-lanes grid (double edge)</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3/#grid-template-masonry"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int"> +<link rel="match" href="grid-lanes-grid-placement-named-lines-002-ref.html"> +<style> + body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; } -.grid { - display: grid-lanes; - position: relative; - border: 1px solid; - grid-template-columns: [A-start] 60px 60px 60px; - grid-template-areas: "B A"; - grid-auto-columns: 40px; - grid-auto-flow: dense; - gap: 0 1px; -} + .grid { + display: grid-lanes; + position: relative; + border: 1px solid; + grid-template-columns: [A-start] 60px 60px 60px; + grid-template-areas: "B A"; + grid-auto-columns: 40px; + gap: 0 1px; + } -x { - background: grey; -} -y { - position: absolute; - border: 1px solid blue; - bottom:0;height:0;left:0;right:0; -} + x { + background: grey; + } - </style> + y { + position: absolute; + border: 1px solid blue; + bottom:0;height:0;left:0;right:0; + grid-row-end:span 1!important; + } +</style> </head> <body> - <pre>grid-column: / span A-start 2</pre> <div class="grid"> <x style="grid-column:1"> </x> @@ -66,19 +66,18 @@ y { <y style="grid-column:-4/span A-start 2; top:4em"></y> <y style="grid-column:-5/span A-start 2; top:5em"></y> <y style="grid-column:A-start -1/span A-start 2; top:5em"></y> -<y style="grid-column:B -1/span A-start 2; top:1em"></y> -<y style="grid-column:A-start -2/span A-start 2; top:6em"></y> -<y style="grid-column:A-start -3/span A-start 2; top:2em"></y> -<y style="grid-column:A-start -4/span A-start 2; top:7em"></y> -<y style="grid-column:A-start -5/span A-start 2; top:8em"></y> -<y style="grid-column:A-start/span A-start 2; top:9em"></y> -<y style="grid-column:B/span B; top:10em"></y> -<y style="grid-column:A-start 1/span A-start 2; top:11em"></y> -<y style="grid-column:A-start 2/span A-start 2; top:12em"></y> -<y style="grid-column:A-start 3/span A-start 2; top:13em"></y> -<y style="grid-column:A-start 4/span A-start 2; top:0em"></y> -<y style="grid-column:A-start 5/span A-start 2; top:1em"></y> +<y style="grid-column:B -1/span A-start 2; top:6em"></y> +<y style="grid-column:A-start -2/span A-start 2; top:7em"></y> +<y style="grid-column:A-start -3/span A-start 2; top:8em"></y> +<y style="grid-column:A-start -4/span A-start 2; top:9em"></y> +<y style="grid-column:A-start -5/span A-start 2; top:10em"></y> +<y style="grid-column:A-start/span A-start 2; top:11em"></y> +<y style="grid-column:B/span B; top:12em"></y> +<y style="grid-column:A-start 1/span A-start 2; top:13em"></y> +<y style="grid-column:A-start 2/span A-start 2; top:14em"></y> +<y style="grid-column:A-start 3/span A-start 2; top:15em"></y> +<y style="grid-column:A-start 4/span A-start 2; top:16em"></y> +<y style="grid-column:A-start 5/span A-start 2; top:17em"></y> </div> - </body> </html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/grid-placement/grid-lanes-grid-placement-named-lines-dense-packing-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/grid-placement/grid-lanes-grid-placement-named-lines-dense-packing-001-ref.html @@ -0,0 +1,79 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<meta charset="utf-8"> +<title>Reference: Definite column placement in a grid-lanes grid (double edge) with dense-packing enabled</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px; + position: relative; + border: 1px solid; + grid-auto-flow: dense; + column-gap: 1px; +} + +x { + background: grey; +} +y { + position: absolute; + border: 1px solid blue; + top:0;height:0;left:0;right:0; + grid-row-end:span 1!important; +} +</style> +</head> +<body> +<pre>grid-column: / span A-start 2</pre> +<div class="grid"> +<x style="grid-row:1; grid-column:4"> </x> +<x style="grid-row:1; grid-column:7/span 2;">-1</x> +<x style="grid-row:2; grid-column:7/span 2;">4</x> +<x style="grid-row:3; grid-column:6/span 3;">-2</x> +<x style="grid-row:4; grid-column:5/span 4;">-3</x> +<x style="grid-row:5; grid-column:4/span 4;">-4</x> +<x style="grid-row:2; grid-column:3/span 2;">-5</x> +<x style="grid-row:6; grid-column:5/span 4;">A -1</x> +<x style="grid-row:3; grid-column:3/span 2;">B -1</x> +<x style="grid-row:7; grid-column:4/span 4;">A -2</x> +<x style="grid-row:4; grid-column:3/span 2;">A -3</x> +<x style="grid-row:6; grid-column:2/span 3;">A -4</x> +<x style="grid-row:8; grid-column:1/span 4;">A -5</x> +<x style="grid-row:9; grid-column:4/span 4;">A</x> +<x style="grid-row:10; grid-column:4/span 4;">B</x> +<x style="grid-row:11; grid-column:4/span 4;">A 1</x> +<x style="grid-row:8; grid-column:5/span 4;">A 2</x> +<x style="grid-row:5; grid-column:8/span 2;">A 3</x> +<x style="grid-row:1; grid-column:9/span 2;">A 4</x> +<x style="grid-row:2; grid-column:10/span 2;">A 5</x> +<y style="grid-row:1; grid-column:7/span 2;"></y> +<y style="grid-row:2; grid-column:7/span 2;"></y> +<y style="grid-row:3; grid-column:6/span 3;"></y> +<y style="grid-row:4; grid-column:5/span 4;"></y> +<y style="grid-row:5; grid-column:4/span 4;"></y> +<y style="grid-row:2; grid-column:3/span 2;"></y> +<y style="grid-row:6; grid-column:5/span 4;"></y> +<y style="grid-row:3; grid-column:3/span 2;"></y> +<y style="grid-row:7; grid-column:4/span 4;"></y> +<y style="grid-row:4; grid-column:3/span 2;"></y> +<y style="grid-row:6; grid-column:2/span 3;"></y> +<y style="grid-row:8; grid-column:1/span 4;"></y> +<y style="grid-row:9; grid-column:4/span 4;"></y> +<y style="grid-row:10; grid-column:4/span 4;"></y> +<y style="grid-row:11; grid-column:4/span 4;"></y> +<y style="grid-row:8; grid-column:5/span 4;"></y> +<y style="grid-row:5; grid-column:8/span 2;"></y> +<y style="grid-row:1; grid-column:9/span 2;"></y> +<y style="grid-row:2; grid-column:10/span 2;"></y> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/grid-placement/grid-lanes-grid-placement-named-lines-dense-packing-001.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/grid-placement/grid-lanes-grid-placement-named-lines-dense-packing-001.html @@ -0,0 +1,91 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Test: Definite column placement in a grid-lanes grid (double edge) with dense-packing enabled</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3/#grid-template-masonry"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int"> +<link rel="match" href="grid-lanes-grid-placement-named-lines-dense-packing-001-ref.html"> +<style> +body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid-lanes; + position: relative; + border: 1px solid; + grid-template-columns: [A-start] 60px 60px 60px; + /* This creates implicit B-start and B-end lines, and A-start and E-end lines. */ + grid-template-areas: "B A"; + grid-auto-flow: dense; + grid-auto-columns: 40px; + gap: 0 1px; +} + +x { + background: grey; +} + +y { + position: absolute; + border: 1px solid blue; + bottom:0;height:0;left:0;right:0; +} +</style> +</head> +<body> +<pre>grid-column: / span A-start 2</pre> +<div class="grid"> +<x style="grid-column:1"> </x> +<!-- This creates 1 extra grid-lines at the end of the container named A-start, which creates 2 implicit tracks. --> +<x style="grid-column:-1/span A-start 2">-1</x> +<x style="grid-column:4/span A-start 2">4</x> +<x style="grid-column:-2/span A-start 2">-2</x> +<x style="grid-column:-3/span A-start 2">-3</x> +<x style="grid-column:-4/span A-start 2">-4</x> +<!-- This creates an implicit track at the beginning of the container, and will span until it hits 2 lines named A-start. --> +<x style="grid-column:-5/span A-start 2">-5</x> +<!-- "A-start -1" implies we are looking for the first line to the left of -1 named A-start --> +<x style="grid-column:A-start -1/span A-start 2">A -1</x> +<!-- There are no lines named B, all implicit lines are named B, go left until we find the first implicit line named B, which turns out to be line -5.--> +<x style="grid-column:B -1/span A-start 2">B -1</x> +<x style="grid-column:A-start -2/span A-start 2">A -2</x> +<x style="grid-column:A-start -3/span A-start 2">A -3</x> +<x style="grid-column:A-start -4/span A-start 2">A -4</x> +<x style="grid-column:A-start -5/span A-start 2">A -5</x> +<x style="grid-column:A-start/span A-start 2">A</x> +<!-- Starts at B, spans until the next B, but there is no next B, so all implicit lines are named B, so it ends at the first implicit line. --> +<x style="grid-column:B/span B">B</x> +<x style="grid-column:A-start 1/span A-start 2">A 1</x> +<x style="grid-column:A-start 2/span A-start 2">A 2</x> +<x style="grid-column:A-start 3/span A-start 2">A 3</x> +<x style="grid-column:A-start 4/span A-start 2">A 4</x> +<x style="grid-column:A-start 5/span A-start 2">A 5</x> +<!-- These lines are explicitly placed to mark the top of where the gray boxes should go. --> +<y style="grid-column:-1/span A-start 2; top:0em"></y> +<y style="grid-column:4/span A-start 2; top:1em"></y> +<y style="grid-column:-2/span A-start 2; top:2em"></y> +<y style="grid-column:-3/span A-start 2; top:3em"></y> +<y style="grid-column:-4/span A-start 2; top:4em"></y> +<y style="grid-column:-5/span A-start 2; top:1em"></y> +<y style="grid-column:A-start -1/span A-start 2; top:5em"></y> +<y style="grid-column:B -1/span A-start 2; top:2em"></y> +<y style="grid-column:A-start -2/span A-start 2; top:6em"></y> +<y style="grid-column:A-start -3/span A-start 2; top:3em"></y> +<y style="grid-column:A-start -4/span A-start 2; top:5em"></y> +<y style="grid-column:A-start -5/span A-start 2; top:7em"></y> +<y style="grid-column:A-start/span A-start 2; top:8em"></y> +<y style="grid-column:B/span B; top:9em"></y> +<y style="grid-column:A-start 1/span A-start 2; top:10em"></y> +<y style="grid-column:A-start 2/span A-start 2; top:7em"></y> +<y style="grid-column:A-start 3/span A-start 2; top:4em"></y> +<y style="grid-column:A-start 4/span A-start 2; top:0em"></y> +<y style="grid-column:A-start 5/span A-start 2; top:1em"></y> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-001.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-001.html @@ -9,11 +9,12 @@ item-tolerance: 0; grid-auto-flow: dense; grid-lanes-direction: column-reverse; + grid-template-columns: repeat(4, 50px); } </style> <body> <p>Ensure that dense-packing places multi-spanning item into highest eligible track opening. The yellow item should be placed in track opening.</p> -<div class="grid-lanes" style="grid-template-columns: repeat(4, 50px);"> +<div class="grid-lanes"> <div style="background: lightskyblue; height: 70px;" > 1 </div> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-006-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-006-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(4, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that open tracks are used when dense-packing a multi-span item.</p> + <div class="grid"> + <div style="background: lightskyblue; height: 80px; grid-column: 4;" > + 1 + </div> + <div style="background: lightblue; height: 40px; grid-column: 1;" > + 2 + </div> + <div style="background: darkblue; height: 20px; grid-column: 1 / span 2; transform: translateY(-40px);"> + 3 + </div> + <div style="grid-column: span 2;"> + <div style="background: yellow; height: 15px;" > + 4 + </div> + <div style="background: yellow; height: 15px;" > + 5 + </div> + </div> + <div style="background: skyblue; height: 25px; grid-column: 2 / span 2; transform: translateY(-40px);" > + 6 + </div> + <div style="background: skyblue; height: 40px; grid-column: 1; transform: translateY(-40px);" > + 7 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-006.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-006.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-reverse-dense-packing-multi-span-006-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-template-columns: repeat(4, 50px); + grid-auto-flow: dense; + grid-lanes-direction: column-reverse; +} +</style> +<body> + <p>Ensure that open tracks are used when dense-packing a multi-span item.</p> + <div class="grid-lanes"> + <div style="background: lightskyblue; height: 80px;" > + 1 + </div> + <div style="background: lightblue; height: 40px; grid-column: 1;" > + 2 + </div> + <div style="background: darkblue; height: 20px; grid-column: 1 / span 2;"> + 3 + </div> + <div style="background: yellow; height: 15px; grid-column: span 2;" > + 4 + </div> + <div style="background: yellow; height: 15px; grid-column: span 2;" > + 5 + </div> + <div style="background: skyblue; height: 25px; grid-column: span 2;" > + 6 + </div> + <div style="background: skyblue; height: 40px;" > + 7 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-007-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-007-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(4, 50px); + gap: 10px; + grid-auto-flow: dense; +} +</style> +<body> +<p>Test that we always prioritize the highest position in "open" tracks even if there is a track opening available that is lower.</p> +<div class="grid"> + <div style="background: lavender; height: 60px; grid-column: 3;"> + 1 + </div> + <div style="background: lightpink; grid-column: 2 / span 3; height: 10px;"> + 2 + </div> + <div style="background: lightgreen; height: 15px; grid-row: 1;"> + 3 + </div> + <div style="background: yellow; height: 20px;"> + 5 + </div> + <div style="background: yellow; height: 20px;"> + 4 + </div> + <div style="background: lightblue; height: 15px; transform: translateY(-45px);"> + 6 + </div> + <div style="background: lightcoral; height: 15px; transform: translateY(-65px); grid-column: 2;"> + 7 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-007.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-007.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-007-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-template-columns: repeat(4, 50px); + gap: 10px; + grid-auto-flow: dense; +} +</style> +<body> +<p>Test that we always prioritize the highest position in "open" tracks even if there is a track opening available that is lower.</p> +<div class="grid-lanes"> + <div style="background: lavender; height: 60px; grid-column: 3;"> + 1 + </div> + <div style="background: lightpink; grid-column: 2 / span 3; height: 10px;"> + 2 + </div> + <div style="background: lightgreen; height: 15px;"> + 3 + </div> + <div style="background: yellow; height: 20px; grid-column: 4;"> + 4 + </div> + <div style="background: yellow; height: 20px;"> + 5 + </div> + <div style="background: lightblue; height: 15px;"> + 6 + </div> + <div style="background: lightcoral; height: 15px;"> + 7 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-multi-span-010-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-multi-span-010-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(4, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that open tracks are used when dense-packing a multi-span item.</p> + <div class="grid"> + <div style="background: lightskyblue; height: 80px;" > + 1 + </div> + <div style="background: lightblue; height: 40px; grid-column: 4;" > + 2 + </div> + <div style="background: darkblue; height: 20px; grid-column: 3 / span 2; transform: translateY(-40px);"> + 3 + </div> + <div style="grid-column: span 2;"> + <div style="background: yellow; height: 15px;" > + 4 + </div> + <div style="background: yellow; height: 15px;" > + 5 + </div> + </div> + <div style="background: skyblue; height: 25px; grid-column: 2 / span 2; transform: translateY(-40px);" > + 6 + </div> + <div style="background: skyblue; height: 40px; grid-column: 4; transform: translateY(-40px);" > + 7 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-multi-span-010.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-multi-span-010.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-multi-span-010-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-template-columns: repeat(4, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that open tracks are used when dense-packing a multi-span item.</p> + <div class="grid-lanes"> + <div style="background: lightskyblue; height: 80px;" > + 1 + </div> + <div style="background: lightblue; height: 40px; grid-column: 4;" > + 2 + </div> + <div style="background: darkblue; height: 20px; grid-column: 3 / span 2;"> + 3 + </div> + <div style="background: yellow; height: 15px; grid-column: span 2;" > + 4 + </div> + <div style="background: yellow; height: 15px; grid-column: span 2;" > + 5 + </div> + <div style="background: skyblue; height: 25px; grid-column: span 2;" > + 6 + </div> + <div style="background: skyblue; height: 40px;" > + 7 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-multi-span-011-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-multi-span-011-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(3, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that open tracks are used when dense-packing a multi-span item.</p> + <div class="grid"> + <div style="background: lightskyblue; height: 60px;" > + 1 + </div> + <div style="background: darkblue; height: 20px; grid-column: 1 / span 2;"> + 2 + </div> + <div style="background: yellow; height: 20px; grid-column: span 2;"> + 3 + </div> + <div style="background: skyblue; height: 10px; grid-column: span 3; grid-row: 3;"> + 4 + </div> + <div style="background: lightskyblue; height: 70px; grid-column: 3; grid-row: 4;" > + 5 + </div> + <div style="background: darkblue; height: 50px; grid-column: 2 / span 2;"> + 6 + </div> + <div style="background: yellow; height: 50px; grid-column: span 2;"> + 7 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-multi-span-011.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-multi-span-011.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-multi-span-011-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-template-columns: repeat(3, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that open tracks are used when dense-packing a multi-span item.</p> + <div class="grid-lanes"> + <div style="background: lightskyblue; height: 60px;" > + 1 + </div> + <div style="background: darkblue; height: 20px; grid-column: 1 / span 2;"> + 2 + </div> + <div style="background: yellow; height: 20px; grid-column: span 2;"> + 3 + </div> + <div style="background: skyblue; height: 10px; grid-column: span 3;"> + 4 + </div> + <div style="background: lightskyblue; height: 70px; grid-column: 3;" > + 5 + </div> + <div style="background: darkblue; height: 50px; grid-column: 2 / span 2;"> + 6 + </div> + <div style="background: yellow; height: 50px; grid-column: span 2;"> + 7 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-multi-span-012-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-multi-span-012-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(3, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>When dense-packing, ensure that open tracks are split correctly.</p> + <div class="grid"> + <div style="background: lightskyblue; height: 30px; grid-column: 1;" > + 1 + </div> + <div style="grid-column: 1 / span 2;"> + <div style="background: blue; height: 15px; grid-column: 1 / span 2;"> + 2 + </div> + <div style="background: lightskyblue; height: 30px; grid-column: 1 / span 1;" > + 3 + </div> + </div> + <div style="grid-column: span 2;"> + <div style="background: yellow; height: 15px;"> + 5 + </div> + <div style="background: yellow; height: 15px;"> + 6 + </div> + </div> + <div style="background: lightskyblue; height: 90px; grid-column: 3;" > + 7 + </div> + <div style="grid-column: 1; transform: translateY(-45px);"> + <div style="background: blue; height: 15px; width: 100px;"> + 4 + </div> + <div style="background: yellow; height: 15px; width: 50px; grid-column: span 2;"> + 9 + </div> + <div style="background: yellow; height: 10px;"> + 11 + </div> + </div> + <div style="background: blue; height: 10px; grid-column: 2 / span 2; transform: translateY(-40px);"> + 8 + </div> + <div style="background: yellow; height: 30px; width: 100px; grid-column: 2; transform: translateY(-125px);"> + 10 + </div> + <div style="background: yellow; height: 15px; grid-column: 2; grid-row: 3; transform: translateY(-15px);"> + 12 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-multi-span-012.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/dense-packing/column-dense-packing-multi-span-012.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-multi-span-012-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-template-columns: repeat(3, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>When dense-packing, ensure that open tracks are split correctly.</p> + <div class="grid-lanes"> + <div style="background: lightskyblue; height: 30px; grid-column: 1;" > + 1 + </div> + <div style="background: blue; height: 15px; grid-column: 1 / span 2;"> + 2 + </div> + <div style="background: lightskyblue; height: 30px; grid-column: 1;" > + 3 + </div> + <div style="background: blue; height: 15px; grid-column: 1 / span 2;"> + 4 + </div> + <div style="background: yellow; height: 15px; grid-column: span 2;"> + 5 + </div> + <div style="background: yellow; height: 15px; grid-column: span 2;"> + 6 + </div> + <div style="background: lightskyblue; height: 90px; grid-column: 3;" > + 7 + </div> + <div style="background: blue; height: 10px; grid-column: 2 / span 2;"> + 8 + </div> + <!-- Item that visually takes up 1 track, but span 2 tracks. --> + <div style="background: yellow; height: 15px; width: 50px; grid-column: span 2;"> + 9 + </div> + <!-- Item that visually takes up 2 tracks, but only spans 1 track. --> + <div style="background: yellow; height: 30px; width: 100px;"> + 10 + </div> + <div style="background: yellow; height: 10px;"> + 11 + </div> + <div style="background: yellow; height: 15px;"> + 12 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-002-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: repeat(4, 50px); + grid-template-columns: repeat(2, min-content); + gap: 10px; + grid-auto-flow: dense; +} +</style> +<body> +<p>Test that we always prioritize the highest position in "open" tracks even if there is a track opening available that is lower.</p> +<div class="grid"> + <div style="background: lavender; width: 60px; grid-row: 3;"> + 1 + </div> + <div style="background: lightpink; grid-row: 1 / span 3; width: 10px;"> + 2 + </div> + <!-- APC is at line 4 after placing item 2, so item 3 should go into track 4. --> + <div style="background: lightgreen; width: 15px; grid-row: 4;"> + 3 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-002.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-reverse-dense-packing-002-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-template-rows: repeat(4, 50px); + gap: 10px; + grid-auto-flow: dense; + grid-lanes-direction: row-reverse; +} +</style> +<body> +<p>Test that we always prioritize the highest position in "open" tracks even if there is a track opening available that is lower.</p> +<div class="grid-lanes"> + <div style="background: lavender; width: 60px; grid-row: 3;"> + 1 + </div> + <div style="background: lightpink; grid-row: 1 / span 3; width: 10px;"> + 2 + </div> + <!-- The auto-placement cursor is at line 4 after placing item 2, so item 3 should go into track 4. --> + <div style="background: lightgreen; width: 15px;"> + 3 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-001-ref.html @@ -4,8 +4,8 @@ .grid { display: grid; grid-auto-flow: dense; - grid-auto-columns: min-content; grid-template-rows: repeat(4, 50px); + grid-template-columns: repeat(3, min-content); } </style> <body> @@ -14,18 +14,27 @@ <div style="background: lightskyblue; width: 70px; grid-row: 4;" > 1 </div> - <div style="background: lightblue; width: 20px; grid-row: 1;" > + <div style="background: lightblue; width: 15px; grid-row: 1;" > 2 </div> - <div style="background: darkblue; width: 20px; grid-row: 1 / span 2; transform: translateX(-50px);"> - 3 - </div> - <div style="background: lightsteelblue; width: 20px; grid-row: 1 / span 4; transform: translateX(-20px);" > + <div style="background: yellow; width: 10px; grid-row: 2 / span 2;" > 4 </div> - <div style="background: yellow; width: 10px; grid-row: 2 / span 2;" > + <div style="background: darkblue; width: 20px; grid-row: 1 / span 2; transform: translateX(-55px);"> + 3 + </div> + <div style="background: lightblue; width: 70px; grid-row: 3; transform: translateX(-60px);" > 5 </div> + <div style="background: darkblue; width: 10px; grid-row: 2 / span 3; grid-column: 3; transform: translateX(-60px);"> + 6 + </div> + <div style="background: yellow; width: 10px; grid-row: 1 / span 2; grid-column: 3; transform: translateX(-105px);" > + 7 + </div> + <div style="background: yellow; width: 10px; grid-row: 2; transform: translateX(-105px);" > + 8 + </div> </div> </body> </html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-001.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-001.html @@ -15,21 +15,31 @@ <body> <p>Ensure that dense-packing places multi-spanning item into highest eligible track opening. The yellow item should be placed in track opening.</p> <div class="grid-lanes"> - <div style="background: lightskyblue; width: 70px;"> + <div style="background: lightskyblue; width: 70px;" > 1 </div> - <div style="background: lightblue; width: 20px; grid-row: 1;"> + <div style="background: lightblue; width: 15px; grid-row: 1;" > 2 </div> <div style="background: darkblue; width: 20px; grid-row: 1 / span 2;"> 3 </div> - <div style="background: lightsteelblue; width: 20px; grid-row: span 4;"> + <div style="background: yellow; width: 10px; grid-row: span 2;" > 4 </div> - <div style="background: yellow; width: 10px; grid-row: span 2;"> + <div style="background: lightblue; width: 70px;" > 5 </div> + <div style="background: darkblue; width: 10px; grid-row: span 3;"> + 6 + </div> + <div style="background: yellow; width: 10px; grid-row: span 2;" > + 7 + </div> + <!-- This item should be placed in Track 2's second track opening, since that is "start-most" location, as opposed to its auto-placed location in Track 1. --> + <div style="background: yellow; width: 10px;" > + 8 + </div> </div> </body> </html> diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/ink-overflow-on-target-ref.html b/testing/web-platform/tests/css/css-view-transitions/scoped/ink-overflow-on-target-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> + <style> + body { margin: 20px; } + #target { + width: 200px; + height: 100px; + border: 20px solid #acf; + outline: 10px solid #4ca; + padding: 20px; + font: 18pt monospace; + contain: layout; + } + </style> +</head> +<body> + <div id=target>Hello</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/ink-overflow-on-target.html b/testing/web-platform/tests/css/css-view-transitions/scoped/ink-overflow-on-target.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> +<link rel="match" href="ink-overflow-on-target-ref.html"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> + <script src="/common/reftest-wait.js"></script> + <style> + body { margin: 20px; } + #target { + width: 200px; + height: 100px; + border: 20px solid #acf; + outline: 10px solid #4ca; + padding: 20px; + font: 18pt monospace; + contain: layout; + } + ::view-transition-group(*) { + animation-duration: 2s; + } + </style> +</head> +<body> + <div id=target>Hello</div> +</body> + +<script> + function createTriggeredPromise() { + let trigger; + const promise = new Promise(resolve => { + trigger = resolve; + }); + promise.notify = trigger; + return promise; + } + + window.onload = async () => { + const callback_promise = createTriggeredPromise(); + target.startViewTransition(async () => { + target.innerText = "World"; + callback_promise.notify(); + await new Promise(resolve => {}); + }); + await callback_promise; + takeScreenshot(); + }; +</script> +</html>