commit 9e33aea35fd0101f7674dc31f2f94931660290bf parent 4ca6f72a3e3deece2bf85df61a69dc45985b29af Author: Yanling Wang <yanlingwang@microsoft.com> Date: Thu, 11 Dec 2025 09:26:15 +0000 Bug 2004093 [wpt PR 56493] - [Masonry] Apply container baselines in the stacking axis, a=testonly Automatic update from web-platform-tests [Masonry] Apply container baselines in the stacking axis This CL adds support for container baselines in the stacking axis, following the same behavior as multi-column layout. The first baseline is determined by the highest baseline among the first items with usable baselines in each track. The last baseline is determined by the lowest baseline among the last items with usable baselines in each track. Implementation notes: - Introduces a shared BaselineAccumulator interface with different implementations for grid-lanes (StackingBaselineAccumulator) and grid (GridBaselineAccumulator) layouts. Also, updates a few reference files to reflect the container baselines change in the stacking axis. See CSSWG resolution: https://github.com/w3c/csswg-drafts/issues/9530 Bug: 439814490, 343257585 Change-Id: Ie1c64d933a2175d4f2b7c6181032b64159096bb4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7149039 Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Commit-Queue: Yanling Wang <yanlingwang@microsoft.com> Reviewed-by: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1555574} -- wpt-commits: cd72810388381ae48214ba842739cd3a53d884c7 wpt-pr: 56493 Diffstat:
42 files changed, 3888 insertions(+), 87 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/alignment/grid-lanes-align-content-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/alignment/grid-lanes-align-content-001-ref.html @@ -14,23 +14,33 @@ html,body { } grid { - display: inline-grid; - gap: 1px 2px; - grid-template-columns: repeat(4,20px); - grid-template-rows: 1em auto; + display: inline-block; color: #444; border: 1px solid; padding: 2px; height: 100px; - align-items: start; + width: 86px; + position: relative; } -item { +.multicolumn-content { + column-count: 4; + column-gap: 2px; + column-width: 20px; + height: max-content; +} + +.column-item { background-color: #444; color: #fff; + width: 20px; + height: 15px; + break-inside: avoid; + margin-bottom: 1px; + line-height: 1em; } -.tall { padding-top:30px; grid-row:span 2; } +.tall { padding-top:30px;} .safe { height: 10px; @@ -41,118 +51,144 @@ item { <body> <grid style="align-content:start"> - <item style="grid-column:1/2" class="tall">1</item> - <item style="grid-column:2/3">2</item> - <item style="grid-column:3/4">3</item> - <item style="grid-column:4/5">4</item> - <item style="grid-column:2/3">5</item> - <item style="grid-column:3/4">6</item> + <div class="multicolumn-content"> + <div class="column-item tall">1</div> + <div class="column-item">2</div> + <div class="column-item">5</div> + <div class="column-item">3</div> + <div class="column-item">6</div> + <div class="column-item">4</div> + </div> </grid> <grid style="align-content:start"> - <item style="grid-column:1/2">1</item> - <item style="grid-column:2/3" class="tall">2</item> - <item style="grid-column:3/4">3</item> - <item style="grid-column:4/5">4</item> - <item style="grid-column:1/2">5</item> - <item style="grid-column:3/4">6</item> + <div class="multicolumn-content"> + <div class="column-item">1</div> + <div class="column-item">5</div> + <div class="column-item tall">2</div> + <div class="column-item">3</div> + <div class="column-item">6</div> + <div class="column-item">4</div> + </div> </grid> <grid style="align-content:safe start" class="safe"> - <item style="grid-column:1/2" class="tall">1</item> - <item style="grid-column:2/3">2</item> - <item style="grid-column:3/4">3</item> - <item style="grid-column:4/5">4</item> - <item style="grid-column:2/3">5</item> - <item style="grid-column:3/4">6</item> + <div class="multicolumn-content"> + <div class="column-item tall">1</div> + <div class="column-item">2</div> + <div class="column-item">5</div> + <div class="column-item">3</div> + <div class="column-item">6</div> + <div class="column-item">4</div> + </div> </grid> <grid style="align-content:end"> - <item style="grid-column:1/2" class="tall">1</item> - <item style="grid-column:2/3">2</item> - <item style="grid-column:3/4">3</item> - <item style="grid-column:4/5">4</item> - <item style="grid-column:2/3">5</item> - <item style="grid-column:3/4">6</item> + <div class="multicolumn-content"> + <div class="column-item tall">1</div> + <div class="column-item">2</div> + <div class="column-item">5</div> + <div class="column-item">3</div> + <div class="column-item">6</div> + <div class="column-item">4</div> + </div> </grid> <grid style="align-content:end"> - <item style="grid-column:1/2">1</item> - <item style="grid-column:2/3" class="tall">2</item> - <item style="grid-column:3/4">3</item> - <item style="grid-column:4/5">4</item> - <item style="grid-column:1/2">5</item> - <item style="grid-column:3/4">6</item> + <div class="multicolumn-content"> + <div class="column-item">1</div> + <div class="column-item">5</div> + <div class="column-item tall">2</div> + <div class="column-item">3</div> + <div class="column-item">6</div> + <div class="column-item">4</div> + </div> </grid> <grid style="align-content:safe end" class="safe"> - <item style="grid-column:1/2" class="tall">1</item> - <item style="grid-column:2/3">2</item> - <item style="grid-column:3/4">3</item> - <item style="grid-column:4/5">4</item> - <item style="grid-column:2/3">5</item> - <item style="grid-column:3/4">6</item> + <div class="multicolumn-content"> + <div class="column-item tall">1</div> + <div class="column-item">2</div> + <div class="column-item">5</div> + <div class="column-item">3</div> + <div class="column-item">6</div> + <div class="column-item">4</div> + </div> </grid> <grid style="align-content:center"> - <item style="grid-column:1/2" class="tall">1</item> - <item style="grid-column:2/3">2</item> - <item style="grid-column:3/4">3</item> - <item style="grid-column:4/5">4</item> - <item style="grid-column:2/3">5</item> - <item style="grid-column:3/4">6</item> + <div class="multicolumn-content"> + <div class="column-item tall">1</div> + <div class="column-item">2</div> + <div class="column-item">5</div> + <div class="column-item">3</div> + <div class="column-item">6</div> + <div class="column-item">4</div> + </div> </grid> <grid style="align-content:center"> - <item style="grid-column:1/2">1</item> - <item style="grid-column:2/3" class="tall">2</item> - <item style="grid-column:3/4">3</item> - <item style="grid-column:4/5">4</item> - <item style="grid-column:1/2">5</item> - <item style="grid-column:3/4">6</item> + <div class="multicolumn-content"> + <div class="column-item">1</div> + <div class="column-item">5</div> + <div class="column-item tall">2</div> + <div class="column-item">3</div> + <div class="column-item">6</div> + <div class="column-item">4</div> + </div> </grid> <grid style="align-content:safe center" class="safe"> - <item style="grid-column:1/2" class="tall">1</item> - <item style="grid-column:2/3">2</item> - <item style="grid-column:3/4">3</item> - <item style="grid-column:4/5">4</item> - <item style="grid-column:2/3">5</item> - <item style="grid-column:3/4">6</item> + <div class="multicolumn-content"> + <div class="column-item tall">1</div> + <div class="column-item">2</div> + <div class="column-item">5</div> + <div class="column-item">3</div> + <div class="column-item">6</div> + <div class="column-item">4</div> + </div> </grid> <grid style="align-content:stretch"> - <item style="grid-column:1/2" class="tall">1</item> - <item style="grid-column:2/3">2</item> - <item style="grid-column:3/4">3</item> - <item style="grid-column:4/5">4</item> - <item style="grid-column:2/3">5</item> - <item style="grid-column:3/4">6</item> + <div class="multicolumn-content"> + <div class="column-item tall">1</div> + <div class="column-item">2</div> + <div class="column-item">5</div> + <div class="column-item">3</div> + <div class="column-item">6</div> + <div class="column-item">4</div> + </div> </grid> <grid style="align-content:start"> - <item style="grid-column:1/2" class="tall">1</item> - <item style="grid-column:2/3">2</item> - <item style="grid-column:3/4">3</item> - <item style="grid-column:4/5">4</item> - <item style="grid-column:2/3">5</item> - <item style="grid-column:3/4">6</item> + <div class="multicolumn-content"> + <div class="column-item tall">1</div> + <div class="column-item">2</div> + <div class="column-item">5</div> + <div class="column-item">3</div> + <div class="column-item">6</div> + <div class="column-item">4</div> + </div> </grid> <grid style="align-content:center"> - <item style="grid-column:1/2" class="tall">1</item> - <item style="grid-column:2/3">2</item> - <item style="grid-column:3/4">3</item> - <item style="grid-column:4/5">4</item> - <item style="grid-column:2/3">5</item> - <item style="grid-column:3/4">6</item> + <div class="multicolumn-content"> + <div class="column-item tall">1</div> + <div class="column-item">2</div> + <div class="column-item">5</div> + <div class="column-item">3</div> + <div class="column-item">6</div> + <div class="column-item">4</div> + </div> </grid> <grid style="align-content:center"> - <item style="grid-column:1/2" class="tall">1</item> - <item style="grid-column:2/3">2</item> - <item style="grid-column:3/4">3</item> - <item style="grid-column:4/5">4</item> - <item style="grid-column:2/3">5</item> - <item style="grid-column:3/4">6</item> + <div class="multicolumn-content"> + <div class="column-item tall">1</div> + <div class="column-item">2</div> + <div class="column-item">5</div> + <div class="column-item">3</div> + <div class="column-item">6</div> + <div class="column-item">4</div> + </div> </grid> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/alignment/grid-lanes-justify-content-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/alignment/grid-lanes-justify-content-001-ref.html @@ -23,6 +23,7 @@ grid { padding: 2px; width: 100px; align-items: start; + vertical-align: text-top; } item { diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-001a-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-001a-ref.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .container { + display: flex; + gap: 20px; + border: 2px solid blue; + padding: 10px; + font: 16px/1 monospace; + width: 800px; + text-decoration: underline; + } + + .first-baseline { + align-items: first baseline; + } + + .last-baseline { + align-items: last baseline; + } + + .multicolumn { + column-count: 3; + column-width: 100px; + column-gap: 10px; + border: 1px solid red; + background: #f0f0f0; + display: inline-block; + } + + .multicolumn-item { + background: lightblue; + padding: 8px; + border: 1px solid navy; + break-inside: avoid; + margin-bottom: 10px; + } + + .multicolumn-item:last-child { + margin-bottom: 0; + } + + .text-reference { + background: yellow; + padding: 8px; + } + + .bottom { + display: flex; + align-items: end; + } + + .multicolumn-item:nth-child(1) { height: 40px; font-size: 20px} + .multicolumn-item:nth-child(2) { height: 100px; } + .multicolumn-item:nth-child(3) { height: 80px; } + .multicolumn-item:nth-child(4) { height: 70px; } + .multicolumn-item:nth-child(5) { height: 60px; font-size: 22px} + .multicolumn-item:nth-child(6) { height: 50px; } + </style> +</head> +<body> +<div class="container first-baseline"> + <div class="text-reference">Reference text</div> + <div class="multicolumn"> + <div class="multicolumn-item">Item 1</div> + <div class="multicolumn-item">Item 4</div> + <div class="multicolumn-item">Item 2</div> + <div class="multicolumn-item">Item 6</div> + <div class="multicolumn-item">Item 3</div> + <div class="multicolumn-item">Item 5</div> + </div> + <div class="text-reference">Reference text</div> +</div> +<div class="container last-baseline"> + <div class="text-reference">Reference text</div> + <div class="multicolumn"> + <div class="multicolumn-item">Item 1</div> + <div class="multicolumn-item">Item 4</div> + <div class="multicolumn-item">Item 2</div> + <div class="multicolumn-item">Item 6</div> + <div class="multicolumn-item">Item 3</div> + <div class="multicolumn-item">Item 5</div> + </div> + <div class="text-reference">Reference text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-001a.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-001a.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items:baseline/last baseline</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-001a-ref.html"> + <style> + .container { + display: flex; + gap: 20px; + border: 2px solid blue; + padding: 10px; + font: 16px/1 monospace; + width: 800px; + text-decoration: underline; + } + + .first-baseline { + align-items: first baseline; + } + + .last-baseline { + align-items: last baseline; + } + + .grid-lanes { + display: grid-lanes; + grid-template-columns: repeat(3, 100px); + gap: 10px; + border: 1px solid red; + background: #f0f0f0; + } + + .grid-lanes-item { + background: lightblue; + padding: 8px; + border: 1px solid navy; + } + + .text-reference { + background: yellow; + padding: 8px; + } + + .bottom { + display: flex; + align-items: end; + } + + .grid-lanes-item:nth-child(1) { height: 40px; font-size: 20px; } + .grid-lanes-item:nth-child(2) { height: 80px; } + .grid-lanes-item:nth-child(3) { height: 60px; font-size: 22px; } + .grid-lanes-item:nth-child(4) { height: 100px; } + .grid-lanes-item:nth-child(5) { height: 50px; } + .grid-lanes-item:nth-child(6) { height: 70px; } + </style> +</head> +<body> +<div class="container first-baseline"> + <div class="text-reference">Reference text</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">Item 1</div> + <div class="grid-lanes-item">Item 2</div> + <div class="grid-lanes-item">Item 3</div> + <div class="grid-lanes-item">Item 4</div> + <div class="grid-lanes-item">Item 5</div> + <div class="grid-lanes-item">Item 6</div> + </div> + <div class="text-reference">Reference text</div> +</div> +<div class="container last-baseline"> + <div class="text-reference">Reference text</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">Item 1</div> + <div class="grid-lanes-item">Item 2</div> + <div class="grid-lanes-item">Item 3</div> + <div class="grid-lanes-item">Item 4</div> + <div class="grid-lanes-item">Item 5</div> + <div class="grid-lanes-item">Item 6</div> + </div> + <div class="text-reference">Reference text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-001b-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-001b-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .container { + display: flex; + gap: 20px; + border: 2px solid blue; + padding: 10px; + font: 16px/1 monospace; + width: 800px; + text-decoration: underline; + } + + .first-baseline { + align-items: first baseline; + } + + .last-baseline { + align-items: last baseline; + } + + .text-reference { + background: yellow; + padding: 8px; + } + + .bottom { + display: flex; + align-items: end; + } + + .grid { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: auto; + gap: 10px; + border: 1px solid red; + background: #f0f0f0; + } + + .grid-item { + padding: 8px; + border: 1px solid navy; + } + + .grid-item:nth-child(1) { + grid-column: 1 / span 2; + height: 45px; + background: lightcoral; + } + + .grid-item:nth-child(2) { + height: 75px; + background: lightgreen; + } + + .grid-item:nth-child(3) { + grid-column: 1 / span 3; + height: 55px; + background: lightpink; + } + + .grid-item:nth-child(4) { + height: 90px; + background: lightyellow; + } + + .grid-item:nth-child(5) { + grid-column: 2 / span 2; + height: 65px; + background: lightcyan; + } + </style> +</head> +<body> +<div class="container first-baseline"> + <div class="text-reference">Reference text</div> + <div class="grid"> + <div class="grid-item">Item 1</div> + <div class="grid-item bottom">Item 2</div> + <div class="grid-item">Item 3</div> + <div class="grid-item">Item 4</div> + <div class="grid-item">Item 5</div> + </div> + <div class="text-reference">Reference text</div> +</div> +<div class="container last-baseline"> + <div class="text-reference">Reference text</div> + <div class="grid"> + <div class="grid-item">Item 1</div> + <div class="grid-item">Item 2</div> + <div class="grid-item">Item 3</div> + <div class="grid-item">Item 4</div> + <div class="grid-item bottom">Item 5</div> + </div> + <div class="text-reference">Reference text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-001b.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-001b.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items:baseline/last baseline</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-001b-ref.html"> + <style> + .container { + display: flex; + gap: 20px; + border: 2px solid blue; + padding: 10px; + font: 16px/1 monospace; + width: 800px; + text-decoration: underline; + } + + .first-baseline { + align-items: first baseline; + } + + .last-baseline { + align-items: last baseline; + } + + .grid-lanes { + display: grid-lanes; + grid-template-columns: repeat(3, 100px); + gap: 10px; + border: 1px solid red; + background: #f0f0f0; + } + + .grid-lanes-item { + background: lightblue; + padding: 8px; + border: 1px solid navy; + } + + .text-reference { + background: yellow; + padding: 8px; + } + + .bottom { + display: flex; + align-items: end; + } + + .multi-span .grid-lanes-item:nth-child(1) { + grid-column: 1 / span 2; + height: 45px; + background: lightcoral; + } + + .multi-span .grid-lanes-item:nth-child(2) { + height: 75px; + background: lightgreen; + } + + .multi-span .grid-lanes-item:nth-child(3) { + grid-column: 1 / span 3; + height: 55px; + background: lightpink; + } + + .multi-span .grid-lanes-item:nth-child(4) { + height: 90px; + background: lightyellow; + } + + .multi-span .grid-lanes-item:nth-child(5) { + grid-column: 2 / span 2; + height: 65px; + background: lightcyan; + } + </style> +</head> +<body> +<div class="container first-baseline"> + <div class="text-reference">Reference text</div> + <div class="grid-lanes multi-span"> + <div class="grid-lanes-item">Item 1</div> + <div class="grid-lanes-item bottom">Item 2</div> + <div class="grid-lanes-item">Item 3</div> + <div class="grid-lanes-item">Item 4</div> + <div class="grid-lanes-item">Item 5</div> + </div> + <div class="text-reference">Reference text</div> +</div> +<div class="container last-baseline"> + <div class="text-reference">Reference text</div> + <div class="grid-lanes multi-span"> + <div class="grid-lanes-item">Item 1</div> + <div class="grid-lanes-item">Item 2</div> + <div class="grid-lanes-item">Item 3</div> + <div class="grid-lanes-item">Item 4</div> + <div class="grid-lanes-item bottom">Item 5</div> + </div> + <div class="text-reference">Reference text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-002a-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-002a-ref.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .container { + display: flex; + align-items: baseline; + gap: 20px; + border: 2px solid darkblue; + padding: 10px; + font: 16px/1 monospace; + width: 600px; + text-decoration: underline; + } + + .multicolumn { + column-count: 2; + column-width: 100px; + column-gap: 10px; + border: 1px solid red; + background: #f0f0f0; + display: inline-block; + } + + .multicolumn-item { + border: 1px solid navy; + font-size: 14px; + display: flex; + align-items: flex-end; + break-inside: avoid; + margin-bottom: 10px; + } + + .multicolumn-item:last-child { + margin-bottom: 0; + } + + .top { + align-items: flex-start; + } + + .text-reference { + background: yellow; + padding: 8px; + } + + .multicolumn-item:nth-child(1) { + height: 30px; + background: lightcoral; + padding: 4px; + } + + .multicolumn-item:nth-child(2) { + height: 50px; + background: lightblue; + padding: 4px; + } + + .multicolumn-item:nth-child(3) { + height: 80px; + background: lightgreen; + padding: 4px; + } + + .multicolumn-item:nth-child(4) { + height: 90px; + background: lightpink; + padding: 4px; + } + </style> +</head> +<body> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="multicolumn"> + <div class="multicolumn-item">Short</div> + <div class="multicolumn-item">Medium</div> + <div class="multicolumn-item">Tall</div> + <div class="multicolumn-item">Tallest</div> + </div> + <div class="text-reference">Reference Text</div> +</div> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="multicolumn"> + <div class="multicolumn-item"></div> + <div class="multicolumn-item">Medium</div> + <div class="multicolumn-item">Tall</div> + <div class="multicolumn-item">Tallest</div> + </div> + <div class="text-reference">Reference Text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-002a.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-002a.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items:baseline</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-002a-ref.html"> + <style> + .container { + display: flex; + align-items: baseline; + gap: 20px; + border: 2px solid darkblue; + padding: 10px; + font: 16px/1 monospace; + width: 600px; + text-decoration: underline; + } + + .grid-lanes { + display: grid-lanes; + grid-template-columns: repeat(2, 100px); + gap: 10px; + border: 1px solid red; + background: #f0f0f0; + } + + .grid-lanes-item { + border: 1px solid navy; + font-size: 14px; + display: flex; + align-items: flex-end; + } + + .top { + align-items: flex-start; + } + + .text-reference { + background: yellow; + padding: 8px; + } + + .grid-lanes-item:nth-child(1) { + height: 30px; + background: lightcoral; + padding: 4px; + } + + .grid-lanes-item:nth-child(2) { + height: 80px; + background: lightgreen; + padding: 4px; + } + + .grid-lanes-item:nth-child(3) { + height: 50px; + background: lightblue; + padding: 4px; + } + + .grid-lanes-item:nth-child(4) { + height: 90px; + background: lightpink; + padding: 4px; + } + </style> +</head> +<body> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">Short</div> + <div class="grid-lanes-item">Tall</div> + <div class="grid-lanes-item">Medium</div> + <div class="grid-lanes-item">Tallest</div> + </div> + <div class="text-reference">Reference Text</div> +</div> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="grid-lanes"> + <div class="grid-lanes-item"></div> + <div class="grid-lanes-item">Tall</div> + <div class="grid-lanes-item">Medium</div> + <div class="grid-lanes-item">Tallest</div> + </div> + <div class="text-reference">Reference Text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-002b-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-002b-ref.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .container { + display: flex; + align-items: baseline; + gap: 20px; + border: 2px solid darkblue; + padding: 10px; + font: 16px/1 monospace; + width: 600px; + text-decoration: underline; + } + + .multicolumn { + column-count: 2; + column-width: 100px; + column-gap: 10px; + border: 1px solid red; + background: #f0f0f0; + display: inline-block; + } + + .multicolumn-item { + border: 1px solid navy; + font-size: 14px; + display: flex; + align-items: flex-end; + break-inside: avoid; + margin-bottom: 10px; + } + + .multicolumn-item:last-child { + margin-bottom: 0; + } + + .top { + align-items: flex-start; + } + + .text-reference { + background: yellow; + padding: 8px; + } + + .multicolumn-item:nth-child(1) { + height: 30px; + background: lightcoral; + padding: 4px; + } + + .multicolumn-item:nth-child(2) { + height: 50px; + background: lightblue; + padding: 4px; + } + + .multicolumn-item:nth-child(3) { + height: 80px; + background: lightgreen; + padding: 4px; + } + + .multicolumn-item:nth-child(4) { + height: 90px; + background: lightpink; + padding: 4px; + } + </style> +</head> +<body> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="multicolumn"> + <div class="multicolumn-item"></div> + <div class="multicolumn-item top">Medium</div> + <div class="multicolumn-item">Tall</div> + <div class="multicolumn-item">Tallest</div> + </div> + <div class="text-reference">Reference Text</div> +</div> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="multicolumn"> + <div class="multicolumn-item"></div> + <div class="multicolumn-item">Medium</div> + <div class="multicolumn-item"></div> + <div class="multicolumn-item">Tallest</div> + </div> + <div class="text-reference">Reference Text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-002b.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-002b.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items:baseline</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-002b-ref.html"> + <style> + .container { + display: flex; + align-items: baseline; + gap: 20px; + border: 2px solid darkblue; + padding: 10px; + font: 16px/1 monospace; + width: 600px; + text-decoration: underline; + } + + .grid-lanes { + display: grid-lanes; + grid-template-columns: repeat(2, 100px); + gap: 10px; + border: 1px solid red; + background: #f0f0f0; + } + + .grid-lanes-item { + border: 1px solid navy; + font-size: 14px; + display: flex; + align-items: flex-end; + } + + .top { + align-items: flex-start; + } + + .text-reference { + background: yellow; + padding: 8px; + } + + .grid-lanes-item:nth-child(1) { + height: 30px; + background: lightcoral; + padding: 4px; + } + + .grid-lanes-item:nth-child(2) { + height: 80px; + background: lightgreen; + padding: 4px; + } + + .grid-lanes-item:nth-child(3) { + height: 50px; + background: lightblue; + padding: 4px; + } + + .grid-lanes-item:nth-child(4) { + height: 90px; + background: lightpink; + padding: 4px; + } + </style> +</head> +<body> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="grid-lanes"> + <div class="grid-lanes-item"></div> + <div class="grid-lanes-item">Tall</div> + <div class="grid-lanes-item top">Medium</div> + <div class="grid-lanes-item">Tallest</div> + </div> + <div class="text-reference">Reference Text</div> +</div> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="grid-lanes"> + <div class="grid-lanes-item"></div> + <div class="grid-lanes-item"></div> + <div class="grid-lanes-item">Medium</div> + <div class="grid-lanes-item">Tallest</div> + </div> + <div class="text-reference">Reference Text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-003a-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-003a-ref.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .container { + display: flex; + align-items: last baseline; + gap: 20px; + border: 2px solid darkblue; + padding: 10px; + font: 16px/1 monospace; + width: 600px; + text-decoration: underline; + } + + .multicolumn { + column-count: 2; + column-width: 100px; + column-gap: 10px; + border: 1px solid red; + background: #f0f0f0; + display: inline-block; + } + + .multicolumn-item { + border: 1px solid navy; + font-size: 14px; + display: flex; + align-items: flex-start; + break-inside: avoid; + margin-bottom: 10px; + text-decoration: underline; + } + + .multicolumn-item:last-child { + margin-bottom: 0; + } + + .bottom { + align-items: flex-end; + } + + .text-reference { + background: yellow; + padding: 8px; + text-decoration: underline; + } + + .multicolumn-item:nth-child(1) { + height: 30px; + background: lightcoral; + padding: 4px; + } + + .multicolumn-item:nth-child(2) { + height: 50px; + background: lightblue; + padding: 4px; + } + + .multicolumn-item:nth-child(3) { + height: 80px; + background: lightgreen; + padding: 4px; + } + + .multicolumn-item:nth-child(4) { + height: 90px; + background: lightpink; + padding: 4px; + } + </style> +</head> +<body> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="multicolumn"> + <div class="multicolumn-item">Short</div> + <div class="multicolumn-item">Medium</div> + <div class="multicolumn-item">Tall</div> + <div class="multicolumn-item">Tallest</div> + </div> + <div class="text-reference">Reference Text</div> +</div> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="multicolumn"> + <div class="multicolumn-item">Short</div> + <div class="multicolumn-item">Medium</div> + <div class="multicolumn-item">Tall</div> + <div class="multicolumn-item"></div> + </div> + <div class="text-reference">Reference Text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-003a.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-003a.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items:last baseline</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-003a-ref.html"> + <style> + .container { + display: flex; + align-items: last baseline; + gap: 20px; + border: 2px solid darkblue; + padding: 10px; + font: 16px/1 monospace; + width: 600px; + text-decoration: underline; + } + + .grid-lanes { + display: grid-lanes; + grid-template-columns: repeat(2, 100px); + gap: 10px; + border: 1px solid red; + background: #f0f0f0; + } + + .grid-lanes-item { + border: 1px solid navy; + font-size: 14px; + display: flex; + align-items: flex-start; + text-decoration: underline; + } + + .bottom { + align-items: flex-end; + } + + .text-reference { + background: yellow; + padding: 8px; + text-decoration: underline; + } + + .grid-lanes-item:nth-child(1) { + height: 30px; + background: lightcoral; + padding: 4px; + } + + .grid-lanes-item:nth-child(2) { + height: 80px; + background: lightgreen; + padding: 4px; + } + + .grid-lanes-item:nth-child(3) { + height: 50px; + background: lightblue; + padding: 4px; + } + + .grid-lanes-item:nth-child(4) { + height: 90px; + background: lightpink; + padding: 4px; + } + </style> +</head> +<body> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">Short</div> + <div class="grid-lanes-item">Tall</div> + <div class="grid-lanes-item">Medium</div> + <div class="grid-lanes-item">Tallest</div> + </div> + <div class="text-reference">Reference Text</div> +</div> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">Short</div> + <div class="grid-lanes-item">Tall</div> + <div class="grid-lanes-item">Medium</div> + <div class="grid-lanes-item"></div> + </div> + <div class="text-reference">Reference Text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-003b-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-003b-ref.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .container { + display: flex; + align-items: last baseline; + gap: 20px; + border: 2px solid darkblue; + padding: 10px; + font: 16px/1 monospace; + width: 600px; + text-decoration: underline; + } + + .multicolumn { + column-count: 2; + column-width: 100px; + column-gap: 10px; + border: 1px solid red; + background: #f0f0f0; + display: inline-block; + } + + .multicolumn-item { + width: 100px; + border: 1px solid navy; + font-size: 14px; + display: flex; + align-items: flex-start; + break-inside: avoid; + margin-bottom: 10px; + text-decoration: underline; + padding: 4px; + } + + .multicolumn-item:last-child { + margin-bottom: 0; + } + + .bottom { + align-items: flex-end; + } + + .text-reference { + background: yellow; + padding: 8px; + text-decoration: underline; + } + + .multicolumn-item:nth-child(1) { + height: 30px; + background: lightcoral; + } + + .multicolumn-item:nth-child(2) { + height: 50px; + background: lightblue; + } + + .multicolumn-item:nth-child(3) { + height: 80px; + background: lightgreen; + } + + .multicolumn-item:nth-child(4) { + height: 90px; + background: lightpink; + } + </style> +</head> +<body> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="multicolumn"> + <div class="multicolumn-item">Short</div> + <div class="multicolumn-item">Medium</div> + <div class="multicolumn-item bottom">Tall</div> + <div class="multicolumn-item"></div> + </div> + <div class="text-reference">Reference Text</div> +</div> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="multicolumn"> + <div class="multicolumn-item">Short</div> + <div class="multicolumn-item"></div> + <div class="multicolumn-item bottom">Tall</div> + <div class="multicolumn-item"></div> + </div> + <div class="text-reference">Reference Text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-003b.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-003b.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items:last baseline</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-003b-ref.html"> + <style> + .container { + display: flex; + align-items: last baseline; + gap: 20px; + border: 2px solid darkblue; + padding: 10px; + font: 16px/1 monospace; + width: 600px; + text-decoration: underline; + } + + .grid-lanes { + display: grid-lanes; + grid-template-columns: repeat(2, max-content); + gap: 10px; + border: 1px solid red; + background: #f0f0f0; + } + + .grid-lanes-item { + width: 100px; + border: 1px solid navy; + font-size: 14px; + display: flex; + align-items: flex-start; + text-decoration: underline; + padding: 4px; + } + + .bottom { + align-items: flex-end; + } + + .text-reference { + background: yellow; + padding: 8px; + text-decoration: underline; + } + + .grid-lanes-item:nth-child(1) { + height: 30px; + background: lightcoral; + } + + .grid-lanes-item:nth-child(2) { + height: 80px; + background: lightgreen; + } + + .grid-lanes-item:nth-child(3) { + height: 50px; + background: lightblue; + } + + .grid-lanes-item:nth-child(4) { + height: 90px; + background: lightpink; + } + </style> +</head> +<body> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">Short</div> + <div class="grid-lanes-item bottom">Tall</div> + <div class="grid-lanes-item">Medium</div> + <div class="grid-lanes-item"></div> + </div> + <div class="text-reference">Reference Text</div> +</div> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">Short</div> + <div class="grid-lanes-item bottom">Tall</div> + <div class="grid-lanes-item"></div> + <div class="grid-lanes-item"></div> + </div> + <div class="text-reference">Reference Text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-003c-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-003c-ref.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .container { + display: flex; + align-items: last baseline; + gap: 20px; + border: 2px solid darkblue; + padding: 10px; + font: 16px/1 monospace; + width: 600px; + text-decoration: underline; + } + + .multicolumn { + column-count: 2; + column-width: 100px; + column-gap: 10px; + border: 1px solid red; + background: #f0f0f0; + display: inline-block; + } + + .multicolumn-item { + border: 1px solid black; + width: 100px; + font-size: 14px; + display: flex; + align-items: flex-start; + break-inside: avoid; + margin-bottom: 10px; + text-decoration: underline; + padding: 4px; + } + + .multicolumn-item:last-child { + margin-bottom: 0; + } + + .bottom { + align-items: flex-end; + } + + .text-reference { + background: yellow; + padding: 8px; + text-decoration: underline; + } + + .multicolumn-item:nth-child(1) { + height: 30px; + background: lightcoral; + } + + .multicolumn-item:nth-child(2) { + height: 50px; + background: lightblue; + } + + .multicolumn-item:nth-child(3) { + height: 80px; + background: lightgreen; + height: 1px; + font-size: 40px; + } + + .multicolumn-item:nth-child(4) { + height: 15px; + background: transparent; + color: red; + font-size: 10px; + } + </style> +</head> +<body> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="multicolumn"> + <div class="multicolumn-item">Short</div> + <div class="multicolumn-item"></div> + <div class="multicolumn-item">Tall</div> + <div class="multicolumn-item">Tallest</div> + </div> + <div class="text-reference">Reference Text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-003c.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-003c.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items:last baseline</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-003c-ref.html"> + <style> + .container { + display: flex; + align-items: last baseline; + gap: 20px; + border: 2px solid darkblue; + padding: 10px; + font: 16px/1 monospace; + width: 600px; + text-decoration: underline; + } + + .grid-lanes { + display: grid-lanes; + grid-template-columns: repeat(2, max-content); + gap: 10px; + border: 1px solid red; + background: #f0f0f0; + } + + .grid-lanes-item { + width: 100px; + border: 1px solid black; + font-size: 14px; + display: flex; + align-items: flex-start; + text-decoration: underline; + padding: 4px; + } + + .bottom { + align-items: flex-end; + } + + .text-reference { + background: yellow; + padding: 8px; + text-decoration: underline; + } + + .grid-lanes-item:nth-child(1) { + height: 30px; + background: lightcoral; + } + + .grid-lanes-item:nth-child(2) { + height: 80px; + background: lightgreen; + height: 1px; + font-size: 40px; + } + + .grid-lanes-item:nth-child(3) { + height: 15px; + background: transparent; + color: red; + font-size: 10px; + } + + .grid-lanes-item:nth-child(4) { + height: 50px; + background: lightblue; + } + </style> +</head> +<body> +<div class="container"> + <div class="text-reference">Reference Text</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">Short</div> + <div class="grid-lanes-item">Tall</div> + <div class="grid-lanes-item">Tallest</div> + <div class="grid-lanes-item"></div> + </div> + <div class="text-reference">Reference Text</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-004a-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-004a-ref.html @@ -0,0 +1,231 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .test-section { + margin: 10px 0; + border: 1px solid #666; + padding: 8px; + font: 16px/1 monospace; + } + + .side-by-side { + display: flex; + gap: 20px; + align-items: flex-start; + } + + .four-column { + display: flex; + gap: 15px; + align-items: flex-start; + } + + .test-variant { + flex: 1; + border: 1px solid #ccc; + padding: 8px; + background: #fafafa; + } + + .container { + display: flex; + align-items: baseline; + gap: 10px; + border: 1px solid blue; + padding: 5px; + margin: 5px 0; + background: #f9f9f9; + text-decoration: underline; + } + + .multicolumn { + column-count: 2; + column-width: 40px; + column-gap: 0px; + border: 1px solid red; + background: white; + display: inline-block; + } + + .multicolumn-item { + background: lightblue; + padding: 4px; + border: 1px solid navy; + font-size: 12px; + text-align: center; + break-inside: avoid; + } + + .multicolumn-item:last-child { + margin-bottom: 0; + } + + .text-reference { + font-size: 14px; + background: yellow; + padding: 6px; + font-weight: bold; + } + + .multicolumn-item:nth-child(1) { + height: 25px; + background: lightcoral; + font-size: 10px; + display: flex; + align-items: flex-start; + } + + .multicolumn-item:nth-child(3) { + height: 35px; + background: lightgreen; + font-size: 16px; + display: flex; + align-items: center; + } + + .multicolumn-item:nth-child(2) { + height: 30px; + background: lightpink; + font-size: 12px; + display: flex; + align-items: flex-end; + } + + .multicolumn-item:nth-child(4) { + height: 40px; + background: lightyellow; + font-size: 14px; + display: flex; + align-items: flex-start; + } + + .horizontal-tb { writing-mode: horizontal-tb; } + .vertical-rl { writing-mode: vertical-rl; } + .vertical-lr { writing-mode: vertical-lr; } + + .ltr { direction: ltr; } + .rtl { direction: rtl; } + + .vertical-rl .multicolumn, + .vertical-lr .multicolumn { + column-count: 2; + column-width: 50px; + column-gap: 0px; + height: 120px; + } + + .vertical-rl .multicolumn-item, + .vertical-lr .multicolumn-item { + width: 40px; + height: auto; + min-height: 20px; + } + + .vertical-rl .text-reference, + .vertical-lr .text-reference { + writing-mode: inherit; + height: 60px; + width: 25px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + } + </style> +</head> +<body> +<div class="test-section"> + <div class="side-by-side"> + <div class="test-variant"> + <h3>Horizontal-LTR</h3> + <div class="container horizontal-tb ltr"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>horizontal-RTL</h3> + <div class="container horizontal-tb rtl"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + </div> +</div> + +<div class="test-section"> + <div class="four-column"> + <div class="test-variant"> + <h3>Vertical RL - LTR</h3> + <div class="container vertical-rl ltr"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Vertical RL - RTL</h3> + <div class="container vertical-rl rtl"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Vertical LR - LTR</h3> + <div class="container vertical-lr ltr"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Vertical LR - RTL</h3> + <div class="container vertical-lr rtl"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-004a.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-004a.html @@ -0,0 +1,226 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items:baseline with different writing modes</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-004a-ref.html"> + <style> + .test-section { + margin: 10px 0; + border: 1px solid #666; + padding: 8px; + font: 16px/1 monospace; + } + + .side-by-side { + display: flex; + gap: 20px; + align-items: flex-start; + } + + .four-column { + display: flex; + gap: 15px; + align-items: flex-start; + } + + .test-variant { + flex: 1; + border: 1px solid #ccc; + padding: 8px; + background: #fafafa; + } + + .container { + display: flex; + align-items: baseline; + gap: 10px; + border: 1px solid blue; + padding: 5px; + margin: 5px 0; + background: #f9f9f9; + text-decoration: underline; + } + + .grid-lanes { + display: grid-lanes; + grid-template-columns: repeat(2, 40px); + border: 1px solid red; + background: white; + } + + .grid-lanes-item { + background: lightblue; + padding: 4px; + border: 1px solid navy; + font-size: 12px; + text-align: center; + min-height: 20px; + } + + .text-reference { + font-size: 14px; + background: yellow; + padding: 6px; + font-weight: bold; + } + + .grid-lanes-item:nth-child(1) { + height: 25px; + background: lightcoral; + font-size: 10px; + display: flex; + align-items: flex-start; + } + + .grid-lanes-item:nth-child(2) { + height: 35px; + background: lightgreen; + font-size: 16px; + display: flex; + align-items: center; + } + + .grid-lanes-item:nth-child(3) { + height: 30px; + background: lightpink; + font-size: 12px; + display: flex; + align-items: flex-end; + } + + .grid-lanes-item:nth-child(4) { + height: 40px; + background: lightyellow; + font-size: 14px; + display: flex; + align-items: flex-start; + } + + .horizontal-tb { writing-mode: horizontal-tb; } + .vertical-rl { writing-mode: vertical-rl; } + .vertical-lr { writing-mode: vertical-lr; } + + .ltr { direction: ltr; } + .rtl { direction: rtl; } + + .vertical-rl .grid-lanes, + .vertical-lr .grid-lanes { + grid-template-columns: repeat(2, 60px); + height: 120px; + } + + .vertical-rl .grid-lanes-item, + .vertical-lr .grid-lanes-item { + width: 40px; + height: auto; + min-height: 20px; + } + + .vertical-rl .text-reference, + .vertical-lr .text-reference { + writing-mode: inherit; + height: 60px; + width: 25px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + } + </style> +</head> +<body> +<div class="test-section"> + <div class="side-by-side"> + <div class="test-variant"> + <h3>Horizontal-LTR</h3> + <div class="container horizontal-tb ltr"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + <div class="test-variant"> + <h3>horizontal-RTL</h3> + <div class="container horizontal-tb rtl"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + </div> +</div> + +<div class="test-section"> + <div class="four-column"> + <div class="test-variant"> + <h3>Vertical RL - LTR</h3> + <div class="container vertical-rl ltr"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Vertical RL - RTL</h3> + <div class="container vertical-rl rtl"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Vertical LR - LTR</h3> + <div class="container vertical-lr ltr"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Vertical LR - RTL</h3> + <div class="container vertical-lr rtl"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-004b-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-004b-ref.html @@ -0,0 +1,176 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .test-section { + margin: 10px 0; + border: 1px solid #666; + padding: 8px; + font: 16px/1 monospace; + } + + .four-column { + display: flex; + gap: 15px; + align-items: flex-start; + } + + .test-variant { + flex: 1; + border: 1px solid #ccc; + padding: 8px; + background: #fafafa; + } + + .container { + display: flex; + align-items: baseline; + gap: 10px; + border: 1px solid blue; + padding: 5px; + margin: 5px 0; + background: #f9f9f9; + text-decoration: underline; + } + + .multicolumn { + column-count: 2; + column-width: 50px; + column-gap: 0px; + height: 120px; + border: 1px solid red; + background: white; + display: inline-block; + } + + .multicolumn-item { + background: lightblue; + padding: 4px; + border: 1px solid navy; + font-size: 12px; + text-align: center; + break-inside: avoid; + width: 40px; + height: auto; + min-height: 20px; + } + + .multicolumn-item:last-child { + margin-bottom: 0; + } + + .text-reference { + writing-mode: inherit; + height: 60px; + width: 25px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + background: yellow; + padding: 6px; + font-weight: bold; + } + + .multicolumn-item:nth-child(1) { + height: 25px; + background: lightcoral; + font-size: 10px; + display: flex; + align-items: flex-start; + } + + .multicolumn-item:nth-child(3) { + height: 35px; + background: lightgreen; + font-size: 16px; + display: flex; + align-items: center; + } + + .multicolumn-item:nth-child(2) { + height: 30px; + background: lightpink; + font-size: 12px; + display: flex; + align-items: flex-end; + } + + .multicolumn-item:nth-child(4) { + height: 40px; + background: lightyellow; + font-size: 14px; + display: flex; + align-items: flex-start; + } + + .sideways-rl { writing-mode: sideways-rl; } + .sideways-lr { writing-mode: sideways-lr; } + + .ltr { direction: ltr; } + .rtl { direction: rtl; } + </style> +</head> +<body> +<div class="test-section"> + <div class="four-column"> + <div class="test-variant"> + <h3>Sideways RL - LTR</h3> + <div class="container sideways-rl ltr"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Sideways RL - RTL</h3> + <div class="container sideways-rl rtl"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Sideways LR - LTR</h3> + <div class="container sideways-lr ltr"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Sideways LR - RTL</h3> + <div class="container sideways-lr rtl"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-004b.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-004b.html @@ -0,0 +1,173 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items:baseline with different writing modes</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-004b-ref.html"> + <style> + .test-section { + margin: 10px 0; + border: 1px solid #666; + padding: 8px; + font: 16px/1 monospace; + } + + .four-column { + display: flex; + gap: 15px; + align-items: flex-start; + } + + .test-variant { + flex: 1; + border: 1px solid #ccc; + padding: 8px; + background: #fafafa; + } + + .container { + display: flex; + align-items: baseline; + gap: 10px; + border: 1px solid blue; + padding: 5px; + margin: 5px 0; + background: #f9f9f9; + text-decoration: underline; + } + + .grid-lanes { + display: grid-lanes; + grid-template-columns: repeat(2, 60px); + border: 1px solid red; + background: white; + height: 120px; + } + + .grid-lanes-item { + background: lightblue; + padding: 4px; + border: 1px solid navy; + font-size: 12px; + text-align: center; + width: 40px; + height: auto; + min-height: 20px; + } + + .text-reference { + writing-mode: inherit; + height: 60px; + width: 25px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + background: yellow; + padding: 6px; + font-weight: bold; + } + + .grid-lanes-item:nth-child(1) { + height: 25px; + background: lightcoral; + font-size: 10px; + display: flex; + align-items: flex-start; + } + + .grid-lanes-item:nth-child(2) { + height: 35px; + background: lightgreen; + font-size: 16px; + display: flex; + align-items: center; + } + + .grid-lanes-item:nth-child(3) { + height: 30px; + background: lightpink; + font-size: 12px; + display: flex; + align-items: flex-end; + } + + .grid-lanes-item:nth-child(4) { + height: 40px; + background: lightyellow; + font-size: 14px; + display: flex; + align-items: flex-start; + } + + .sideways-rl { writing-mode: sideways-rl; } + .sideways-lr { writing-mode: sideways-lr; } + + .ltr { direction: ltr; } + .rtl { direction: rtl; } + </style> +</head> +<body> +<div class="test-section"> + <div class="four-column"> + <div class="test-variant"> + <h3>Sideways RL - LTR</h3> + <div class="container sideways-rl ltr"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Sideways RL - RTL</h3> + <div class="container sideways-rl rtl"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Sideways LR - LTR</h3> + <div class="container sideways-lr ltr"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Sideways LR - RTL</h3> + <div class="container sideways-lr rtl"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-005a-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-005a-ref.html @@ -0,0 +1,231 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .test-section { + margin: 10px 0; + border: 1px solid #666; + padding: 8px; + font: 16px/1 monospace; + } + + .side-by-side { + display: flex; + gap: 20px; + align-items: flex-start; + } + + .four-column { + display: flex; + gap: 15px; + align-items: flex-start; + } + + .test-variant { + flex: 1; + border: 1px solid #ccc; + padding: 8px; + background: #fafafa; + } + + .container { + display: flex; + align-items: last baseline; + gap: 10px; + border: 1px solid blue; + padding: 5px; + margin: 5px 0; + background: #f9f9f9; + text-decoration: underline; + } + + .multicolumn { + column-count: 2; + column-width: 40px; + column-gap: 0px; + border: 1px solid red; + background: white; + display: inline-block; + } + + .multicolumn-item { + background: lightblue; + padding: 4px; + border: 1px solid navy; + font-size: 12px; + text-align: center; + break-inside: avoid; + } + + .multicolumn-item:last-child { + margin-bottom: 0; + } + + .text-reference { + font-size: 14px; + background: yellow; + padding: 6px; + font-weight: bold; + } + + .multicolumn-item:nth-child(1) { + height: 25px; + background: lightcoral; + font-size: 10px; + display: flex; + align-items: flex-start; + } + + .multicolumn-item:nth-child(3) { + height: 35px; + background: lightgreen; + font-size: 16px; + display: flex; + align-items: center; + } + + .multicolumn-item:nth-child(2) { + height: 30px; + background: lightpink; + font-size: 12px; + display: flex; + align-items: flex-end; + } + + .multicolumn-item:nth-child(4) { + height: 40px; + background: lightyellow; + font-size: 14px; + display: flex; + align-items: flex-start; + } + + .horizontal-tb { writing-mode: horizontal-tb; } + .vertical-rl { writing-mode: vertical-rl; } + .vertical-lr { writing-mode: vertical-lr; } + + .ltr { direction: ltr; } + .rtl { direction: rtl; } + + .vertical-rl .multicolumn, + .vertical-lr .multicolumn { + column-count: 2; + column-width: 50px; + column-gap: 0px; + height: 120px; + } + + .vertical-rl .multicolumn-item, + .vertical-lr .multicolumn-item { + width: 40px; + height: auto; + min-height: 20px; + } + + .vertical-rl .text-reference, + .vertical-lr .text-reference { + writing-mode: inherit; + height: 60px; + width: 25px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + } + </style> +</head> +<body> +<div class="test-section"> + <div class="side-by-side"> + <div class="test-variant"> + <h3>Horizontal-LTR</h3> + <div class="container horizontal-tb ltr"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>horizontal-RTL</h3> + <div class="container horizontal-tb rtl"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + </div> +</div> + +<div class="test-section"> + <div class="four-column"> + <div class="test-variant"> + <h3>Vertical RL - LTR</h3> + <div class="container vertical-rl ltr"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Vertical RL - RTL</h3> + <div class="container vertical-rl rtl"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Vertical LR - LTR</h3> + <div class="container vertical-lr ltr"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Vertical LR - RTL</h3> + <div class="container vertical-lr rtl"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-005a.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-005a.html @@ -0,0 +1,226 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items:last baseline with different writing modes</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-005a-ref.html"> + <style> + .test-section { + margin: 10px 0; + border: 1px solid #666; + padding: 8px; + font: 16px/1 monospace; + } + + .side-by-side { + display: flex; + gap: 20px; + align-items: flex-start; + } + + .four-column { + display: flex; + gap: 15px; + align-items: flex-start; + } + + .test-variant { + flex: 1; + border: 1px solid #ccc; + padding: 8px; + background: #fafafa; + } + + .container { + display: flex; + align-items: last baseline; + gap: 10px; + border: 1px solid blue; + padding: 5px; + margin: 5px 0; + background: #f9f9f9; + text-decoration: underline; + } + + .grid-lanes { + display: grid-lanes; + grid-template-columns: repeat(2, 40px); + border: 1px solid red; + background: white; + } + + .grid-lanes-item { + background: lightblue; + padding: 4px; + border: 1px solid navy; + font-size: 12px; + text-align: center; + min-height: 20px; + } + + .text-reference { + font-size: 14px; + background: yellow; + padding: 6px; + font-weight: bold; + } + + .grid-lanes-item:nth-child(1) { + height: 25px; + background: lightcoral; + font-size: 10px; + display: flex; + align-items: flex-start; + } + + .grid-lanes-item:nth-child(2) { + height: 35px; + background: lightgreen; + font-size: 16px; + display: flex; + align-items: center; + } + + .grid-lanes-item:nth-child(3) { + height: 30px; + background: lightpink; + font-size: 12px; + display: flex; + align-items: flex-end; + } + + .grid-lanes-item:nth-child(4) { + height: 40px; + background: lightyellow; + font-size: 14px; + display: flex; + align-items: flex-start; + } + + .horizontal-tb { writing-mode: horizontal-tb; } + .vertical-rl { writing-mode: vertical-rl; } + .vertical-lr { writing-mode: vertical-lr; } + + .ltr { direction: ltr; } + .rtl { direction: rtl; } + + .vertical-rl .grid-lanes, + .vertical-lr .grid-lanes { + grid-template-columns: repeat(2, 60px); + height: 120px; + } + + .vertical-rl .grid-lanes-item, + .vertical-lr .grid-lanes-item { + width: 40px; + height: auto; + min-height: 20px; + } + + .vertical-rl .text-reference, + .vertical-lr .text-reference { + writing-mode: inherit; + height: 60px; + width: 25px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + } + </style> +</head> +<body> +<div class="test-section"> + <div class="side-by-side"> + <div class="test-variant"> + <h3>Horizontal-LTR</h3> + <div class="container horizontal-tb ltr"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + <div class="test-variant"> + <h3>horizontal-RTL</h3> + <div class="container horizontal-tb rtl"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + </div> +</div> + +<div class="test-section"> + <div class="four-column"> + <div class="test-variant"> + <h3>Vertical RL - LTR</h3> + <div class="container vertical-rl ltr"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Vertical RL - RTL</h3> + <div class="container vertical-rl rtl"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Vertical LR - LTR</h3> + <div class="container vertical-lr ltr"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Vertical LR - RTL</h3> + <div class="container vertical-lr rtl"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-005b-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-005b-ref.html @@ -0,0 +1,176 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .test-section { + margin: 10px 0; + border: 1px solid #666; + padding: 8px; + font: 16px/1 monospace; + } + + .four-column { + display: flex; + gap: 15px; + align-items: flex-start; + } + + .test-variant { + flex: 1; + border: 1px solid #ccc; + padding: 8px; + background: #fafafa; + } + + .container { + display: flex; + align-items: last baseline; + gap: 10px; + border: 1px solid blue; + padding: 5px; + margin: 5px 0; + background: #f9f9f9; + text-decoration: underline; + } + + .multicolumn { + column-count: 2; + column-width: 50px; + column-gap: 0px; + height: 120px; + border: 1px solid red; + background: white; + display: inline-block; + } + + .multicolumn-item { + background: lightblue; + padding: 4px; + border: 1px solid navy; + font-size: 12px; + text-align: center; + break-inside: avoid; + width: 40px; + height: auto; + min-height: 20px; + } + + .multicolumn-item:last-child { + margin-bottom: 0; + } + + .text-reference { + writing-mode: inherit; + height: 60px; + width: 25px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + background: yellow; + padding: 6px; + font-weight: bold; + } + + .multicolumn-item:nth-child(1) { + height: 25px; + background: lightcoral; + font-size: 10px; + display: flex; + align-items: flex-start; + } + + .multicolumn-item:nth-child(3) { + height: 35px; + background: lightgreen; + font-size: 16px; + display: flex; + align-items: center; + } + + .multicolumn-item:nth-child(2) { + height: 30px; + background: lightpink; + font-size: 12px; + display: flex; + align-items: flex-end; + } + + .multicolumn-item:nth-child(4) { + height: 40px; + background: lightyellow; + font-size: 14px; + display: flex; + align-items: flex-start; + } + + .sideways-rl { writing-mode: sideways-rl; } + .sideways-lr { writing-mode: sideways-lr; } + + .ltr { direction: ltr; } + .rtl { direction: rtl; } + </style> +</head> +<body> +<div class="test-section"> + <div class="four-column"> + <div class="test-variant"> + <h3>Sideways RL - LTR</h3> + <div class="container sideways-rl ltr"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Sideways RL - RTL</h3> + <div class="container sideways-rl rtl"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Sideways LR - LTR</h3> + <div class="container sideways-lr ltr"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Sideways LR - RTL</h3> + <div class="container sideways-lr rtl"> + <div class="text-reference">Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item">A</div> + <div class="multicolumn-item">C</div> + <div class="multicolumn-item">B</div> + <div class="multicolumn-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-005b.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-005b.html @@ -0,0 +1,173 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items:last baseline with different writing modes</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-005b-ref.html"> + <style> + .test-section { + margin: 10px 0; + border: 1px solid #666; + padding: 8px; + font: 16px/1 monospace; + } + + .four-column { + display: flex; + gap: 15px; + align-items: flex-start; + } + + .test-variant { + flex: 1; + border: 1px solid #ccc; + padding: 8px; + background: #fafafa; + } + + .container { + display: flex; + align-items: last baseline; + gap: 10px; + border: 1px solid blue; + padding: 5px; + margin: 5px 0; + background: #f9f9f9; + text-decoration: underline; + } + + .grid-lanes { + display: grid-lanes; + grid-template-columns: repeat(2, 60px); + height: 120px; + border: 1px solid red; + background: white; + } + + .grid-lanes-item { + background: lightblue; + padding: 4px; + border: 1px solid navy; + font-size: 12px; + text-align: center; + min-height: 20px; + width: 40px; + height: auto; + } + + .text-reference { + writing-mode: inherit; + height: 60px; + width: 25px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + background: yellow; + padding: 6px; + font-weight: bold; + } + + .grid-lanes-item:nth-child(1) { + height: 25px; + background: lightcoral; + font-size: 10px; + display: flex; + align-items: flex-start; + } + + .grid-lanes-item:nth-child(2) { + height: 35px; + background: lightgreen; + font-size: 16px; + display: flex; + align-items: center; + } + + .grid-lanes-item:nth-child(3) { + height: 30px; + background: lightpink; + font-size: 12px; + display: flex; + align-items: flex-end; + } + + .grid-lanes-item:nth-child(4) { + height: 40px; + background: lightyellow; + font-size: 14px; + display: flex; + align-items: flex-start; + } + + .sideways-rl { writing-mode: sideways-rl; } + .sideways-lr { writing-mode: sideways-lr; } + + .ltr { direction: ltr; } + .rtl { direction: rtl; } + </style> +</head> +<body> +<div class="test-section"> + <div class="four-column"> + <div class="test-variant"> + <h3>Sideways RL - LTR</h3> + <div class="container sideways-rl ltr"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Sideways RL - RTL</h3> + <div class="container sideways-rl rtl"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Sideways LR - LTR</h3> + <div class="container sideways-lr ltr"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + + <div class="test-variant"> + <h3>Sideways LR - RTL</h3> + <div class="container sideways-lr rtl"> + <div class="text-reference">Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">A</div> + <div class="grid-lanes-item">B</div> + <div class="grid-lanes-item">C</div> + <div class="grid-lanes-item">D</div> + </div> + <div class="text-reference">Ref</div> + </div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-006-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-006-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + gap: 20px; + border: 2px solid blue; + padding: 10px; + font: 16px/1 Ahem; + width: 900px; + text-decoration: underline; + position: relative; + } + + .reference-container { + margin-left: 116px; + width: 350px; + background: #f0f0f0; + height: 164px; + position: relative; + } + + .reference-item { + background: lightblue; + padding: 6px; + font-size: 14px; + position: absolute; + box-sizing: border-box; + text-decoration: underline; + } + + .text-reference { + background: yellow; + font-size: 10px; + width: 80px; + height: 10px; + padding: 8px; + position: absolute; + text-decoration: underline; + } + + .reference-item:nth-child(1) { + height: 82px; + font-size: 20px; + background: salmon; + top: 0; + left: 0; + width: 170px; + } + + .reference-item:nth-child(2) { + height: 72px; + background: plum; + top: 92px; + left: 90px; + width: 170px; + } + + .reference-item:nth-child(3) { + height: 37px; + font-size: 10px; + background: peachpuff; + top: 0; + left: 180px; + width: 80px; + } + + .reference-item:nth-child(4) { + height: 52px; + font-size: 20px; + background: turquoise; + top: 0; + left: 270px; + width: 80px; + } + </style> +</head> +<body> +<div class="container"> + <div class="text-reference" style="top: 10px; left: 10px;">Reference</div> + <div class="reference-container" style="margin-top: 2px;"> + <div class="reference-item">Item 1</div> + <div class="reference-item">Item 2</div> + <div class="reference-item">Item 3</div> + <div class="reference-item">Item 4</div> + </div> +</div> +<div class="container"> + <div class="text-reference" style="top: 103px;">Reference</div> + <div class="reference-container"> + <div class="reference-item">Item 1</div> + <div class="reference-item">Item 2</div> + <div class="reference-item">Item 3</div> + <div class="reference-item">Item 4</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-006.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-006.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items:baseline/last baseline with dense packing</title> + <link rel="author" title="Yanling Wang" href="yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-006-ref.html"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + gap: 20px; + border: 2px solid blue; + padding: 10px; + font: 16px/1 Ahem; + width: 900px; + text-decoration: underline; + } + + .first-baseline { + align-items: first baseline; + } + + .last-baseline { + align-items: last baseline; + } + + .grid-lanes { + display: grid-lanes; + grid-template-columns: repeat(4, 80px); + grid-auto-flow: dense; + gap: 10px; + background: #f0f0f0; + } + + .grid-lanes-item { + background: lightblue; + padding: 6px; + font-size: 14px; + } + + .text-reference { + background: yellow; + font-size: 10px; + padding: 8px; + width: 80px; + height: 10px; + } + + .grid-lanes-item:nth-child(1) { + grid-column: 1 / 3; + height: 70px; + font-size: 20px; + background: salmon; + } + + .grid-lanes-item:nth-child(2) { + grid-column: 2 / 4; + height: 60px; + background: plum; + } + + .grid-lanes-item:nth-child(3) { + grid-column: 3 / 4; + height: 25px; + font-size: 10px; + background: peachpuff; + } + + .grid-lanes-item:nth-child(4) { + height: 40px; + font-size: 20px; + background: turquoise; + } + </style> +</head> +<body> +<div class="container first-baseline"> + <div class="text-reference">Reference</div> + <div class="grid-lanes dense-case-3"> + <div class="grid-lanes-item">Item 1</div> + <div class="grid-lanes-item">Item 2</div> + <div class="grid-lanes-item">Item 3</div> + <div class="grid-lanes-item">Item 4</div> + </div> +</div> +<div class="container last-baseline"> + <div class="text-reference">Reference</div> + <div class="grid-lanes dense-case-3"> + <div class="grid-lanes-item">Item 1</div> + <div class="grid-lanes-item">Item 2</div> + <div class="grid-lanes-item">Item 3</div> + <div class="grid-lanes-item">Item 4</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-007a-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-007a-ref.html @@ -0,0 +1,142 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .container { + display: flex; + gap: 20px; + border: 2px solid blue; + width: 400px; + padding: 10px; + font-size: 16px; + text-decoration: underline; + } + + .first-baseline { + align-items: baseline; + } + + .last-baseline { + align-items: last baseline; + } + + .grid-margin { + display: grid; + grid-template-columns: repeat(3, 100px); + border: 1px solid blue; + background: lightblue; + width: 300px; + } + + .grid-margin .grid-margin-item { + font-size: 14px; + padding: 4px; + } + + .grid-margin .item1 { + grid-column: 1; + height: 30px; + margin-top: 5px; + background: lightgreen; + } + + .grid-margin .item2 { + grid-column: 1 / 4; + height: 40px; + margin-top: 10px; + background: lightcoral; + } + + .grid-margin .item3 { + grid-column: 1; + height: 25px; + margin-top: 8px; + background: lightyellow; + } + + .grid-margin .item4 { + grid-column: 2; + height: 35px; + margin-top: 12px; + background: lightpink; + } + + .grid-margin .item5 { + grid-column: 3; + height: 20px; + margin-top: 15px; + background: lightcyan; + display: flex; + align-items: end; + } + + .grid-simple { + display: grid; + grid-template-columns: repeat(3, 100px); + border: 1px solid green; + } + + .grid-simple .simple-item1 { + grid-column: 1 / 4; + height: 2px; + font-size: 40px; + background: yellow; + } + + .grid-simple .simple-item2 { + grid-column: 1; + height: 2px; + font-size: 12px; + border: 2px solid red; + color: red; + } + + .grid-simple .simple-item3 { + grid-column: 1; + height: 80px; + color: blue; + display: flex; + align-items: end; + } + </style> +</head> +<body> +<div class="container first-baseline"> + <div>Ref</div> + <div class="grid-margin"> + <div class="grid-margin-item item1">Item 1</div> + <div class="grid-margin-item item2">Item 2</div> + <div class="grid-margin-item item3">Item 3</div> + <div class="grid-margin-item item4">Item 4</div> + <div class="grid-margin-item item5">Item 5</div> + </div> +</div> +<div class="container last-baseline"> + <div>Ref</div> + <div class="grid-margin"> + <div class="grid-margin-item item1">Item 1</div> + <div class="grid-margin-item item2">Item 2</div> + <div class="grid-margin-item item3">Item 3</div> + <div class="grid-margin-item item4">Item 4</div> + <div class="grid-margin-item item5">Item 5</div> + </div> +</div> +<div class="container first-baseline"> + <div>Ref</div> + <div class="grid-simple"> + <div class="grid-simple-item simple-item1">First</div> + <div class="grid-simple-item simple-item2">Second</div> + <div class="grid-simple-item simple-item3">Third</div> + </div> +</div> +<div class="container last-baseline"> + <div>Ref</div> + <div class="grid-simple"> + <div class="grid-simple-item simple-item1">First</div> + <div class="grid-simple-item simple-item2">Second</div> + <div class="grid-simple-item simple-item3">Third</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-007a.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-007a.html @@ -0,0 +1,147 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items: baseline/last baseline with explicit placement</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-007a-ref.html"> + <style> + .container { + display: flex; + gap: 20px; + border: 2px solid blue; + width: 400px; + padding: 10px; + font-size: 16px; + text-decoration: underline; + } + + .first-baseline { + align-items: baseline; + } + + .last-baseline { + align-items: last baseline; + } + + .grid-lanes-margin { + display: grid-lanes; + grid-template-columns: repeat(3, 100px); + border: 1px solid blue; + background: lightblue; + } + + .grid-lanes-margin .grid-lanes-item { + font-size: 14px; + padding: 4px; + } + + .grid-lanes-margin .item1 { + grid-column: 1; + height: 30px; + margin-top: 5px; + background: lightgreen; + } + + .grid-lanes-margin .item2 { + grid-column: 1 / 4; + height: 40px; + margin-top: 10px; + background: lightcoral; + } + + .grid-lanes-margin .item3 { + grid-column: 1; + height: 25px; + margin-top: 8px; + background: lightyellow; + } + + .grid-lanes-margin .item4 { + grid-column: 2; + height: 35px; + margin-top: 12px; + background: lightpink; + } + + .grid-lanes-margin .item5 { + grid-column: 3; + height: 20px; + margin-top: 15px; + background: lightcyan; + display: flex; + align-items: end; + } + + .grid-lanes-simple { + display: grid-lanes; + grid-template-columns: repeat(3, 100px); + border: 1px solid green; + } + + .grid-lanes-simple .simple-item1 { + grid-column: 1 / 4; + height: 2px; + font-size: 40px; + background: yellow; + } + + .grid-lanes-simple .simple-item2 { + grid-column: 1; + height: 2px; + font-size: 12px; + border: 2px solid red; + color: red; + } + + .grid-lanes-simple .simple-item3 { + grid-column: 1; + height: 80px; + color: blue; + display: flex; + align-items: end; + } + </style> +</head> +<body> +<div class="container first-baseline"> + <div>Ref</div> + <div class="grid-lanes-margin"> + <div class="grid-lanes-item item1">Item 1</div> + <div class="grid-lanes-item item2">Item 2</div> + <div class="grid-lanes-item item3">Item 3</div> + <div class="grid-lanes-item item4">Item 4</div> + <div class="grid-lanes-item item5">Item 5</div> + </div> +</div> +<div class="container last-baseline"> + <div>Ref</div> + <div class="grid-lanes-margin"> + <div class="grid-lanes-item item1">Item 1</div> + <div class="grid-lanes-item item2">Item 2</div> + <div class="grid-lanes-item item3">Item 3</div> + <div class="grid-lanes-item item4">Item 4</div> + <div class="grid-lanes-item item5">Item 5</div> + </div> +</div> + +<!-- Spanner with large font vs smaller item below --> +<div class="container first-baseline"> + <div>Ref</div> + <div class="grid-lanes-simple"> + <div class="grid-lanes-item simple-item1">First</div> + <div class="grid-lanes-item simple-item2">Second</div> + <div class="grid-lanes-item simple-item3">Third</div> + </div> +</div> +<div class="container last-baseline"> + <div>Ref</div> + <div class="grid-lanes-simple"> + <div class="grid-lanes-item simple-item1">First</div> + <div class="grid-lanes-item simple-item2">Second</div> + <div class="grid-lanes-item simple-item3">Third</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-007b-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-007b-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .container { + display: flex; + gap: 20px; + border: 2px solid blue; + width: 400px; + padding: 10px; + font-size: 16px; + text-decoration: underline; + } + + .first-baseline { + align-items: baseline; + } + + .last-baseline { + align-items: last baseline; + } + + .grid-explicit { + display: grid; + grid-template-columns: repeat(4, 80px); + border: 1px solid purple; + width: 320px; + } + + .grid-explicit .explicit-item1 { + grid-column: 1 / 3; + background: lightsteelblue; + font-size: 12px; + height: 30px; + } + + .grid-explicit .explicit-item2 { + grid-column: 3 / 5; + width: auto; + background: lightgoldenrodyellow; + font-size: 18px; + height: 30px; + } + + .grid-explicit .explicit-item3 { + grid-column: 1; + background: lightseagreen; + font-size: 12px; + height: 20px; + } + + .grid-explicit .explicit-item4 { + grid-column: 2 / 4; + background: lightsalmon; + font-size: 20px; + height: 35px; + } + + .grid-explicit .explicit-item5 { + grid-column: 4; + background: lightblue; + font-size: 14px; + height: 22px; + } + + .grid-explicit .explicit-item6 { + grid-column: 1 / 5; + background: lightcyan; + font-size: 22px; + height: 40px; + } + </style> +</head> +<body> +<div class="container first-baseline"> + <div>Ref</div> + <div class="grid-explicit"> + <div class="explicit-item1">Item 1</div> + <div class="explicit-item2">Item 2</div> + <div class="explicit-item3">Item 3</div> + <div class="explicit-item4">Item 4</div> + <div class="explicit-item5">Item 5</div> + <div class="explicit-item6">Item 6</div> + </div> +</div> +<div class="container last-baseline"> + <div>Ref</div> + <div class="grid-explicit"> + <div class="explicit-item1">Item 1</div> + <div class="explicit-item2">Item 2</div> + <div class="explicit-item3">Item 3</div> + <div class="explicit-item4">Item 4</div> + <div class="explicit-item5">Item 5</div> + <div class="explicit-item6">Item 6</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-007b.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-007b.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items: baseline/last baseline with explicit placement</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-007b-ref.html"> + <style> + .container { + display: flex; + gap: 20px; + border: 2px solid blue; + width: 400px; + padding: 10px; + font-size: 16px; + text-decoration: underline; + } + + .first-baseline { + align-items: baseline; + } + + .last-baseline { + align-items: last baseline; + } + + .grid-lanes-explicit { + display: grid-lanes; + grid-template-columns: repeat(4, 80px); + border: 1px solid purple; + } + + .grid-lanes-explicit .explicit-item1 { + grid-column: 1 / 3; + background: lightsteelblue; + font-size: 12px; + height: 30px; + } + + .grid-lanes-explicit .explicit-item2 { + grid-column: 3 / 5; + background: lightgoldenrodyellow; + font-size: 18px; + height: 30px; + } + + .grid-lanes-explicit .explicit-item3 { + grid-column: 1; + background: lightseagreen; + font-size: 12px; + height: 20px; + } + + .grid-lanes-explicit .explicit-item4 { + grid-column: 2 / 4; + background: lightsalmon; + font-size: 20px; + height: 35px; + } + + .grid-lanes-explicit .explicit-item5 { + grid-column: 4; + background: lightblue; + font-size: 14px; + height: 22px; + } + + .grid-lanes-explicit .explicit-item6 { + grid-column: 1 / 5; + background: lightcyan; + font-size: 22px; + height: 40px; + } + </style> +</head> +<body> +<div class="container first-baseline"> + <div>Ref</div> + <div class="grid-lanes-explicit"> + <div class="grid-lanes-item explicit-item1">Item 1</div> + <div class="grid-lanes-item explicit-item2">Item 2</div> + <div class="grid-lanes-item explicit-item3">Item 3</div> + <div class="grid-lanes-item explicit-item4">Item 4</div> + <div class="grid-lanes-item explicit-item5">Item 5</div> + <div class="grid-lanes-item explicit-item6">Item 6</div> + </div> +</div> +<div class="container last-baseline"> + <div>Ref</div> + <div class="grid-lanes-explicit"> + <div class="grid-lanes-item explicit-item1">Item 1</div> + <div class="grid-lanes-item explicit-item2">Item 2</div> + <div class="grid-lanes-item explicit-item3">Item 3</div> + <div class="grid-lanes-item explicit-item4">Item 4</div> + <div class="grid-lanes-item explicit-item5">Item 5</div> + <div class="grid-lanes-item explicit-item6">Item 6</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-008-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-008-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .container { + display: flex; + gap: 20px; + border: 2px solid blue; + width: 400px; + padding: 10px; + font-size: 16px; + text-decoration: underline; + } + + .multicolumn { + column-count: 2; + column-width: 100px; + column-gap: 10px; + border: 1px solid red; + background: #f0f0f0; + display: inline-block; + } + + .multicolumn-item { + background-color: transparent; + padding: 8px; + border: 4px solid navy; + break-inside: avoid; + margin-bottom: 10px; + text-decoration: underline; + } + + .multicolumn-item:nth-child(1) { height: 40px; font-size: 20px;color: lightcoral; display: flex; align-items: end; border-color: lightcoral;} + .multicolumn-item:nth-child(3) { height: 80px; } + .multicolumn-item:nth-child(2) { height: 60px; font-size: 22px;color: greenyellow; border-color: greenyellow;} + </style> +</head> +<body> +<div class="container" style="align-items: baseline;"> + <div>Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item" style="margin-bottom: -70px;">Item 1</div> + <div class="multicolumn-item">Item 3</div> + <div class="multicolumn-item"></div> + </div> +</div> +<div class="container" style="align-items: baseline;"> + <div>Ref</div> + <div class="multicolumn"> + <div class="multicolumn-item" style="margin-bottom: -70px;">Item 1</div> + <div class="multicolumn-item">Item 3</div> + <div class="multicolumn-item"></div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-008.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-container-baseline-008.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Lanes Test: align-items: baseline/last baseline with negative margin</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> + <link rel="match" href="column-grid-lanes-container-baseline-008-ref.html"> + <style> + .container { + display: flex; + gap: 20px; + border: 2px solid blue; + width: 400px; + padding: 10px; + font-size: 16px; + text-decoration: underline; + } + + .grid-lanes { + display: grid-lanes; + grid-template-columns: repeat(2, 100px); + gap: 10px; + border: 1px solid red; + background: #f0f0f0; + width: max-content; + } + + .grid-lanes-item { + background: transparent; + padding: 8px; + border: 4px solid navy; + text-decoration: underline; + } + + .grid-lanes-item:nth-child(1) { height: 40px; font-size: 20px;color: lightcoral; display: flex; align-items: end; border-color: lightcoral;} + .grid-lanes-item:nth-child(2) { height: 80px; } + .grid-lanes-item:nth-child(3) { height: 60px; font-size: 22px;color: greenyellow; border-color: greenyellow;} + </style> +</head> +<body> +<div class="container" style="align-items: baseline;"> + <div>Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item">Item 1</div> + <div class="grid-lanes-item"></div> + <div class="grid-lanes-item" style="margin-top: -80px;">Item 3</div> + </div> +</div> +<div class="container" style="align-items: last baseline;"> + <div>Ref</div> + <div class="grid-lanes"> + <div class="grid-lanes-item" style="margin-bottom: -80px;">Item 1</div> + <div class="grid-lanes-item"></div> + <div class="grid-lanes-item">Item 3</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/grid-lanes-item-placement-006-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/grid-lanes-item-placement-006-ref.html @@ -19,6 +19,7 @@ grid { color: #444; border: 1px solid; padding: 2px; + vertical-align: text-top; } item { diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/grid-lanes-item-placement-007-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/grid-lanes-item-placement-007-ref.html @@ -20,6 +20,7 @@ grid { border: 1px solid; padding: 2px; direction: rtl; + vertical-align: text-top; } flex { diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/items/column-item-minmax-img-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/items/column-item-minmax-img-002-ref.html @@ -4,6 +4,7 @@ display: inline-grid; grid-template-columns: minmax(auto, 0); border: 5px solid goldenrod; + vertical-align: top; } .spacer{ height: 10px; @@ -26,4 +27,4 @@ img { <div class="spacer"></div> <div class="grid"> <img class="start" src="support/100x100-green.png"> -</div> -\ No newline at end of file +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/items/column-item-minmax-img-002.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/items/column-item-minmax-img-002.html @@ -10,6 +10,7 @@ display: inline-grid-lanes; grid-template-columns: minmax(auto, 0); border: 5px solid goldenrod; + vertical-align: top; } .spacer{ height: 10px; diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/items/column-item-percentage-sizes-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/items/column-item-percentage-sizes-001-ref.html @@ -13,6 +13,7 @@ html,body { border: solid 1px; margin: 0 20px 20px 0; place-items: start; + vertical-align: text-top; } .item { background: cyan; @@ -43,6 +44,7 @@ html,body { .vlr .item { writing-mode: vertical-lr; direction:rtl; } .sll .item { writing-mode: sideways-lr; direction:ltr; } .slr .item { writing-mode: sideways-lr; direction:rtl; } +.hl, .hr, .vrl, .vrr, .vll, .vlr, .sll, .slr { margin-bottom: 3px; } </style> <div class="hl"> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/items/column-item-percentage-sizes-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/items/column-item-percentage-sizes-002-ref.html @@ -13,6 +13,7 @@ html,body { border: solid 1px; margin: 0 20px 20px 0; place-items: start; + vertical-align: text-top; } .item { background: cyan; @@ -43,6 +44,7 @@ html,body { .vlr .item { writing-mode: vertical-lr; direction:rtl; } .sll .item { writing-mode: sideways-lr; direction:ltr; } .slr .item { writing-mode: sideways-lr; direction:rtl; } +.hl, .hr, .vrl, .vrr, .vll, .vlr, .sll, .slr { margin-bottom: 3px; } </style> <div class="hl"> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/items/column-item-percentage-sizes-003-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/items/column-item-percentage-sizes-003-ref.html @@ -13,6 +13,7 @@ html,body { border: solid 1px; margin: 0 20px 20px 0; place-items: start; + vertical-align: text-top; } .item { background: cyan; @@ -43,6 +44,7 @@ html,body { .vlr .item { writing-mode: vertical-lr; direction:rtl; } .sll .item { writing-mode: sideways-lr; direction:ltr; } .slr .item { writing-mode: sideways-lr; direction:rtl; } +.hl, .hr, .vrl, .vrr, .vll, .vlr, .sll, .slr { margin-bottom: 3px; } </style> <div class="hl"> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/track-sizing/auto-repeat/column-auto-repeat-015-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/track-sizing/auto-repeat/column-auto-repeat-015-ref.html @@ -8,6 +8,7 @@ /* Does not fit a whole-number of repetitions */ width: 94px; background: pink; + vertical-align: top; } div > div { background: blue; diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/track-sizing/auto-repeat/column-auto-repeat-015.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/track-sizing/auto-repeat/column-auto-repeat-015.html @@ -12,6 +12,7 @@ /* Does not fit a whole-number of repetitions */ width: 94px; background: pink; + vertical-align: top; } div > div { background: blue; diff --git a/testing/web-platform/tests/shadow-dom/declarative/tentative/shadowrootadoptedstylesheets/shadowrootadoptedstylesheets-same-document.html b/testing/web-platform/tests/shadow-dom/declarative/tentative/shadowrootadoptedstylesheets/shadowrootadoptedstylesheets-same-document.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>shadowrootadoptedstylesheets only apply if they're from the same document</title> +<meta name="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com" /> +<link rel='help' href='https://github.com/whatwg/html/pull/11687'> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<style type="module" specifier="foo"> + span {color: blue;} +</style> +<script> + const new_document = Document.parseHTMLUnsafe( + "<div id='host'>" + + "<template shadowrootmode='open' shadowrootadoptedstylesheets='foo'>" + + "<span id='test_element'>Test content</span>" + + "</template>" + + "</div>" + ); + + const host = new_document.getElementById("host"); + test(function (t) { + assert_equals( + host.shadowRoot.adoptedStyleSheets.length, + 0, + "The shadowrootadoptedstylesheets attribute will only import stylesheets from the same document into adoptedStyleSheets.", + ); + + }, "adoptedStyleSheets is populated from a <template> element's shadowrootadoptedstylesheets attribute via Document.parseHTMLUnsafe."); +</script> +\ No newline at end of file