commit 48605e301951eaea51602b8dc83c9423076d6b4d parent 0af394c98854c311e0b511dec1da231491c03746 Author: Yanling Wang <yanlingwang@microsoft.com> Date: Tue, 14 Oct 2025 22:23:50 +0000 Bug 1993202 [wpt PR 55290] - [Masonry] Add more alignment tests, a=testonly Automatic update from web-platform-tests [Masonry] Add more alignment tests This CL adds more alignment tests for CSS Masonry, which includes self-alignment properties for masonry items and alignment behavior for absolutely positioned elements within masonry. Bug: 343257585 Change-Id: I75ba327220fa8477e400c17d5abfc15da8f6e6ea Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6940942 Reviewed-by: Alison Maher <almaher@microsoft.com> Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Commit-Queue: Yanling Wang <yanlingwang@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1526567} -- wpt-commits: 1e9abf63981b3fd8930c071b288ac647a4c27354 wpt-pr: 55290 Diffstat:
28 files changed, 2918 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-001-ref.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; + } + + .grid { + position: relative; + display: grid; + grid-template-columns: 100px 150px; + grid-template-rows: 200px; + width: 300px; + background: grey; + gap: 10px; + padding: 10px; + } + + .grid > div { + position: absolute; + } + + .grid > :nth-child(1) { + grid-column: 1/2; + grid-row: 1/2; + align-self: start; + background: green; + } + + .grid > :nth-child(2) { + grid-column: 2/3; + grid-row: 1/2; + align-self: start; + background: blue; + } + + .grid > :nth-child(3) { + grid-column: 1/2; + grid-row: 1/2; + align-self: end; + background: yellow; + } + + .grid > :nth-child(4) { + grid-column: 2/3; + grid-row: 1/2; + align-self: end; + background: red; + } + </style> +</head> +<body> +<div class="grid"> + <div>X XX X</div> + <div>XX X<br>X XXX X<br>XX XXX</div> + <div>X XX X</div> + <div>XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid" style="direction: rtl;"> + <div>X XX X</div> + <div>XX X<br>X XXX X<br>XX XXX</div> + <div>X XX X</div> + <div>XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-001.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Self-Alignment along column axis of absolute positioned items</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="column-masonry-alignment-positioned-items-001-ref.html"> + <style> + html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; + } + + .masonry { + position: relative; + display: masonry; + grid-template-columns: 100px 150px; + width: 300px; + height: 200px; + background: grey; + gap: 10px; + padding: 10px; + justify-items: start; + } + + .masonry > div { + position: absolute; + } + + .masonry > :nth-child(1) { + grid-column: 1 / 2; + align-self: start; + background: green; + } + + .masonry > :nth-child(2) { + grid-column: 2 / 3; + align-self: start; + background: blue; + } + + .masonry > :nth-child(3) { + grid-column: 1 / 2; + align-self: end; + background: yellow; + } + + .masonry > :nth-child(4) { + grid-column: 2 / 3; + align-self: end; + background: red; + } + </style> +</head> +<body> +<div class="masonry"> + <div>X XX X</div> + <div>XX X<br>X XXX X<br>XX XXX</div> + <div>X XX X</div> + <div>XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="masonry" style="direction: rtl;"> + <div>X XX X</div> + <div>XX X<br>X XXX X<br>XX XXX</div> + <div>X XX X</div> + <div>XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-002-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + html,body { + color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; + } + + .grid { + position: relative; + display: grid; + grid-template-columns: 80px 80px 80px; + grid-template-rows: 150px; + width: 290px; + gap: 10px; + padding: 10px; + border: 2px solid black; + margin: 10px; + } + + .grid > div { + position: absolute; + border: 1px solid #333; + width: 120px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + } + + .safe-start { + grid-column: 1 / 2; + grid-row: 1 / 2; + align-self: safe start; + background: lightcoral; + } + + .unsafe-start { + grid-column: 2 / 3; + grid-row: 1 / 2; + align-self: unsafe start; + background: lightblue; + } + + .safe-end { + grid-column: 3 / 4; + grid-row: 1 / 2; + align-self: safe end; + background: lightgreen; + } + + .unsafe-end { + grid-column: 1 / 2; + grid-row: 1 / 2; + align-self: unsafe end; + background: lightyellow; + } + + .safe-center { + grid-column: 2 / 3; + grid-row: 1 / 2; + align-self: safe center; + background: plum; + } + + .unsafe-center { + grid-column: 3 / 4; + grid-row: 1 / 2; + align-self: unsafe center; + background: orange; + } + </style> +</head> +<body> + <div class="grid"> + <div class="safe-start">safe-start</div> + <div class="unsafe-start">unsafe-start</div> + <div class="safe-end">safe-end</div> + <div class="unsafe-end">unsafe-end</div> + <div class="safe-center">safe-center</div> + <div class="unsafe-center">unsafe-center</div> + </div> + + <div class="grid" style="direction: rtl;"> + <div class="safe-start">safe-start</div> + <div class="unsafe-start">unsafe-start</div> + <div class="safe-end">safe-end</div> + <div class="unsafe-end">unsafe-end</div> + <div class="safe-center">safe-center</div> + <div class="unsafe-center">unsafe-center</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-002.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Safe and unsafe alignment values for positioned items</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="column-masonry-alignment-positioned-items-002-ref.html"> + <style> + html,body { + color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; + } + + .masonry { + position: relative; + display: masonry; + grid-template-columns: 80px 80px 80px; + width: 290px; + height: 150px; + gap: 10px; + padding: 10px; + border: 2px solid black; + margin: 10px; + } + + .masonry > div { + position: absolute; + border: 1px solid #333; + width: 120px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + } + + .safe-start { + grid-column: 1 / 2; + align-self: safe start; + background: lightcoral; + } + + .unsafe-start { + grid-column: 2 / 3; + align-self: unsafe start; + background: lightblue; + } + + .safe-end { + grid-column: 3 / 4; + align-self: safe end; + background: lightgreen; + } + + .unsafe-end { + grid-column: 1 / 2; + align-self: unsafe end; + background: lightyellow; + } + + .safe-center { + grid-column: 2 / 3; + align-self: safe center; + background: plum; + } + + .unsafe-center { + grid-column: 3 / 4; + align-self: unsafe center; + background: orange; + } + </style> +</head> +<body> + <div class="masonry"> + <div class="safe-start">safe-start</div> + <div class="unsafe-start">unsafe-start</div> + <div class="safe-end">safe-end</div> + <div class="unsafe-end">unsafe-end</div> + <div class="safe-center">safe-center</div> + <div class="unsafe-center">unsafe-center</div> + </div> + + <div class="masonry" style="direction: rtl;"> + <div class="safe-start">safe-start</div> + <div class="unsafe-start">unsafe-start</div> + <div class="safe-end">safe-end</div> + <div class="unsafe-end">unsafe-end</div> + <div class="safe-center">safe-center</div> + <div class="unsafe-center">unsafe-center</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-003-ref.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + html,body { + color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; + } + + .grid { + position: relative; + display: grid; + grid-template-columns: 90px 90px 90px; + grid-template-rows: 150px; + width: 320px; + gap: 10px; + padding: 15px; + border: 2px solid black; + margin: 10px; + } + + .grid > div { + position: absolute; + border: 1px solid #333; + width: 70px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + } + + .flex-start-item { + grid-column: 1 / 2; + grid-row: 1 / 2; + align-self: flex-start; + justify-self: flex-start; + background: lightcoral; + } + + .flex-end-item { + grid-column: 2 / 3; + grid-row: 1 / 2; + align-self: flex-end; + justify-self: flex-end; + background: lightblue; + } + + .mixed-legacy { + grid-column: 3 / 4; + grid-row: 1 / 2; + align-self: flex-start; + justify-self: end; + background: lightgreen; + } + + .normal-item { + grid-column: 1 / 2; + grid-row: 1 / 2; + align-self: normal; + justify-self: normal; + background: lightyellow; + } + + .auto-item { + grid-column: 2 / 3; + grid-row: 1 / 2; + align-self: auto; + justify-self: auto; + background: plum; + } + + .legacy-center { + grid-column: 3 / 4; + grid-row: 1 / 2; + align-self: flex-start; + justify-self: center; + background: orange; + } + </style> +</head> +<body> + <div class="grid"> + <div class="flex-start-item">flex-start</div> + <div class="flex-end-item">flex-end</div> + <div class="mixed-legacy">mixed</div> + <div class="normal-item">normal</div> + <div class="auto-item">auto</div> + <div class="legacy-center">legacy-center</div> + </div> + + <div class="grid" style="direction: rtl;"> + <div class="flex-start-item">flex-start</div> + <div class="flex-end-item">flex-end</div> + <div class="mixed-legacy">mixed</div> + <div class="normal-item">normal</div> + <div class="auto-item">auto</div> + <div class="legacy-center">legacy-center</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-003.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Mixed alignment values for positioned items</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="column-masonry-alignment-positioned-items-003-ref.html"> + <style> + html,body { + color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; + } + + .masonry { + position: relative; + display: masonry; + grid-template-columns: 90px 90px 90px; + width: 320px; + height: 150px; + gap: 10px; + padding: 15px; + border: 2px solid black; + margin: 10px; + } + + .masonry > div { + position: absolute; + border: 1px solid #333; + width: 70px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + } + + .flex-start-item { + grid-column: 1 / 2; + align-self: flex-start; + justify-self: flex-start; + background: lightcoral; + } + + .flex-end-item { + grid-column: 2 / 3; + align-self: flex-end; + justify-self: flex-end; + background: lightblue; + } + + .mixed-legacy { + grid-column: 3 / 4; + align-self: flex-start; + justify-self: end; + background: lightgreen; + } + + .normal-item { + grid-column: 1 / 2; + align-self: normal; + justify-self: normal; + background: lightyellow; + } + + .auto-item { + grid-column: 2 / 3; + align-self: auto; + justify-self: auto; + background: plum; + } + + .legacy-center { + grid-column: 3 / 4; + align-self: flex-start; + justify-self: center; + background: orange; + } + </style> +</head> +<body> + <div class="masonry"> + <div class="flex-start-item">flex-start</div> + <div class="flex-end-item">flex-end</div> + <div class="mixed-legacy">mixed</div> + <div class="normal-item">normal</div> + <div class="auto-item">auto</div> + <div class="legacy-center">legacy-center</div> + </div> + + <div class="masonry" style="direction: rtl;"> + <div class="flex-start-item">flex-start</div> + <div class="flex-end-item">flex-end</div> + <div class="mixed-legacy">mixed</div> + <div class="normal-item">normal</div> + <div class="auto-item">auto</div> + <div class="legacy-center">legacy-center</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-004-ref.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + html,body { + color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; + } + + .grid { + position: relative; + display: grid; + grid-template-columns: 80px 80px 80px; + grid-template-rows: 200px; + width: 290px; + gap: 10px; + padding: 10px; + border: 2px solid black; + margin: 10px; + } + + .grid > div { + position: absolute; + border: 1px solid #333; + width: 50px; + height: 25px; + display: flex; + align-items: center; + justify-content: center; + } + + .start-start { + grid-column: 1 / 2; + grid-row: 1 / 2; + align-self: start; + justify-self: start; + background: red; + } + + .start-center { + grid-column: 2 / 3; + grid-row: 1 / 2; + align-self: start; + justify-self: center; + background: orange; + } + + .start-end { + grid-column: 3 / 4; + grid-row: 1 / 2; + align-self: start; + justify-self: end; + background: yellow; + } + + .center-start { + grid-column: 1 / 2; + grid-row: 1 / 2; + align-self: center; + justify-self: start; + background: green; + } + + .center-center { + grid-column: 2 / 3; + grid-row: 1 / 2; + align-self: center; + justify-self: center; + background: blue; + } + + .center-end { + grid-column: 3 / 4; + grid-row: 1 / 2; + align-self: center; + justify-self: end; + background: indigo; + } + + .end-start { + grid-column: 1 / 2; + grid-row: 1 / 2; + align-self: end; + justify-self: start; + background: violet; + } + + .end-center { + grid-column: 2 / 3; + grid-row: 1 / 2; + align-self: end; + justify-self: center; + background: pink; + } + + .end-end { + grid-column: 3 / 4; + grid-row: 1 / 2; + align-self: end; + justify-self: end; + background: brown; + } + </style> +</head> +<body> + <div class="grid"> + <div class="start-start">SS</div> + <div class="start-center">SC</div> + <div class="start-end">SE</div> + <div class="center-start">CS</div> + <div class="center-center">CC</div> + <div class="center-end">CE</div> + <div class="end-start">ES</div> + <div class="end-center">EC</div> + <div class="end-end">EE</div> + </div> + + <div class="grid" style="direction: rtl;"> + <div class="start-start">SS</div> + <div class="start-center">SC</div> + <div class="start-end">SE</div> + <div class="center-start">CS</div> + <div class="center-center">CC</div> + <div class="center-end">CE</div> + <div class="end-start">ES</div> + <div class="end-center">EC</div> + <div class="end-end">EE</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-alignment-positioned-items-004.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Combined align-self and justify-self for positioned items</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="column-masonry-alignment-positioned-items-004-ref.html"> + <style> + html,body { + color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; + } + + .masonry { + position: relative; + display: masonry; + grid-template-columns: 80px 80px 80px; + width: 290px; + height: 200px; + gap: 10px; + padding: 10px; + border: 2px solid black; + margin: 10px; + } + + .masonry > div { + position: absolute; + border: 1px solid #333; + width: 50px; + height: 25px; + display: flex; + align-items: center; + justify-content: center; + } + + .start-start { + grid-column: 1 / 2; + align-self: start; + justify-self: start; + background: red; + } + + .start-center { + grid-column: 2 / 3; + align-self: start; + justify-self: center; + background: orange; + } + + .start-end { + grid-column: 3 / 4; + align-self: start; + justify-self: end; + background: yellow; + } + + .center-start { + grid-column: 1 / 2; + align-self: center; + justify-self: start; + background: green; + } + + .center-center { + grid-column: 2 / 3; + align-self: center; + justify-self: center; + background: blue; + } + + .center-end { + grid-column: 3 / 4; + align-self: center; + justify-self: end; + background: indigo; + } + + .end-start { + grid-column: 1 / 2; + align-self: end; + justify-self: start; + background: violet; + } + + .end-center { + grid-column: 2 / 3; + align-self: end; + justify-self: center; + background: pink; + } + + .end-end { + grid-column: 3 / 4; + align-self: end; + justify-self: end; + background: brown; + } + </style> +</head> +<body> + <div class="masonry"> + <div class="start-start">SS</div> + <div class="start-center">SC</div> + <div class="start-end">SE</div> + <div class="center-start">CS</div> + <div class="center-center">CC</div> + <div class="center-end">CE</div> + <div class="end-start">ES</div> + <div class="end-center">EC</div> + <div class="end-end">EE</div> + </div> + + <div class="masonry" style="direction: rtl;"> + <div class="start-start">SS</div> + <div class="start-center">SC</div> + <div class="start-end">SE</div> + <div class="center-start">CS</div> + <div class="center-center">CC</div> + <div class="center-end">CE</div> + <div class="end-start">ES</div> + <div class="end-center">EC</div> + <div class="end-end">EE</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-justify-self-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-justify-self-001-ref.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; + } + + .grid { + display: grid; + gap: 2px; + grid-template-columns: repeat(3, 70px); + grid-template-rows: repeat(4, min-content); + color: #444; + border: 1px solid; + padding: 2px; + height: 180px; + margin: 5px; + } + + item { + background-color: #444; + color: #fff; + padding: 2px; + height: 30px; + } + + .start { + justify-self: start; + background-color: red; + } + + .end { + justify-self: end; + background-color: blue; + } + + .center { + justify-self: center; + background-color: green; + } + + .stretch { + justify-self: stretch; + background-color: orange; + } + + .auto { + justify-self: auto; + background-color: gray; + } + + .narrow { + width: 20px; + } + + .medium { + width: 30px; + } + + .wide { + width: 45px; + } + </style> +</head> +<body> +<div class="grid"> + <item class="start narrow">S1</item> + <item class="start medium">S2</item> + <item class="start wide">S3</item> + <item class="center narrow">C1</item> + <item class="center medium">C2</item> + <item class="center wide">C3</item> + <item class="end narrow">E1</item> + <item class="end medium">E2</item> + <item class="end wide">E3</item> + <item class="stretch">ST1</item> + <item class="stretch">ST2</item> + <item class="stretch">ST3</item> +</div> + +<div class="grid" style="justify-items: start;"> + <item class="auto narrow">A1</item> + <item class="auto medium">A2</item> + <item class="auto wide">A3</item> + <item class="center narrow">C1</item> + <item class="center medium">C2</item> + <item class="center wide">C3</item> + <item class="end narrow">E1</item> + <item class="end medium">E2</item> + <item class="end wide">E3</item> + <item class="stretch">ST1</item> + <item class="stretch">ST2</item> + <item class="stretch">ST3</item> +</div> + +<div class="grid" style="justify-items: center;"> + <item class="auto narrow">A1</item> + <item class="auto medium">A2</item> + <item class="auto wide">A3</item> + <item class="start narrow">S1</item> + <item class="start medium">S2</item> + <item class="start wide">S3</item> + <item class="end narrow">E1</item> + <item class="end medium">E2</item> + <item class="end wide">E3</item> + <item class="stretch">ST1</item> + <item class="stretch">ST2</item> + <item class="stretch">ST3</item> +</div> + +<div class="grid" style="justify-items: end;"> + <item class="auto narrow">A1</item> + <item class="auto medium">A2</item> + <item class="auto wide">A3</item> + <item class="start narrow">S1</item> + <item class="start medium">S2</item> + <item class="start wide">S3</item> + <item class="center narrow">C1</item> + <item class="center medium">C2</item> + <item class="center wide">C3</item> + <item class="stretch">ST1</item> + <item class="stretch">ST2</item> + <item class="stretch">ST3</item> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-justify-self-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-justify-self-001.html @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Masonry layout with `justify-self`</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="column-masonry-justify-self-001-ref.html"> + <style> + html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; + } + + .masonry { + display: masonry; + gap: 2px; + grid-template-columns: repeat(3, 70px); + color: #444; + border: 1px solid; + padding: 2px; + height: 180px; + margin: 5px; + vertical-align: top; + } + + item { + background-color: #444; + color: #fff; + padding: 2px; + height: 30px; + } + + .start { + justify-self: start; + background-color: red; + } + + .end { + justify-self: end; + background-color: blue; + } + + .center { + justify-self: center; + background-color: green; + } + + .stretch { + justify-self: stretch; + background-color: orange; + } + + .auto { + justify-self: auto; + background-color: gray; + } + + .narrow { + width: 20px; + } + + .medium { + width: 30px; + } + + .wide { + width: 45px; + } + </style> +</head> +<body> +<div class="masonry"> + <item class="start narrow">S1</item> + <item class="start medium">S2</item> + <item class="start wide">S3</item> + <item class="center narrow">C1</item> + <item class="center medium">C2</item> + <item class="center wide">C3</item> + <item class="end narrow">E1</item> + <item class="end medium">E2</item> + <item class="end wide">E3</item> + <item class="stretch">ST1</item> + <item class="stretch">ST2</item> + <item class="stretch">ST3</item> +</div> + +<div class="masonry" style="justify-items: start;"> + <item class="auto narrow">A1</item> + <item class="auto medium">A2</item> + <item class="auto wide">A3</item> + <item class="center narrow">C1</item> + <item class="center medium">C2</item> + <item class="center wide">C3</item> + <item class="end narrow">E1</item> + <item class="end medium">E2</item> + <item class="end wide">E3</item> + <item class="stretch">ST1</item> + <item class="stretch">ST2</item> + <item class="stretch">ST3</item> +</div> + +<div class="masonry" style="justify-items: center;"> + <item class="auto narrow">A1</item> + <item class="auto medium">A2</item> + <item class="auto wide">A3</item> + <item class="start narrow">S1</item> + <item class="start medium">S2</item> + <item class="start wide">S3</item> + <item class="end narrow">E1</item> + <item class="end medium">E2</item> + <item class="end wide">E3</item> + <item class="stretch">ST1</item> + <item class="stretch">ST2</item> + <item class="stretch">ST3</item> +</div> + +<div class="masonry" style="justify-items: end;"> + <item class="auto narrow">A1</item> + <item class="auto medium">A2</item> + <item class="auto wide">A3</item> + <item class="start narrow">S1</item> + <item class="start medium">S2</item> + <item class="start wide">S3</item> + <item class="center narrow">C1</item> + <item class="center medium">C2</item> + <item class="center wide">C3</item> + <item class="stretch">ST1</item> + <item class="stretch">ST2</item> + <item class="stretch">ST3</item> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-justify-self-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-justify-self-002-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; + } + + .grid { + display: grid; + gap: 2px; + grid-template-columns: repeat(3, 70px); + grid-template-rows: repeat(2, min-content); + color: #444; + border: 1px solid; + padding: 2px; + height: 150px; + margin: 5px; + } + + item { + background-color: #444; + color: #fff; + padding: 2px; + height: 30px; + } + + .safe-end { + justify-self: safe end; + background-color: purple; + width: 80px; + } + + .safe-center { + justify-self: safe center; + background-color: teal; + width: 75px; + } + + .unsafe-end { + justify-self: end; + background-color: darkmagenta; + width: 80px; + } + + .unsafe-center { + justify-self: center; + background-color: darkcyan; + width: 75px; + } + + .normal { + justify-self: normal; + background-color: brown; + } + + .self-start { + justify-self: self-start; + background-color: darkred; + } + + .self-end { + justify-self: self-end; + background-color: darkblue; + } + + .narrow { + width: 20px; + } + </style> +</head> +<body> +<div class="grid"> + <item class="normal">N1</item> + <item class="safe-end">SE1</item> + <item class="normal">N2</item> + <item class="normal">N3</item> + <item class="unsafe-end">UE1</item> + <item class="normal">N4</item> +</div> + +<div class="grid"> + <item class="normal">N1</item> + <item class="safe-center">SC1</item> + <item class="normal">N2</item> + <item class="normal">N3</item> + <item class="unsafe-center">UC1</item> + <item class="normal">N4</item> +</div> + +<div class="grid"> + <item class="self-start narrow">SS1</item> + <item class="self-end narrow">SE2</item> + <item class="self-start narrow">SS3</item> + <item class="self-end narrow">SE4</item> + <item class="self-start narrow">SS5</item> + <item class="self-end narrow">SE6</item> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-justify-self-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-justify-self-002.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Masonry layout with `justify-self` advanced values and safe/unsafe alignment</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="column-masonry-justify-self-002-ref.html"> + <style> + html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; + } + + .masonry { + display: masonry; + gap: 2px; + grid-template-columns: repeat(3, 70px); + color: #444; + border: 1px solid; + padding: 2px; + height: 150px; + margin: 5px; + vertical-align: top; + } + + item { + background-color: #444; + color: #fff; + padding: 2px; + height: 30px; + } + + .safe-end { + justify-self: safe end; + background-color: purple; + width: 80px; + } + + .safe-center { + justify-self: safe center; + background-color: teal; + width: 75px; + } + + .unsafe-end { + justify-self: end; + background-color: darkmagenta; + width: 80px; + } + + .unsafe-center { + justify-self: center; + background-color: darkcyan; + width: 75px; + } + + .self-start { + justify-self: self-start; + background-color: darkred; + } + + .self-end { + justify-self: self-end; + background-color: darkblue; + } + + .normal { + justify-self: normal; + background-color: brown; + } + + .narrow { + width: 20px; + } + </style> +</head> +<body> +<div class="masonry"> + <item class="normal">N1</item> + <item class="safe-end">SE1</item> + <item class="normal">N2</item> + <item class="normal">N3</item> + <item class="unsafe-end">UE1</item> + <item class="normal">N4</item> +</div> + +<div class="masonry"> + <item class="normal">N1</item> + <item class="safe-center">SC1</item> + <item class="normal">N2</item> + <item class="normal">N3</item> + <item class="unsafe-center">UC1</item> + <item class="normal">N4</item> +</div> + +<div class="masonry"> + <item class="self-start narrow">SS1</item> + <item class="self-end narrow">SE2</item> + <item class="self-start narrow">SS3</item> + <item class="self-end narrow">SE4</item> + <item class="self-start narrow">SS5</item> + <item class="self-end narrow">SE6</item> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-justify-self-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-justify-self-003-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; + } + + .grid { + display: grid; + width: 250px; + height: 100px; + grid-template-columns: repeat(4, 1fr); + gap: 5px; + border: 1px solid black; + margin-bottom: 20px; + } + + .item { + background-color: #444; + color: #fff; + padding: 2px; + height: 35px; + } + + .img-placeholder { + width: 30px; + height: 30px; + background: linear-gradient(45deg, #666, #999); + display: inline-block; + } + + input[type="text"] { + background-color: #f0f0f0; + border: 1px solid #999; + padding: 2px; + width: 40px; + height: auto; + } + + button { + background-color: #ddd; + border: 1px solid #999; + padding: 2px 4px; + cursor: pointer; + height: auto; + } + + .start { + justify-self: start; + background-color: red; + } + + .end { + justify-self: end; + background-color: blue; + } + + .center { + justify-self: center; + background-color: green; + } + + .stretch { + justify-self: stretch; + background-color: orange; + } + </style> +</head> +<body> +<div class="grid"> + <div class="item start"> + <div class="img-placeholder"></div> + </div> + <div class="item center"> + <div class="img-placeholder"></div> + </div> + <div class="item end"> + <div class="img-placeholder"></div> + </div> + <div class="item stretch"> + <div class="img-placeholder" style="width: 100%;"></div> + </div> +</div> + +<div class="grid"> + <div class="item start"> + <input type="text" value="start"> + </div> + <div class="item center"> + <button>center</button> + </div> + <div class="item end"> + <input type="text" value="end"> + </div> + <div class="item stretch"> + <button style="width: 100%;">stretch</button> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-justify-self-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-masonry-justify-self-003.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Masonry layout with `justify-self`</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="column-masonry-justify-self-003-ref.html"> + <style> + html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; + } + + .masonry { + display: masonry; + width: 250px; + height: 100px; + grid-template-columns: repeat(4, 1fr); + gap: 5px; + border: 1px solid black; + margin-bottom: 20px; + } + + .item { + background-color: #444; + color: #fff; + padding: 2px; + height: 35px; + } + + .img-placeholder { + width: 30px; + height: 30px; + background: linear-gradient(45deg, #666, #999); + display: inline-block; + } + + input[type="text"] { + background-color: #f0f0f0; + border: 1px solid #999; + padding: 2px; + width: 40px; + height: auto; + } + + button { + background-color: #ddd; + border: 1px solid #999; + padding: 2px 4px; + cursor: pointer; + height: auto; + } + + .start { + justify-self: start; + background-color: red; + } + + .end { + justify-self: end; + background-color: blue; + } + + .center { + justify-self: center; + background-color: green; + } + + .stretch { + justify-self: stretch; + background-color: orange; + } + </style> +</head> +<body> +<div class="masonry"> + <div class="item start"> + <div class="img-placeholder"></div> + </div> + <div class="item center"> + <div class="img-placeholder"></div> + </div> + <div class="item end"> + <div class="img-placeholder"></div> + </div> + <div class="item stretch"> + <div class="img-placeholder" style="width: 100%;"></div> + </div> +</div> + +<div class="masonry"> + <div class="item start"> + <input type="text" value="start"> + </div> + <div class="item center"> + <button>center</button> + </div> + <div class="item end"> + <input type="text" value="end"> + </div> + <div class="item stretch"> + <button style="width: 100%;">stretch</button> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-align-self-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-align-self-001-ref.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; + } + + .grid { + display: grid; + gap: 2px; + grid-template-rows: repeat(3, 40px); + grid-template-columns: repeat(4, min-content); + color: #444; + border: 1px solid; + padding: 2px; + width: 250px; + margin: 5px; + } + + item { + background-color: #444; + color: #fff; + padding: 2px; + width: 45px; + } + + .start { + align-self: start; + background-color: red; + } + + .end { + align-self: end; + background-color: blue; + } + + .center { + align-self: center; + background-color: green; + } + + .stretch { + align-self: stretch; + background-color: orange; + } + + .auto { + align-self: auto; + background-color: gray; + } + + .short { + height: 15px; + } + + .medium { + height: 20px; + } + + .tall { + height: 30px; + } + </style> +</head> +<body> +<div class="grid"> + <item class="start short">S1</item> + <item class="center short">C1</item> + <item class="end short">E1</item> + <item class="stretch">ST1</item> + <item class="start medium">S2</item> + <item class="center medium">C2</item> + <item class="end medium">E2</item> + <item class="stretch">ST2</item> + <item class="start tall">S3</item> + <item class="center tall">C3</item> + <item class="end tall">E3</item> + <item class="stretch">ST3</item> +</div> + +<div class="grid" style="align-items: start;"> + <item class="auto short">A1</item> + <item class="center short">C1</item> + <item class="end short">E1</item> + <item class="stretch">ST1</item> + <item class="auto medium">A2</item> + <item class="center medium">C2</item> + <item class="end medium">E2</item> + <item class="stretch">ST2</item> + <item class="auto tall">A3</item> + <item class="center tall">C3</item> + <item class="end tall">E3</item> + <item class="stretch">ST3</item> +</div> + +<div class="grid" style="align-items: center;"> + <item class="auto short">A1</item> + <item class="start short">S1</item> + <item class="end short">E1</item> + <item class="stretch">ST1</item> + <item class="auto medium">A2</item> + <item class="start medium">S2</item> + <item class="end medium">E2</item> + <item class="stretch">ST2</item> + <item class="auto tall">A3</item> + <item class="start tall">S3</item> + <item class="end tall">E3</item> + <item class="stretch">ST3</item> +</div> + +<div class="grid" style="align-items: end;"> + <item class="auto short">A1</item> + <item class="start short">S1</item> + <item class="center short">C1</item> + <item class="stretch">ST1</item> + <item class="auto medium">A2</item> + <item class="start medium">S2</item> + <item class="center medium">C2</item> + <item class="stretch">ST2</item> + <item class="auto tall">A3</item> + <item class="start tall">S3</item> + <item class="center tall">C3</item> + <item class="stretch">ST3</item> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-align-self-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-align-self-001.html @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Masonry layout with `align-self`</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="row-masonry-align-self-001-ref.html"> + <style> + html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; + } + + .masonry { + display: masonry; + gap: 2px; + grid-template-rows: repeat(3, 40px); + masonry-direction: row; + color: #444; + border: 1px solid; + padding: 2px; + width: 250px; + margin: 5px; + } + + item { + background-color: #444; + color: #fff; + padding: 2px; + width: 45px; + } + + .start { + align-self: start; + background-color: red; + } + + .end { + align-self: end; + background-color: blue; + } + + .center { + align-self: center; + background-color: green; + } + + .stretch { + align-self: stretch; + background-color: orange; + } + + .auto { + align-self: auto; + background-color: gray; + } + + .short { + height: 15px; + } + + .medium { + height: 20px; + } + + .tall { + height: 30px; + } + </style> +</head> +<body> +<div class="masonry"> + <item class="start short">S1</item> + <item class="start medium">S2</item> + <item class="start tall">S3</item> + <item class="center short">C1</item> + <item class="center medium">C2</item> + <item class="center tall">C3</item> + <item class="end short">E1</item> + <item class="end medium">E2</item> + <item class="end tall">E3</item> + <item class="stretch">ST1</item> + <item class="stretch">ST2</item> + <item class="stretch">ST3</item> +</div> + +<div class="masonry" style="align-items: start;"> + <item class="auto short">A1</item> + <item class="auto medium">A2</item> + <item class="auto tall">A3</item> + <item class="center short">C1</item> + <item class="center medium">C2</item> + <item class="center tall">C3</item> + <item class="end short">E1</item> + <item class="end medium">E2</item> + <item class="end tall">E3</item> + <item class="stretch">ST1</item> + <item class="stretch">ST2</item> + <item class="stretch">ST3</item> +</div> + +<div class="masonry" style="align-items: center;"> + <item class="auto short">A1</item> + <item class="auto medium">A2</item> + <item class="auto tall">A3</item> + <item class="start short">S1</item> + <item class="start medium">S2</item> + <item class="start tall">S3</item> + <item class="end short">E1</item> + <item class="end medium">E2</item> + <item class="end tall">E3</item> + <item class="stretch">ST1</item> + <item class="stretch">ST2</item> + <item class="stretch">ST3</item> +</div> + +<div class="masonry" style="align-items: end;"> + <item class="auto short">A1</item> + <item class="auto medium">A2</item> + <item class="auto tall">A3</item> + <item class="start short">S1</item> + <item class="start medium">S2</item> + <item class="start tall">S3</item> + <item class="center short">C1</item> + <item class="center medium">C2</item> + <item class="center tall">C3</item> + <item class="stretch">ST1</item> + <item class="stretch">ST2</item> + <item class="stretch">ST3</item> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-align-self-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-align-self-002-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; + } + + .grid { + display: grid; + gap: 2px; + grid-template-rows: repeat(3, 40px); + grid-template-columns: repeat(2, min-content); + color: #444; + border: 1px solid; + padding: 2px; + width: 180px; + margin: 5px; + } + + item { + background-color: #444; + color: #fff; + padding: 2px; + width: 45px; + } + + .safe-end { + align-self: safe end; + background-color: purple; + height: 50px; + } + + .safe-center { + align-self: safe center; + background-color: teal; + height: 45px; + } + + .unsafe-end { + align-self: end; + background-color: darkmagenta; + height: 50px; + } + + .unsafe-center { + align-self: center; + background-color: darkcyan; + height: 45px; + } + + .normal { + align-self: normal; + background-color: brown; + } + + .self-start { + align-self: self-start; + background-color: darkred; + } + + .self-end { + align-self: self-end; + background-color: darkblue; + } + + .short { + height: 15px; + } + </style> +</head> +<body> +<div class="grid"> + <item class="normal">N1</item> + <item class="normal">N3</item> + <item class="safe-end">SE1</item> + <item class="unsafe-end">UE1</item> + <item class="normal">N2</item> + <item class="normal">N4</item> +</div> + +<div class="grid"> + <item class="normal">N1</item> + <item class="normal">N3</item> + <item class="safe-center">SC1</item> + <item class="unsafe-center">UC1</item> + <item class="normal">N2</item> + <item class="normal">N4</item> +</div> + +<div class="grid"> + <item class="self-start short">SS1</item> + <item class="self-end short">SE4</item> + <item class="self-end short">SE2</item> + <item class="self-start short">SS5</item> + <item class="self-start short">SS3</item> + <item class="self-end short">SE6</item> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-align-self-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-align-self-002.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Masonry layout with `align-self` advanced values and safe/unsafe alignment</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="row-masonry-align-self-002-ref.html"> + <style> + html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; + } + + .masonry { + display: masonry; + gap: 2px; + grid-template-rows: repeat(3, 40px); + masonry-direction: row; + color: #444; + border: 1px solid; + padding: 2px; + width: 180px; + margin: 5px; + vertical-align: top; + } + + item { + background-color: #444; + color: #fff; + padding: 2px; + width: 45px; + } + + .safe-end { + align-self: safe end; + background-color: purple; + height: 50px; + } + + .safe-center { + align-self: safe center; + background-color: teal; + height: 45px; + } + + .unsafe-end { + align-self: end; + background-color: darkmagenta; + height: 50px; + } + + .unsafe-center { + align-self: center; + background-color: darkcyan; + height: 45px; + } + + .self-start { + align-self: self-start; + background-color: darkred; + } + + .self-end { + align-self: self-end; + background-color: darkblue; + } + + .normal { + align-self: normal; + background-color: brown; + } + + .short { + height: 15px; + } + </style> +</head> +<body> +<div class="masonry"> + <item class="normal">N1</item> + <item class="safe-end">SE1</item> + <item class="normal">N2</item> + <item class="normal">N3</item> + <item class="unsafe-end">UE1</item> + <item class="normal">N4</item> +</div> + +<div class="masonry"> + <item class="normal">N1</item> + <item class="safe-center">SC1</item> + <item class="normal">N2</item> + <item class="normal">N3</item> + <item class="unsafe-center">UC1</item> + <item class="normal">N4</item> +</div> + +<div class="masonry"> + <item class="self-start short">SS1</item> + <item class="self-end short">SE2</item> + <item class="self-start short">SS3</item> + <item class="self-end short">SE4</item> + <item class="self-start short">SS5</item> + <item class="self-end short">SE6</item> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-align-self-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-align-self-003-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + .grid { + display: grid; + width: 100px; + height: 250px; + grid-template-rows: repeat(4, 1fr); + gap: 5px; + border: 1px solid black; + margin-bottom: 20px; + } + + .item { + background-color: #444; + color: #fff; + padding: 2px; + width: 50px; + } + + .img-placeholder { + width: 48px; + height: 30px; + background: linear-gradient(45deg, #666, #999); + display: inline-block; + } + + input[type="text"] { + background-color: #f0f0f0; + border: 1px solid #999; + padding: 2px; + height: 20px; + width: auto; + } + + button { + background-color: #ddd; + border: 1px solid #999; + padding: 2px 4px; + cursor: pointer; + width: auto; + } + + .start { + align-self: start; + background-color: red; + grid-row: 1/2; + } + + .center { + align-self: center; + background-color: green; + grid-row: 2/3; + } + + .end { + align-self: end; + background-color: blue; + grid-row: 3/4; + } + + .stretch { + align-self: stretch; + background-color: orange; + grid-row: 4/5; + } + </style> +</head> +<body> +<div class="grid"> + <div class="item start"> + <div class="img-placeholder"></div> + </div> + <div class="item center"> + <div class="img-placeholder"></div> + </div> + <div class="item end"> + <div class="img-placeholder"></div> + </div> + <div class="item stretch"> + <div class="img-placeholder" style="height: 100%;"></div> + </div> +</div> + +<div class="grid"> + <div class="item start"> + <input type="text" value="start" style="width: 43px;"> + </div> + <div class="item center"> + <button>center</button> + </div> + <div class="item end"> + <input type="text" value="end" style="width: 43px;"> + </div> + <div class="item stretch"> + <button style="height: 100%;">stretch</button> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-align-self-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-align-self-003.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Masonry layout with `align-self`</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="row-masonry-align-self-003-ref.html"> + <style> + .masonry { + display: masonry; + width: 100px; + height: 250px; + grid-template-rows: repeat(4, 1fr); + masonry-direction: row; + gap: 5px; + border: 1px solid black; + margin-bottom: 20px; + } + + .item { + background-color: #444; + color: #fff; + padding: 2px; + width: 50px; + } + + .img-placeholder { + width: 48px; + height: 30px; + background: linear-gradient(45deg, #666, #999); + display: inline-block; + } + + input[type="text"] { + background-color: #f0f0f0; + border: 1px solid #999; + padding: 2px; + height: 20px; + width: auto; + } + + button { + background-color: #ddd; + border: 1px solid #999; + padding: 2px 4px; + cursor: pointer; + width: auto; + } + + .start { + align-self: start; + background-color: red; + } + + .end { + align-self: end; + background-color: blue; + } + + .center { + align-self: center; + background-color: green; + } + + .stretch { + align-self: stretch; + background-color: orange; + } + </style> +</head> +<body> +<div class="masonry"> + <div class="item start"> + <div class="img-placeholder"></div> + </div> + <div class="item center"> + <div class="img-placeholder"></div> + </div> + <div class="item end"> + <div class="img-placeholder"></div> + </div> + <div class="item stretch"> + <div class="img-placeholder" style="height: 100%;"></div> + </div> +</div> + +<div class="masonry"> + <div class="item start"> + <input type="text" value="start" style="width: 43px;"> + </div> + <div class="item center"> + <button>center</button> + </div> + <div class="item end"> + <input type="text" value="end" style="width: 43px;"> + </div> + <div class="item stretch"> + <button style="height: 100%;">stretch</button> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-001-ref.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; + } + + .grid { + position: relative; + display: grid; + grid-template-columns: 200px; + grid-template-rows: 100px 150px; + width: 200px; + height: 300px; + background: grey; + gap: 10px; + padding: 10px; + } + + .grid > div { + position: absolute; + } + + .grid > :nth-child(1) { + grid-column: 1/2; + grid-row: 1/2; + justify-self: start; + background: green; + } + + .grid > :nth-child(2) { + grid-column: 1/2; + grid-row: 2/3; + justify-self: start; + background: blue; + } + + .grid > :nth-child(3) { + grid-column: 1/2; + grid-row: 1/2; + justify-self: end; + background: yellow; + } + + .grid > :nth-child(4) { + grid-column: 1/2; + grid-row: 2/3; + justify-self: end; + background: red; + } + </style> +</head> +<body> +<div class="grid"> + <div>X XX X</div> + <div>XX X<br>X XXX X<br>XX XXX</div> + <div>X XX X</div> + <div>XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid" style="direction: rtl;"> + <div>X XX X</div> + <div>XX X<br>X XXX X<br>XX XXX</div> + <div>X XX X</div> + <div>XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Self-Alignment along row axis of absolute positioned items</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="row-masonry-alignment-positioned-items-001-ref.html"> + <style> + html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; + } + + .masonry { + position: relative; + display: masonry; + masonry-direction: row; + grid-template-rows: 100px 150px; + width: 200px; + height: 300px; + background: grey; + gap: 10px; + padding: 10px; + align-items: start; + } + + .masonry > div { + position: absolute; + } + + .masonry > :nth-child(1) { + grid-row: 1 / 2; + justify-self: start; + background: green; + } + + .masonry > :nth-child(2) { + grid-row: 2 / 3; + justify-self: start; + background: blue; + } + + .masonry > :nth-child(3) { + grid-row: 1 / 2; + justify-self: end; + background: yellow; + } + + .masonry > :nth-child(4) { + grid-row: 2 / 3; + justify-self: end; + background: red; + } + </style> +</head> +<body> +<div class="masonry"> + <div>X XX X</div> + <div>XX X<br>X XXX X<br>XX XXX</div> + <div>X XX X</div> + <div>XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="masonry" style="direction: rtl;"> + <div>X XX X</div> + <div>XX X<br>X XXX X<br>XX XXX</div> + <div>X XX X</div> + <div>XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-002-ref.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + html,body { + color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; + } + + .grid { + position: relative; + display: grid; + grid-template-columns: 150px; + grid-template-rows: 80px 80px 80px; + width: 150px; + height: 290px; + gap: 10px; + padding: 10px; + border: 2px solid black; + margin: 10px; + } + + .grid > div { + position: absolute; + border: 1px solid #333; + width: 30px; + height: 120px; + display: flex; + align-items: center; + justify-content: center; + } + + .safe-start { + grid-column: 1 / 2; + grid-row: 1 / 2; + justify-self: safe start; + background: lightcoral; + } + + .unsafe-start { + grid-column: 1 / 2; + grid-row: 2 / 3; + justify-self: unsafe start; + background: lightblue; + } + + .safe-end { + grid-column: 1 / 2; + grid-row: 3 / 4; + justify-self: safe end; + background: lightgreen; + } + + .unsafe-end { + grid-column: 1 / 2; + grid-row: 1 / 2; + justify-self: unsafe end; + background: lightyellow; + } + + .safe-center { + grid-column: 1 / 2; + grid-row: 2 / 3; + justify-self: safe center; + background: plum; + } + + .unsafe-center { + grid-column: 1 / 2; + grid-row: 3 / 4; + justify-self: unsafe center; + background: orange; + } + </style> +</head> +<body> + <div class="grid"> + <div class="safe-start">safe-start</div> + <div class="unsafe-start">unsafe-start</div> + <div class="safe-end">safe-end</div> + <div class="unsafe-end">unsafe-end</div> + <div class="safe-center">safe-center</div> + <div class="unsafe-center">unsafe-center</div> + </div> + + <div class="grid" style="direction: rtl;"> + <div class="safe-start">safe-start</div> + <div class="unsafe-start">unsafe-start</div> + <div class="safe-end">safe-end</div> + <div class="unsafe-end">unsafe-end</div> + <div class="safe-center">safe-center</div> + <div class="unsafe-center">unsafe-center</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-002.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Safe and unsafe alignment values for positioned items</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="row-masonry-alignment-positioned-items-002-ref.html"> + <style> + html,body { + color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; + } + + .masonry { + position: relative; + display: masonry; + masonry-direction: row; + grid-template-rows: 80px 80px 80px; + width: 150px; + height: 290px; + gap: 10px; + padding: 10px; + border: 2px solid black; + margin: 10px; + } + + .masonry > div { + position: absolute; + border: 1px solid #333; + width: 30px; + height: 120px; + display: flex; + align-items: center; + justify-content: center; + } + + .safe-start { + grid-row: 1 / 2; + justify-self: safe start; + background: lightcoral; + } + + .unsafe-start { + grid-row: 2 / 3; + justify-self: unsafe start; + background: lightblue; + } + + .safe-end { + grid-row: 3 / 4; + justify-self: safe end; + background: lightgreen; + } + + .unsafe-end { + grid-row: 1 / 2; + justify-self: unsafe end; + background: lightyellow; + } + + .safe-center { + grid-row: 2 / 3; + justify-self: safe center; + background: plum; + } + + .unsafe-center { + grid-row: 3 / 4; + justify-self: unsafe center; + background: orange; + } + </style> +</head> +<body> + <div class="masonry"> + <div class="safe-start">safe-start</div> + <div class="unsafe-start">unsafe-start</div> + <div class="safe-end">safe-end</div> + <div class="unsafe-end">unsafe-end</div> + <div class="safe-center">safe-center</div> + <div class="unsafe-center">unsafe-center</div> + </div> + + <div class="masonry" style="direction: rtl;"> + <div class="safe-start">safe-start</div> + <div class="unsafe-start">unsafe-start</div> + <div class="safe-end">safe-end</div> + <div class="unsafe-end">unsafe-end</div> + <div class="safe-center">safe-center</div> + <div class="unsafe-center">unsafe-center</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-003-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + html,body { + color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; + } + + .grid { + position: relative; + display: grid; + grid-template-columns: 150px; + grid-template-rows: 90px 90px 90px; + width: 150px; + height: 320px; + gap: 10px; + padding: 15px; + border: 2px solid black; + margin: 10px; + } + + .grid > div { + position: absolute; + border: 1px solid #333; + width: 30px; + height: 70px; + display: flex; + align-items: center; + justify-content: center; + } + + .flex-start-item { + grid-column: 1 / 2; + grid-row: 1 / 2; + justify-self: flex-start; + align-self: flex-start; + background: lightcoral; + } + + .flex-end-item { + grid-column: 1 / 2; + grid-row: 2 / 3; + justify-self: flex-end; + align-self: flex-end; + background: lightblue; + } + + .mixed-legacy { + grid-column: 1 / 2; + grid-row: 3 / 4; + justify-self: flex-start; + align-self: end; + background: lightgreen; + } + + .normal-item { + grid-column: 1 / 2; + grid-row: 1 / 2; + justify-self: normal; + align-self: normal; + background: lightyellow; + } + + .auto-item { + grid-column: 1 / 2; + grid-row: 2 / 3; + justify-self: auto; + align-self: auto; + background: plum; + } + + .legacy-center { + grid-column: 1 / 2; + grid-row: 3 / 4; + justify-self: flex-start; + align-self: center; + background: orange; + } + </style> +</head> +<body> + <div class="grid"> + <div class="flex-start-item">flex-start</div> + <div class="flex-end-item">flex-end</div> + <div class="mixed-legacy">mixed</div> + <div class="normal-item">normal</div> + <div class="auto-item">auto</div> + <div class="legacy-center">legacy-center</div> + </div> + + <div class="grid" style="direction: rtl;"> + <div class="flex-start-item">flex-start</div> + <div class="flex-end-item">flex-end</div> + <div class="mixed-legacy">mixed</div> + <div class="normal-item">normal</div> + <div class="auto-item">auto</div> + <div class="legacy-center">legacy-center</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-003.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Mixed alignment values for positioned items</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="row-masonry-alignment-positioned-items-003-ref.html"> + <style> + html,body { + color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; + } + + .masonry { + position: relative; + display: masonry; + masonry-direction: row; + grid-template-rows: 90px 90px 90px; + width: 150px; + height: 320px; + gap: 10px; + padding: 15px; + border: 2px solid black; + margin: 10px; + } + + .masonry > div { + position: absolute; + border: 1px solid #333; + width: 30px; + height: 70px; + display: flex; + align-items: center; + justify-content: center; + } + + .flex-start-item { + grid-row: 1 / 2; + justify-self: flex-start; + align-self: flex-start; + background: lightcoral; + } + + .flex-end-item { + grid-row: 2 / 3; + justify-self: flex-end; + align-self: flex-end; + background: lightblue; + } + + .mixed-legacy { + grid-row: 3 / 4; + justify-self: flex-start; + align-self: end; + background: lightgreen; + } + + .normal-item { + grid-row: 1 / 2; + justify-self: normal; + align-self: normal; + background: lightyellow; + } + + .auto-item { + grid-row: 2 / 3; + justify-self: auto; + align-self: auto; + background: plum; + } + + .legacy-center { + grid-row: 3 / 4; + justify-self: flex-start; + align-self: center; + background: orange; + } + </style> +</head> +<body> + <div class="masonry"> + <div class="flex-start-item">flex-start</div> + <div class="flex-end-item">flex-end</div> + <div class="mixed-legacy">mixed</div> + <div class="normal-item">normal</div> + <div class="auto-item">auto</div> + <div class="legacy-center">legacy-center</div> + </div> + + <div class="masonry" style="direction: rtl;"> + <div class="flex-start-item">flex-start</div> + <div class="flex-end-item">flex-end</div> + <div class="mixed-legacy">mixed</div> + <div class="normal-item">normal</div> + <div class="auto-item">auto</div> + <div class="legacy-center">legacy-center</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-004-ref.html @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + html,body { + color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; + } + + .grid { + position: relative; + display: grid; + grid-template-columns: 200px; + grid-template-rows: 80px 80px 80px; + width: 200px; + height: 290px; + gap: 10px; + padding: 10px; + border: 2px solid black; + margin: 10px; + } + + .grid > div { + position: absolute; + border: 1px solid #333; + width: 25px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + } + + .start-start { + grid-column: 1 / 2; + grid-row: 1 / 2; + justify-self: start; + align-self: start; + background: red; + } + + .start-center { + grid-column: 1 / 2; + grid-row: 2 / 3; + justify-self: start; + align-self: center; + background: orange; + } + + .start-end { + grid-column: 1 / 2; + grid-row: 3 / 4; + justify-self: start; + align-self: end; + background: yellow; + } + + .center-start { + grid-column: 1 / 2; + grid-row: 1 / 2; + justify-self: center; + align-self: start; + background: green; + } + + .center-center { + grid-column: 1 / 2; + grid-row: 2 / 3; + justify-self: center; + align-self: center; + background: blue; + } + + .center-end { + grid-column: 1 / 2; + grid-row: 3 / 4; + justify-self: center; + align-self: end; + background: indigo; + } + + .end-start { + grid-column: 1 / 2; + grid-row: 1 / 2; + justify-self: end; + align-self: start; + background: violet; + } + + .end-center { + grid-column: 1 / 2; + grid-row: 2 / 3; + justify-self: end; + align-self: center; + background: pink; + } + + .end-end { + grid-column: 1 / 2; + grid-row: 3 / 4; + justify-self: end; + align-self: end; + background: brown; + } + </style> +</head> +<body> + <div class="grid"> + <div class="start-start">SS</div> + <div class="start-center">SC</div> + <div class="start-end">SE</div> + <div class="center-start">CS</div> + <div class="center-center">CC</div> + <div class="center-end">CE</div> + <div class="end-start">ES</div> + <div class="end-center">EC</div> + <div class="end-end">EE</div> + </div> + + <div class="grid" style="direction: rtl;"> + <div class="start-start">SS</div> + <div class="start-center">SC</div> + <div class="start-end">SE</div> + <div class="center-start">CS</div> + <div class="center-center">CC</div> + <div class="center-end">CE</div> + <div class="end-start">ES</div> + <div class="end-center">EC</div> + <div class="end-end">EE</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-masonry-alignment-positioned-items-004.html @@ -0,0 +1,127 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Masonry Test: Combined justify-self and align-self for positioned items</title> + <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> + <link rel="match" href="row-masonry-alignment-positioned-items-004-ref.html"> + <style> + html,body { + color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; + } + + .masonry { + position: relative; + display: masonry; + masonry-direction: row; + grid-template-rows: 80px 80px 80px; + width: 200px; + height: 290px; + gap: 10px; + padding: 10px; + border: 2px solid black; + margin: 10px; + } + + .masonry > div { + position: absolute; + border: 1px solid #333; + width: 25px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + } + + .start-start { + grid-row: 1 / 2; + justify-self: start; + align-self: start; + background: red; + } + + .start-center { + grid-row: 2 / 3; + justify-self: start; + align-self: center; + background: orange; + } + + .start-end { + grid-row: 3 / 4; + justify-self: start; + align-self: end; + background: yellow; + } + + .center-start { + grid-row: 1 / 2; + justify-self: center; + align-self: start; + background: green; + } + + .center-center { + grid-row: 2 / 3; + justify-self: center; + align-self: center; + background: blue; + } + + .center-end { + grid-row: 3 / 4; + justify-self: center; + align-self: end; + background: indigo; + } + + .end-start { + grid-row: 1 / 2; + justify-self: end; + align-self: start; + background: violet; + } + + .end-center { + grid-row: 2 / 3; + justify-self: end; + align-self: center; + background: pink; + } + + .end-end { + grid-row: 3 / 4; + justify-self: end; + align-self: end; + background: brown; + } + </style> +</head> +<body> + <div class="masonry"> + <div class="start-start">SS</div> + <div class="start-center">SC</div> + <div class="start-end">SE</div> + <div class="center-start">CS</div> + <div class="center-center">CC</div> + <div class="center-end">CE</div> + <div class="end-start">ES</div> + <div class="end-center">EC</div> + <div class="end-end">EE</div> + </div> + + <div class="masonry" style="direction: rtl;"> + <div class="start-start">SS</div> + <div class="start-center">SC</div> + <div class="start-end">SE</div> + <div class="center-start">CS</div> + <div class="center-center">CC</div> + <div class="center-end">CE</div> + <div class="end-start">ES</div> + <div class="end-center">EC</div> + <div class="end-end">EE</div> + </div> +</body> +</html>