commit dab419fcab281f00e78118755576334880504463 parent a6917026f3a68d12829a41b5e6689be079d4e2e7 Author: Alison Maher <almaher@microsoft.com> Date: Fri, 3 Oct 2025 08:58:55 +0000 Bug 1990939 [wpt PR 55076] - [Masonry] Move internal wpts to external folder, a=testonly Automatic update from web-platform-tests [Masonry] Move internal wpts to external folder Move all of our tests from the internal wpt folder to the external masonry folder. I moved tests to their corresponding subdirectories where it made sense and updated paths accordingly. This CL has no functional changes. Bug: 343257585 Change-Id: I6186b181d11fe2980cfd3c4810441daab393fc52 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6985230 Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Commit-Queue: Kurt Catti-Schmidt <kschmi@microsoft.com> Auto-Submit: Alison Maher <almaher@microsoft.com> Commit-Queue: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1520936} -- wpt-commits: ed7ce8ef73d2bfd13028dc93a5ddcbf756efee8d wpt-pr: 55076 Diffstat:
383 files changed, 15036 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-justify-items-center-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-justify-items-center-001-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(3, 100px); + background: gray; + width: 300px; + align-items: start; + justify-items: center; +} +.flex { + display: flex; + align-items: center; + flex-direction: column; +} +.two-span-item { + background-color: lightpink; +} +.fifty-width { + width: 50px; + background-color: lightblue; +} +</style> +<body> + <p>Test that using justify-items centers each item to the grid-axis track it is on.</p> + <div class="grid"> + <div class="flex"> + <div class="fifty-width"> + This is some text + </div> + <div class="two-span-item"> + This is text + </div> + <div class="two-span-item"> + This is text + </div> + </div> + <div class="fifty-width"> + Some larger words in this sentence + </div> + <div class="fifty-width"> + The cat cannot be taken from milk + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-justify-items-center-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-justify-items-center-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Masonry Test: Centered alignment in grid axis</title> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> +<link rel="match" href="column-justify-items-center-001-ref.html"> +<style> +.masonry { + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; + grid-template-columns: repeat(3, 100px); + width: 300px; + justify-items: center; +} + +.fifty-width { + width: 50px; + background-color: lightblue; +} +</style> +<body> + <p>Test that using justify-items centers each item to the grid-axis track it is on.</p> + <div class="masonry"> + <div class="fifty-width"> + This is some text + </div> + <div class="fifty-width"> + Some larger words in this sentence + </div> + <div class="fifty-width"> + The cat cannot be taken from milk + </div> + <div style="background-color: lightpink; width: fit-content;"> + This is text + </div> + <div style="background-color: lightpink; width: fit-content;"> + This is text + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-justify-items-end-justify-self-start-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-justify-items-end-justify-self-start-001-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(3, 100px); + background: gray; + width: 300px; + align-items: start; + justify-items: end; +} +.flex { + display: flex; + align-items: end; + flex-direction: column; +} +.two-span-item { + background-color: lightpink; +} +.fifty-width { + width: 50px; + background-color: lightblue; +} +</style> +<body> + <p>Test that using justify-items moves each masonry item to the end of the grid-axis track it is on</p> + <p>and that justify-self overrides justify-items.</p> + <div class="grid"> + <div class="flex"> + <div class="fifty-width"> + This is some text + </div> + <div class="two-span-item"> + This is text + </div> + <div class="two-span-item"> + This is text + </div> + </div> + <div class="fifty-width" style="justify-self: start"> + Some larger words in this sentence + </div> + <div class="fifty-width"> + The cat cannot be taken from milk + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-justify-items-end-justify-self-start-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-justify-items-end-justify-self-start-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<title>CSS Masonry Test: Alignment for items and self in grid axis</title> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> +<link rel="match" href="column-justify-items-end-justify-self-start-001-ref.html"> +<style> +.masonry { + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; + grid-template-columns: repeat(3, 100px); + width: 300px; + justify-items: end; +} + +.fifty-width { + width: 50px; + background-color: lightblue; +} +</style> +<body> + <p>Test that using justify-items moves each masonry item to the end of the grid-axis track it is on</p> + <p>and that justify-self overrides justify-items.</p> + <div class="masonry"> + <div class="fifty-width"> + This is some text + </div> + <div class="fifty-width" style="justify-self: start"> + Some larger words in this sentence + </div> + <div class="fifty-width"> + The cat cannot be taken from milk + </div> + <div style="background-color: lightpink; width: fit-content;"> + This is text + </div> + <div style="background-color: lightpink; width: fit-content;"> + This is text + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-overflow-alignment-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-overflow-alignment-001-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + position: relative; + grid-template-columns: 50px; + justify-items: unsafe center; + width: 50px; +} +.overflow-safe { + justify-self: safe end; + width: 75px; + height: 50px; + background-color: lightgreen; +} +.overflow-unsafe { + justify-self: unsafe flex-end; + width: 75px; + height: 50px; + background-color: lightblue; +} +.small-center-item { + width: 25px; + background-color: lightyellow; +} +</style> +<body> + <p>Test that overflow safe and unsafe are working as expected. + <div class="grid"> + <div class="overflow-safe"> + Overflow safe + </div> + <div style="width: 50px; background-color: lightpink;"> + Regular item + </div> + <div class="overflow-unsafe"> + Overflow unsafe + </div> + <div class="small-center-item"> + Small item + </div> + <div style="width: 150px; background-color: brown"> + Overflow center + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-overflow-alignment-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/column-overflow-alignment-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-overflow-alignment-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; + grid-template-columns: 50px; + justify-items: unsafe center; + width: 50px; +} +.overflow-safe { + justify-self: safe end; + width: 75px; + height: 50px; + background-color: lightgreen; +} +.overflow-unsafe { + justify-self: unsafe end; + width: 75px; + height: 50px; + background-color: lightblue; +} +.small-item { + width: 25px; + background-color: lightyellow; +} +</style> +<body> + <p>Test that overflow safe and unsafe are working as expected. + <div class="masonry"> + <div class="overflow-safe"> + Overflow safe + </div> + <div style="width: 50px; background-color: lightpink;"> + Regular item + </div> + <div class="overflow-unsafe"> + Overflow unsafe + </div> + <div class="small-item"> + Small item + </div> + <div style="width: 150px; background-color: brown"> + Overflow center + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-align-items-center-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-align-items-center-001-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: repeat(3, 100px); + grid-template-columns: 100px auto; + width: 300px; + align-items: center; +} +</style> +<body> + <p>Test that using align-items centers each item to the grid-axis track it is on.</p> + <div class="grid"> + <div style="width: 50px; height: 50px; background-color: lightblue;"></div> + <div style="background-color: lightpink; height: 80px; width: 200px; grid-row: span 2;"></div> + <div style="width: 100px; height: 15px; background-color: lightsalmon;"></div> + <div style="width: 25px; height: 25px; background-color: plum;"></div> + <div style="background-color: lightgreen; width: 60px; height: 60px; transform: translateX(-75px);"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-align-items-center-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-align-items-center-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Masonry Test: Centered alignment in grid axis</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> +<link rel="match" href="row-align-items-center-001-ref.html"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + item-tolerance: 0; + grid-template-rows: repeat(3, 100px); + width: 300px; + align-items: center; +} +</style> +<body> + <p>Test that using align-items centers each item to the grid-axis track it is on.</p> + <div class="masonry"> + <div style="width: 50px; height: 50px; background-color: lightblue;"></div> + <div style="width: 100px; height: 15px; background-color: lightsalmon;"></div> + <div style="width: 25px; height: 25px; background-color: plum;"></div> + <div style="background-color: lightgreen; width: 60px; height: 60px;"></div> + <div style="background-color: lightpink; height: 80px; width: 200px; grid-row: span 2;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-align-items-end-align-self-start-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-align-items-end-align-self-start-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: repeat(3, 100px); + grid-template-columns: 100px auto; + width: 300px; + align-items: end; +} +</style> +<body> + <p>Test that using align-items moves each masonry item to the end of the grid-axis track it is on</p> + <p>and that align-self overrides align-items.</p> + <div class="grid"> + <div style="width: 50px; height: 50px; background-color: lightblue;"></div> + <div style="background-color: lightpink; height: 80px; width: 200px; grid-row: span 2;"></div> + <div style="width: 100px; height: 15px; background-color: lightsalmon; align-self: start;"></div> + <div style="width: 25px; height: 25px; background-color: plum;"></div> + <div style="background-color: lightgreen; width: 60px; height: 60px; transform: translateX(-75px);"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-align-items-end-align-self-start-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-align-items-end-align-self-start-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<title>CSS Masonry Test: Alignment for items and self in grid axis</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> +<link rel="match" href="row-align-items-end-align-self-start-001-ref.html"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + item-tolerance: 0; + grid-template-rows: repeat(3, 100px); + width: 300px; + align-items: end; +} + +.fifty-width { + width: 50px; + background-color: lightblue; +} +</style> +<body> + <p>Test that using align-items moves each masonry item to the end of the grid-axis track it is on</p> + <p>and that align-self overrides align-items.</p> + <div class="masonry"> + <div style="width: 50px; height: 50px; background-color: lightblue;"></div> + <div style="width: 100px; height: 15px; background-color: lightsalmon; align-self: start;"></div> + <div style="width: 25px; height: 25px; background-color: plum;"></div> + <div style="background-color: lightgreen; width: 60px; height: 60px;"></div> + <div style="background-color: lightpink; height: 80px; width: 200px; grid-row: span 2;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-overflow-alignment-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-overflow-alignment-001-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: 70px; + grid-template-columns: 75px 50px 75px 100px; + align-items: unsafe center; + width: 300px; + height: 70px; +} +.overflow-safe { + align-self: safe end; + width: 75px; + height: 75px; + background-color: lightgreen; +} +.overflow-unsafe { + align-self: unsafe end; + width: 75px; + height: 75px; + background-color: lightblue; +} +.small-item { + width: 50px; + background-color: lightyellow; +} +</style> +<body> + <p>Test that overflow safe and unsafe are working as expected. + <div class="grid"> + <div class="overflow-safe"> + Overflow safe + </div> + <div style="width: 50px; background-color: lightpink;"> + Regular item + </div> + <div class="overflow-unsafe"> + Overflow unsafe + </div> + <div style="height: 150px; width: 100px; background-color: brown"> + Overflow center + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-overflow-alignment-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/alignment/row-overflow-alignment-001.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-overflow-alignment-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + item-tolerance: 0; + grid-template-rows: 70px; + align-items: unsafe center; + width: 300px; + height: 70px; +} +.overflow-safe { + align-self: safe end; + width: 75px; + height: 75px; + background-color: lightgreen; +} +.overflow-unsafe { + align-self: unsafe end; + width: 75px; + height: 75px; + background-color: lightblue; +} +.small-item { + width: 50px; + background-color: lightyellow; +} +</style> +<body> + <p>Test that overflow safe and unsafe are working as expected. + <div class="masonry"> + <div class="overflow-safe"> + Overflow safe + </div> + <div style="width: 50px; background-color: lightpink; height: fit-content;"> + Regular item + </div> + <div class="overflow-unsafe"> + Overflow unsafe + </div> + <div style="height: 150px; width: 100px; background-color: brown"> + Overflow center + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/column-empty-masonry-container-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/column-empty-masonry-container-001-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<body> + <p>Test that an empty masonry container renders nothing.</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/column-empty-masonry-container-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/column-empty-masonry-container-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-empty-masonry-container-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.empty-container { + display: masonry; +} +</style> +<body> + <p>Test that an empty masonry container renders nothing.</p> + <div class="empty-container"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/column-empty-masonry-container-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/column-empty-masonry-container-002-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.empty-container { + display: grid; + padding: 20px; + background: gray; +}; +</style> +<body> + <p>Test that an empty masonry container still renders padding.</p> + <div class="empty-container"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/column-empty-masonry-container-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/column-empty-masonry-container-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-empty-masonry-container-002-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; + padding: 20px; +} +</style> +<body> + <p>Test that an empty masonry container still renders padding.</p> + <div class="masonry"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/column-gaps-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/column-gaps-001-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: repeat(3, 100px); + width: 400px; + gap: 50px; + padding: 20px; + align-items: start; +} + +.flex { + display: flex; + flex-direction: column; + overflow: visible; + flex-wrap: nowrap; + gap: 10px; +} + +.grid-auto-item-1 { + background: lightskyblue; + width: 80px; + padding: 10px; +} + +.grid-auto-item-2 { + background: lightcoral; + width: 80px; + padding: 10px; +} + +.grid-auto-item-3 { + background: lightgreen; + width: 80px; + padding: 10px; +} + +.grid-auto-item-4 { + background: lightpink; + padding: 10px; + width: calc(200% + 30px); + transform: translateX(-150px); +} +</style> +<body> + <p>Test that gaps are correctly used within masonry containers.</p> + <div class="grid"> + <div class="flex"> + <div class="grid-auto-item-1" style="grid-column: 1">This is some text</div> + </div> + <div class="flex"> + <div class="grid-auto-item-2" style="grid-column: 2">Some larger words in this sentence</div> + <div class="grid-auto-item-4" style="grid-column: 2">The cat still cannot be separated from milk</div> + <div class="grid-auto-item-4" style="grid-column: 2">The cat still cannot be separated from milk</div> + </div> + <div class="flex"> + <div class="grid-auto-item-3" style="grid-column: 3">The cat cannot be separated from milk</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/column-gaps-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/column-gaps-001.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-gaps-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; + grid-template-columns: repeat(3, 100px); + width: 400px; + padding: 20px; + gap: 10px 50px; +} + +.auto-item { + padding: 10px; +} + +.auto-item:nth-of-type(1) { + background: lightskyblue; +} + +.auto-item:nth-of-type(2) { + background: lightcoral; +} + +.auto-item:nth-of-type(3) { + background: lightgreen; +} + +.two-track-spanner { + background: lightpink; + grid-column: span 2; + padding: 10px; +} +</style> +<body> + <p>Test that gaps are correctly used within masonry containers.</p> + <div class="masonry"> + <div class="auto-item">This is some text</div> + <div class="auto-item">Some larger words in this sentence</div> + <div class="auto-item">The cat cannot be separated from milk</div> + <div class="two-track-spanner">The cat still cannot be separated from milk</div> + <div class="two-track-spanner">The cat still cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/row-gaps-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/row-gaps-001-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: repeat(3, 100px); + height: 400px; + width: 380px; + padding: 20px; + gap: 50px 10px; +} + +.grid > div { + width: 100px; + grid-column: 1; +} + +.auto-item { + padding: 10px; +} + +.auto-item:nth-of-type(1) { + background: lightskyblue; +} + +.auto-item:nth-of-type(2) { + background: lightcoral; +} + +.auto-item:nth-of-type(3) { + background: lightgreen; +} + +.two-track-spanner { + background: lightpink; + grid-row: 1 / span 2; + padding: 10px; +} +</style> +<body> + <p>Test that gaps are correctly used within masonry containers.</p> + <div class="grid"> + <div class="auto-item">This is some text</div> + <div class="auto-item">Some larger words in this sentence</div> + <div class="auto-item">The cat cannot be separated from milk</div> + <div class="two-track-spanner" style="grid-column: 2;">The cat still cannot be separated from milk</div> + <div class="two-track-spanner" style="grid-column: 3;">The cat still cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/row-gaps-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/row-gaps-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-gaps-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + item-tolerance: 0; + grid-template-rows: repeat(3, 100px); + height: 400px; + width: 380px; + padding: 20px; + gap: 50px 10px; +} + +.masonry > div { + width: 100px; +} + +.auto-item { + padding: 10px; +} + +.auto-item:nth-of-type(1) { + background: lightskyblue; +} + +.auto-item:nth-of-type(2) { + background: lightcoral; +} + +.auto-item:nth-of-type(3) { + background: lightgreen; +} + +.two-track-spanner { + background: lightpink; + grid-row: span 2; + padding: 10px; +} +</style> +<body> + <p>Test that gaps are correctly used within masonry containers.</p> + <div class="masonry"> + <div class="auto-item">This is some text</div> + <div class="auto-item">Some larger words in this sentence</div> + <div class="auto-item">The cat cannot be separated from milk</div> + <div class="two-track-spanner">The cat still cannot be separated from milk</div> + <div class="two-track-spanner">The cat still cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/column-explicit-placement-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/column-explicit-placement-001-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + width: 240px; + gap: 20px; + padding: 20px; + align-items: start; +} + +.first-track { + background: lightskyblue; + grid-column-start: 1; +} + +.second-track { + background: lightcoral; + grid-column-start: 2; + margin-left: 40px; +} + +.third-track { + background: lightgreen; + grid-column-start: 3; + margin-top: 40px; + margin-right: 40px; +} + +.fourth-track { + background: purple; + grid-column-start: 4; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="grid"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + <div class="fourth-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/column-explicit-placement-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/column-explicit-placement-001.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-explicit-placement-001-ref.html"> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; + width: 240px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-column-start: 1; +} + +.second-track { + background: lightcoral; + grid-column-start: 2; + margin-left: 40px; +} + +.third-track { + background: lightgreen; + grid-column-start: 3; + margin-top: 40px; + margin-right: 40px; +} + +.fourth-track { + background: purple; + grid-column-start: 4; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="masonry"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + <div class="fourth-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/column-explicit-placement-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/column-explicit-placement-002-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + background: gray; + width: 200px; + gap: 20px; + padding: 20px; + align-items: start; +} + +.first-track { + background: lightskyblue; + grid-column-start: 1; + writing-mode: vertical-rl; + margin-left: 10px; +} + +.second-track { + background: lightcoral; + grid-column-start: 2; +} + +.third-track { + background: lightgreen; + grid-column-start: 3; + writing-mode: vertical-lr; +} +</style> +<body> + <p>Test that orthoganal masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="grid"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/column-explicit-placement-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/column-explicit-placement-002.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-explicit-placement-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + width: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-column-start: 1; + writing-mode: vertical-rl; + margin-left: 10px; +} + +.second-track { + background: lightcoral; + grid-column-start: 2; +} + +.third-track { + background: lightgreen; + grid-column-start: 3; + writing-mode: vertical-lr; +} +</style> +<body> + <p>Test that orthoganal masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="masonry"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/column-explicit-placement-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/column-explicit-placement-003-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: auto auto auto; + height: 200px; + width: 500px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-column-start: 1; + writing-mode: vertical-rl; + height: max-content; +} + +.second-track { + background: lightcoral; + grid-column-start: 2; + width: fit-content; + height: fit-content; +} + +.third-track { + background: lightgreen; + grid-column-start: 3; + writing-mode: vertical-lr; + height: max-content; +} + +.flex { + display: flex; + flex-direction: column; + gap: 20px; +} +</style> +<body> + <p>Test that orthoganal masonry with explicit placement are correctly positioned within the grid axis and that the margins on the orthogonal items correctly affect track sizing.</p> + <div class="grid"> + <div class="flex"> + <div class="first-track">This is some text</div> + <div class="first-track" style="margin-right: 10px;">This is some text</div> + <div class="first-track" style="writing-mode: horizontal-tb;">This is some text</div> + </div> + <div class="second-track" style="margin-bottom: 10px;">Some larger words in this sentence</div> + <div class="flex" style="grid-column-start: 3;"> + <div class="third-track">The cat cannot be separated from milk</div> + <div class="third-track">This is some other text</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/column-explicit-placement-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/column-explicit-placement-003.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-explicit-placement-003-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + masonry-direction: column; + background: gray; + item-tolerance: 0; + grid-template-columns: auto auto auto; + height: 200px; + width: 500px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-column-start: 1; + writing-mode: vertical-rl; + height: max-content; +} + +.second-track { + background: lightcoral; + grid-column-start: 2; + width: fit-content; + height: fit-content; +} + +.third-track { + background: lightgreen; + grid-column-start: 3; + writing-mode: vertical-lr; + height: max-content; +} +</style> +<body> + <p>Test that orthoganal masonry with explicit placement are correctly positioned within the grid axis and that the margins on the orthogonal items correctly affect track sizing.</p> + <div class="masonry"> + <div class="first-track">This is some text</div> + <div class="first-track" style="margin-right: 10px;">This is some text</div> + <div class="first-track" style="writing-mode: horizontal-tb">This is some text</div> + <div class="second-track" style="margin-bottom: 10px;">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + <div class="third-track">This is some other text</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-001-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + height: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; + width: fit-content; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; + width: fit-content; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; + width: fit-content; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="grid"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link href="resources/masonry.css" rel="stylesheet"> +<link rel="match" href="row-explicit-placement-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + item-tolerance: 0; + height: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="masonry"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-002-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + height: 200px; + gap: 20px; + padding: 20px; +} + +.grid > div { + width: fit-content; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; + margin: 20px; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; + height: 80px; + margin-top: 40px; + margin-bottom: 80px; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; + margin-left: 40px; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="grid"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link href="resources/masonry.css" rel="stylesheet"> +<link rel="match" href="row-explicit-placement-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + item-tolerance: 0; + height: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; + margin: 20px; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; + height: 80px; + margin-top: 40px; + margin-bottom: 80px; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; + margin-left: 40px; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="masonry"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-003-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + height: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; + width: fit-content; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; + height: 200px; + width: fit-content; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; + width: fit-content; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="grid"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-003.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link href="resources/masonry.css" rel="stylesheet"> +<link rel="match" href="row-explicit-placement-003-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + item-tolerance: 0; + height: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; + height: 200px; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="masonry"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-004-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + height: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; + width: fit-content; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; + height: 200%; + width: fit-content; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; + width: fit-content; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="grid"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link href="resources/masonry.css" rel="stylesheet"> +<link rel="match" href="row-explicit-placement-004-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + item-tolerance: 0; + height: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; + height: 200%; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="masonry"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-005-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +#grid { + display: grid; + grid-template-columns: 200px 200px; + background: gray; + height: 200px; + width: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; + height: 200%; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div id="grid"> + <div id="first-item" class="first-track" style="width: fit-content">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + <div id="fourth-item" class="first-track" style="position: relative;">Some larger words in this sentence</div> + <div class="second-track">The cat cannot be separated from milk</div> + </div> + <script> + const grid = document.getElementById('grid'); + const gridrect = grid.getBoundingClientRect(); + // Width of the grid, minus padding. + const gridwidth = gridrect.width - 40; + + const first_item = document.getElementById('first-item'); + const width = first_item.getBoundingClientRect().width; + + const fourth_item = document.getElementById('fourth-item'); + const translation = gridwidth - width; + fourth_item.style.left = '-' + translation + 'px'; + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-005.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link href="resources/masonry.css" rel="stylesheet"> +<link rel="match" href="row-explicit-placement-005-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + item-tolerance: 0; + height: 200px; + width: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; + height: 200%; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="masonry"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + <div class="first-track">Some larger words in this sentence</div> + <div class="second-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-006-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-006-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + height: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; + writing-mode: vertical-rl; + margin-top: 10px; + width: fit-content; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; + width: fit-content; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; + writing-mode: vertical-lr; + width: fit-content; +} +</style> +<body> + <p>Test that orthoganal masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="grid"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-006.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-explicit-placement-006-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + item-tolerance: 0; + height: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; + writing-mode: vertical-rl; + margin-top: 10px; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; + writing-mode: vertical-lr; +} +</style> +<body> + <p>Test that orthoganal masonry items with explicit placement are correctly positioned within the grid axis.</p> + <div class="masonry"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-007-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-007-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +#grid { + display: grid; + grid-template-columns: 200px 200px; + background: gray; + height: 200px; + width: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; + height: 200%; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis, with an orthogonal item.</p> + <div id="grid"> + <div id="first-item" class="first-track" style="writing-mode: vertical-rl; width: fit-content;"> + This is some text + </div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + <div id="fourth-item" class="first-track" style="position: relative;">Some larger words in this sentence</div> + <div class="second-track">The cat cannot be separated from milk</div> + </div> + <script> + const grid = document.getElementById('grid'); + const gridrect = grid.getBoundingClientRect(); + // Width of the grid, minus padding. + const gridwidth = gridrect.width - 40; + + const element1 = document.getElementById('first-item'); + const rect = element1.getBoundingClientRect(); + const width = rect.width; + + const element4 = document.getElementById('fourth-item'); + const translation = gridwidth - width; + element4.style.left = '-' + translation + 'px'; + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-007.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-007.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link href="resources/masonry.css" rel="stylesheet"> +<link rel="match" href="row-explicit-placement-007-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + item-tolerance: 0; + height: 200px; + width: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; + height: 200%; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; +} +</style> +<body> + <p>Test that masonry items with explicit placement are correctly positioned within the grid axis, with an orthogonal item.</p> + <div class="masonry"> + <div class="first-track" style="writing-mode: vertical-rl;">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + <div class="first-track">Some larger words in this sentence</div> + <div class="second-track">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-008-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-008-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: repeat(3, 100px); + grid-template-columns: repeat(3, 100px); + height: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; + writing-mode: vertical-rl; + margin-top: 10px; + width: fit-content; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; + width: max-content; + grid-column: span 2; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; + writing-mode: vertical-lr; + width: fit-content; +} + +.flex { + display: flex; + flex-direction: row; + gap: 20px; + width: max-content; +} +</style> +<body> + <p>Test that orthoganal masonry with explicit placement are correctly positioned within the grid axis and that the margins on the orthogonal items correctly affect track sizing.</p> + <div class="grid"> + <div class="flex"> + <div class="first-track">This is some text</div> + <div class="first-track" style="margin-right: 10px;">This is some text</div> + <div class="first-track" style="writing-mode: horizontal-tb; width: max-content;">This is some text</div> + </div> + <div class="second-track" style="margin-bottom: 10px;">Some larger words in this sentence</div> + <div class="flex" style="grid-row-start: 3;"> + <div class="third-track">The cat cannot be separated from milk</div> + <div class="third-track">This is some other text</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-008.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/row-explicit-placement-008.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-explicit-placement-008-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + grid-template-rows: repeat(3, 100px); + background: gray; + item-tolerance: 0; + height: 200px; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; + writing-mode: vertical-rl; + margin-top: 10px; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; + writing-mode: vertical-lr; +} +</style> +<body> + <p>Test that orthoganal masonry with explicit placement are correctly positioned within the grid axis and that the margins on the orthogonal items correctly affect track sizing.</p> + <div class="masonry"> + <div class="first-track">This is some text</div> + <div class="first-track" style="margin-right: 10px;">This is some text</div> + <div class="first-track" style="writing-mode: horizontal-tb">This is some text</div> + <div class="second-track" style="margin-bottom: 10px;">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + <div class="third-track">This is some other text</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/column-intrinsic-inline-container-size-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/column-intrinsic-inline-container-size-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + gap: 20px; + padding: 20px; + align-items: start; +} + +.first-track { + background: lightskyblue; + grid-column-start: 1; +} + +.second-track { + background: lightcoral; + grid-column-start: 2; +} + +.third-track { + background: lightgreen; + grid-column-start: 3; +} +</style> +<body> + <p>Test that masonry containers are correctly sized when an intrinsic inline size is specified.</p> + <div class="grid" style="width: max-content"> + <div class="first-track">This is some text</div> + <div class="second-track">Some larger words in this sentence</div> + <div class="third-track">The cat cannot be separated from milk</div> + </div> + <div class="grid" style="width: min-content"> + <div class="first-track" style="height: fit-content;">This is some text</div> + <div class="second-track" style="height: fit-content;">Some larger words in this sentence</div> + <div class="third-track" style="height: fit-content;">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/column-intrinsic-inline-container-size.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/column-intrinsic-inline-container-size.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-intrinsic-inline-container-size-ref.html"> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; + gap: 20px; + padding: 20px; +} + +.first-track { + background: lightskyblue; + grid-column-start: 1; +} + +.second-track { + background: lightcoral; + grid-column-start: 2; +} + +.third-track { + background: lightgreen; + grid-column-start: 3; +} +</style> +<body> + <p>Test that masonry containers are correctly sized when an intrinsic inline size is specified.</p> + <div class="masonry" style="width: max-content"> + <div class="first-track" style="width: max-content">This is some text</div> + <div class="second-track" style="width: max-content">Some larger words in this sentence</div> + <div class="third-track" style="width: max-content">The cat cannot be separated from milk</div> + </div> + <div class="masonry" style="width: min-content"> + <div class="first-track" style="width: min-content">This is some text</div> + <div class="second-track" style="width: min-content">Some larger words in this sentence</div> + <div class="third-track" style="width: min-content">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/row-defined-height-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/row-defined-height-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link href="resources/masonry.css" rel="stylesheet"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid { + display: grid; + grid-template-rows: 100px 100px 100px; + align-items: start; + background: gray; + width: 300px; + height: 100px; + padding: 10px; +} + +.flex { + display: flex; + flex-direction: row; + overflow: visible; + flex-wrap: nowrap; +} + +.square-100x100 { + width: 100px; + height: 100px; +} +</style> +<body> + <p>Test that the user-defined block size is used over the intrinsic block size when displaying background.</p> + <div class="grid"> + <div class="flex"> + <div class="square-100x100" style="background: lightskyblue;"> + Number 1 + </div> + <div class="square-100x100" style="background: lightpink;"> + Number 4 + </div> + <div style="background: brown; width: 100px; height: 200px;"> + Number 4 + </div> + </div> + <div class="flex"> + <div class="square-100x100" style="background: lightcoral;"> + Number 2 + </div> + <div class="square-100x100" style="background: lightpink;"> + Number 5 + </div> + </div> + <div class="flex"> + <div class="square-100x100" style="background: lightgreen;"> + Number 3 + </div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/row-defined-height.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/row-defined-height.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-defined-height-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: auto auto auto; + width: 300px; + height: 100px; + padding: 10px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; +} + +.square-100x100 { + width: 100px; + height: 100px; +} +</style> +<body> + <p>Test that the user-defined block size is used over the intrinsic block size when displaying background.</p> + <div class="masonry"> + <div class="first-track square-100x100"> + Number 1 + </div> + <div class="second-track square-100x100"> + Number 2 + </div> + <div class="third-track square-100x100"> + Number 3 + </div> + <div class="square-100x100" style="background-color: lightpink;"> + Number 4 + </div> + <div class="square-100x100" style="background-color: lightpink;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown; width: 100px;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/row-intrinsic-inline-container-size-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/row-intrinsic-inline-container-size-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link href="resources/masonry.css" rel="stylesheet"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + align-items: start; +} + +.flex { + display: flex; + flex-direction: column; + overflow: visible; + flex-wrap: nowrap; +} + +.max-content-item { + width: max-content; + height: 20px; +} +</style> +<body> + <p>Test that masonry containers are correctly sized when an intrinsic inline size is specified.</p> + <div class="grid" style="width: max-content"> + <div class="flex"> + <div class="first-track max-content-item">This is some text</div> + <div class="second-track max-content-item">Some larger words in this sentence</div> + <div class="third-track max-content-item">The cat cannot be separated from milk</div> + </div> + </div> + <div class="grid" style="width: max-content"> + <div class="flex"> + <div class="first-track max-content-item">This is some text</div> + <div class="second-track max-content-item">Some larger words in this sentence</div> + <div class="third-track max-content-item">The cat cannot be separated from milk</div> + </div> + </div> + <div class="grid"> + <div class="flex"> + <div class="first-track max-content-item">This is some text</div> + <div class="second-track max-content-item">Some larger words in this sentence</div> + <div class="third-track max-content-item">The cat cannot be separated from milk</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/row-intrinsic-inline-container-size.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/row-intrinsic-inline-container-size.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link href="resources/masonry.css" rel="stylesheet"> +<link rel="match" href="row-intrinsic-inline-container-size-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + masonry-direction: row; + grid-template-rows: repeat(3, 20px); + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; +} + +.max-content-item { + width: max-content; + height: 20px; +} +</style> +<body> + <p>Test that masonry containers are correctly sized when an intrinsic inline size is specified.</p> + <div class="masonry" style="width: max-content;"> + <div class="first-track max-content-item">This is some text</div> + <div class="second-track max-content-item">Some larger words in this sentence</div> + <div class="third-track max-content-item">The cat cannot be separated from milk</div> + </div> + <div class="masonry" style="width: min-content;"> + <div class="first-track max-content-item">This is some text</div> + <div class="second-track max-content-item">Some larger words in this sentence</div> + <div class="third-track max-content-item">The cat cannot be separated from milk</div> + </div> + <div class="masonry"> + <div class="first-track max-content-item">This is some text</div> + <div class="second-track max-content-item">Some larger words in this sentence</div> + <div class="third-track max-content-item">The cat cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-auto-placement-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-auto-placement-001-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: 100px 100px 100px; + width: 340px; + gap: 20px; + padding: 20px; + align-items: start; +} + +.flex { + display: flex; + flex-direction: column; + overflow: visible; + flex-wrap: nowrap; + gap: 20px; +} + +.grid-auto-item-1 { + background: lightskyblue; + padding: 10px; +} + +.grid-auto-item-2 { + background: lightcoral; + padding: 10px; +} + +.grid-auto-item-3 { + background: lightgreen; + padding: 10px; +} + +.grid-auto-item-4 { + background: lightpink; + padding: 10px; + width: 200%; + transform: translateX(-120px); +} +</style> +<body> + <p>Test that masonry items with auto placement are correctly positioned within the grid axis.</p> + <div class="grid"> + <div class="flex"> + <div class="grid-auto-item-1" style="grid-column: 1">This is some text</div> + </div> + <div class="flex"> + <div class="grid-auto-item-2" style="grid-column: 2">Some larger words in this sentence</div> + <div class="grid-auto-item-4" style="grid-column: 2">The cat still cannot be separated from milk</div> + <div class="grid-auto-item-4" style="grid-column: 2">The cat still cannot be separated from milk</div> + </div> + <div class="flex"> + <div class="grid-auto-item-3" style="grid-column: 3">The cat cannot be separated from milk</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-auto-placement-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-auto-placement-001.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-placement-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; + grid-template-columns: auto auto auto; + width: 340px; + padding: 20px; + gap: 20px; +} + +.auto-item { + padding: 10px; +} + +.auto-item:nth-of-type(1) { + background: lightskyblue; +} + +.auto-item:nth-of-type(2) { + background: lightcoral; +} + +.auto-item:nth-of-type(3) { + background: lightgreen; +} + +.two-track-spanner { + background: lightpink; + grid-column: span 2; + padding: 10px; +} +</style> +<body> + <p>Test that masonry items with auto placement are correctly positioned within the grid axis.</p> + <div class="masonry"> + <div class="auto-item">This is some text</div> + <div class="auto-item">Some larger words in this sentence</div> + <div class="auto-item">The cat cannot be separated from milk</div> + <div class="two-track-spanner">The cat still cannot be separated from milk</div> + <div class="two-track-spanner">The cat still cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-001-ref.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> +<style> +html,body { + font:15px/1 monospace; +} +.grid { + display: grid; + position: relative; + grid-template-columns: repeat(3, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing places items correctly in masonry.</p> + <div class="grid"> + <div> + <div style="background: lightskyblue; height: 20px;" > + 1 + </div> + <div style="background: red; height: 40px;"> + 5 + </div> + </div> + <div style="background: lightcoral; height: 60px;" > + 2 + </div> + <div style="background: lightgreen; height: 60px;"> + 3 + </div> + <div> + <div style="background: brown; height: 15px; width: 100px;"> + 4 + </div> + <div style="background: yellow; height: 40px;"> + 7 + </div> + </div> + <div style="background: pink; height: 45px; grid-column: 3;"> + 6 + </div> + <div style="background: brown; height: 60px; grid-column: 2 / span 2; margin-top: -10px;"> + 8 + </div> + <div style="margin-top: 15px;"> + <div style="background: blueviolet; height: 12px; grid-column: 2; margin-top: 3px;"> + 9 + </div> + <div style="background: orange; height: 15px; grid-column: 2;"> + 10 + </div> + </div> + <div style="background: pink; height: 20px; width: 150px; transform: translateY(50px);"> + 11 + </div> + <div style="background: green; height: 60px; transform: translateY(20px);"> + 14 + </div> + <div style="background: brown; height: 60px; width: 100px; transform: translateY(20px);"> + 12 + </div> + <div style="background: pink; height: 20px; width: 150px; transform: translateY(20px); grid-column-start: 1"> + 13 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-001.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +html,body { + font:15px/1 monospace; +} +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(3, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing places items correctly in masonry.</p> + <div class="masonry"> + <div style="background: lightskyblue; height: 20px;" > + 1 + </div> + <div style="background: lightcoral; height: 60px;" > + 2 + </div> + <div style="background: lightgreen; height: 60px;"> + 3 + </div> + <div style="background: brown; height: 15px; grid-column: span 2;"> + 4 + </div> + <div style="background: red; height: 40px;"> + 5 + </div> + <div style="background: pink; height: 45px;"> + 6 + </div> + <div style="background: yellow; height: 40px;"> + 7 + </div> + <div style="background: brown; height: 60px; grid-column: span 2;"> + 8 + </div> + <div style="background: blueviolet; height: 12px; grid-column: 2; margin-top: 3px;"> + 9 + </div> + <div style="background: orange; height: 15px; grid-column: 2;"> + 10 + </div> + <div style="background: pink; height: 20px; grid-column: span 3;"> + 11 + </div> + <div style="background: brown; height: 60px; grid-column: 2 / span 2;"> + 12 + </div> + <div style="background: pink; height: 20px; grid-column: span 3;"> + 13 + </div> + <div style="background: green; height: 60px;"> + 14 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-002-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + background: gray; + position: relative; + grid-template-columns: repeat(3, 50px); + padding: 10px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing places items correctly based on the auto-placement cursor location when there are multiple gaps. Item 5 should go into the right-most gap.</p> + <div class="grid"> + <div> + <div style="background: lightskyblue; height: 20px;" > + 1 + </div> + <div style="background: red; height: 40px;"> + 6 + </div> + </div> + <div style="background: lightcoral; height: 60px;" > + 2 + </div> + <div style="background: lightgreen; height: 20px;"> + 3 + </div> + <div style="background: brown; height: 10px; grid-column: span 3;"> + 4 + </div> + <div style="background:orchid; height: 10px; grid-column: span 2;"> + 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-002-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(3, 50px); + padding: 10px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing places items correctly based on the auto-placement cursor location when there are multiple gaps. Item 5 should go into the right-most gap.</p> + <div class="masonry"> + <div style="background: lightskyblue; height: 20px;" > + 1 + </div> + <div style="background: lightcoral; height: 60px;" > + 2 + </div> + <div style="background: lightgreen; height: 20px;"> + 3 + </div> + <div style="background: brown; height: 10px; grid-column: span 3;"> + 4 + </div> + <div style="background:orchid; height: 10px; grid-column: span 2;"> + 5 + </div> + <div style="background: red; height: 40px;"> + 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-003-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(3, 50px); + width: 170px; +} +</style> +<body> + <p>Ensure that dense-packing has no impact when all items are single-spanning.</p> + <div class="masonry"> + <div style="background: lightskyblue; height: 20px;" > + 1 + </div> + <div style="background: lightcoral; height: 60px;" > + 2 + </div> + <div style="background: lightgreen; height: 60px;"> + 3 + </div> + <div style="background: brown; height: 15px;"> + 4 + </div> + <div style="background: red; height: 40px;"> + 5 + </div> + <div style="background: pink; height: 40px;"> + 6 + </div> + <div style="background: yellow; height: 40px;"> + 7 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-003.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-003-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(3, 50px); + width: 170px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing has no impact when all items are single-spanning.</p> + <div class="masonry"> + <div style="background: lightskyblue; height: 20px;" > + 1 + </div> + <div style="background: lightcoral; height: 60px;" > + 2 + </div> + <div style="background: lightgreen; height: 60px;"> + 3 + </div> + <div style="background: brown; height: 15px;"> + 4 + </div> + <div style="background: red; height: 40px;"> + 5 + </div> + <div style="background: pink; height: 40px;"> + 6 + </div> + <div style="background: yellow; height: 40px;"> + 7 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-004-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + background: gray; + position: relative; + grid-template-columns: 30px 40px 50px 30px; + padding: 10px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure dense-packing only places items into gaps where the track size is the same as where the item would have been laid out WITHOUT dense packing.</p> + <div class="grid"> + <div style="background: lightskyblue; height: 40px; grid-column: 1" > + 1 + </div> + <div style="background: lightgreen; height: 40px; grid-column: 3"> + 2 + </div> + <div style="background: brown; height: 10px; grid-column: span 4;"> + 3 + </div> + <div style="background: red; height: 40px; width: 30px; grid-column: 4;"> + 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-004.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-004-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: 30px 40px 50px 30px; + padding: 10px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure dense-packing only places items into gaps where the track size is the same as where the item would have been laid out WITHOUT dense packing.</p> + <div class="masonry"> + <div style="background: lightskyblue; height: 40px; grid-column: 1" > + 1 + </div> + <div style="background: lightgreen; height: 40px; grid-column: 3"> + 2 + </div> + <div style="background: brown; height: 10px; grid-column: span 4;"> + 3 + </div> + <div style="background: red; height: 40px; width: 30px;"> + 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-005-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + position: relative; + item-tolerance: 0; + grid-template-columns: repeat(3, 50px); + grid-template-rows: masonry; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that we always pick the highest eligible opening; auto-placement cursor should only be a tie-breaker with openings at the same location.</p> + <div class="grid"> + <div style="background: lightskyblue; height: 20px;" > + 1 + </div> + <div style="background: lightblue; height: 20px;" > + 2 + </div> + <div style="background: yellow; height: 20px;" > + 6 + </div> + <div style="background: darkblue; height: 20px; grid-column: span 3;"> + 3 + </div> + <div style="background: lightsteelblue; height: 20px; grid-column: 2 / span 2;" > + 4 + </div> + <div style="background: darkblue; height: 20px; grid-column: span 3;"> + 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-005.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-005-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(3, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that we always pick the highest eligible opening; auto-placement cursor should only be a tie-breaker with openings at the same location.</p> + <div class="masonry"> + <div style="background: lightskyblue; height: 20px;" > + 1 + </div> + <div style="background: lightblue; height: 20px;" > + 2 + </div> + <div style="background: darkblue; height: 20px; grid-column: span 3;"> + 3 + </div> + <div style="background: lightsteelblue; height: 20px; grid-column: 2 / span 2;" > + 4 + </div> + <div style="background: darkblue; height: 20px; grid-column: span 3;"> + 5 + </div> + <div style="background: yellow; height: 20px;" > + 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-006-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-006-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(4, 50px); +} +.upwards { + transform: translateY(-20px); +} +</style> +<body> + <p>Ensure that dense-packing in masonry only places items with a specified track into track openings in that same specified track.</p> + <div class="grid"> + <div style="background: brown; height: 20px;"></div> + <div style="background: brown; height: 40px; grid-column: 2;"></div> + <div style="background: pink; height: 20px; grid-column-start: 3;"></div> + <div style="background: brown; height: 60px; grid-column-start: 4;"></div> + <div class="upwards" style="background: brown; height: 20px; grid-column: span 2;"></div> + <div class="upwards" style="background: brown; height: 20px; grid-column: span 4;"></div> + <div class="upwards" style="background: brown; height: 20px; grid-column: span 3;"></div> + <div class="upwards" style="background: yellow; height: 20px; grid-column-start: 4;"></div> + <div class="upwards" style="background: brown; height: 20px; grid-column: span 4;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-006.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-006-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(4, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing in masonry only places items with a specified track into track openings in that same specified track.</p> + <div class="masonry"> + <div style="background: brown; height: 20px;"></div> + <div style="background: brown; height: 40px;"></div> + <div style="background: brown; height: 60px; grid-column-start: 4;"></div> + <div style="background: brown; height: 20px; grid-column: span 2;"></div> + <div style="background: brown; height: 20px; grid-column: span 4;"></div> + <div style="background: brown; height: 20px; grid-column: span 3;"></div> + <div style="background: brown; height: 20px; grid-column: span 4;"></div> + <div style="background: yellow; height: 20px; grid-column-start: 4;"></div> + <div style="background: pink; height: 20px;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-001-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(4, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing places multi-spanning item into highest eligible track opening. The yellow item should be placed in track opening.</p> + <div class="grid"> + <div style="background: lightskyblue; height: 70px;" > + 1 + </div> + <div style="background: lightblue; height: 20px; grid-column: 4;" > + 2 + </div> + <div style="background: darkblue; height: 20px; grid-column: 3 / span 2; transform: translateY(-50px);"> + 3 + </div> + <div style="background: lightsteelblue; height: 20px; grid-column: span 4; transform: translateY(-20px);" > + 4 + </div> + <div style="background: yellow; height: 10px; grid-column: span 2;" > + 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-multi-span-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(4, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing places multi-spanning item into highest eligible track opening. The yellow item should be placed in track opening.</p> + <div class="masonry"> + <div style="background: lightskyblue; height: 70px;" > + 1 + </div> + <div style="background: lightblue; height: 20px; grid-column: 4;" > + 2 + </div> + <div style="background: darkblue; height: 20px; grid-column: 3 / span 2;"> + 3 + </div> + <div style="background: lightsteelblue; height: 20px; grid-column: span 4;" > + 4 + </div> + <div style="background: yellow; height: 10px; grid-column: span 2;" > + 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-002-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: 10px 10px 20px 15px 5px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing with multi-span items are placed into tracks with the same used size and the same number of tracks, and priority is given to tracks closest (but after) the auto-placement cursor.</p> + <div class="grid"> + <div style="background: yellow; height: 20px; width: 20px; grid-column: 1" > + 4 + </div> + <div style="background: lightskyblue; height: 20px; grid-column: 3" > + 1 + </div> + <div style="background: lightblue; height: 20px; grid-column: span 5" > + 2 + </div> + <div style="background: darkblue; height: 20px; grid-column: span 3;"> + 3 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-multi-span-002-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: 10px 10px 20px 15px 5px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing with multi-span items are placed into tracks with the same used size and the same number of tracks, and priority is given to tracks closest (but after) the auto-placement cursor.</p> + <div class="masonry"> + <div style="background: lightskyblue; height: 20px; grid-column: 3" > + 1 + </div> + <div style="background: lightblue; height: 20px; grid-column: span 5" > + 2 + </div> + <div style="background: darkblue; height: 20px; grid-column: span 3;"> + 3 + </div> + <div style="background: yellow; height: 20px; grid-column: span 2;" > + 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-003-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(3, 50px); + padding: 10px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing places items that span more than 1 track correctly into gaps.</p> + <div class="grid"> + <div style="background: lightskyblue; height: 20px;" > + 1 + </div> + <div style="background: lightcoral; height: 20px;" > + 2 + </div> + <div style="background: lightgreen; height: 40px;"> + 3 + </div> + <div style="background:orchid; height: 10px; grid-column: span 2; transform: translateY(-20px);"> + 5 + </div> + <div style="background: brown; height: 10px; grid-column: span 3; transform: translateY(-10px);"> + 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-003.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-multi-span-003-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(3, 50px); + padding: 10px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing places items that span more than 1 track correctly into gaps.</p> + <div class="masonry"> + <div style="background: lightskyblue; height: 20px;" > + 1 + </div> + <div style="background: lightcoral; height: 20px;" > + 2 + </div> + <div style="background: lightgreen; height: 40px;"> + 3 + </div> + <div style="background: brown; height: 10px; grid-column: span 3;"> + 4 + </div> + <div style="background:orchid; height: 10px; grid-column: span 2;"> + 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-004-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(5, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing with multi-span items follows the masonry dense packing algorithm.</p> + <div class="grid"> + <div style="background: brown; height: 80px;"></div> + <div style="background: brown; height: 60px;"></div> + <div style="background: brown; height: 40px;"></div> + <div style="background: brown; height: 30px;"></div> + <div style="background: brown; height: 20px;"></div> + <div style="background: brown; height: 20px; grid-column: span 5;"></div> + <div style="background: pink; height: 30px; grid-column: span 4;">Item that should not end up in gap.</div> + <div style="background: yellow; height: 20px; grid-column: span 4; transform: translate(50px, -70px);">Item that should end up in gap.</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-004.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-multi-span-004-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(5, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing with multi-span items follows the masonry dense packing algorithm.</p> + <div class="masonry"> + <div style="background: brown; height: 80px;"></div> + <div style="background: brown; height: 60px;"></div> + <div style="background: brown; height: 40px;"></div> + <div style="background: brown; height: 30px;"></div> + <div style="background: brown; height: 20px;"></div> + <div style="background: brown; height: 20px; grid-column: span 5;"></div> + <div style="background: pink; height: 30px; grid-column: span 4;">Item that should not end up in gap.</div> + <div style="background: yellow; height: 20px; grid-column: span 4;">Item that should end up in gap.</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-005-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(10001, 5px); + padding: 10px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that stack overflow does not occur for dense-packing for masonry with 10,000 tracks</p> + <div class="grid"> + <div style="background: pink; height: 20px;"></div> + <div style="background: red; height: 20px; grid-column: span 10001;"></div> + <div style="background: yellow; height: 20px; grid-column: span 10000;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-005.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-multi-span-005-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(10001, 5px); + padding: 10px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that stack overflow does not occur for dense-packing for masonry with 10,000 tracks</p> + <div class="masonry"> + <div style="background: pink; height: 20px;"></div> + <div style="background: red; height: 20px; grid-column: span 10001;"></div> + <div style="background: yellow; height: 20px; grid-column: span 10000;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-006-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-006-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(4, 50px); + width: 170px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing correctly iterates through all possible track openings to find an opening span. Item that should be placed into opening is yellow.</p> + <div class="grid"> + <div style="background: aquamarine; height: 60px;" > + 1 + </div> + <div style="background: blue; height: 40px;" > + 2 + </div> + <div style="background: blueviolet; height: 20px;"> + 3 + </div> + <div style="background: lightblue; height: 10px; grid-column: 1 / span 2;"> + 4 + </div> + <div style="background: lightskyblue; grid-column: 1; height: 30px;"> + 5 + </div> + <div style="background: lightsteelblue; height: 60px; grid-column: 4;"> + 6 + </div> + <div style="background: aqua; height: 20px; grid-column: span 4;"> + 7 + </div> + <div style="background: yellow; height: 10px; grid-column: span 3;"> + 8 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-006.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-multi-span-006-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(4, 50px); + width: 170px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing correctly iterates through all possible track openings to find an opening span. Item that should be placed into opening is yellow.</p> + <div class="masonry"> + <div style="background: aquamarine; height: 60px;" > + 1 + </div> + <div style="background: blue; height: 40px;" > + 2 + </div> + <div style="background: blueviolet; height: 20px;"> + 3 + </div> + <div style="background: lightblue; height: 10px; grid-column: 1 / span 2;"> + 4 + </div> + <div style="background: lightskyblue; grid-column: 1; height: 30px;"> + 5 + </div> + <div style="background: lightsteelblue; height: 60px; grid-column: 4;"> + 6 + </div> + <div style="background: aqua; height: 20px; grid-column: span 4;"> + 7 + </div> + <div style="background: yellow; height: 10px; grid-column: span 3;"> + 8 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-007-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-007-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(5, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing in masonry properly handles "split" track openings.</p> + <div class="grid"> + <div style="background: brown; height: 80px;"></div> + <div style="background: brown; height: 20px; grid-column: span 2"></div> + <div style="background: brown; height: 40px;"></div> + <div style="background: brown; height: 100px;"></div> + <div style="background: brown; height: 10px; grid-column: span 5;"></div> + <div style="background: pink; height: 10px; grid-column: span 4; transform: translateY(-30px);"></div> + <div style="background: lightgreen; height: 10px; grid-column: 2 / span 2; transform: translateY(-100px);"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-007.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-007.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-multi-span-007-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(5, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing in masonry properly handles "split" track openings.</p> + <div class="masonry"> + <div style="background: brown; height: 80px;"></div> + <div style="background: brown; height: 20px; grid-column: span 2"></div> + <div style="background: brown; height: 40px;"></div> + <div style="background: brown; height: 100px;"></div> + <div style="background: brown; height: 10px; grid-column: span 5;"></div> + <div style="background: pink; height: 10px; grid-column: span 4;"></div> + <div style="background: lightgreen; height: 10px; grid-column: span 2;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-008-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-008-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(4, 50px); +} +</style> +<body> + <p>Ensure that dense-packing in masonry only places items with specified tracks into track openings in those same specified tracks.</p> + <div class="grid"> + <div style="background: brown; height: 20px; grid-column: span 2; grid-row: 1;"></div> + <div style="background: darkgoldenrod; height: 20px; grid-column: span 4;"></div> + <div style="background: tan; height: 40px; grid-column: 3 / span 2;"></div> + <div style="background: brown; height: 20px; grid-column: span 4;"></div> + <div style="background: yellow; height: 20px; grid-column: 1 / span 2; grid-row: 3;"></div> + <div style="background: pink; height: 20px; grid-column: span 2; grid-row: 1;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-008.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-008.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-dense-packing-multi-span-008-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(4, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing in masonry only places items with specified tracks into track openings in those same specified tracks.</p> + <div class="masonry"> + <div style="background: brown; height: 20px; grid-column: span 2;"></div> + <div style="background: darkgoldenrod; height: 20px; grid-column: span 4;"></div> + <div style="background: tan; height: 40px; grid-column: 3 / span 2;"></div> + <div style="background: brown; height: 20px; grid-column: span 4;"></div> + <div style="background: yellow; height: 20px; grid-column: 1 / span 2;"></div> + <div style="background: pink; height: 20px; grid-column: span 2;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-001-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + background: gray; + position: relative; + grid-template-rows: repeat(3, 50px); + width: 170px; + grid-auto-flow: dense; +} + +.flex { + display: flex; + flex-direction: row; +} +</style> +<body> + <p>Ensure that dense-packing places items correctly in masonry.</p> + <div class="grid"> + <div class="flex"> + <div style="background: lightskyblue; width: 20px;" > + 1 + </div> + <div style="background: red; width: 40px;"> + 5 + </div> + <div style="background: brown; width: 10px; height: 100px;"> + 4 + </div> + <div style="background: yellow; width: 40px;"> + 7 + </div> + </div> + <div class="flex"> + <div style="background: lightcoral; width: 60px;" > + 2 + </div> + <div style="background: brown; width: 10px;"></div> + <div style="background: blueviolet; width: 12px; grid-row: 2; margin-left: 3px;"> + 9 + </div> + <div style="background: orange; width: 20px; grid-row: 2;"> + 10 + </div> + <div style="background: brown; width: 10px; grid-row: span 2;"> + 8 + </div> + </div> + <div class="flex"> + <div style="background: lightgreen; width: 60px;"> + 3 + </div> + <div style="background: pink; width: 45px;"> + 6 + </div> + <div style="background: brown; width: 10px;"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-001.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-dense-packing-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(3, 50px); + width: 170px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing places items correctly in masonry.</p> + <div class="masonry"> + <div style="background: lightskyblue; width: 20px;" > + 1 + </div> + <div style="background: lightcoral; width: 60px;" > + 2 + </div> + <div style="background: lightgreen; width: 60px;"> + 3 + </div> + <div style="background: brown; width: 10px; grid-row: span 2;"> + 4 + </div> + <div style="background: red; width: 40px;"> + 5 + </div> + <div style="background: pink; width: 45px;"> + 6 + </div> + <div style="background: yellow; width: 40px;"> + 7 + </div> + <div style="background: brown; width: 10px; grid-row: span 2;"> + 8 + </div> + <div style="background: blueviolet; width: 12px; grid-row: 2; margin-left: 3px;"> + 9 + </div> + <div style="background: orange; width: 20px; grid-row: 2;"> + 10 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-002-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + background: gray; + position: relative; + grid-template-rows: repeat(3, 50px); + padding: 10px; + grid-auto-flow: dense; +} + +.flex { + display: flex; + flex-direction: row; +} +</style> +<body> + <p>Ensure that dense-packing places items correctly based on the auto-placement cursor location when there are multiple gaps. Item 5 should go into the bottom-most gap.</p> + <div class="grid"> + <div class="flex"> + <div style="background: lightskyblue; width: 20px;" > + 1 + </div> + <div style="background: red; width: 40px;"> + 6 + </div> + </div> + <div class="flex"> + <div style="background: lightcoral; width: 60px;" > + 2 + </div> + <div style="background: brown; width: 10px; height: 150px; transform: translateY(-50px);"> + 4 + </div> + <div style="background:orchid; width: 10px; height: 100px; transform: translateY(-50px);"> + 5 + </div> + </div> + <div style="background: lightgreen; width: 20px;"> + 3 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-dense-packing-002-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(3, 50px); + padding: 10px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing places items correctly based on the auto-placement cursor location when there are multiple gaps. Item 5 should go into the bottom-most gap.</p> + <div class="masonry"> + <div style="background: lightskyblue; width: 20px;" > + 1 + </div> + <div style="background: lightcoral; width: 60px;" > + 2 + </div> + <div style="background: lightgreen; width: 20px;"> + 3 + </div> + <div style="background: brown; width: 10px; grid-row: span 3;"> + 4 + </div> + <div style="background:orchid; width: 10px; grid-row: span 2;"> + 5 + </div> + <div style="background: red; width: 40px;"> + 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-003-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + background: gray; + position: relative; + grid-template-rows: repeat(3, 50px); + grid-auto-flow: dense; +} + +.flex { + display: flex; + flex-direction: row; +} +</style> +<body> + <p>Ensure that dense-packing does not affect the layout when all items are single-spanning.</p> + <div class="grid"> + <div class="flex"> + <div style="background: lightskyblue; width: 20px;" > + 1 + </div> + <div style="background: brown; width: 10px;"> + 4 + </div> + <div style="background: red; width: 40px;"> + 5 + </div> + </div> + <div class="flex"> + <div style="background: lightcoral; width: 60px;" > + 2 + </div> + <div style="background: pink; width: 40px;"> + 6 + </div> + </div> + <div class="flex"> + <div style="background: lightgreen; width: 60px;"> + 3 + </div> + <div style="background: yellow; width: 40px;"> + 7 + </div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-003.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-dense-packing-003-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(3, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing does not affect the layout when all items are single-spanning.</p> + <div class="masonry"> + <div style="background: lightskyblue; width: 20px;" > + 1 + </div> + <div style="background: lightcoral; width: 60px;" > + 2 + </div> + <div style="background: lightgreen; width: 60px;"> + 3 + </div> + <div style="background: brown; width: 10px;"> + 4 + </div> + <div style="background: red; width: 40px;"> + 5 + </div> + <div style="background: pink; width: 40px;"> + 6 + </div> + <div style="background: yellow; width: 40px;"> + 7 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-004-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: repeat(4, 50px); + grid-template-columns: repeat(4, 40px); + grid-auto-flow: column; +} +.upwards { + transform: translateX(-20px); +} +</style> +<body> + <p>Ensure that dense-packing in masonry only places items with a specified track into track openings in that same specified track.</p> + <div class="grid"> + <div style="background: brown; width: 20px;"></div> + <div style="background: brown; width: 40px;"></div> + <div style="background: pink; width: 20px;"></div> + <div style="background: brown; width: 60px;"></div> + <div style="background: brown; width: 20px; grid-row: span 2;"></div> + <div style="background: brown; width: 20px; grid-row: span 4; transform: translateX(-20px);"></div> + <div style="background: brown; width: 20px; grid-row: span 3; transform: translateX(-40px);"></div> + <div style="background: yellow; width: 20px; grid-row-start: 4; transform: translateX(-40px);"></div> + <div style="background: brown; width: 20px; grid-row: span 4; transform: translateX(-60px);"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-004.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-dense-packing-004-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(4, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing in masonry only places items with a specified track into track openings in that same specified track.</p> + <div class="masonry"> + <div style="background: brown; width: 20px;"></div> + <div style="background: brown; width: 40px;"></div> + <div style="background: brown; width: 60px; grid-row-start: 4;"></div> + <div style="background: brown; width: 20px; grid-row: span 2;"></div> + <div style="background: brown; width: 20px; grid-row: span 4;"></div> + <div style="background: brown; width: 20px; grid-row: span 3;"></div> + <div style="background: brown; width: 20px; grid-row: span 4;"></div> + <div style="background: yellow; width: 20px; grid-row-start: 4;"></div> + <div style="background: pink; width: 20px;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-001-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: repeat(4, 50px); + grid-auto-flow: dense; +} +.flex { + display: flex; + flex-direction: row; +} +</style> +<body> + <p>Ensure that dense-packing places multi-spanning item into highest eligible track opening. The yellow item is the item that should be placed in track opening.</p> + <div class="grid"> + <div class="flex"> + <div style="background: lightskyblue; width: 70px;" > + 1 + </div> + <div style="background: lightsteelblue; width: 20px; height: 200px;" > + 4 + </div> + </div> + <div style="background: yellow; width: 10px; grid-row: span 2;" > + 5 + </div> + <div class="flex"> + <div style="background: lightblue; width: 20px; grid-row: 4;" > + 2 + </div> + <div style="background: darkblue; width: 20px; height: 100px; grid-row: 3; transform: translateY(-50px);"> + 3 + </div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-dense-packing-multi-span-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(4, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing places multi-spanning item into highest eligible track opening. The yellow item is the item that should be placed in track opening.</p> + <div class="masonry"> + <div style="background: lightskyblue; width: 70px;" > + 1 + </div> + <div style="background: lightblue; width: 20px; grid-row: 4;" > + 2 + </div> + <div style="background: darkblue; width: 20px; grid-row: 3 / span 2;"> + 3 + </div> + <div style="background: lightsteelblue; width: 20px; grid-row: span 4;" > + 4 + </div> + <div style="background: yellow; width: 10px; grid-row: span 2;" > + 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-002-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: 10px 10px 20px 15px 5px; + grid-auto-flow: column; +} +.flex { + display: flex; + flex-direction: row; +} +</style> +<body> + <p>Ensure that dense-packing with multi-span items are placed into tracks with the same used size and the same number of tracks, and priority is given to tracks closest after the auto-placement cursor.</p> + <div class="grid"> + <div class="flex"> + <div style="background: yellow; width: 20px; height: 20px;" > + 4 + </div> + <div style="background: lightblue; width: 20px; height: 60px;" > + 2 + </div> + <div style="background: darkblue; width: 20px; height: 40px;"> + 3 + </div> + </div> + <div style="background: lightskyblue; width: 20px; height: 20px; transform: translateY(10px);" > + 1 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-002.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-dense-packing-multi-span-002-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: 10px 10px 20px 15px 5px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing with multi-span items are placed into tracks with the same used size and the same number of tracks, and priority is given to tracks closest after the auto-placement cursor.</p> + <div class="masonry"> + <div style="background: lightskyblue; width: 20px; grid-row: 3" > + 1 + </div> + <div style="background: lightblue; width: 20px; grid-row: span 5" > + 2 + </div> + <div style="background: darkblue; width: 20px; grid-row: span 3;"> + 3 + </div> + <div style="background: yellow; width: 20px; grid-row: span 2;" > + 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-003-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: repeat(3, 50px); + padding: 10px; + grid-auto-flow: dense; +} +.flex { + display: flex; + flex-direction: row; +} +</style> +<body> + <p>Ensure that dense-packing places items that span more than 1 track correctly into gaps.</p> + <div class="grid"> + <div class="flex"> + <div style="background: lightskyblue; width: 20px;" > + 1 + </div> + <div style="background:orchid; width: 10px; height: 100px;"> + 5 + </div> + </div> + <div style="background: lightcoral; width: 20px;" > + 2 + </div> + <div class="flex"> + <div style="background: lightgreen; width: 40px;"> + 3 + </div> + <div style="background: brown; width: 10px; height: 150px; transform: translateY(-100px);"> + 4 + </div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-dense-packing-multi-span-003-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(3, 50px); + padding: 10px; + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing places items that span more than 1 track correctly into gaps.</p> + <div class="masonry"> + <div style="background: lightskyblue; width: 20px;" > + 1 + </div> + <div style="background: lightcoral; width: 20px;" > + 2 + </div> + <div style="background: lightgreen; width: 40px;"> + 3 + </div> + <div style="background: brown; width: 10px; grid-row: span 3;"> + 4 + </div> + <div style="background:orchid; width: 10px; grid-row: span 2;"> + 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-004-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: repeat(4, 50px); + grid-template-columns: repeat(2, 20px) 40px repeat(2, 20px); + grid-auto-flow: column; +} +</style> +<body> + <p>Ensure that dense-packing in masonry only places items with specified tracks into track openings in those same specified tracks.</p> + <div class="grid"> + <div style="background: brown; width: 20px; grid-row: span 2;"></div> + <div style="background: pink; width: 20px; grid-row: span 2;"></div> + <div style="background: darkgoldenrod; width: 20px; grid-row: span 4;"></div> + <div style="background: yellow; width: 20px; grid-row: 1 / span 2;"></div> + <div style="background: tan; width: 40px; grid-row: 3 / span 2;"></div> + <div style="background: brown; width: 20px; grid-row: span 4;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-004.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-dense-packing-multi-span-004-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(4, 50px); + grid-auto-flow: dense; +} +</style> +<body> + <p>Ensure that dense-packing in masonry only places items with specified tracks into track openings in those same specified tracks.</p> + <div class="masonry"> + <div style="background: brown; width: 20px; grid-row: span 2;"></div> + <div style="background: darkgoldenrod; width: 20px; grid-row: span 4;"></div> + <div style="background: tan; width: 40px; grid-row: 3 / span 2;"></div> + <div style="background: brown; width: 20px; grid-row: span 4;"></div> + <div style="background: yellow; width: 20px; grid-row: 1 / span 2;"></div> + <div style="background: pink; width: 20px; grid-row: span 2;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/column-initial-item-tolerance-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/column-initial-item-tolerance-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + padding: 20px; + width: 400px; +} + +.flex { + display: flex; + flex-direction: column; + gap: 20px; +} +</style> +<body> + <p>Test that the initial tie threshold for masonry is correctly resolved.</p> + <div class="grid"> + <div class="flex"> + <div style="background: lightskyblue; height: 100px"></div> + <div style="background: lightgreen; height: 50px"></div> + </div> + <div class="flex"> + <div style="background: lightcoral; height: 50px"></div> + <div style="background: palegoldenrod; height: 100px"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/column-initial-item-tolerance.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/column-initial-item-tolerance.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Masonry Test: Initial value of item-tolerance</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3/#item-slack"> +<link rel="match" href="column-initial-item-tolerance-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + font: 50px/1 Ahem; + grid-template-columns: repeat(2, 1fr); + item-tolerance: initial; + gap: 20px; + padding: 20px; + width: 400px; +} + +.auto-item { + padding: 10px; +} + +.auto-item:nth-of-type(1) { + background: lightskyblue; +} + +.auto-item:nth-of-type(2) { + background: lightcoral; +} + +.auto-item:nth-of-type(3) { + background: lightgreen; +} + +.auto-item:nth-of-type(4) { + background: palegoldenrod; +} +</style> +<body> + <p>Test that the initial tie threshold for masonry is correctly resolved.</p> + <div class="masonry"> + <div class="auto-item" style="height: 80px"></div> + <div class="auto-item" style="height: 30px"></div> + <div class="auto-item" style="height: 30px"></div> + <div class="auto-item" style="height: 80px"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/column-item-tolerance-infinite-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/column-item-tolerance-infinite-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + font: 15px/1 Ahem; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + padding: 20px; + width: 380px; +} + +.auto-item { + padding: 10px; + width: 50px; + background: lightskyblue; +} + +.flex { + gap: 20px; + display: flex; + flex-direction: column; +} +</style> +<body> + <p>Test that the infinite tie threshold for masonry is correctly resolved.</p> + <div class="grid"> + <div class="flex"> + <div class="auto-item" style="height: 40px">1</div> + <div class="auto-item" style="height: 40px">5</div> + <div class="auto-item" style="height: 40px">9</div> + </div> + <div class="flex"> + <div class="auto-item" style="height: 30px">2</div> + <div class="auto-item" style="height: 30px">6</div> + <div class="auto-item" style="height: 30px">10</div> + </div> + <div class="flex"> + <div class="auto-item" style="height: 20px">3</div> + <div class="auto-item" style="height: 20px">7</div> + <div class="auto-item" style="height: 20px">11</div> + </div> + <div class="flex"> + <div class="auto-item" style="height: 10px">4</div> + <div class="auto-item" style="height: 10px">8</div> + <div class="auto-item" style="height: 10px">12</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/column-item-tolerance-infinite.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/column-item-tolerance-infinite.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Masonry Test: Infinite value of item-tolerance</title> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3/#item-slack"> +<link rel="match" href="column-item-tolerance-infinite-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + masonry-direction: column; + background: gray; + grid-template-columns: repeat(4, 1fr); + item-tolerance: infinite; + gap: 20px; + padding: 20px; + width: 380px; + font: 15px/1 Ahem; +} + +.auto-item { + padding: 10px; + width: 50px; + background: lightskyblue; +} +</style> +<body> + <p>Test that the infinite tie threshold for masonry is correctly resolved.</p> + <div class="masonry"> + <div class="auto-item" style="height: 40px">1</div> + <div class="auto-item" style="height: 30px">2</div> + <div class="auto-item" style="height: 20px">3</div> + <div class="auto-item" style="height: 10px">4</div> + <div class="auto-item" style="height: 40px">5</div> + <div class="auto-item" style="height: 30px">6</div> + <div class="auto-item" style="height: 20px">7</div> + <div class="auto-item" style="height: 10px">8</div> + <div class="auto-item" style="height: 40px">9</div> + <div class="auto-item" style="height: 30px">10</div> + <div class="auto-item" style="height: 20px">11</div> + <div class="auto-item" style="height: 10px">12</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/row-initial-item-tolerance-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/row-initial-item-tolerance-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + font: 50px/1 Ahem; + grid-template-rows: repeat(2, 1fr); + gap: 20px; + padding: 20px; + width: 170px; +} + +.auto-item { + padding: 10px; + height: 100px; +} + +.auto-item:nth-of-type(1) { + background: lightskyblue; + grid-column: 1; +} + +.auto-item:nth-of-type(2) { + background: lightcoral; + grid-column: 1; +} + +.auto-item:nth-of-type(3) { + background: palegoldenrod; + grid-column: 2; + transform: translateX(-50px); +} + +.auto-item:nth-of-type(4) { + background: lightgreen; + grid-column: 2; + grid-row: 1; +} +</style> +<body> + <p>Test that the initial tie threshold for masonry is correctly resolved.</p> + <div class="grid"> + <div class="auto-item" style="width: 80px"></div> + <div class="auto-item" style="width: 30px"></div> + <div class="auto-item" style="width: 80px"></div> + <div class="auto-item" style="width: 30px"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/row-initial-item-tolerance.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/row-initial-item-tolerance.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Masonry Test: Initial value of item-tolerance</title> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3/#item-slack"> +<link rel="match" href="row-initial-item-tolerance-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + font: 50px/1 Ahem; + grid-template-rows: repeat(2, 1fr); + item-tolerance: initial; + gap: 20px; + padding: 20px; + width: 170px; +} + +.auto-item { + padding: 10px; + height: 100px; +} + +.auto-item:nth-of-type(1) { + background: lightskyblue; +} + +.auto-item:nth-of-type(2) { + background: lightcoral; +} + +.auto-item:nth-of-type(3) { + background: lightgreen; +} + +.auto-item:nth-of-type(4) { + background: palegoldenrod; +} +</style> +<body> + <p>Test that the initial tie threshold for masonry is correctly resolved.</p> + <div class="masonry"> + <div class="auto-item" style="width: 80px"></div> + <div class="auto-item" style="width: 30px"></div> + <div class="auto-item" style="width: 30px"></div> + <div class="auto-item" style="width: 80px"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/row-item-tolerance-infinite-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/row-item-tolerance-infinite-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + font: 15px/1 Ahem; + grid-template-rows: repeat(4, 1fr); + gap: 20px; + padding: 20px; + width: 380px; +} + +.auto-item { + padding: 10px; + height: 50px; + background: lightskyblue; +} + +.flex { + gap: 20px; + display: flex; + flex-direction: row; +} +</style> +<body> + <p>Test that the infinite tie threshold for masonry is correctly resolved.</p> + <div class="grid"> + <div class="flex"> + <div class="auto-item" style="width: 40px">1</div> + <div class="auto-item" style="width: 40px">5</div> + <div class="auto-item" style="width: 40px">9</div> + </div> + <div class="flex"> + <div class="auto-item" style="width: 30px">2</div> + <div class="auto-item" style="width: 30px">6</div> + <div class="auto-item" style="width: 30px">10</div> + </div> + <div class="flex"> + <div class="auto-item" style="width: 20px">3</div> + <div class="auto-item" style="width: 20px">7</div> + <div class="auto-item" style="width: 20px">11</div> + </div> + <div class="flex"> + <div class="auto-item" style="width: 10px">4</div> + <div class="auto-item" style="width: 10px">8</div> + <div class="auto-item" style="width: 10px">12</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/row-item-tolerance-infinite.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance/row-item-tolerance-infinite.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Masonry Test: Infinite value of item-tolerance</title> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3/#item-slack"> +<link rel="match" href="row-item-tolerance-infinite-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + grid-template-rows: repeat(4, 1fr); + item-tolerance: infinite; + gap: 20px; + padding: 20px; + width: 380px; + font: 15px/1 Ahem; +} + +.auto-item { + padding: 10px; + height: 50px; + background: lightskyblue; +} +</style> +<body> + <p>Test that the infinite tie threshold for masonry is correctly resolved.</p> + <div class="masonry"> + <div class="auto-item" style="width: 40px">1</div> + <div class="auto-item" style="width: 30px">2</div> + <div class="auto-item" style="width: 20px">3</div> + <div class="auto-item" style="width: 10px">4</div> + <div class="auto-item" style="width: 40px">5</div> + <div class="auto-item" style="width: 30px">6</div> + <div class="auto-item" style="width: 20px">7</div> + <div class="auto-item" style="width: 10px">8</div> + <div class="auto-item" style="width: 40px">9</div> + <div class="auto-item" style="width: 30px">10</div> + <div class="auto-item" style="width: 20px">11</div> + <div class="auto-item" style="width: 10px">12</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-001-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid { + display: grid; + grid-template-rows: 100px auto 100px; + align-items: start; + background: gray; + width: 300px; + padding: 10px; +} + +.flex { + display: flex; + flex-direction: row; + overflow: visible; + flex-wrap: nowrap; + align-items: flex-start; +} + +.square-100x100 { + width: 100px; + height: 100px; +} +</style> +<body> + <p>Test that masonry items with auto placement are correctly positioned when the grid-axis is the block axis. Ensure that margin affects placement.</p> + <div class="grid"> + <div class="flex"> + <div class="square-100x100" style="background: lightskyblue; margin-right: 100px;"> + Number 1 + </div> + <div style="background: brown; width: 100px; height: 210px;"> + Number 6 + </div> + </div> + <div class="flex"> + <div class="square-100x100" style="background: lightcoral; margin-bottom: 10px;"> + Number 2 + </div> + <div class="square-100x100" style="background: lightpink; margin-bottom: 10px;"> + Number 4 + </div> + </div> + <div class="flex"> + <div class="square-100x100" style="background: lightgreen; margin-right: 40px;"> + Number 3 + </div> + <div class="square-100x100" style="background: lightpink; margin-left: -20px;"> + Number 5 + </div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-001.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-placement-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: auto auto auto; + width: 300px; + padding: 10px; +} + +.first-track { + background: lightskyblue; + grid-row-start: 1; +} + +.second-track { + background: lightcoral; + grid-row-start: 2; +} + +.third-track { + background: lightgreen; + grid-row-start: 3; +} + +.square-100x100 { + width: 100px; + height: 100px; +} +</style> +<body> + <p>Test that masonry items with auto placement are correctly positioned when the grid-axis is the block axis. Ensure that margin affects placement.</p> + <div class="masonry"> + <div class="first-track square-100x100" style="margin-right: 40px;"> + Number 1 + </div> + <div class="second-track square-100x100" style="margin-bottom: 10px;"> + Number 2 + </div> + <div class="third-track square-100x100" style="margin-right: 40px;"> + Number 3 + </div> + <div class="square-100x100" style="background-color: lightpink;"> + Number 4 + </div> + <div class="square-100x100" style="background-color: lightpink; margin-left: -20px;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown; width: 100px;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-002-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: auto auto auto; + grid-template-columns: auto auto auto; + width: 870px; + gap: 20px; + padding: 20px; + align-items: start; + font: 15px/1 "Ahem"; +} + +.grid > div { + width: max-content; +} + +.grid-auto-item-1 { + background: lightskyblue; + padding: 10px; +} + +.grid-auto-item-2 { + background: lightcoral; + padding: 10px; +} + +.grid-auto-item-3 { + background: lightgreen; + padding: 10px; +} + +.grid-auto-item-4 { + background: lightpink; + padding: 10px; + grid-row: 1 / 3; + align-self: stretch; + transform: translateX(-3em); +} +</style> +<body> + <p>Test that masonry items with auto placement are correctly positioned within the grid axis.</p> + <div class="grid"> + <div class="grid-auto-item-1" style="grid-row: 1;">This is some text</div> + <div class="grid-auto-item-2" style="grid-row: 2;">Some larger words in this sentence</div> + <div class="grid-auto-item-3" style="grid-row: 3;">The cat cannot be separated from milk</div> + <div class="grid-auto-item-4">The cat still cannot be separated from milk</div> + <div class="grid-auto-item-4">The cat still cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-002.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="row-auto-placement-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-rows: auto auto auto; + masonry-direction: row; + width: 870px; + padding: 20px; + gap: 20px; + font: 15px/1 "Ahem"; +} + +.masonry > div { + width: max-content; +} + +.auto-item { + padding: 10px; +} + +.auto-item:nth-of-type(1) { + background: lightskyblue; +} + +.auto-item:nth-of-type(2) { + background: lightcoral; +} + +.auto-item:nth-of-type(3) { + background: lightgreen; +} + +.two-track-spanner { + background: lightpink; + grid-row: span 2; + padding: 10px; +} +</style> +<body> + <p>Test that masonry items with auto placement are correctly positioned within the grid axis.</p> + <div class="masonry"> + <div class="auto-item">This is some text</div> + <div class="auto-item">Some larger words in this sentence</div> + <div class="auto-item">The cat cannot be separated from milk</div> + <div class="two-track-spanner">The cat still cannot be separated from milk</div> + <div class="two-track-spanner">The cat still cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-max-content-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-max-content-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-rows: 15px auto auto; + align-items: start; + background: gray; + padding: 10px; + width: max-content; +} + +.flex { + display: flex; + flex-direction: row; + overflow: visible; + flex-wrap: nowrap; + width: max-content; +} +</style> +<body> + <p>Ensure that masonry containers are sized correctly under max-content constraints even if the items do not have the max-content style.</p> + <div class="grid"> + <div class="flex"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: brown; height: 30px;"> + Number 4 + </div> + </div> + <div class="flex"> + <div style="background: lightcoral;"> + Number 2 + </div> + </div> + <div class="flex"> + <div style="background: lightgreen;"> + Number 3 + </div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-max-content.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-max-content.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-placement-max-content-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +.masonry { + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: auto auto auto; + width: max-content; + padding: 10px; +} +</style> +<body> + <p>Ensure that masonry containers are sized correctly under max-content constraints even if the items do not have the max-content style.</p> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div class="second-track" style="background: lightcoral;"> + Number 2 + </div> + <div class="third-track" style="background: lightgreen;"> + Number 3 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-min-content-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-min-content-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +html,body { + color:black; font:15px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-rows: 15px auto auto; + width: min-content; + align-items: start; + padding: 10px; +} + +#gray-bg { + background: gray; + position: absolute; + z-index: -1; +} +</style> +<body> + <p>Ensure that masonry containers are sized correctly under min-content constraints even if the items do not have the min-content style.</p> + <div id="gray-bg"></div> + <div id="shown-items" class="grid"> + <div style="background: lightskyblue; width: max-content; grid-row: 1; grid-column: 1;"> + Number 1 + </div> + <div style="background: brown; height: 30px; width: max-content; grid-row: 1; grid-column: 2;"> + Number 4 + </div> + <div style="grid-row: 2; grid-column: 1;"> + <div style="background: lightcoral;"> + Number 2 + </div> + </div> + <div style="grid-row: 3; grid-column: 1;"> + <div style="background: lightgreen;"> + Number 3 + </div> + </div> + </div> + <div id="grid-with-min-content" class="grid" style="visibility: hidden;"> + <div id="number1" style="visibility: hidden; width: min-content; grid-row: 1; grid-column: 1;"> + Number 1 + </div> + <div id="number4" style="visibility: hidden; height: 30px; width: min-content; grid-row: 1; grid-column: 2;"> + Number 4 + </div> + <div style="grid-row: 2; grid-column: 1; width: min-content;"> + <div style="visibility: hidden;"> + Number 2 + </div> + </div> + <div style="grid-row: 3; grid-column: 1; width: min-content;"> + <div style="visibility: hidden;"> + Number 3 + </div> + </div> + </div> +</body> +<script> +window.addEventListener('DOMContentLoaded', function() { + const grid_with_min_content = document.getElementById('grid-with-min-content'); + const shown_items = document.getElementById('shown-items'); + + let gray_bg = document.getElementById('gray-bg'); + + // Set grayBg size to match grid-with-min-content width and shown-items height + gray_bg.style.width = grid_with_min_content.offsetWidth + 'px'; + gray_bg.style.height = shown_items.offsetHeight + 'px'; +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-min-content.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-auto-placement-min-content.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-placement-min-content-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +.masonry { + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: auto auto auto; + width: min-content; + padding: 10px; +} +</style> +<body> + <p>Ensure that masonry containers are sized correctly under min-content constraints even if the items do not have the min-content style.</p> + <div class="masonry"> + <div style="background: lightskyblue;" > + Number 1 + </div> + <div style="background: lightcoral;" > + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="magenta" style="color: magenta; order: 10;">M</div> + <div id="lime" style="color: lime; order: 5;">L</div> + <div id="yellow" style="color: yellow; order: 1;">Y</div> + <div id="blue" style="color: blue;">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="column-order-property-auto-placement-001-ref.html"> +<style> +#grid { + display: masonry; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="magenta" style="color: magenta; order: 10;">M</div> + <div id="lime" style="color: lime; order: 5;">L</div> + <div id="yellow" style="color: yellow; order: 1;">Y</div> + <div id="blue" style="color: blue;">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-002-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="magenta" style="color:magenta;">M</div> + <div id="lime" style="color:lime;order:-1;">L</div> + <div id="yellow" style="color:yellow;order:-5;">Y</div> + <div id="blue" style="color:blue;order:-10;">B</div> +</div> +</style> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="column-order-property-auto-placement-002-ref.html"> +<style> +#grid { + display: masonry; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="magenta" style="color: magenta;">M</div> + <div id="lime" style="color: lime; order: -1;">L</div> + <div id="yellow" style="color: yellow; order: -5;">Y</div> + <div id="blue" style="color: blue; order: -10;">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-003-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="lime" style="color: lime;">L</div> + <div id="magenta" style="color: magenta; order: 1;">M</div> + <div id="blue" style="color: blue; order: -5;">B</div> + <div id="yellow" style="color: yellow; order: -5;">Y</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-003.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="column-order-property-auto-placement-003-ref.html"> +<style> +#grid { + display: masonry; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="lime" style="color: lime;">L</div> + <div id="magenta" style="color: magenta; order: 1;">M</div> + <div id="blue" style="color: blue; order: -5;">B</div> + <div id="yellow" style="color: yellow; order: -5;">Y</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-004-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="blue" style="color: blue; order: 1;">B</div> + <div id="lime" style="color: lime; order: 5;">L</div> + <div id="magenta" style="color: magenta; order: 5;">M</div> + <div id="yellow" style="color: yellow; order: 1;">Y</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-004.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="column-order-property-auto-placement-004-ref.html"> +<style> +#grid { + display: masonry; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="blue" style="color: blue; order: 1;">B</div> + <div id="lime" style="color: lime; order: 5;">L</div> + <div id="magenta" style="color: magenta; order: 5;">M</div> + <div id="yellow" style="color: yellow; order: 1;">Y</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-005-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="yellow" style="color: yellow; order: -1;">Y</div> + <div id="magenta" style="color: magenta; order: 5;">M</div> + <div id="blue" style="color: blue; order: -5;">B</div> + <div id="lime" style="color: lime; order: 1;">L</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/column-order-property-auto-placement-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="column-order-property-auto-placement-005-ref.html"> +<style> +#grid { + display: masonry; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="yellow" style="color: yellow; order: -1;">Y</div> + <div id="magenta" style="color: magenta; order: 5;">M</div> + <div id="blue" style="color: blue; order: -5;">B</div> + <div id="lime" style="color: lime; order: 1;">L</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + grid-auto-flow: column; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="magenta" style="color: magenta; order: 10;">M</div> + <div id="lime" style="color: lime; order: 5;">L</div> + <div id="yellow" style="color: yellow; order: 1;">Y</div> + <div id="blue" style="color: blue;">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="row-order-property-auto-placement-001-ref.html"> +<style> +#masonry { + display: masonry; + font: 50px/1 Ahem; + masonry-direction: row; + grid-template-rows: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="masonry"> + <div id="magenta" style="color: magenta; order: 10;">M</div> + <div id="lime" style="color: lime; order: 5;">L</div> + <div id="yellow" style="color: yellow; order: 1;">Y</div> + <div id="blue" style="color: blue;">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-002-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + grid-auto-flow: column; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="magenta" style="color: magenta;">M</div> + <div id="lime" style="color: lime; order: -1;">L</div> + <div id="yellow" style="color: yellow; order: -5;">Y</div> + <div id="blue" style="color: blue; order: -10;">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="row-order-property-auto-placement-002-ref.html"> +<style> +#grid { + display: masonry; + font: 50px/1 Ahem; + masonry-direction: row; + grid-template-rows: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="magenta" style="color: magenta;">M</div> + <div id="lime" style="color: lime; order: -1;">L</div> + <div id="yellow" style="color: yellow; order: -5;">Y</div> + <div id="blue" style="color: blue; order: -10;">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-003-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + grid-auto-flow: column; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="lime" style="color: lime;">L</div> + <div id="magenta" style="color: magenta; order: 1;">M</div> + <div id="blue" style="color: blue; order: -5;">B</div> + <div id="yellow" style="color: yellow; order: -5;">Y</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="row-order-property-auto-placement-003-ref.html"> +<style> +#grid { + display: masonry; + font: 50px/1 Ahem; + masonry-direction: row; + grid-template-rows: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="lime" style="color: lime;">L</div> + <div id="magenta" style="color: magenta; order: 1;">M</div> + <div id="blue" style="color: blue; order: -5;">B</div> + <div id="yellow" style="color: yellow; order: -5;">Y</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-004-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + grid-auto-flow: column; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="blue" style="color: blue; order: 1;">B</div> + <div id="lime" style="color: lime; order: 5;">L</div> + <div id="magenta" style="color: magenta; order: 5;">M</div> + <div id="yellow" style="color: yellow; order: 1;">Y</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-004.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="row-order-property-auto-placement-004-ref.html"> +<style> +#grid { + display: masonry; + masonry-direction: row; + font: 50px/1 Ahem; + grid-template-rows: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="blue" style="color: blue; order: 1;">B</div> + <div id="lime" style="color: lime; order: 5;">L</div> + <div id="magenta" style="color: magenta; order: 5;">M</div> + <div id="yellow" style="color: yellow; order: 1;">Y</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-005-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + grid-auto-flow: column; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="yellow" style="color: yellow; order: -1;">Y</div> + <div id="magenta" style="color: magenta; order: 5;">M</div> + <div id="blue" style="color: blue; order: -5;">B</div> + <div id="lime" style="color: lime; order: 1;">L</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/row-order-property-auto-placement-005.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="row-order-property-auto-placement-005-ref.html"> +<style> +#grid { + display: masonry; + font: 50px/1 Ahem; + masonry-direction: row; + grid-template-rows: auto auto; + justify-content: start; + align-content: start; +} +</style> +<p>Ensure `order` property affects masonry layout correctly</p> +<div id="grid"> + <div id="yellow" style="color: yellow; order: -1;">Y</div> + <div id="magenta" style="color: magenta; order: 5;">M</div> + <div id="blue" style="color: blue; order: -5;">B</div> + <div id="lime" style="color: lime; order: 1;">L</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/resources/pink-image.png b/testing/web-platform/tests/css/css-grid/masonry/tentative/resources/pink-image.png Binary files differ. diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/row-empty-masonry-container-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/row-empty-masonry-container-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-empty-masonry-container-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.empty-container { + display: masonry; + masonry-direction: row; +}; +</style> +<body> + <p>Test that an empty masonry container renders nothing.</p> + <div class="empty-container"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/row-empty-masonry-container-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/row-empty-masonry-container-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-empty-masonry-container-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + background: gray; + position: relative; + item-tolerance: 0; + padding: 20px; +} +</style> +<body> + <p>Test that an empty masonry container still renders padding.</p> + <div class="masonry"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/row-min-max-content-container-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/row-min-max-content-container-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-rows: auto auto auto; + align-items: start; + background: gray; + padding: 10px; +} + +.flex { + display: flex; + flex-direction: row; + overflow: visible; + flex-wrap: nowrap; +} + +.invisible { + visibility: hidden; +} +</style> +<body> + <p>Ensure that containers with min and max-content constraints are sized correctly when all items inside are sized as min/max-content.</p> + <div class="grid" style="margin-bottom: 10px; width: min-content;"> + <div class="flex" style="width: min-content;"> + <div class="invisible" style="width: min-content;"> + Number 1 + </div> + <div class="invisible" style="width: min-content;"> + Number 4 + </div> + </div> + <div class="flex" style="width: min-content;"> + <div class="invisible" style="width: min-content;"> + Number 2 + </div> + </div> + <div class="flex" style="width: min-content;"> + <div class="invisible" style="width: min-content;"> + Number 3 + </div> + </div> + </div> + + <div class="grid" style="width: max-content;"> + <div class="flex" style="width: max-content;"> + <div class="invisible" style="width: max-content;"> + Number 1 + </div> + <div class="invisible" style="width: max-content;"> + Number 4 + </div> + </div> + <div class="flex" style="width: max-content;"> + <div class="invisible" style="width: max-content;"> + Number 2 + </div> + </div> + <div class="flex" style="width: max-content;"> + <div class="invisible" style="width: max-content;"> + Number 3 + </div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/row-min-max-content-container.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/row-min-max-content-container.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-min-max-content-container-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +.masonry { + display: masonry; + background: gray; + position: relative; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: auto auto auto; + padding: 10px; +} + +.fourth-item { + grid-row: span 2; +} + +.invisible { + visibility: hidden; +} +</style> +<body> + <p>Ensure that containers with min and max-content constraints are sized correctly when all items inside are sized as min/max-content.</p> + <div class="masonry" style="margin-bottom: 10px; width: min-content;"> + <div class="first-item invisible" style="width: min-content;"> + Number 1 + </div> + <div class="second-item invisible" style="width: min-content;"> + Number 2 + </div> + <div class="third-item invisible" style="width: min-content;"> + Number 3 + </div> + <div class="fourth-item invisible" style="width: min-content;"> + Number 4 + </div> + </div> + <div class="masonry" style="width: max-content;"> + <div class="first-item invisible" style="width: max-content;"> + Number 1 + </div> + <div class="second-item invisible" style="width: max-content;"> + Number 2 + </div> + <div class="third-item invisible" style="width: max-content;"> + Number 3 + </div> + <div class="fourth-item invisible" style="width: max-content;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/auto-repeat-no-children-crash.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/auto-repeat-no-children-crash.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> + <title>If an intrinsic auto repeat is used, we should not crash when there are no children</title> + <link rel="help" href="https://drafts.csswg.org/css-grid-3"> + <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +</head> +<div style="display:masonry; grid-template-columns:repeat(2, 50px) repeat(auto-fill, auto);"></div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-001-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, 100px); + grid-template-rows: 100px 100px 100px; + background: gray; + width: 300px; + height: 300px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, 100px); + width: 300px; + height: 300px; +} + +.masonry > div { + width: 100%; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-002-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, 25%); + grid-template-rows: 100px 100px; + background: gray; + width: 300px; + height: 200px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with percentage track sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, 25%); + width: 300px; + height: 200px; +} + +.masonry > div { + width: 100%; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-003.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: inline-masonry; + background: green; + aspect-ratio: 1/1; + grid-template-columns: repeat(auto-fill, 50px); + min-height: 60px; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div class="masonry"></div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-004.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: inline-masonry; + background: green; + aspect-ratio: 1/1; + grid-template-columns: repeat(auto-fill, 50px); + min-height: 60%; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div style="width: min-content; height: 100px; background: green;"> + <div style="height: 100%;"> + <div class="masonry"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-005.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Auto repeater with minmax size.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + width: 100px; + grid-template-columns: repeat(auto-fill, minmax(50px, 25px)); +} +</style> +<p>Test passes if there is a filled green square.</p> +<div class="masonry"> + <div style="background: green; height: 50px; width: 100%;"></div> + <div style="background: green; height: 50px; width: 100%;"></div> + <div style="background: green; height: 50px; width: 100%;"></div> + <div style="background: green; height: 50px; width: 100%;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-006.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>Checks that a dynamic change in containing block width changes the number of auto repeat tracks.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: inline-masonry; + background: green; + height: 100px; + min-width: 60%; + grid-template-columns: repeat(auto-fill, 50px); +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="width: 0px; height: 100px;"> + <div class="masonry"></div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.width = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-007.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-007.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>Checks that a dynamic change in containing block height changes the number of auto repeat tracks.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: inline-masonry; + background: green; + width: 100px; + min-height: 60%; + grid-template-columns: repeat(auto-fill, 50px); + aspect-ratio: 1/1; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="width: 0px; height: 100px;"> + <div class="masonry"></div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-008.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-008.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<title>Auto repeat tracks and min sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="This test checks that auto repeat tracks use min size when available to compute the number of tracks."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: masonry; + grid-template-columns: repeat(auto-fill, 100px); + min-width: 300px; + min-height: 200px; + float: left; + background: pink; +} +.border { + border: 10px solid; +} +.border-box { + box-sizing: border-box; +} +.item { + background: lime; + /* Place item on the last column. */ + grid-column: -2; + width: 100%; + height: 200px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + +<div id="log"></div> + +<div class="masonry" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> +</div> + +<div class="masonry" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> +</div> + +<div class="masonry" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> +</div> + +<div class="masonry" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> +</div> + +<div class="masonry border" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> +</div> + +<div class="masonry border" style="width: 200px; height: 100px;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> +</div> + +<div class="masonry border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> +</div> + +<div class="masonry border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> +</div> + +<div class="masonry border border-box" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> +</div> + +<div class="masonry border border-box" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> +</div> + +<div class="masonry border border-box" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> +</div> + +<div class="masonry border border-box" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-009.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-009.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title>Auto repeat tracks and percentage min sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="This test checks that auto repeat tracks use percentage min size when available to compute the number of tracks."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: masonry; + grid-template-columns: repeat(auto-fill, 100px); + min-width: 50%; + min-height: 80%; + float: left; + background: pink; +} +.wrapper { + width: 600px; + height: 250px; +} +.item { + background: lime; + /* Place item on the last column. */ + grid-column: -2; + width: 100%; + height: 200px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + +<div id="log"></div> + +<div class="wrapper"> + <div class="masonry" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + </div> +</div> + +<div class="wrapper"> + <div class="masonry" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + </div> +</div> + +<div class="wrapper"> + <div class="masonry" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-010.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-010.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title>Auto repeat tracks and percentage min sizes with percentage track sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" + content="This test checks that auto repeat tracks can use percentage track + size when only a min size is available to compute the number of tracks."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: inline-masonry; + grid-template-columns: repeat(auto-fill, 25%); + min-width: 50%; + height: 200px; + float: left; + background: pink; +} +.wrapper { + width: 600px; +} +.item { + background: lime; + width: 100%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + + <div id="log"></div> + + <div class="wrapper"> + <div class="masonry" data-expected-width="300" data-expected-height="200"> + <div class="item" data-expected-width="75">Cell 1</div> + <div class="item" data-expected-width="75">Cell 2</div> + <div class="item" data-expected-width="75">Cell 3</div> + <div class="item" data-expected-width="75">Cell 4</div> + <div class="item" data-expected-width="75">Cell 5</div> + </div> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-011.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-011.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<title>Auto repeat tracks and percentage max sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="This test checks that auto repeat tracks use percentage max size when size is indefinite to compute the number of tracks."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: masonry; + grid-template-columns: repeat(auto-fill, 100px); + max-width: 50%; + max-height: 80%; + background: pink; +} +.wrapper { + width: 600px; + height: 250px; +} +.item { + background: lime; + /* Place item on the last column. */ + grid-column: -2; + width: 100%; + height: 200px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + +<div id="log"></div> + +<div class="wrapper"> + <div class="masonry" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + </div> +</div> + +<div class="wrapper"> + <div class="masonry" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + </div> +</div> + +<div class="wrapper"> + <div class="masonry" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + </div> +</div> + +<div class="wrapper"> + <div class="masonry" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-012.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-012.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>Auto repeat tracks with min and max sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="This test checks that auto repeat tracks don't overflow the masonry container size when max size is definite, even if min size is bigger than that."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: masonry; + grid-template-columns: repeat(auto-fill, 100px); + max-width: 100px; + min-width: 250px; + max-height: 50px; + min-height: 125px; + float: left; + background: pink; +} +.item { + background: lime; + /* Place item on the last column. */ + grid-column: -2; + width: 100%; + height: 125px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + +<div id="log"></div> + +<div class="masonry" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> +</div> + +<div class="masonry" style="width: 200px; height: 100px;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> +</div> + +<div class="masonry" style="width: min-content; height: min-content;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> +</div> + +<div class="masonry" style="width: max-content; height: max-content;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-013-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-013-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<style> +.grid { + display: grid; + border: solid thick; + margin: 10px; + grid-template-columns: repeat(auto-fill, 50px 50px); + grid-column-gap: 100px; + width: 300px; + background: pink; +} +.grid > div { + background: lime; + width: 100%; + height: 50px; +} +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div class="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-013.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-013.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Auto repeat tracks with multiple tracks and gutters.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-auto-repeat-013-ref.html"> +<style> +.masonry { + display: masonry; + border: solid thick; + margin: 10px; + grid-template-columns: repeat(auto-fill, 50px 50px); + grid-column-gap: 100px; + width: 300px; + background: pink; +} +.masonry > div { + background: lime; + width: 100%; + height: 50px; +} +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-014-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-014-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<style> +.grid { + display: grid; + border: solid thick; + grid-template-columns: 10px 20px repeat(auto-fill, 30px 40px) 50px 60px; + width: 300px; + background: pink; +} +.grid > :nth-child(2n) { + background: sienna; +} +.grid > :nth-child(2n+1) { + background: orange; +} +.grid > div { + width: 100%; + height: 25px; +} +.holder { + height: 30px; + width: 300px; + border-bottom: 2px solid #cfbfcf; +} +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div class="holder"> + <div class="grid"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div style="grid-column: 7;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid"> + <div style="grid-column: 2;"></div> + <div></div> + <div style="grid-column: 5;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-014.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-014.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<title>Auto repeat tracks with multiple tracks.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-auto-repeat-014-ref.html"> +<style> +.masonry { + display: masonry; + border: solid thick; + grid-template-columns: 10px 20px repeat(auto-fill, 30px 40px) 50px 60px; + width: 300px; + background: pink; +} +.masonry > :nth-child(2n) { + background: sienna; +} +.masonry > :nth-child(2n+1) { + background: orange; +} +.masonry > div { + width: 100%; + height: 25px; +} +.holder { + height: 30px; + width: 300px; + border-bottom: 2px solid #cfbfcf; +} +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div class="holder"> + <div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div style="grid-column: 7;"></div> + </div> +</div> + +<div class="holder"> + <div class="masonry"> + <div style="grid-column: 2;"></div> + <div></div> + <div style="grid-column: 5;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-015-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-015-ref.html @@ -0,0 +1,161 @@ +<!DOCTYPE html> +<style> +.grid { + display: inline-grid; + border: 1px solid black; + grid-template-columns: [u] repeat(auto-fill, [v] 10px [w] 10px [x] 10px [y]) [z]; + grid-column-gap: 3px; + /* Does not fit a whole-number of repetitions */ + width: 94px; + background: pink; +} +div > div { + background: blue; + width: 100%; + height: 25px; +} +</style> +<body> + <!-- u --> + <div class="grid"> + <div style="grid-column-start: u"></div> + </div> + <!-- non-existent line name --> + <div class="grid"> + <div style="grid-column-start: nonesuch"></div> + </div> + <div class="grid"> + <div style="grid-column-start: u 1"></div> + </div> + <div class="grid"> + <div style="grid-column-start: u -1"></div> + </div> + <!-- Also non-existent, there is only one u --> + <div class="grid"> + <div style="grid-column-start: u 4"></div> + </div> + <div class="grid"> + <div style="grid-column-start: u 9"></div> + </div> + <div class="grid"> + <div style="grid-column-start: u 2"></div> + </div> + <div class="grid"> + <div style="grid-column-start: u -2"></div> + </div> + <div class="grid"> + <div style="grid-column-start: u -6"></div> + </div> + <div class="grid"> + <div style="grid-column-start: u -7"></div> + </div> + <!-- v --> + <div class="grid"> + <div style="grid-column-start: v"></div> + </div> + <div class="grid"> + <div style="grid-column-start: v 1"></div> + </div> + <div class="grid"> + <div style="grid-column-start: v 2"></div> + </div> + <div class="grid"> + <div style="grid-column-start: v -1"></div> + </div> + <div class="grid"> + <div style="grid-column-start: v -2"></div> + </div> + <!-- Also non-existent, there are only two v's --> + <div class="grid"> + <div style="grid-column-start: v 3"></div> + </div> + <div class="grid"> + <div style="grid-column-start: v -3"></div> + </div> + <!-- w --> + <div class="grid"> + <div style="grid-column-start: w"></div> + </div> + <div class="grid"> + <div style="grid-column-start: w 1"></div> + </div> + <div class="grid"> + <div style="grid-column-start: w 2"></div> + </div> + <div class="grid"> + <div style="grid-column-start: w -1"></div> + </div> + <div class="grid"> + <div style="grid-column-start: w -2"></div> + </div> + <!-- Also non-existent, there are only two w's --> + <div class="grid"> + <div style="grid-column-start: w 3"></div> + </div> + <div class="grid"> + <div style="grid-column-start: w -3"></div> + </div> + <!-- x --> + <div class="grid"> + <div style="grid-column-start: x"></div> + </div> + <div class="grid"> + <div style="grid-column-start: x 1"></div> + </div> + <div class="grid"> + <div style="grid-column-start: x 2"></div> + </div> + <div class="grid"> + <div style="grid-column-start: x -1"></div> + </div> + <div class="grid"> + <div style="grid-column-start: x -2"></div> + </div> + <!-- Also non-existent, there are only two x's --> + <div class="grid"> + <div style="grid-column-start: x 3"></div> + </div> + <div class="grid"> + <div style="grid-column-start: x -3"></div> + </div> + <!-- y --> + <div class="grid"> + <div style="grid-column-start: y"></div> + </div> + <div class="grid"> + <div style="grid-column-start: y 1"></div> + </div> + <div class="grid"> + <div style="grid-column-start: y 2"></div> + </div> + <div class="grid"> + <div style="grid-column-start: y -1"></div> + </div> + <div class="grid"> + <div style="grid-column-start: y -2"></div> + </div> + <!-- Also non-existent, there are only two y's --> + <div class="grid"> + <div style="grid-column-start: y -3"></div> + </div> + <div class="grid"> + <div style="grid-column-start: y 3"></div> + </div> + <!-- z --> + <div class="grid"> + <div style="grid-column-start: z"></div> + </div> + <div class="grid"> + <div style="grid-column-start: z 1"></div> + </div> + <div class="grid"> + <div style="grid-column-start: z -1"></div> + </div> + <!-- Also non-existent, there is only one z --> + <div class="grid"> + <div style="grid-column-start: z 2"></div> + </div> + <div class="grid"> + <div style="grid-column-start: z -2"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-015.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-015.html @@ -0,0 +1,165 @@ +<!DOCTYPE html> +<title>Auto repeat tracks with multiple tracks and line names.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-auto-repeat-015-ref.html"> +<style> +.masonry { + display: inline-masonry; + border: 1px solid black; + grid-template-columns: [u] repeat(auto-fill, [v] 10px [w] 10px [x] 10px [y]) [z]; + grid-column-gap: 3px; + /* Does not fit a whole-number of repetitions */ + width: 94px; + background: pink; +} +div > div { + background: blue; + width: 100%; + height: 25px; +} +</style> +<body> + <!-- u --> + <div class="masonry"> + <div style="grid-column-start: u"></div> + </div> + <!-- non-existent line name --> + <div class="masonry"> + <div style="grid-column-start: nonesuch"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: u 1"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: u -1"></div> + </div> + <!-- Also non-existent, there is only one u --> + <div class="masonry"> + <div style="grid-column-start: u 4"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: u 9"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: u 2"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: u -2"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: u -6"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: u -7"></div> + </div> + <!-- v --> + <div class="masonry"> + <div style="grid-column-start: v"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: v 1"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: v 2"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: v -1"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: v -2"></div> + </div> + <!-- Also non-existent, there are only two v's --> + <div class="masonry"> + <div style="grid-column-start: v 3"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: v -3"></div> + </div> + <!-- w --> + <div class="masonry"> + <div style="grid-column-start: w"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: w 1"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: w 2"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: w -1"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: w -2"></div> + </div> + <!-- Also non-existent, there are only two w's --> + <div class="masonry"> + <div style="grid-column-start: w 3"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: w -3"></div> + </div> + <!-- x --> + <div class="masonry"> + <div style="grid-column-start: x"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: x 1"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: x 2"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: x -1"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: x -2"></div> + </div> + <!-- Also non-existent, there are only two x's --> + <div class="masonry"> + <div style="grid-column-start: x 3"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: x -3"></div> + </div> + <!-- y --> + <div class="masonry"> + <div style="grid-column-start: y"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: y 1"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: y 2"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: y -1"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: y -2"></div> + </div> + <!-- Also non-existent, there are only two y's --> + <div class="masonry"> + <div style="grid-column-start: y -3"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: y 3"></div> + </div> + <!-- z --> + <div class="masonry"> + <div style="grid-column-start: z"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: z 1"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: z -1"></div> + </div> + <!-- Also non-existent, there is only one z --> + <div class="masonry"> + <div style="grid-column-start: z 2"></div> + </div> + <div class="masonry"> + <div style="grid-column-start: z -2"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-016-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-016-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, 100px); + grid-template-rows: 100px 100px 100px; + background: gray; + height: 300px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + <div style="grid-column: span 3; background: blue;"> + Number 7 + </div> + <div style="grid-column: span 3; background: yellow;"> + Number 8 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-016.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-016.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-016-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, 100px); + height: 300px; +} + +.masonry > div { + width: 100%; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + <div style="grid-column: span 3; background: blue;"> + Number 7 + </div> + <div style="grid-column: span 3; background: yellow;"> + Number 8 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-017-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-017-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: 100px 100px; + grid-template-rows: 100px 100px 100px; + background: gray; + height: 300px; + width: 300px +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-017.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-017.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-017-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, 100px); + height: 300px; + width: 300px; +} + +.masonry > div { + width: 100%; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-column: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 3;"> + Number 4 + </div> + <div style="background: orange; grid-column: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-018-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-018-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: 100px 100px 100px; + grid-template-rows: 100px 100px; + background: gray; + height: 200px; + width: 500px +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-018.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-018.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-018-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, 100px); + height: 200px; + width: 500px; +} + +.masonry > div { + width: 100%; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-column: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 5;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 1;"> + Number 4 + </div> + <div style="background: orange; grid-column: 3;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-019.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-019.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, 100px); + height: 200px; + width: 1000px; +} + +.masonry > div { + width: 100%; + height: 100px; +} +</style> +<div class="masonry"> + <div style="grid-column: 1;"></div> + <div style="grid-column: 3;"></div> + <div></div> + <div></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + assert_equals(computedStyle.getPropertyValue('grid-template-columns'), + "100px 100px 100px 0px 0px 0px 0px 0px 0px 0px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-020.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-020.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto/explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, 100px); + height: 200px; + width: 1000px; +} + +.masonry > div { + width: 100%; + height: 100px; +} +</style> +<div class="masonry"> + <div></div> + <div></div> + <div style="grid-column: 4"></div> + <div style="grid-column: 6"></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + assert_equals(computedStyle.getPropertyValue('grid-template-columns'), + "100px 100px 100px 100px 0px 100px 0px 0px 0px 0px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-021-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-021-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, 50px); + height: 200px; + width: 500px; + gap: 10px; +} + +.grid > div { + width: 100%; + height: 100px; + background-color: orange; +} +</style> +<div class="grid"> + <div style="grid-column: span 4;">1</div> + <div style="grid-column: 4 / span 2;">2</div> + <div style="grid-column: 9 / span 2; grid-row: 1;">3</div> + <div style="grid-column: 7; grid-row: 1;">4</div> + <div style="grid-column: 9 / span 2;">5</div> + <div style="grid-column: 6; grid-row: 1;">6</div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-021.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-021.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto/explicit spanning item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-auto-repeat-021-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, 50px); + height: 200px; + width: 500px; + gap: 10px; +} + +.masonry > div { + width: 100%; + height: 100px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-column: span 4;">1</div> + <div style="grid-column: 4 / span 2;">2</div> + <div style="grid-column: 9 / span 2;">3</div> + <div style="grid-column: 7;">4</div> + <div style="grid-column: span 2;">5</div> + <div>6</div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-022.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-022.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto/explicit spanning item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-auto-repeat-021-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: 50px repeat(5, 50px) repeat(auto-fit, 50px); + height: 200px; + width: 500px; + gap: 10px; +} + +.masonry > div { + width: 100%; + height: 100px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-column: span 4;">1</div> + <div style="grid-column: 4 / span 2;">2</div> + <div style="grid-column: 9 / span 2;">3</div> + <div style="grid-column: 7;">4</div> + <div style="grid-column: span 2;">5</div> + <div>6</div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-023-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-023-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: 100px 100px; + grid-template-rows: 100px 100px 100px; + background: gray; + height: 500px; + width: 300px +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-column: 2;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 2;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 2;"> + Number 4 + </div> + <div style="background: orange; grid-column: 2;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-023.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-023.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-023-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: 100px repeat(auto-fit, 100px); + height: 500px; + width: 300px; +} + +.masonry > div { + width: 100%; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <!-- Only column 2 should get collapsed --> + <div style="background: lightskyblue; grid-column: 3;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 3;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 3;"> + Number 4 + </div> + <div style="background: orange; grid-column: 3;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-024.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-024.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(5, 100px) repeat(auto-fit, 100px); + height: 200px; + width: 1000px; +} + +.masonry > div { + width: 100%; + height: 100px; +} +</style> +<div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + assert_equals(computedStyle.getPropertyValue('grid-template-columns'), + "100px 100px 100px 100px 100px 100px 0px 0px 0px 0px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-025.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-025.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, 100px) repeat(5, 100px); + height: 200px; + width: 1000px; +} + +.masonry > div { + width: 100%; + height: 100px; +} +</style> +<div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + assert_equals(computedStyle.getPropertyValue('grid-template-columns'), + "100px 100px 100px 100px 100px 100px 100px 100px 100px 100px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-026-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-026-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(8, 50px); + height: 200px; + width: 500px; + gap: 10px; +} + +.grid > div { + width: 100%; + height: 100px; + background-color: orange; +} +</style> +<div class="grid"> + <div style="grid-column: span 3;"></div> + <div style="grid-column: -1;"></div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-026.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-026.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto/explicit spanning item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-auto-repeat-026-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(4, 50px) repeat(auto-fit, 50px) repeat(4, 50px); + height: 200px; + width: 500px; + gap: 10px; +} + +.masonry > div { + width: 100%; + height: 100px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-column: span 3;"></div> + <div style="grid-column: -1;"></div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-027-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-027-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, 100px); + width: 400px; + gap: 10px; +} + +img { + width: 100%; + height: auto; + display: block; +} +</style> +<div class="grid"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-027.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/column-auto-repeat-027.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size and replaced items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-auto-repeat-027-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, 100px); + width: 400px; + gap: 10px; +} + +img { + width: 100%; + height: auto; + display: block; +} +</style> +<div class="masonry"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../column-auto-repeat-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, auto); + width: 300px; + height: 300px; +} + +.masonry > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown; width: 200px;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-002-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: auto auto auto auto; + grid-template-rows: 100px 100px; + background: gray; + width: 400px; + height: 200px; +} + +.grid > div { + width: 25%; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track sizes and percentage sized children</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-auto-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, auto); + width: 400px; + height: 200px; +} + +.masonry > div { + width: 25%; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-003-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: 100px 100px 100px 100px; + grid-template-rows: 50px 50px 50px 50px; + background: gray; + width: 400px; + height: 200px; +} + +.grid > div { + width: 75%; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-column: span 2;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: span 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: span 4;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: span 2;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-003.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track sizes and percentage sized spanning children</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-auto-003-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, auto); + width: 400px; + height: 200px; +} + +.masonry > div { + width: 75%; + height: 50px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-column: span 2;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: span 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: span 4;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: span 2;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-004-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: auto auto auto auto; + grid-template-rows: 50px 50px 50px 50px; + grid-gap: 20px; + background: gray; + width: 400px; + height: 260px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-column: span 2; width: 200px"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: span 3; width: 300px;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: span 4; width: 400px;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: span 2; width: 200px;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-004.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track sizes and spanning children with gap</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-auto-004-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, auto); + grid-gap: 20px; + width: 400px; + height: 260px; +} + +.masonry > div { + height: 50px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-column: span 2; width: 200px"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: span 3; width: 300px;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: span 4; width: 400px;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: span 2; width: 200px;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-005-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + background: gray; + width: 300px; + height: 300px; +} + +.grid > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown; width: 200px;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-005.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-auto-005-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + /* + This is not currently a valid track definition and will fall back to + none. However, this is going to change in the future[1]. + + [1] https://github.com/w3c/csswg-drafts/issues/12580#issuecomment-3201090594 + */ + grid-template-columns: auto repeat(auto-fill, auto) auto; + width: 300px; + height: 300px; +} + +.masonry > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown; width: 200px;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-006.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks with auto size.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: inline-masonry; + background: green; + aspect-ratio: 1/1; + grid-template-columns: repeat(auto-fill, auto); + min-height: 60px; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div class="masonry"> + <div style="height: 1px; width: 50px; visibility: hidden;">x</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-007.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-007.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: inline-masonry; + background: green; + aspect-ratio: 1/1; + grid-template-columns: repeat(auto-fill, auto); + min-height: 60%; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div style="width: min-content; height: 100px; background: green;"> + <div style="height: 100%;"> + <div class="masonry"> + <div style="height: 1px; width: 50px; visibility: hidden;">x</div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-008.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-008.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>Checks that a dynamic change in containing block width changes the number of auto repeat tracks.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: inline-masonry; + background: green; + height: 100px; + min-width: 60%; + grid-template-columns: repeat(auto-fill, auto); +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="width: 0px; height: 100px;"> + <div class="masonry"> + <div style="height: 1px; width: 50px;visibility: hidden;">x</div> + </div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.width = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-009.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-009.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<title>Auto repeat tracks and min sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="This test checks that auto repeat tracks use min size when available to compute the number of tracks."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: masonry; + grid-template-columns: repeat(auto-fill, auto); + min-width: 300px; + min-height: 200px; + float: left; + background: pink; +} +.border { + border: 10px solid; +} +.item { + background: lime; + /* Place item on the last column. */ + grid-column: -2; + width: 150px; + height: 200px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + +<div id="log"></div> + +<div class="masonry" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="75" data-offset-y="0" data-expected-width="150" data-expected-height="200"></div> +</div> + +<div class="masonry" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="75" data-offset-y="0" data-expected-width="150" data-expected-height="200"></div> +</div> + +<div class="masonry" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="75" data-offset-y="0" data-expected-width="150" data-expected-height="200"></div> +</div> + +<div class="masonry" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="75" data-offset-y="0" data-expected-width="150" data-expected-height="200"></div> +</div> + +<div class="masonry border" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="75" data-offset-y="0" data-expected-width="150" data-expected-height="200"></div> +</div> + +<div class="masonry border" style="width: 200px; height: 100px;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="75" data-offset-y="0" data-expected-width="150" data-expected-height="200"></div> +</div> + +<div class="masonry border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="75" data-offset-y="0" data-expected-width="150" data-expected-height="200"></div> +</div> + +<div class="masonry border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="75" data-offset-y="0" data-expected-width="150" data-expected-height="200"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-010.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-010.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>Auto repeat tracks with min and max sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="This test checks that auto repeat tracks don't overflow the masonry container size when max size is definite, even if min size is bigger than that."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: masonry; + grid-template-columns: repeat(auto-fill, auto); + max-width: 100px; + min-width: 250px; + max-height: 50px; + min-height: 125px; + float: left; + background: pink; +} +.item { + background: lime; + /* Place item on the last column. */ + grid-column: -2; + width: 100px; + height: 125px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + +<div id="log"></div> + +<div class="masonry" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="75" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> +</div> + +<div class="masonry" style="width: 200px; height: 100px;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="75" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> +</div> + +<div class="masonry" style="width: min-content; height: min-content;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="75" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> +</div> + +<div class="masonry" style="width: max-content; height: max-content;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="75" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-011-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-011-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<style> +.grid { + display: grid; + border: solid thick; + margin: 10px; + grid-template-columns: repeat(auto-fill, 100px 100px); + grid-column-gap: 100px; + width: 300px; + background: pink; +} +.grid > div { + background: lime; + width: 50px; + height: 50px; +} +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div class="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-011.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-011.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Auto repeat tracks with multiple tracks and gutters.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-auto-repeat-auto-011-ref.html"> +<style> +.masonry { + display: masonry; + border: solid thick; + margin: 10px; + grid-template-columns: repeat(auto-fill, auto auto); + grid-column-gap: 100px; + width: 300px; + background: pink; +} +.masonry > div { + background: lime; + width: 50px; + height: 50px; +} +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-012-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-012-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, 150px); + grid-template-rows: 100px 100px; + background: gray; + height: 300px; + width: 300px; +} + +.grid > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-012.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-012.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-auto-012-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, auto); + height: 300px; + width: 300px; +} + +.masonry > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <!-- The second track should still be collapsed, even though this + item is placed in every possible track. --> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 3;"> + Number 4 + </div> + <div style="background: orange; grid-column:1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-013.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-013.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-auto-012-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, auto); + height: 300px; + width: 300px; +} + +.masonry > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-column: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 3;"> + Number 4 + </div> + <div style="background: orange; grid-column: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-014-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-014-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: 100px 100px; + background: gray; + height: 200px; + width: 500px; +} + +.grid > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-014.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-014.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-auto-014-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, auto); + height: 200px; + width: 500px; +} + +.masonry > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-column: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 5;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 1;"> + Number 4 + </div> + <div style="background: orange; grid-column: 3;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-015.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-015.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and auto item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, auto); + height: 200px; + width: 1000px; +} + +.masonry > div { + width: 100px; + height: 100px; +} +</style> +<div class="masonry"> + <div style="grid-column: 1;"></div> + <div style="grid-column: 3;"></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + // These don't end up being 100px because auto tracks get stretched at the end of + // track sizing. + assert_equals(computedStyle.getPropertyValue('grid-template-columns'), + "250px 250px 250px 250px 0px 0px 0px 0px 0px 0px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-016.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-016.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and auto/explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, auto); + height: 200px; + width: 1000px; +} + +.masonry > div { + width: 100px; + height: 100px; +} +</style> +<div class="masonry"> + <div></div> + <div></div> + <div style="grid-column: 4"></div> + <div style="grid-column: 6"></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + // These don't end up being 100px because auto tracks get stretched at the end of + // track sizing. + assert_equals(computedStyle.getPropertyValue('grid-template-columns'), + "200px 200px 200px 200px 0px 200px 0px 0px 0px 0px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-017-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-017-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<style> +.masonry { + display: masonry; + grid-template-columns: repeat(9, auto); + height: 200px; + width: 500px; + gap: 10px; +} + +.masonry > div { + width: 50px; + height: 100px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-column: span 4; width: 200px;">1</div> + <div style="grid-column: 4 / span 2; width: 100px;">2</div> + <div style="grid-column: 8 / span 2; width: 100px;">3</div> + <div style="grid-column: 7;">4</div> + <div style="grid-column: span 2; width: 100px;">5</div> + <div>6</div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-017.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-017.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and explicit spanning item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-auto-017-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, auto); + height: 200px; + width: 500px; + gap: 10px; +} + +.masonry > div { + width: 50px; + height: 100px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-column: span 4; width: 200px;">1</div> + <div style="grid-column: 4 / span 2; width: 100px;">2</div> + <div style="grid-column: 9 / span 2; width: 100px;">3</div> + <div style="grid-column: 7;">4</div> + <div style="grid-column: span 2; width: 100px;">5</div> + <div>6</div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-018.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-018.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and auto/explicit spanning item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-auto-repeat-auto-017-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: 50px repeat(5, 50px) repeat(auto-fit, auto); + height: 200px; + width: 500px; + gap: 10px; +} + +.masonry > div { + width: 50px; + height: 100px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-column: span 4; width: 200px;">1</div> + <div style="grid-column: 4 / span 2; width: 100px;">2</div> + <div style="grid-column: 9 / span 2; width: 100px;">3</div> + <div style="grid-column: 7;">4</div> + <div style="grid-column: span 2; width: 100px;">5</div> + <div>6</div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-019.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-019.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../column-auto-repeat-023-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: 100px repeat(auto-fit, auto); + height: 500px; + width: 300px; +} + +.masonry > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <!-- Only column 2 should get collapsed --> + <div style="background: lightskyblue; grid-column: 3;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 3;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 3;"> + Number 4 + </div> + <div style="background: orange; grid-column: 3;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-020.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-020.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and auto item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(5, 100px) repeat(auto-fit, auto); + height: 200px; + width: 1000px; +} + +.masonry > div { + width: 100px; + height: 100px; +} +</style> +<div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + // The last auto-fit column is 500px because it stretches to fill the remaining + // space. + assert_equals(computedStyle.getPropertyValue('grid-template-columns'), + "100px 100px 100px 100px 100px 500px 0px 0px 0px 0px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-021.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-021.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and auto item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, auto) repeat(5, 100px); + height: 200px; + width: 1000px; +} + +.masonry > div { + width: 100px; + height: 100px; +} +</style> +<div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + assert_equals(computedStyle.getPropertyValue('grid-template-columns'), + "100px 100px 100px 100px 100px 100px 100px 100px 100px 100px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-022-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-022-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(8, 50px); + height: 200px; + width: 500px; + gap: 10px; +} + +.grid > div { + width: 50px; + height: 100px; + background-color: orange; +} +</style> +<div class="grid"> + <div style="grid-column: span 3; width: 150px;"></div> + <div style="grid-column: -1;"></div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-022.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-022.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and auto/explicit spanning item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-auto-repeat-auto-022-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(4, 50px) repeat(auto-fit, auto) repeat(4, 50px); + height: 200px; + width: 500px; + gap: 10px; +} + +.masonry > div { + width: 50px; + height: 100px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-column: span 3; width: 150px;"></div> + <div style="grid-column: -1;"></div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-023-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-023-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: auto auto auto; + width: 400px; + gap: 10px; +} + +img { + width: 100%; + min-width: 100px; + height: auto; + display: block; +} +</style> +<div class="grid"> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-023.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-023.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size and replaced items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-auto-repeat-auto-023-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, auto); + width: 400px; + gap: 10px; +} + +img { + width: 100%; + min-width: 100px; + height: auto; + display: block; +} +</style> +<div class="masonry"> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-024.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-024.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size and replaced items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, auto); + width: 400px; + gap: 10px; +} + +img { + width: 100%; + height: auto; + display: block; +} +</style> +<div class="masonry"> + <img id="test" src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> +</div> +<script> + test(function() { + let image = document.getElementById("test"); + assert_less_than(image.getBoundingClientRect().width, 2); + assert_greater_than(image.getBoundingClientRect().width, 1); + assert_approx_equals(image.getBoundingClientRect().width / image.getBoundingClientRect().height, 113 / 120, .006); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-025-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-025-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: auto auto auto; + width: 400px; + gap: 10px; +} + +img { + width: stretch; + max-width: 100px; + height: auto; + display: block; +} +</style> +<div class="grid"> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-025.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-025.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size and replaced items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-auto-repeat-auto-025-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, auto); + width: 400px; + gap: 10px; +} + +img { + width: stretch; + max-width: 100px; + height: auto; + display: block; +} +</style> +<div class="masonry"> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-026-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-026-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: auto auto auto; + width: 400px; + gap: 10px; +} +</style> +<div class="grid"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-026.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-026.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size and replaced items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-auto-repeat-auto-026-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, auto); + width: 400px; + gap: 10px; +} +</style> +<div class="masonry"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-027.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-027.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size and replaced items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, auto); + width: 400px; + gap: 10px; +} + +img { + width: 100%; + height: auto; + aspect-ratio: 1; + display: block; +} +</style> +<div class="masonry"> + <img id="test" src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> +</div> +<script> + test(function() { + let image = document.getElementById("test"); + assert_less_than(image.getBoundingClientRect().width, 2); + assert_greater_than(image.getBoundingClientRect().width, 1); + assert_equals(image.getBoundingClientRect().width / image.getBoundingClientRect().height, 1); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-028-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-028-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<style> +.masonry { + display: grid; + background: gray; + item-tolerance: 0; + grid-template-columns: auto; + width: auto; + height: auto; +} + +.masonry > div { + width: 100%; + height: 100px; +} +</style> +<div class="masonry"> + <div style="background: lightskyblue;"></div> + <div style="background: lightcoral;"></div> + <div style="background: lightgreen;"></div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-028.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-028.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track sizes and % sized children with auto sized container</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-auto-028-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, auto); + width: auto; + height: auto; +} + +.masonry > div { + width: 100%; + height: 100px; +} +</style> +<div class="masonry"> + <div style="background: lightskyblue;"></div> + <div style="background: lightcoral;"></div> + <div style="background: lightgreen;"></div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-029-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-029-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: repeat(2, 50px) 150px repeat(3, 100px); + grid-template-rows: 100px 100px; + width: 500px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown; width: 200px;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-029.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-029.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track sizes with fixed repeat</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-auto-029-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(2, 50px) repeat(auto-fill, auto); + width: 500px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown; width: 200px;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-no-items-crash.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-no-items-crash.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track sizes with no items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +#masonry { + display: masonry; + grid-template-columns: repeat(auto-fit, minmax(20px, 30px) auto); +} +</style> +<div id="masonry"></div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-001-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: repeat(3, fit-content(100px)); + grid-template-rows: repeat(3, 100px); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fit-content() track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-fit-content-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, fit-content(100px)); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-002-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: repeat(2, fit-content(100px)); + grid-template-rows: 100px 100px; + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown; width: 100%;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-002.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fit-content() track size and % spanner</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-fit-content-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, fit-content(100px)); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown; width: 100%;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-003-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + item-tolerance: 0; + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-003.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fit-content() track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-fit-content-003-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + /* + This is not currently a valid track definition and will fall back to + none. However, this is going to change in the future[1]. + + [1] https://github.com/w3c/csswg-drafts/issues/12580#issuecomment-3201090594 + */ + grid-template-columns: fit-content(100px) repeat(auto-fill, fit-content(100px)) fit-content(100px); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-004-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: repeat(2, fit-content(100px)); + grid-template-rows: repeat(4, 100px); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-004.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fit-content() track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-fit-content-004-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, fit-content(100px) fit-content(100px)); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-005-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: fit-content(100px) fit-content(100px); + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-column: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 2;"> + Number 4 + </div> + <div style="background: orange; grid-column: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-005.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fit-content size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-fit-content-005-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, fit-content(100px)); + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-column: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 3;"> + Number 4 + </div> + <div style="background: orange; grid-column: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-001-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: repeat(2, max-content); + grid-template-rows: 100px 100px 100px 100px; + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with max-content track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-max-content-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, max-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-002-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: repeat(2, max-content); + grid-template-rows: 100px 100px; + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown; width: 100%;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-002.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with max-content track size and % spanner</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-max-content-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, max-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown; width: 100%;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-003.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with max-content track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-fit-content-003-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + /* + This is not currently a valid track definition and will fall back to + none. However, this is going to change in the future[1]. + + [1] https://github.com/w3c/csswg-drafts/issues/12580#issuecomment-3201090594 + */ + grid-template-columns: max-content repeat(auto-fill, max-content) max-content; + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-004.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with max-content track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-max-content-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, max-content max-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-005-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: masonry; + background: gray; + grid-template-columns: max-content auto; + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-column: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 2;"> + Number 4 + </div> + <div style="background: orange; grid-column: 1;"> + Number 5 + </div> + </div> +</body> +</html> +\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-005.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with max-content size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-max-content-005-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, max-content); + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-column: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 3;"> + Number 4 + </div> + <div style="background: orange; grid-column: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-001-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: repeat(3, min-content); + grid-template-rows: 100px 100px 100px; + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with min-content track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-min-content-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, min-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-002-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: repeat(2, min-content); + grid-template-rows: 100px 100px; + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown; width: 100%;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-002.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with min-content track size and % spanner</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-min-content-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, min-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown; width: 100%;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-003.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with min-content track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-fit-content-003-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + /* + This is not currently a valid track definition and will fall back to + none. However, this is going to change in the future[1]. + + [1] https://github.com/w3c/csswg-drafts/issues/12580#issuecomment-3201090594 + */ + grid-template-columns: min-content repeat(auto-fill, min-content) min-content; + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-004-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: repeat(2, min-content); + grid-template-rows: repeat(4, 100px); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-004.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with min-content track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-min-content-004-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, min-content min-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-005-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-columns: min-content min-content; + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-column: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 2;"> + Number 4 + </div> + <div style="background: orange; grid-column: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-005.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with min-content size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-min-content-005-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fit, min-content); + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-column: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 3;"> + Number 4 + </div> + <div style="background: orange; grid-column: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-001-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + item-tolerance: 0; + grid-template-columns: min-content max-content fit-content(100px) auto; + grid-template-rows: 100px 100px; + width: 500px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown; width: 200px;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with mixed intrinsic track sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-mixed-intrinsic-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, min-content max-content fit-content(100px) auto); + width: 500px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown; width: 200px;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-002-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(3, 135px 90px); + grid-template-rows: 100px 100px 100px; + width: 675px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="background: lightskyblue;"> + Number 7 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + <div style="background: lightcoral;"> + Number 8 + </div> + <div style="background: lightgreen;"> + Number 9 + </div> + <div style="background: lightpink;"> + Number 10 + </div> + <div style="background: orange;"> + Number 11 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 12 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-002.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with max/min-content track sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-mixed-intrinsic-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, max-content min-content); + width: 675px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + <div style="background: lightskyblue;"> + Number 7 + </div> + <div style="background: lightcoral;"> + Number 8 + </div> + <div style="background: lightgreen;"> + Number 9 + </div> + <div style="background: lightpink;"> + Number 10 + </div> + <div style="background: orange;"> + Number 11 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 12 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-003-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(2, 50px auto); + grid-template-rows: 100px 100px 100px; + width: 400px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-003.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with max/min-content track sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-mixed-intrinsic-003-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, 50px auto); + width: 400px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-004-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(2, 120px 50px 120px); + grid-template-rows: 100px 100px 100px; + width: 580px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="background: lightskyblue;"> + Number 7 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + <div style="background: lightcoral;"> + Number 8 + </div> + <div style="background: lightgreen;"> + Number 9 + </div> + <div style="background: lightpink;"> + Number 10 + </div> + <div style="background: orange;"> + Number 11 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 12 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-004.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with max/min-content track sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-auto-repeat-mixed-intrinsic-004-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + grid-template-columns: repeat(auto-fill, auto 50px auto); + width: 580px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 6 + </div> + <div style="background: lightskyblue;"> + Number 7 + </div> + <div style="background: lightcoral;"> + Number 8 + </div> + <div style="background: lightgreen;"> + Number 9 + </div> + <div style="background: lightpink;"> + Number 10 + </div> + <div style="background: orange;"> + Number 11 + </div> + <div style="grid-column: span 2; background: brown;"> + Number 12 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/repeat-auto-fit-auto-crash.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/repeat-auto-fit-auto-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<head> + <title> + repeat(auto-fit, auto) track size with no masonry items should not crash. + </title> + <link rel="help" href="https://drafts.csswg.org/css-grid-3"> + <link rel="help" href="https://issues.chromium.org/issues/432291718"> + <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +</head> +<div style="display: masonry; grid-template-columns: repeat(auto-fit, auto) 100px;"></div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../row-auto-repeat-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto); + width: 300px; + height: 300px; +} + +.masonry > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown; height: 200px;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-002-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: auto auto auto auto; + grid-template-columns: 100px 100px; + background: gray; + width: 200px; + height: 400px; +} + +.grid > div { + height: 25%; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 3;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 4;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-002.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track sizes and percentage sized children</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-auto-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto); + width: 200px; + height: 400px; +} + +.masonry > div { + width: 100px; + height: 25%; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-003-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: 100px 100px 100px 100px; + grid-template-columns: 50px 50px 50px 50px; + background: gray; + width: 200px; + height: 400px; +} + +.grid > div { + height: 75%; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-row: span 2;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: span 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: span 4;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: span 2;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-003.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track sizes and percentage sized spanning children</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-auto-003-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto); + width: 200px; + height: 400px; +} + +.masonry > div { + width: 50px; + height: 75%; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-row: span 2;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: span 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: span 4;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: span 2;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-004-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: auto auto auto auto; + grid-template-columns: 50px 50px 50px 50px; + grid-gap: 20px; + background: gray; + width: 260px; + height: 400px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-row: span 2; height: 200px"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: span 3; height: 300px;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: span 4; height: 400px;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: span 2; height: 200px;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-004.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track sizes and spanning children with gap</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-auto-004-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: auto auto auto auto; + grid-gap: 20px; + width: 260px; + height: 400px; +} + +.masonry > div { + width: 50px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-row: span 2; height: 200px"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: span 3; height: 300px;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: span 4; height: 400px;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: span 2; height: 200px;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-005-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + background: gray; + width: 300px; + height: 300px; +} + +.grid > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 2;"> + Number 4 + </div> + <div style="background: orange; grid-row: 1;"> + Number 5 + </div> + <div style="grid-row: 1 / span 2; background: brown; height: 200px;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-005.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-auto-005-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + /* + This is not currently a valid track definition and will fall back to + none. However, this is going to change in the future[1]. + + [1] https://github.com/w3c/csswg-drafts/issues/12580#issuecomment-3201090594 + */ + grid-template-rows: auto repeat(auto-fill, auto) auto; + width: 300px; + height: 300px; +} + +.masonry > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown; height: 200px;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-006.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks with auto size.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: inline-masonry; + background: green; + aspect-ratio: 1/1; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto); + min-height: 60px; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div class="masonry"> + <div style="width: 1px; height: 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-007.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-007.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: inline-masonry; + background: green; + aspect-ratio: 1/1; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto); + min-height: 60%; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div style="width: 100px; height: 100px; background: green;"> + <div style="height: 100%;"> + <div class="masonry"> + <div style="width: 1px; height: 50px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-008.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-008.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Checks that a dynamic change in containing block height changes the number of auto repeat tracks.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: inline-masonry; + masonry-direction: row; + background: green; + width: 100px; + min-height: 60%; + grid-template-rows: repeat(auto-fill, auto); +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="width: 100px; height: 0px;"> + <div class="masonry"> + <div style="width: 1px; height: 50px;"></div> + </div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-009.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-009.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<title>Auto repeat tracks and min sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="This test checks that auto repeat tracks use min size when available to compute the number of tracks."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: masonry; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto); + min-width: 300px; + min-height: 200px; + float: left; + background: pink; +} +.border { + border: 10px solid; +} +.item { + background: lime; + /* Place item on the last row. */ + grid-row: -2; + width: 300px; + height: 50px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + +<div id="log"></div> + +<div class="masonry" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="112.5" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="112.5" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="112.5" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="112.5" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry border" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="0" data-offset-y="112.5" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry border" style="width: 200px; height: 100px;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="0" data-offset-y="112.5" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="0" data-offset-y="112.5" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="0" data-offset-y="112.5" data-expected-width="300" data-expected-height="50"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-010.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-010.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<title>Auto repeat tracks with min and max sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="This test checks that auto repeat tracks don't overflow the masonry container size when max size is definite, even if min size is bigger than that."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: masonry; + grid-template-rows: repeat(auto-fill, auto); + masonry-direction: row; + max-width: 100px; + min-width: 250px; + max-height: 50px; + min-height: 125px; + float: left; + background: pink; +} +.item { + background: lime; + /* Place item on the last row. */ + grid-row: -2; + width: 250px; + height: 50px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + +<div id="log"></div> + +<div class="masonry" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="0" data-offset-y="37.5" data-expected-width="250" data-expected-height="50"></div> +</div> + +<div class="masonry" style="width: 200px; height: 100px;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="0" data-offset-y="37.5" data-expected-width="250" data-expected-height="50"></div> +</div> + +<div class="masonry" style="width: min-content; height: min-content;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="0" data-offset-y="37.5" data-expected-width="250" data-expected-height="50"></div> +</div> + +<div class="masonry" style="width: max-content; height: max-content;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="0" data-offset-y="37.5" data-expected-width="250" data-expected-height="50"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-011-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-011-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +.grid { + display: grid; + border: solid thick; + margin: 10px; + grid-template-rows: repeat(auto-fill, 100px 100px); + grid-template-columns: auto auto; + grid-row-gap: 100px; + height: 300px; + width: min-content; + background: pink; +} +.grid > div { + background: lime; + width: 50px; + height: 50px; +} +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div class="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-011.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-011.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Auto repeat tracks with multiple tracks and gutters.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-auto-011-ref.html"> +<style> +.masonry { + display: masonry; + border: solid thick; + margin: 10px; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto auto); + grid-row-gap: 100px; + height: 300px; + width: min-content; + background: pink; +} +.masonry > div { + background: lime; + width: 50px; + height: 50px; +} +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-012-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-012-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: repeat(auto-fill, 150px); + grid-template-columns: 100px 100px 100px; + background: gray; + height: 300px; + width: 300px; +} + +.grid > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 2;"> + Number 4 + </div> + <div style="background: orange; grid-row:1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-012.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-012.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-auto-012-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, auto); + height: 300px; + width: 300px; +} + +.masonry > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="masonry"> + <!-- The second track should still be collapsed, even though this + item is placed in every possible track. --> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 3;"> + Number 4 + </div> + <div style="background: orange; grid-row:1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-013.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-013.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-auto-012-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, auto); + width: 300px; + height: 300px; +} + +.masonry > div { + height: 100px; + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 3;"> + Number 4 + </div> + <div style="background: orange; grid-row: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-014-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-014-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: auto auto auto; + grid-template-columns: 100px 100px; + background: gray; + width: 200px; + height: 500px; +} + +.grid > div { + height: 100px; + width: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 3;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 1; grid-column: 2;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-014.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-014.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-auto-014-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, auto); + width: 200px; + height: 500px; +} + +.masonry > div { + height: 100px; + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 5;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 1;"> + Number 4 + </div> + <div style="background: orange; grid-row: 3;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-015.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-015.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and auto item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, auto); + width: 200px; + height: 1000px; +} + +.masonry > div { + height: 100px; + width: 100px; +} +</style> +<div class="masonry"> + <div style="grid-row: 1;"></div> + <div style="grid-row: 3;"></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + // These don't end up being 100px because auto tracks get stretched at the end of + // track sizing. + assert_equals(computedStyle.getPropertyValue('grid-template-rows'), + "250px 250px 250px 250px 0px 0px 0px 0px 0px 0px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-016.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-016.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and auto/explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, auto); + width: 200px; + height: 1000px; +} + +.masonry > div { + height: 100px; + width: 100px; +} +</style> +<div class="masonry"> + <div></div> + <div></div> + <div style="grid-row: 4"></div> + <div style="grid-row: 6"></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + // These don't end up being 100px because auto tracks get stretched at the end of + // track sizing. + assert_equals(computedStyle.getPropertyValue('grid-template-rows'), + "200px 200px 200px 200px 0px 200px 0px 0px 0px 0px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-017-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-017-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<style> +.masonry { + display: masonry; + masonry-direction: row; + grid-template-rows: repeat(9, auto); + width: 200px; + height: 500px; + gap: 10px; +} + +.masonry > div { + height: 50px; + width: 100px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-row: span 4; height: 200px;">1</div> + <div style="grid-row: 4 / span 2; height: 100px;">2</div> + <div style="grid-row: 8 / span 2; height: 100px;">3</div> + <div style="grid-row: 7;">4</div> + <div style="grid-row: span 2; height: 100px;">5</div> + <div>6</div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-017.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-017.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and explicit spanning item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-auto-017-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, auto); + width: 200px; + height: 500px; + gap: 10px; +} + +.masonry > div { + height: 50px; + width: 100px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-row: span 4; height: 200px;">1</div> + <div style="grid-row: 4 / span 2; height: 100px;">2</div> + <div style="grid-row: 9 / span 2; height: 100px;">3</div> + <div style="grid-row: 7;">4</div> + <div style="grid-row: span 2; height: 100px;">5</div> + <div>6</div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-018.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-018.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and auto/explicit spanning item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-auto-017-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: 50px repeat(5, 50px) repeat(auto-fit, auto); + width: 200px; + height: 500px; + gap: 10px; +} + +.masonry > div { + height: 50px; + width: 100px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-row: span 4; height: 200px;">1</div> + <div style="grid-row: 4 / span 2; height: 100px;">2</div> + <div style="grid-row: 9 / span 2; height: 100px;">3</div> + <div style="grid-row: 7;">4</div> + <div style="grid-row: span 2; height: 100px;">5</div> + <div>6</div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-019.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-019.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../row-auto-repeat-021-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: 100px repeat(auto-fit, auto); + width: 500px; + height: 300px; +} + +.masonry > div { + height: 100px; + width: 100px; +} +</style> +<body> + <div class="masonry"> + <!-- Only row 2 should get collapsed --> + <div style="background: lightskyblue; grid-row: 3;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 3;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 3;"> + Number 4 + </div> + <div style="background: orange; grid-row: 3;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-020.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-020.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and auto item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(5, 100px) repeat(auto-fit, auto); + width: 200px; + height: 1000px; +} + +.masonry > div { + height: 100px; + width: 100px; +} +</style> +<div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + // The last auto-fit row is 500px because it stretches to fill the remaining + // space. + assert_equals(computedStyle.getPropertyValue('grid-template-rows'), + "100px 100px 100px 100px 100px 500px 0px 0px 0px 0px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-021.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-021.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and auto item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, auto) repeat(5, 100px); + width: 200px; + height: 1000px; +} + +.masonry > div { + height: 100px; + width: 100px; +} +</style> +<div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + assert_equals(computedStyle.getPropertyValue('grid-template-rows'), + "100px 100px 100px 100px 100px 100px 100px 100px 100px 100px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-022-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-022-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: repeat(8, 50px); + width: 200px; + height: 500px; + gap: 10px; +} + +.grid > div { + height: 50px; + width: 100px; + background-color: orange; +} +</style> +<div class="grid"> + <div style="grid-row: span 3; height: 150px;"></div> + <div style="grid-row: -1;"></div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-022.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-022.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with auto size and auto/explicit spanning item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-auto-022-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(4, 50px) repeat(auto-fit, auto) repeat(4, 50px); + width: 200px; + height: 500px; + gap: 10px; +} + +.masonry > div { + height: 50px; + width: 100px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-row: span 3; height: 150px;"></div> + <div style="grid-row: -1;"></div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-023-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-023-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto; + height: 400px; + gap: 10px; +} + +img { + height: 100%; + min-height: 100px; + width: auto; + display: block; +} +</style> +<div class="grid"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-023.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-023.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size and replaced items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-auto-023-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto); + height: 400px; + gap: 10px; +} + +img { + height: 100%; + min-height: 100px; + width: auto; + display: block; +} +</style> +<div class="masonry"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-024-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-024-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto; + height: 400px; + width: 150px; + gap: 10px; +} + +img { + height: 100%; + width: auto; + display: block; +} +</style> +<div class="grid"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-024.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-024.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size and replaced items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-auto-024-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto); + height: 400px; + gap: 10px; +} + +img { + height: 100%; + width: auto; + display: block; +} +</style> +<div class="masonry"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-025-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-025-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto auto; + height: 400px; + width: 150px; + gap: 10px; +} + +img { + height: stretch; + max-height: 100px; + width: auto; + display: block; +} +</style> +<div class="grid"> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-025.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-025.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size and replaced items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-auto-025-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto); + height: 400px; + gap: 10px; +} + +img { + height: stretch; + max-height: 100px; + width: auto; + display: block; +} +</style> +<div class="masonry"> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> + <img src="../../../resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-026-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-026-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto auto; + height: 400px; + width: 150px; + gap: 10px; +} +</style> +<div class="grid"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-026.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-026.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size and replaced items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-auto-026-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto); + height: 400px; + gap: 10px; +} +</style> +<div class="masonry"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-027-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-027-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto; + height: 400px; + width: 150px; + gap: 10px; +} + +img { + height: 100%; + width: auto; + aspect-ratio: 1; + display: block; +} +</style> +<div class="grid"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-027.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-027.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size and replaced items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-auto-027-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto); + height: 400px; + gap: 10px; +} + +img { + height: 100%; + width: auto; + aspect-ratio: 1; + display: block; +} +</style> +<div class="masonry"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-028.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-028.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track sizes and % sized children with auto sized container</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<!-- No content is produced because there is nothing to size the rows +or items against in the block axis. --> +<link rel="match" href="../../../../../../reference/blank.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto); + width: auto; + height: auto; +} + +.masonry > div { + height: 100%; + width: 100px; +} +</style> +<div class="masonry"> + <div style="background: lightskyblue;"></div> + <div style="background: lightcoral;"></div> + <div style="background: lightgreen;"></div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-no-items-crash.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-no-items-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with auto track sizes with no items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +#masonry { + display: masonry; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, minmax(20px, 30px) auto); +} +</style> +<div id="masonry"></div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-001-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: repeat(7, fit-content(100px)); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + width: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="background: brown;"> + Number 6 + </div> + <!-- In Grid, the last column is 0 because no item is placed in it, so spanning + item 6 won't match masonry - which places all items in every track. Add another + item since spanning row by 2 above doesn't work in grid --> + <div style="background: brown; color: transparent;"> + Number 7 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fit-content() track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-fit-content-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, fit-content(100px)); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-002-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: repeat(7, fit-content(100px)); + grid-template-columns: repeat(4, auto); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + width: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 2;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown; height: 100%;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fit-content() track size and % spanner</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-fit-content-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, fit-content(100px)); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown; height: 100%;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-003-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + width: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 2;"> + Number 4 + </div> + <div style="background: orange; grid-row: 1;"> + Number 5 + </div> + <div style="grid-row: 1 / span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-003.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fit-content() track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-fit-content-003-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + /* + This is not currently a valid track definition and will fall back to + none. However, this is going to change in the future[1]. + + [1] https://github.com/w3c/csswg-drafts/issues/12580#issuecomment-3201090594 + */ + grid-template-rows: fit-content(100px) repeat(auto-fill, fit-content(100px)) fit-content(100px); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-004.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fit-content() track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-fit-content-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, fit-content(100px) fit-content(100px)); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-005-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: fit-content(100px) fit-content(100px); + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + width: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 2;"> + Number 4 + </div> + <div style="background: orange; grid-row: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-005.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fit-content size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-fit-content-005-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, fit-content(100px)); + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 3;"> + Number 4 + </div> + <div style="background: orange; grid-row: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-001-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: repeat(7, max-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + width: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="background: brown;"> + Number 6 + </div> + <!-- In Grid, the last column is 0 because no item is placed in it, so spanning + item 6 won't match masonry - which places all items in every track. Add another + item since spanning row by 2 above doesn't work in grid --> + <div style="background: brown; color: transparent;"> + Number 7 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with max-content track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-max-content-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, max-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-002-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: repeat(2, max-content); + grid-template-columns: repeat(4, auto); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + width: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 2;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown; height: 100%;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with max-content track size and % spanner</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-max-content-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, max-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown; height: 100%;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-003.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with max-content track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-fit-content-003-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + /* + This is not currently a valid track definition and will fall back to + none. However, this is going to change in the future[1]. + + [1] https://github.com/w3c/csswg-drafts/issues/12580#issuecomment-3201090594 + */ + grid-template-rows: max-content repeat(auto-fill, max-content) max-content; + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-004.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with max-content track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-max-content-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, max-content max-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-005-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: max-content max-content; + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + width: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 2;"> + Number 4 + </div> + <div style="background: orange; grid-row: 1;"> + Number 5 + </div> + </div> +</body> +</html> +\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-005.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with max-content size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-max-content-005-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, max-content); + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 3;"> + Number 4 + </div> + <div style="background: orange; grid-row: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-001-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: repeat(7, min-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + width: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="background: brown;"> + Number 6 + </div> + <!-- In Grid, the last column is 0 because no item is placed in it, so spanning + item 6 won't match masonry - which places all items in every track. Add another + item since spanning row by 2 above doesn't work in grid --> + <div style="background: brown; color: transparent;"> + Number 7 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with min-content track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-min-content-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, min-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-002-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: repeat(2, min-content); + grid-template-columns: repeat(4, auto); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + width: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 2;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown; height: 100%;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with min-content track size and % spanner</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-min-content-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, min-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown; height: 100%;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-003.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with min-content track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-fit-content-003-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + /* + This is not currently a valid track definition and will fall back to + none. However, this is going to change in the future[1]. + + [1] https://github.com/w3c/csswg-drafts/issues/12580#issuecomment-3201090594 + */ + grid-template-rows: min-content repeat(auto-fill, min-content) min-content; + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-004.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with min-content track size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-min-content-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, min-content min-content); + width: 300px; + height: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-005-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + grid-template-rows: min-content min-content; + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + width: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 2;"> + Number 4 + </div> + <div style="background: orange; grid-row: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-005.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with min-content size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-min-content-005-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, min-content); + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 3;"> + Number 4 + </div> + <div style="background: orange; grid-row: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-mixed-intrinsic-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-mixed-intrinsic-001-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + item-tolerance: 0; + grid-template-rows: min-content max-content fit-content(100px) auto; + grid-template-columns: 100px 100px; + height: 500px; + width: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + width: 100px; + height: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="grid-row: span 2; background: brown; height: 200px;"> + Number 6 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink; height: 100%;"> + Number 4 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-mixed-intrinsic-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-mixed-intrinsic-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with mixed intrinsic track sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-mixed-intrinsic-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, min-content max-content fit-content(100px) auto); + height: 500px; + width: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown; height: 200px;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-mixed-intrinsic-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-mixed-intrinsic-002-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + background: gray; + item-tolerance: 0; + grid-template-rows: repeat(5, auto fit-content(100px)); + grid-template-columns: 100px 100px; + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.grid > div { + width: 100px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 1;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-column: 1;"> + Number 4 + </div> + <div style="background: orange; grid-column: 1;"> + Number 5 + </div> + <div style="background: brown; grid-column: 1;"> + Number 6 + </div> + <!-- Fit content in grid requires an item to be placed in that track for it to be + non-zero. In masonry, this is not the case. Add an item to mimic the spanner + in the masonry test case. --> + <div style="background: brown; color: transparent; grid-column: 1;"> + Number 6 + </div> + <div style="background: lightskyblue; grid-column: 1;"> + Number 7 + </div> + <div style="background: lightcoral; grid-column: 1;"> + Number 8 + </div> + <div style="background: lightgreen; grid-column: 1;"> + Number 9 + </div> + <div style="background: lightpink; grid-column: 2; grid-row: 1;"> + Number 10 + </div> + <div style="background: orange;grid-column: 2; grid-row: 2;"> + Number 11 + </div> + <div style="grid-column: 2; grid-row: 3 / span 2; background: brown;"> + Number 12 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-mixed-intrinsic-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-mixed-intrinsic-002.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with max/min-content track sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-mixed-intrinsic-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, auto fit-content(100px)); + height: 300px; + width: 300px; + font: 15px/1 Ahem; +} + +.masonry > div { + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + <div style="background: lightskyblue;"> + Number 7 + </div> + <div style="background: lightcoral;"> + Number 8 + </div> + <div style="background: lightgreen;"> + Number 9 + </div> + <div style="background: lightpink;"> + Number 10 + </div> + <div style="background: orange;"> + Number 11 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 12 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-001-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: repeat(auto-fill, 100px); + grid-template-columns: 100px 100px 100px; + background: gray; + width: 300px; + height: 300px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 3;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange; grid-row: 2;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-001-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, 100px); + width: 300px; + height: 300px; +} + +.masonry > div { + width: 100px; + height: 100%; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-002-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: repeat(auto-fill, 25%); + grid-template-columns: 100px 100px; + background: gray; + width: 200px; + height: 300px; +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 3;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 4;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-002.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with percentage track sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-002-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, 25%); + width: 200px; + height: 300px; +} + +.masonry > div { + width: 100px; + height: 100%; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral;"> + Number 2 + </div> + <div style="background: lightgreen;"> + Number 3 + </div> + <div style="background: lightpink;"> + Number 4 + </div> + <div style="background: orange;"> + Number 5 + </div> + <div style="grid-row: span 2; background: brown;"> + Number 6 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: inline-masonry; + background: green; + aspect-ratio: 1/1; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, 50px); + min-height: 60px; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div class="masonry"></div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-004.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: inline-masonry; + background: green; + aspect-ratio: 1/1; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, 50px); + min-height: 60%; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div style="width: 100px; height: 100px; background: green;"> + <div style="height: 100%;"> + <div class="masonry"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-005.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>Auto repeater with minmax size.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + height: 100px; + grid-template-rows: repeat(auto-fill, minmax(50px, 25px)); +} +</style> +<p>Test passes if there is a filled green square.</p> +<div class="masonry"> + <div style="background: green; width: 50px; height: 100%;"></div> + <div style="background: green; width: 50px; height: 100%;"></div> + <div style="background: green; width: 50px; height: 100%;"></div> + <div style="background: green; width: 50px; height: 100%;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-006.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>Checks that a dynamic change in containing block height changes the number of auto repeat tracks.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="../../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: inline-masonry; + masonry-direction: row; + background: green; + width: 100px; + min-height: 60%; + grid-template-rows: repeat(auto-fill, 50px); +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="width: 100px; height: 0px;"> + <div class="masonry"></div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-007.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-007.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<title>Auto repeat tracks and min sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="This test checks that auto repeat tracks use min size when available to compute the number of tracks."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: masonry; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, 50px); + min-width: 300px; + min-height: 200px; + float: left; + background: pink; +} +.border { + border: 10px solid; +} +.border-box { + box-sizing: border-box; +} +.item { + background: lime; + /* Place item on the last row. */ + grid-row: -2; + width: 300px; + height: 100%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + +<div id="log"></div> + +<div class="masonry" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry border" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry border" style="width: 200px; height: 100px;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry border border-box" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry border border-box" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry border border-box" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> +</div> + +<div class="masonry border border-box" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-008.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-008.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<title>Auto repeat tracks and percentage min sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="This test checks that auto repeat tracks use percentage min size when available to compute the number of tracks."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: masonry; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, 50px); + min-width: 50%; + min-height: 80%; + float: left; + background: pink; +} +.wrapper { + width: 600px; + height: 250px; +} +.item { + background: lime; + /* Place item on the last row. */ + grid-row: -2; + width: 300px; + height: 100%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + +<div id="log"></div> + +<div class="wrapper"> + <div class="masonry" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> + </div> +</div> + +<div class="wrapper"> + <div class="masonry" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> + </div> +</div> + +<div class="wrapper"> + <div class="masonry" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> + </div> +</div> + +<div class="wrapper"> + <div class="masonry" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-009.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-009.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>Auto repeat tracks and percentage min sizes with percentage track sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" + content="This test checks that auto repeat tracks can use percentage track + size when only a min size is available to compute the number of tracks."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: inline-masonry; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, 20%); + min-height: 50%; + width: 100px; + float: left; + background: pink; +} +.wrapper { + height: 1000px; +} +.item { + background: lime; + height: 100%; + width: 100px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + + <div id="log"></div> + + <div class="wrapper"> + <div class="masonry" data-expected-width="100" data-expected-height="500"> + <div class="item" data-expected-width="100" data-expected-height="100">Cell 1</div> + <div class="item" data-expected-width="100" data-expected-height="100">Cell 2</div> + <div class="item" data-expected-width="100" data-expected-height="100">Cell 3</div> + <div class="item" data-expected-width="100" data-expected-height="100">Cell 4</div> + <div class="item" data-expected-width="100" data-expected-height="100">Cell 5</div> + </div> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-010.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-010.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<title>Auto repeat tracks and percentage max sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="This test checks that auto repeat tracks use percentage max size when size is indefinite to compute the number of tracks."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: masonry; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, 50px); + max-width: 50%; + max-height: 80%; + background: pink; +} +.wrapper { + width: 600px; + height: 250px; +} +.item { + background: lime; + /* Place item on the last row. */ + grid-row: -2; + width: 300px; + height: 100%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + +<div id="log"></div> + +<div class="wrapper"> + <div class="masonry" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> + </div> +</div> + +<div class="wrapper"> + <div class="masonry" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-offset-x="0" data-offset-y="50" data-expected-width="300" data-expected-height="50"></div> + </div> +</div> + +<div class="wrapper"> + <div class="masonry" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> + </div> +</div> + +<div class="wrapper"> + <div class="masonry" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-011.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-011.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<title>Auto repeat tracks with min and max sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="This test checks that auto repeat tracks don't overflow the masonry container size when max size is definite, even if min size is bigger than that."> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + position: relative; + display: masonry; + grid-template-rows: repeat(auto-fill, 50px); + masonry-direction: row; + max-width: 100px; + min-width: 250px; + max-height: 50px; + min-height: 125px; + float: left; + background: pink; +} +.item { + background: lime; + /* Place item on the last row. */ + grid-row: -2; + width: 250px; + height: 100%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.masonry');"> + +<div id="log"></div> + +<div class="masonry" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="0" data-offset-y="50" data-expected-width="250" data-expected-height="50"></div> +</div> + +<div class="masonry" style="width: 200px; height: 100px;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="0" data-offset-y="50" data-expected-width="250" data-expected-height="50"></div> +</div> + +<div class="masonry" style="width: min-content; height: min-content;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="0" data-offset-y="50" data-expected-width="250" data-expected-height="50"></div> +</div> + +<div class="masonry" style="width: max-content; height: max-content;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="0" data-offset-y="50" data-expected-width="250" data-expected-height="50"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-012-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-012-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<style> +.grid { + display: grid; + border: solid thick; + margin: 10px; + grid-template-rows: repeat(auto-fill, 50px 50px); + grid-row-gap: 100px; + height: 300px; + width: min-content; + background: pink; +} +.grid > div { + background: lime; + width: 50px; + height: 100%; +} +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div class="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-012.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-012.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Auto repeat tracks with multiple tracks and gutters.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-012-ref.html"> +<style> +.masonry { + display: masonry; + border: solid thick; + margin: 10px; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, 50px 50px); + grid-row-gap: 100px; + height: 300px; + width: min-content; + background: pink; +} +.masonry > div { + background: lime; + width: 50px; + height: 100%; +} +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-013-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-013-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<style> +.grid { + display: grid; + border: solid thick; + grid-template-rows: 10px 20px repeat(auto-fill, 30px 40px) 50px 60px; + height: 300px; + background: pink; +} +.grid > :nth-child(2n) { + background: sienna; +} +.grid > :nth-child(2n+1) { + background: orange; +} +.grid > div { + width: 25px; + height: 100%; +} +.holder { + height: 300px; + width: 50px; + border-bottom: 2px solid #cfbfcf; +} +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div class="holder"> + <div class="grid"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div style="grid-row: 7;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid"> + <div style="grid-row: 2;"></div> + <div></div> + <div style="grid-row: 5;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-013.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-013.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<title>Auto repeat tracks with multiple tracks.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-013-ref.html"> +<style> +.masonry { + display: masonry; + border: solid thick; + masonry-direction: row; + grid-template-rows: 10px 20px repeat(auto-fill, 30px 40px) 50px 60px; + height: 300px; + background: pink; +} +.masonry > :nth-child(2n) { + background: sienna; +} +.masonry > :nth-child(2n+1) { + background: orange; +} +.masonry > div { + width: 25px; + height: 100%; +} +.holder { + height: 300px; + width: 50px; + border-bottom: 2px solid #cfbfcf; +} +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div class="holder"> + <div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div style="grid-row: 7;"></div> + </div> +</div> + +<div class="holder"> + <div class="masonry"> + <div style="grid-row: 2;"></div> + <div></div> + <div style="grid-row: 5;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-014-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-014-ref.html @@ -0,0 +1,162 @@ +<!DOCTYPE html> +<style> +.grid { + display: inline-grid; + border: 1px solid black; + grid-template-rows: [u] repeat(auto-fill, [v] 10px [w] 10px [x] 10px [y]) [z]; + grid-row-gap: 3px; + width: min-content; + /* Does not fit a whole-number of repetitions */ + height: 94px; + background: pink; +} +div > div { + background: blue; + width: 25px; + height: 100%; +} +</style> +<body> + <!-- u --> + <div class="grid"> + <div style="grid-row-start: u"></div> + </div> + <!-- non-existent line name --> + <div class="grid"> + <div style="grid-row-start: nonesuch"></div> + </div> + <div class="grid"> + <div style="grid-row-start: u 1"></div> + </div> + <div class="grid"> + <div style="grid-row-start: u -1"></div> + </div> + <!-- Also non-existent, there is only one u --> + <div class="grid"> + <div style="grid-row-start: u 4"></div> + </div> + <div class="grid"> + <div style="grid-row-start: u 9"></div> + </div> + <div class="grid"> + <div style="grid-row-start: u 2"></div> + </div> + <div class="grid"> + <div style="grid-row-start: u -2"></div> + </div> + <div class="grid"> + <div style="grid-row-start: u -6"></div> + </div> + <div class="grid"> + <div style="grid-row-start: u -7"></div> + </div> + <!-- v --> + <div class="grid"> + <div style="grid-row-start: v"></div> + </div> + <div class="grid"> + <div style="grid-row-start: v 1"></div> + </div> + <div class="grid"> + <div style="grid-row-start: v 2"></div> + </div> + <div class="grid"> + <div style="grid-row-start: v -1"></div> + </div> + <div class="grid"> + <div style="grid-row-start: v -2"></div> + </div> + <!-- Also non-existent, there are only two v's --> + <div class="grid"> + <div style="grid-row-start: v 3"></div> + </div> + <div class="grid"> + <div style="grid-row-start: v -3"></div> + </div> + <!-- w --> + <div class="grid"> + <div style="grid-row-start: w"></div> + </div> + <div class="grid"> + <div style="grid-row-start: w 1"></div> + </div> + <div class="grid"> + <div style="grid-row-start: w 2"></div> + </div> + <div class="grid"> + <div style="grid-row-start: w -1"></div> + </div> + <div class="grid"> + <div style="grid-row-start: w -2"></div> + </div> + <!-- Also non-existent, there are only two w's --> + <div class="grid"> + <div style="grid-row-start: w 3"></div> + </div> + <div class="grid"> + <div style="grid-row-start: w -3"></div> + </div> + <!-- x --> + <div class="grid"> + <div style="grid-row-start: x"></div> + </div> + <div class="grid"> + <div style="grid-row-start: x 1"></div> + </div> + <div class="grid"> + <div style="grid-row-start: x 2"></div> + </div> + <div class="grid"> + <div style="grid-row-start: x -1"></div> + </div> + <div class="grid"> + <div style="grid-row-start: x -2"></div> + </div> + <!-- Also non-existent, there are only two x's --> + <div class="grid"> + <div style="grid-row-start: x 3"></div> + </div> + <div class="grid"> + <div style="grid-row-start: x -3"></div> + </div> + <!-- y --> + <div class="grid"> + <div style="grid-row-start: y"></div> + </div> + <div class="grid"> + <div style="grid-row-start: y 1"></div> + </div> + <div class="grid"> + <div style="grid-row-start: y 2"></div> + </div> + <div class="grid"> + <div style="grid-row-start: y -1"></div> + </div> + <div class="grid"> + <div style="grid-row-start: y -2"></div> + </div> + <!-- Also non-existent, there are only two y's --> + <div class="grid"> + <div style="grid-row-start: y -3"></div> + </div> + <div class="grid"> + <div style="grid-row-start: y 3"></div> + </div> + <!-- z --> + <div class="grid"> + <div style="grid-row-start: z"></div> + </div> + <div class="grid"> + <div style="grid-row-start: z 1"></div> + </div> + <div class="grid"> + <div style="grid-row-start: z -1"></div> + </div> + <!-- Also non-existent, there is only one z --> + <div class="grid"> + <div style="grid-row-start: z 2"></div> + </div> + <div class="grid"> + <div style="grid-row-start: z -2"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-014.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-014.html @@ -0,0 +1,167 @@ +<!DOCTYPE html> +<title>Auto repeat tracks with multiple tracks and line names.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-014-ref.html"> +<style> +.masonry { + display: inline-masonry; + border: 1px solid black; + grid-template-rows: [u] repeat(auto-fill, [v] 10px [w] 10px [x] 10px [y]) [z]; + masonry-direction: row; + grid-row-gap: 3px; + width: min-content; + /* Does not fit a whole-number of repetitions */ + height: 94px; + background: pink; +} +div > div { + background: blue; + width: 25px; + height: 100%; +} +</style> +<body> + <!-- u --> + <div class="masonry"> + <div style="grid-row-start: u"></div> + </div> + <!-- non-existent line name --> + <div class="masonry"> + <div style="grid-row-start: nonesuch"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: u 1"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: u -1"></div> + </div> + <!-- Also non-existent, there is only one u --> + <div class="masonry"> + <div style="grid-row-start: u 4"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: u 9"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: u 2"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: u -2"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: u -6"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: u -7"></div> + </div> + <!-- v --> + <div class="masonry"> + <div style="grid-row-start: v"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: v 1"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: v 2"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: v -1"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: v -2"></div> + </div> + <!-- Also non-existent, there are only two v's --> + <div class="masonry"> + <div style="grid-row-start: v 3"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: v -3"></div> + </div> + <!-- w --> + <div class="masonry"> + <div style="grid-row-start: w"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: w 1"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: w 2"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: w -1"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: w -2"></div> + </div> + <!-- Also non-existent, there are only two w's --> + <div class="masonry"> + <div style="grid-row-start: w 3"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: w -3"></div> + </div> + <!-- x --> + <div class="masonry"> + <div style="grid-row-start: x"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: x 1"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: x 2"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: x -1"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: x -2"></div> + </div> + <!-- Also non-existent, there are only two x's --> + <div class="masonry"> + <div style="grid-row-start: x 3"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: x -3"></div> + </div> + <!-- y --> + <div class="masonry"> + <div style="grid-row-start: y"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: y 1"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: y 2"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: y -1"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: y -2"></div> + </div> + <!-- Also non-existent, there are only two y's --> + <div class="masonry"> + <div style="grid-row-start: y -3"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: y 3"></div> + </div> + <!-- z --> + <div class="masonry"> + <div style="grid-row-start: z"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: z 1"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: z -1"></div> + </div> + <!-- Also non-existent, there is only one z --> + <div class="masonry"> + <div style="grid-row-start: z 2"></div> + </div> + <div class="masonry"> + <div style="grid-row-start: z -2"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-015-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-015-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: 100px 100px; + grid-template-columns: 100px 100px 100px; + background: gray; + height: 300px; + width: 300px +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 2;"> + Number 4 + </div> + <div style="background: orange; grid-row: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-015.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-015.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-015-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, 100px); + height: 300px; + width: 300px; +} + +.masonry > div { + height: 100%; + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 3;"> + Number 4 + </div> + <div style="background: orange; grid-row: 1;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-016-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-016-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: 100px 100px 100px; + grid-template-columns: 100px 100px; + background: gray; + width: 200px; + height: 500px +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue;"> + Number 1 + </div> + <div style="background: lightcoral; grid-column: 1;"> + Number 2 + </div> + <div style="background: lightgreen; grid-column: 1;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 1; grid-column: 2;"> + Number 4 + </div> + <div style="background: orange; grid-row: 2; grid-column: 2;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-016.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-016.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-016-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, 100px); + width: 200px; + height: 500px; +} + +.masonry > div { + height: 100%; + width: 100px; +} +</style> +<body> + <div class="masonry"> + <div style="background: lightskyblue; grid-row: 1;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 5;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 1;"> + Number 4 + </div> + <div style="background: orange; grid-row: 3;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-017.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-017.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, 100px); + width: 200px; + height: 1000px; +} + +.masonry > div { + height: 100%; + width: 100px; +} +</style> +<div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + assert_equals(computedStyle.getPropertyValue('grid-template-rows'), + "100px 100px 100px 100px 100px 0px 0px 0px 0px 0px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-018.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-018.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto/explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, 100px); + width: 200px; + height: 1000px; +} + +.masonry > div { + height: 100%; + width: 100px; +} +</style> +<div class="masonry"> + <div></div> + <div></div> + <div style="grid-row: 4"></div> + <div style="grid-row: 6"></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + assert_equals(computedStyle.getPropertyValue('grid-template-rows'), + "100px 100px 100px 100px 0px 100px 0px 0px 0px 0px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-019-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-019-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: repeat(auto-fit, 50px); + grid-template-columns: 50px 50px; + width: 200px; + height: 500px; + gap: 10px; +} + +.grid > div { + height: 100%; + width: 50px; + background-color: orange; +} +</style> +<div class="grid"> + <div style="grid-row: 1 / span 4;">1</div> + <div style="grid-row: 4 / span 2;">2</div> + <div style="grid-row: 9 / span 2; grid-column: 1;">3</div> + <div style="grid-row: 7; grid-column: 1;">4</div> + <div style="grid-row: 9 / span 2;">5</div> + <div style="grid-row: 6; grid-column: 1;">6</div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-019.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-019.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto/explicit spanning item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-019-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, 50px); + width: 200px; + height: 500px; + gap: 10px; +} + +.masonry > div { + height: 100%; + width: 50px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-row: span 4;">1</div> + <div style="grid-row: 4 / span 2;">2</div> + <div style="grid-row: 9 / span 2;">3</div> + <div style="grid-row: 7;">4</div> + <div style="grid-row: span 2;">5</div> + <div>6</div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-020.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-020.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto/explicit spanning item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-019-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: 50px repeat(5, 50px) repeat(auto-fit, 50px); + width: 200px; + height: 500px; + gap: 10px; +} + +.masonry > div { + height: 100%; + width: 50px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-row: span 4;">1</div> + <div style="grid-row: 4 / span 2;">2</div> + <div style="grid-row: 9 / span 2;">3</div> + <div style="grid-row: 7;">4</div> + <div style="grid-row: span 2;">5</div> + <div>6</div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-021-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-021-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: 100px 100px; + grid-template-columns: 100px 100px 100px; + background: gray; + width: 500px; + height: 300px +} +</style> +<body> + <div class="grid"> + <div style="background: lightskyblue; grid-row: 2;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 2;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 2;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 2;"> + Number 4 + </div> + <div style="background: orange; grid-row: 2;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-021.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-021.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and explicit item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-auto-repeat-021-ref.html"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<style> +.masonry { + display: masonry; + background: gray; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: 100px repeat(auto-fit, 100px); + width: 500px; + height: 300px; +} + +.masonry > div { + height: 100%; + width: 100px; +} +</style> +<body> + <div class="masonry"> + <!-- Only row 2 should get collapsed --> + <div style="background: lightskyblue; grid-row: 3;"> + Number 1 + </div> + <div style="background: lightcoral; grid-row: 3;"> + Number 2 + </div> + <div style="background: lightgreen; grid-row: 3;"> + Number 3 + </div> + <div style="background: lightpink; grid-row: 3;"> + Number 4 + </div> + <div style="background: orange; grid-row: 3;"> + Number 5 + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-022.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-022.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(5, 100px) repeat(auto-fit, 100px); + width: 200px; + height: 1000px; +} + +.masonry > div { + height: 100%; + width: 100px; +} +</style> +<div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + assert_equals(computedStyle.getPropertyValue('grid-template-rows'), + "100px 100px 100px 100px 100px 100px 0px 0px 0px 0px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-023.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-023.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fit, 100px) repeat(5, 100px); + width: 200px; + height: 1000px; +} + +.masonry > div { + height: 100%; + width: 100px; +} +</style> +<div class="masonry"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +<script> + test(function() { + const container = document.querySelector('.masonry'); + const computedStyle = window.getComputedStyle(container); + assert_equals(computedStyle.getPropertyValue('grid-template-rows'), + "100px 100px 100px 100px 100px 100px 100px 100px 100px 100px"); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-024-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-024-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: repeat(8, 50px); + width: 200px; + height: 500px; + gap: 10px; +} + +.grid > div { + height: 100%; + width: 100px; + background-color: orange; +} +</style> +<div class="grid"> + <div style="grid-row: span 3;"></div> + <div style="grid-row: -1;"></div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-024.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-024.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<title>Auto-fit repeat tracks with fixed size and auto/explicit spanning item placement</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-024-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(4, 50px) repeat(auto-fit, 50px) repeat(4, 50px); + width: 200px; + height: 500px; + gap: 10px; +} + +.masonry > div { + height: 100%; + width: 100px; + background-color: orange; +} +</style> +<div class="masonry"> + <div style="grid-row: span 3;"></div> + <div style="grid-row: -1;"></div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-025-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-025-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: column; + grid-template-rows: repeat(auto-fill, 100px); + height: 400px; + width: 150px; + gap: 10px; +} + +img { + height: 100%; + width: auto; + display: block; +} +</style> +<div class="grid"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-025.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/auto-repeat/row-auto-repeat-025.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<title>Auto repeat tracks with fixed size and replaced items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-auto-repeat-025-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + masonry-direction: row; + grid-template-rows: repeat(auto-fill, 100px); + height: 400px; + width: 200px; + gap: 10px; +} + +img { + height: 100%; + width: auto; + display: block; +} +</style> +<div class="masonry"> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> + <img src="resources/pink-image.png" width="113" height="120"></img> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-001-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + grid-template-columns: 5% repeat(3, 10px 15%) repeat(1, 15px 5px 20px); + width: 500px; + gap: 10px; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized.</p> + <div class="grid"> + <div style="width: 100%; height: 50px; background: orange;"></div> + <div style="width: 100%; height: 30px; background: yellow;"></div> + <div style="width: 100%; height: 25px; background: green;"></div> + <div style="width: 100%; height: 100px; background: blue;"></div> + <div style="width: 100%; height: 80px; background: purple;"></div> + <div style="width: 100%; height: 60px; background: pink;"></div> + <div style="width: 100%; height: 40px; background: lime;"></div> + <div style="width: 100%; height: 90px; background: teal;"></div> + <div style="width: 100%; height: 15px; background: coral;"></div> + <div style="width: 100%; height: 10px; background: fuchsia;"></div> + + <div style="width: 100%; height: 60px; background: pink; transform: translateY(-50px);"></div> + <div style="width: 100%; height: 100px; background: blue; transform: translateY(-70px);"></div> + <div style="width: 100%; height: 25px; background: green; transform: translateY(-75px);"></div> + <div style="width: 100%; height: 80px; background: purple;"></div> + <div style="width: 100%; height: 50px; background: orange; transform: translateY(-20px);"></div> + <div style="width: 100%; height: 15px; background: coral; transform: translateY(-40px);"></div> + <div style="width: 100%; height: 80px; background: purple; transform: translateY(-60px);"></div> + <div style="width: 100%; height: 25px; background: green; transform: translateY(-10px);"></div> + <div style="width: 100%; height: 30px; background: yellow; transform: translateY(-85px);"></div> + <div style="width: 100%; height: 50px; background: orange; transform: translateY(-90px);"></div> + + <div style="width: 100%; height: 40px; background: lime; transform: translateY(-90px);"></div> + <div style="width: 100%; height: 90px; background: teal; grid-column: 3; transform: translateY(-150px);"></div> + <div style="width: 100%; height: 30px; background: yellow; grid-column: 6; transform: translateY(-125px);"></div> + <div style="width: 100%; height: 10px; background: fuchsia; transform: translateY(-80px);"></div> + <div style="width: 100%; height: 15px; background: coral; transform: translateY(-85px);"></div> + <div style="width: 100%; height: 40px; background: lime; transform: translateY(-155px);"></div> + <div style="width: 100%; height: 10px; background: fuchsia; transform: translateY(-140px);"></div> + + <div style="width: 100%; height: 90px; background: teal; grid-column: 6; transform: translateY(-185px);"></div> + <div style="width: 100%; height: 60px; background: pink; grid-column: 9; transform: translateY(-205px);"></div> + <div style="width: 100%; height: 100px; background: blue; transform: translateY(-220px);"></div> + + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-001.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-track-sizing-001-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: 5% repeat(3, 10px 15%) repeat(1, 15px 5px 20px); + width: 500px; + gap: 10px; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized.</p> + <div class="masonry"> + <div style="width: 100%; height: 50px; background: orange;"></div> + <div style="width: 100%; height: 30px; background: yellow;"></div> + <div style="width: 100%; height: 25px; background: green;"></div> + <div style="width: 100%; height: 100px; background: blue;"></div> + <div style="width: 100%; height: 80px; background: purple;"></div> + <div style="width: 100%; height: 60px; background: pink;"></div> + <div style="width: 100%; height: 40px; background: lime;"></div> + <div style="width: 100%; height: 90px; background: teal;"></div> + <div style="width: 100%; height: 15px; background: coral;"></div> + <div style="width: 100%; height: 10px; background: fuchsia;"></div> + + <div style="width: 100%; height: 50px; background: orange;"></div> + <div style="width: 100%; height: 30px; background: yellow;"></div> + <div style="width: 100%; height: 25px; background: green;"></div> + <div style="width: 100%; height: 100px; background: blue;"></div> + <div style="width: 100%; height: 80px; background: purple;"></div> + <div style="width: 100%; height: 60px; background: pink;"></div> + <div style="width: 100%; height: 40px; background: lime;"></div> + <div style="width: 100%; height: 90px; background: teal;"></div> + <div style="width: 100%; height: 15px; background: coral;"></div> + <div style="width: 100%; height: 10px; background: fuchsia;"></div> + + <div style="width: 100%; height: 50px; background: orange;"></div> + <div style="width: 100%; height: 30px; background: yellow;"></div> + <div style="width: 100%; height: 25px; background: green;"></div> + <div style="width: 100%; height: 100px; background: blue;"></div> + <div style="width: 100%; height: 80px; background: purple;"></div> + <div style="width: 100%; height: 60px; background: pink;"></div> + <div style="width: 100%; height: 40px; background: lime;"></div> + <div style="width: 100%; height: 90px; background: teal;"></div> + <div style="width: 100%; height: 15px; background: coral;"></div> + <div style="width: 100%; height: 10px; background: fuchsia;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-002-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + grid-template-columns: minmax(15px, min-content) max-content auto; + background-color: gray; + width: 100px; + font: 10px/1 Ahem; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized, and auto tracks are stretched.</p> + <div class="grid"> + <div style="grid-column: 1; background: green;">XXX XXX</div> + <div style="grid-column: 1 / 3; background: purple;">X XX X</div> + <div style="grid-column: 1; width: 30px; height: 1em; background: yellow;"></div> + <div style="grid-column: 2; width: 45px; height: 1em; background: orange;"></div> + <div style="grid-column: 3; width: 25px; height: 1em; background: blue; position: relative; top: -3em;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="match" href="column-track-sizing-002-ref.html"> +<style> +.masonry { + display: masonry; + grid-template-columns: minmax(15px, min-content) max-content auto; + background-color: gray; + width: 100px; + font: 10px/1 Ahem; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized, and auto tracks are stretched.</p> + <div class="masonry"> + <div style="grid-column: 1; background: green;">XXX XXX</div> + <div style="grid-column: 1 / 3; background: purple;">X XX X</div> + <div style="grid-column: 1; width: 100%; height: 1em; background: yellow;"></div> + <div style="grid-column: 2; width: 100%; height: 1em; background: orange;"></div> + <div style="grid-column: 3; width: 100%; height: 1em; background: blue;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-003-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + grid-template-columns: 1fr 5fr 3fr 1fr; + width: 100px; + height: 100px; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized, and flexible tracks are expanded.</p> + <div class="grid"> + <div style="background-color: orange;"></div> + <div style="background-color: yellow;"></div> + <div style="background-color: blue;"></div> + <div style="background-color: purple;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-track-sizing-003-ref.html"> +<style> +.masonry { + display: masonry; + grid-template-columns: 1fr 5fr 3fr 1fr; + width: 100px; + height: 100px; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized, and flexible tracks are expanded.</p> + <div class="masonry"> + <div style="background-color: orange; height: 100px;"></div> + <div style="background-color: yellow; height: 100px;"></div> + <div style="background-color: blue; height: 100px;"></div> + <div style="background-color: purple; height: 100px;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-004-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + grid-template-columns: 20px 1fr 30%; + width: 100px; + height: 100px; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized with mixed definite, fr and %.</p> + <div class="grid"> + <div style="background-color: orange;"></div> + <div style="background-color: yellow;"></div> + <div style="background-color: blue;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-004.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-track-sizing-004-ref.html"> +<style> +.masonry { + display: masonry; + grid-template-columns: 20px 1fr 30%; + width: 100px; + height: 100px; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized with mixed definite, fr and %.</p> + <div class="masonry"> + <div style="background-color: orange; height: 100px;"></div> + <div style="background-color: yellow; height: 100px;"></div> + <div style="background-color: blue; height: 100px;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-005-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + grid-template-columns: 90px 80px 100px; + width: 290px; + height: 425px; + gap: 10px; + background: lightgoldenrodyellow; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized with mix of explicit and auto item placement.</p> + <div class="grid"> + <div style="width: 50px; height: 50px; background: orange;"></div> + <div style="width: 30px; height: 30px; background: yellow;"></div> + <div style="width: 25px; height: 25px; background: green;"></div> + + <div style="width: 60px; height: 60px; background: pink;"></div> + <div style="width: 80px; height: 80px; background: purple; transform: translateY(-20px);"></div> + <div style="width: 100px; height: 100px; background: blue; transform: translateY(-25px);"></div> + + <div style="width: 90px; height: 90px; background: teal; transform: translateY(-40px);"></div> + <div style="width: 40px; height: 40px; background: lime; transform: translateY(-40px);"></div> + <div style="width: 15px; height: 15px; background: coral; transform: translateY(-25px);"></div> + + <div style="width: 90px; height: 25px; background: green; transform: translateY(-40px);"></div> + <div style="width: 80px; height: 50px; background: orange; transform: translateY(-90px);"></div> + <div style="width: 10px; height: 10px; background: fuchsia; grid-column: 3; transform: translateY(-100px);"></div> + + <div style="width: 90px; height: 60px; background: pink; grid-column: 1; transform: translateY(-65px);"></div> + <div style="width: 80px; height: 80px; background: purple; transform: translateY(-90px);"></div> + <div style="width: 100px; height: 30px; background: yellow; transform: translateY(-140px);"></div> + + <div style="width: 90px; height: 90px; background: teal; grid-column: 1; transform: translateY(-85px);"></div> + <div style="width: 80px; height: 40px; background: lime; transform: translateY(-90px);"></div> + <div style="width: 100px; height: 100px; background: blue; transform: translateY(-190px);"></div> + + <div style="width: 100px; height: 15px; background: coral; transform: translateY(-190px); grid-column: 3;"></div> + <div style="width: 100px; height: 10px; background: fuchsia; transform: translateY(-190px); grid-column: 3;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/column-track-sizing-005.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="column-track-sizing-005-ref.html"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: auto auto auto; + width: fit-content; + gap: 10px; + background: lightgoldenrodyellow; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized with mix of explicit and auto item placement.</p> + <div class="masonry"> + <div style="width: 50px; height: 50px; background: orange;"></div> + <div style="width: 30px; height: 30px; background: yellow;"></div> + <div style="width: 25px; height: 25px; background: green;"></div> + <div style="width: 100px; height: 100px; background: blue; grid-column: 3;"></div> + <div style="width: 80px; height: 80px; background: purple;"></div> + <div style="width: 60px; height: 60px; background: pink;"></div> + <div style="width: 40px; height: 40px; background: lime;"></div> + <div style="width: 90px; height: 90px; background: teal; grid-column: 1;"></div> + <div style="width: 15px; height: 15px; background: coral;"></div> + <div style="width: 10px; height: 10px; background: fuchsia;"></div> + + <div style="width: 100%; height: 50px; background: orange;"></div> + <div style="width: 100%; height: 30px; background: yellow;"></div> + <div style="width: 100%; height: 25px; background: green;"></div> + <div style="width: 100%; height: 100px; background: blue;"></div> + <div style="width: 100%; height: 80px; background: purple;"></div> + <div style="width: 100%; height: 60px; background: pink;"></div> + <div style="width: 100%; height: 40px; background: lime;"></div> + <div style="width: 100%; height: 90px; background: teal;"></div> + <div style="width: 100%; height: 15px; background: coral;"></div> + <div style="width: 100%; height: 10px; background: fuchsia;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-001-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + grid-template-rows: 5% repeat(3, 10px 15%) repeat(1, 15px 5px 20px); + grid-template-columns: 100px 100px 100px 100px 100px; + height: 500px; + gap: 10px; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized.</p> + <div class="grid"> + <div style="height: 100%; width: 50px; background: orange;"></div> + <div style="height: 100%; width: 60px; background: pink; transform: translateX(-50px);"></div> + <div style="height: 100%; width: 40px; background: lime; transform: translateX(-90px);"></div> + + <div style="height: 100%; width: 30px; background: yellow; grid-column: 1;"></div> + <div style="height: 100%; width: 100px; background: blue; transform: translateX(-70px);"></div> + + <div style="height: 100%; width: 25px; background: green; grid-column: 1;"></div> + <div style="height: 100%; width: 25px; background: green; transform: translateX(-75px);"></div> + <div style="height: 100%; width: 90px; background: teal; transform: translateX(-150px);"></div> + + <div style="height: 100%; width: 100px; background: blue; grid-column: 1;"></div> + <div style="height: 100%; width: 80px; background: purple;"></div> + + <div style="height: 100%; width: 80px; background: purple; grid-column: 1;"></div> + <div style="height: 100%; width: 50px; background: orange; transform: translateX(-20px);"></div> + + <div style="height: 100%; width: 60px; background: pink; grid-column: 1;"></div> + <div style="height: 100%; width: 15px; background: coral; transform: translateX(-40px);"></div> + <div style="height: 100%; width: 30px; background: yellow; transform: translateX(-125px);"></div> + <div style="height: 100%; width: 90px; background: teal; transform: translateX(-195px);"></div> + + <div style="height: 100%; width: 40px; background: lime; grid-column: 1;"></div> + <div style="height: 100%; width: 80px; background: purple; transform: translateX(-60px);"></div> + <div style="height: 100%; width: 10px; background: fuchsia; transform: translateX(-80px);"></div> + + <div style="height: 100%; width: 90px; background: teal; grid-column: 1;"></div> + <div style="height: 100%; width: 25px; background: green; transform: translateX(-10px);"></div> + <div style="height: 100%; width: 15px; background: coral; transform: translateX(-85px);"></div> + + <div style="height: 100%; width: 15px; background: coral; grid-column: 1;"></div> + <div style="height: 100%; width: 30px; background: yellow; transform: translateX(-85px);"></div> + <div style="height: 100%; width: 40px; background: lime; transform: translateX(-155px);"></div> + <div style="height: 100%; width: 60px; background: pink; transform: translateX(-215px);"></div> + + <div style="height: 100%; width: 10px; background: fuchsia; grid-column: 1;"></div> + <div style="height: 100%; width: 50px; background: orange; transform: translateX(-90px);"></div> + <div style="height: 100%; width: 10px; background: fuchsia; transform: translateX(-140px);"></div> + <div style="height: 100%; width: 100px; background: blue; transform: translateX(-230px);"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-track-sizing-001-ref.html"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + item-tolerance: 0; + grid-template-rows: 5% repeat(3, 10px 15%) repeat(1, 15px 5px 20px); + height: 500px; + gap: 10px; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized.</p> + <div class="masonry"> + <div style="height: 100%; width: 50px; background: orange;"></div> + <div style="height: 100%; width: 30px; background: yellow;"></div> + <div style="height: 100%; width: 25px; background: green;"></div> + <div style="height: 100%; width: 100px; background: blue;"></div> + <div style="height: 100%; width: 80px; background: purple;"></div> + <div style="height: 100%; width: 60px; background: pink;"></div> + <div style="height: 100%; width: 40px; background: lime;"></div> + <div style="height: 100%; width: 90px; background: teal;"></div> + <div style="height: 100%; width: 15px; background: coral;"></div> + <div style="height: 100%; width: 10px; background: fuchsia;"></div> + + <div style="height: 100%; width: 50px; background: orange;"></div> + <div style="height: 100%; width: 30px; background: yellow;"></div> + <div style="height: 100%; width: 25px; background: green;"></div> + <div style="height: 100%; width: 100px; background: blue;"></div> + <div style="height: 100%; width: 80px; background: purple;"></div> + <div style="height: 100%; width: 60px; background: pink;"></div> + <div style="height: 100%; width: 40px; background: lime;"></div> + <div style="height: 100%; width: 90px; background: teal;"></div> + <div style="height: 100%; width: 15px; background: coral;"></div> + <div style="height: 100%; width: 10px; background: fuchsia;"></div> + + <div style="height: 100%; width: 50px; background: orange;"></div> + <div style="height: 100%; width: 30px; background: yellow;"></div> + <div style="height: 100%; width: 25px; background: green;"></div> + <div style="height: 100%; width: 100px; background: blue;"></div> + <div style="height: 100%; width: 80px; background: purple;"></div> + <div style="height: 100%; width: 60px; background: pink;"></div> + <div style="height: 100%; width: 40px; background: lime;"></div> + <div style="height: 100%; width: 90px; background: teal;"></div> + <div style="height: 100%; width: 15px; background: coral;"></div> + <div style="height: 100%; width: 10px; background: fuchsia;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-002-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +.grid { + display: grid; + grid-template-rows: minmax(15px, min-content) max-content auto; + grid-template-columns: 3em 2em 1em; + background-color: gray; + height: 100px; + width: 100px; + font: 10px/1 Ahem; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized, and auto tracks are stretched.</p> + <div class="grid"> + <div style="grid-row: 1; background: green; width: min-content;">XXX XXX</div> + <div style="grid-row: 1 / 3; background: purple; width: 2em;">X XX X</div> + <div style="grid-row: 1; height: 100%; width: 1em; background: yellow;"></div> + <div style="grid-row: 2; grid-column: 3; height: 100%; width: 1em; background: orange;"></div> + <div style="grid-row: 3; height: 100%; width: 1em; background: blue;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-002.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="match" href="row-track-sizing-002-ref.html"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + grid-template-rows: minmax(15px, min-content) max-content auto; + background-color: gray; + height: 100px; + width: 100px; + font: 10px/1 Ahem; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized, and auto tracks are stretched.</p> + <div class="masonry"> + <div style="grid-row: 1; background: green; width: min-content;">XXX XXX</div> + <div style="grid-row: 1 / 3; background: purple; width: 2em;">X XX X</div> + <div style="grid-row: 1; height: 100%; width: 1em; background: yellow;"></div> + <div style="grid-row: 2; height: 100%; width: 1em; background: orange;"></div> + <div style="grid-row: 3; height: 100%; width: 1em; background: blue;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-003-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + grid-template-rows: 1fr 5fr 3fr 1fr; + width: 100px; + height: 100px; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized, and flexible tracks are expanded.</p> + <div class="grid"> + <div style="background-color: orange;"></div> + <div style="background-color: yellow;"></div> + <div style="background-color: blue;"></div> + <div style="background-color: purple;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-003.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-track-sizing-003-ref.html"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + grid-template-rows: 1fr 5fr 3fr 1fr; + width: 100px; + height: 100px; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized, and flexible tracks are expanded.</p> + <div class="masonry"> + <div style="background-color: orange; width: 100px;"></div> + <div style="background-color: yellow; width: 100px;"></div> + <div style="background-color: blue; width: 100px;"></div> + <div style="background-color: purple; width: 100px;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-004-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + grid-template-rows: 20px 1fr 30%; + width: 100px; + height: 100px; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized with mixed definite, fr and %.</p> + <div class="grid"> + <div style="background-color: orange;"></div> + <div style="background-color: yellow;"></div> + <div style="background-color: blue;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-004.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-track-sizing-004-ref.html"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + grid-template-rows: 20px 1fr 30%; + width: 100px; + height: 100px; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized with mixed definite, fr and %.</p> + <div class="masonry"> + <div style="background-color: orange; width: 100px;"></div> + <div style="background-color: yellow; width: 100px;"></div> + <div style="background-color: blue; width: 100px;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-005-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<style> +.grid { + display: grid; + grid-template-rows: 90px 80px 100px; + grid-template-columns: 50px 100px 90px 50px 80px 100px 15px 10px; + height: 290px; + gap: 10px; + background: lightgoldenrodyellow; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized with mix of explicit and auto item placement.</p> + <div class="grid"> + <div style="width: 50px; height: 50px; background: orange;"></div> + <div style="width: 60px; height: 60px; background: pink;"></div> + <div style="width: 90px; height: 90px; background: teal; transform: translateX(-40px);"></div> + <div style="height: 100%; width: 25px; background: green; transform: translateX(-40px);"></div> + <div style="height: 100%; width: 60px; background: pink; transform: translateX(-65px);"></div> + <div style="height: 100%; width: 90px; background: teal; transform: translateX(-85px);"></div> + + <div style="width: 30px; height: 30px; background: yellow; grid-row: 2;"></div> + <div style="width: 80px; height: 80px; background: purple; grid-row: 2; transform: translateX(-20px);"></div> + <div style="width: 40px; height: 40px; background: lime; grid-row: 2; transform: translateX(-40px);"></div> + <div style="height: 100%; width: 50px; background: orange; grid-row: 2; transform: translateX(-90px);"></div> + <div style="height: 100%; width: 80px; background: purple; grid-row: 2; transform: translateX(-90px);"></div> + <div style="height: 100%; width: 40px; background: lime; grid-row: 2; transform: translateX(-90px);"></div> + + <div style="width: 25px; height: 25px; background: green; grid-row: 3;"></div> + <div style="width: 100px; height: 100px; background: blue; grid-row: 3; transform: translateX(-25px);"></div> + <div style="width: 15px; height: 15px; background: coral; grid-row: 3; transform: translateX(-25px);"></div> + <div style="width: 10px; height: 10px; background: fuchsia; grid-row: 3; transform: translateX(-100px);"></div> + <div style="height: 100%; width: 30px; background: yellow; grid-row: 3; transform: translateX(-140px);"></div> + <div style="height: 100%; width: 100px; background: blue; grid-row: 3; transform: translateX(-190px);"></div> + <div style="height: 100%; width: 15px; background: coral; grid-row: 3; transform: translateX(-190px);"></div> + <div style="height: 100%; width: 10px; background: fuchsia; grid-row: 3; transform: translateX(-190px);"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/row-track-sizing-005.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> +<link rel="match" href="row-track-sizing-005-ref.html"> +<style> +.masonry { + display: masonry; + masonry-direction: row; + item-tolerance: 0; + grid-template-rows: auto auto auto; + gap: 10px; + background: lightgoldenrodyellow; +} +</style> +<body> + <p>Test that masonry tracks are correctly sized with mix of explicit and auto item placement.</p> + <div class="masonry"> + <div style="width: 50px; height: 50px; background: orange;"></div> + <div style="width: 30px; height: 30px; background: yellow;"></div> + <div style="width: 25px; height: 25px; background: green;"></div> + <div style="width: 100px; height: 100px; background: blue; grid-row: 3;"></div> + <div style="width: 80px; height: 80px; background: purple;"></div> + <div style="width: 60px; height: 60px; background: pink;"></div> + <div style="width: 40px; height: 40px; background: lime;"></div> + <div style="width: 90px; height: 90px; background: teal; grid-row: 1;"></div> + <div style="width: 15px; height: 15px; background: coral;"></div> + <div style="width: 10px; height: 10px; background: fuchsia;"></div> + + <div style="height: 100%; width: 50px; background: orange;"></div> + <div style="height: 100%; width: 30px; background: yellow;"></div> + <div style="height: 100%; width: 25px; background: green;"></div> + <div style="height: 100%; width: 100px; background: blue;"></div> + <div style="height: 100%; width: 80px; background: purple;"></div> + <div style="height: 100%; width: 60px; background: pink;"></div> + <div style="height: 100%; width: 40px; background: lime;"></div> + <div style="height: 100%; width: 90px; background: teal;"></div> + <div style="height: 100%; width: 15px; background: coral;"></div> + <div style="height: 100%; width: 10px; background: fuchsia;"></div> + </div> +</body> +</html>
