commit b43f5b47632ba57e87805ab6521c73a3b2868ec1 parent 36c90c516e045574fb8d4c99d093010f8fc7bff4 Author: Brandon Stewart <stewartb2@gmail.com> Date: Mon, 17 Nov 2025 21:51:06 +0000 Bug 2000573 [wpt PR 56049] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=301968, a=testonly Automatic update from web-platform-tests WebKit export of https://bugs.webkit.org/show_bug.cgi?id=301968 (#56049) -- wpt-commits: 6c213479a8cb49a88133a9c500b35a8b56e8def3 wpt-pr: 56049 Diffstat:
17 files changed, 797 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-001-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: normal (reference)</title> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + .outer-grid { + display: inline-grid; + grid-template-columns: repeat(2, auto); + column-gap: 10px; + row-gap: 0; + color: #444; + border: 1px solid; + padding: 2px; + } + + .column { + display: grid; + grid-template-rows: auto; + gap: 10px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + width: 70px; + box-sizing: content-box; + } + </style> +</head> +<body> + +<div class="outer-grid"> + <div class="column"> + <!-- Column 1 --> + <item style="height: 50px;">1</item> + <item style="height: 40px;">3</item> + </div> + <div class="column"> + <!-- Column 2 --> + <item style="height: 40px;">2</item> + <item style="height: 50px;">4</item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: normal</title> + <link rel="author" title="Apple Inc."> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#item-tolerance"> + <link rel="match" href="item-tolerance-column-001-ref.html"> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-masonry; + gap: 10px; + grid-template-columns: repeat(2, 100px); + item-tolerance: normal; /* Should resolve to 1em (16px) */ + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + } + </style> +</head> +<body> + +<grid> + <item style="height: 50px">1</item> + <item style="height: 40px">2</item> + <item style="height: 40px">3</item> + <item style="height: 50px">4</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-002-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: normal (reference)</title> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + .outer-grid { + display: inline-grid; + grid-template-columns: repeat(3, auto); + column-gap: 10px; + row-gap: 0; + color: #444; + border: 1px solid; + padding: 2px; + } + + .column { + display: grid; + grid-template-rows: auto; + gap: 10px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + width: 70px; + box-sizing: content-box; + } + </style> +</head> +<body> + +<div class="outer-grid"> + <div class="column"> + <!-- Column 1 --> + <item style="height: 70px;">1</item> + <item style="height: 30px;">6</item> + </div> + <div class="column"> + <!-- Column 2 --> + <item style="height: 50px;">2</item> + <item style="height: 50px;">5</item> + </div> + <div class="column"> + <!-- Column 3 --> + <item style="height: 30px;">3</item> + <item style="height: 70px;">4</item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: normal</title> + <link rel="author" title="Apple Inc."> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#item-tolerance"> + <link rel="match" href="item-tolerance-column-002-ref.html"> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-masonry; + gap: 10px; + grid-template-columns: repeat(3, 100px); + item-tolerance: normal; /* Should resolve to 1em (16px) */ + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + } + </style> +</head> +<body> + +<grid> + <item style="height: 70px">1</item> + <item style="height: 50px">2</item> + <item style="height: 30px">3</item> + <item style="height: 70px">4</item> + <item style="height: 50px">5</item> + <item style="height: 30px">6</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-003-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: 51px (reference)</title> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + .outer-grid { + display: inline-grid; + grid-template-columns: repeat(3, auto); + column-gap: 10px; + row-gap: 0; + color: #444; + border: 1px solid; + padding: 2px; + } + + .column { + display: grid; + grid-template-rows: auto; + gap: 10px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + width: 70px; + box-sizing: content-box; + } + </style> +</head> +<body> + +<div class="outer-grid"> + <div class="column"> + <!-- Column 1 --> + <item style="height: 150px;">1</item> + <item style="height: 50px;">6</item> + </div> + <div class="column"> + <!-- Column 2 --> + <item style="height: 100px;">2</item> + <item style="height: 100px;">4</item> + </div> + <div class="column"> + <!-- Column 3 --> + <item style="height: 90px;">3</item> + <item style="height: 110px;">5</item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-003.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: 51px</title> + <link rel="author" title="Apple Inc."> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#item-tolerance"> + <link rel="match" href="item-tolerance-column-003-ref.html"> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-masonry; + gap: 10px; + grid-template-columns: repeat(3, 100px); + item-tolerance: 51px; /* Tracks within 51px are considered equal */ + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + } + </style> +</head> +<body> + +<grid> + <item style="height: 150px">1</item> + <item style="height: 100px">2</item> + <item style="height: 90px">3</item> + <item style="height: 100px">4</item> + <item style="height: 110px">5</item> + <item style="height: 50px">6</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-004-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: infinite (reference)</title> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + .outer-grid { + display: inline-grid; + grid-template-columns: repeat(2, auto); + column-gap: 10px; + row-gap: 0; + color: #444; + border: 1px solid; + padding: 2px; + } + + .column { + display: grid; + grid-template-rows: auto; + gap: 10px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + width: 70px; + box-sizing: content-box; + } + </style> +</head> +<body> + +<div class="outer-grid"> + <div class="column"> + <!-- Column 1 --> + <item style="height: 100px;">1</item> + <item style="height: 50px;">3</item> + </div> + <div class="column"> + <!-- Column 2 --> + <item style="height: 50px;">2</item> + <item style="height: 100px;">4</item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-column-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: infinite</title> + <link rel="author" title="Apple Inc."> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#item-tolerance"> + <link rel="match" href="item-tolerance-column-004-ref.html"> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-masonry; + gap: 10px; + grid-template-columns: repeat(2, 100px); + item-tolerance: infinite; /* Always place in order */ + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + } + </style> +</head> +<body> + +<grid> + <item style="height: 100px">1</item> + <item style="height: 50px">2</item> + <item style="height: 50px">3</item> + <item style="height: 100px">4</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-001-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: normal (row direction - reference)</title> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + .outer-grid { + display: inline-grid; + grid-template-rows: repeat(2, 100px); + row-gap: 10px; + column-gap: 0; + color: #444; + border: 1px solid; + padding: 2px; + } + + .row { + display: grid; + grid-auto-flow: column; + grid-auto-columns: auto; + gap: 10px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + height: 70px; + box-sizing: content-box; + } + </style> +</head> +<body> + +<div class="outer-grid"> + <div class="row"> + <!-- Row 1 --> + <item style="width: 50px;">1</item> + <item style="width: 40px;">3</item> + </div> + <div class="row"> + <!-- Row 2 --> + <item style="width: 40px;">2</item> + <item style="width: 50px;">4</item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: normal (row direction)</title> + <link rel="author" title="Apple Inc."> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#item-tolerance"> + <link rel="match" href="item-tolerance-row-001-ref.html"> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-masonry; + grid-auto-flow: column; + gap: 10px; + grid-template-rows: repeat(2, 100px); + item-tolerance: normal; /* Should resolve to 1em (16px) */ + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + } + </style> +</head> +<body> + +<grid> + <item style="width: 50px">1</item> + <item style="width: 40px">2</item> + <item style="width: 40px">3</item> + <item style="width: 50px">4</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-002-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: normal (row direction - reference)</title> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + .outer-grid { + display: inline-grid; + grid-template-rows: repeat(3, auto); + row-gap: 10px; + column-gap: 0; + color: #444; + border: 1px solid; + padding: 2px; + } + + .row { + display: grid; + grid-auto-flow: column; + grid-auto-columns: auto; + gap: 10px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + height: 70px; + box-sizing: content-box; + } + </style> +</head> +<body> + +<div class="outer-grid"> + <div class="row"> + <!-- Row 1 --> + <item style="width: 70px;">1</item> + <item style="width: 30px;">6</item> + </div> + <div class="row"> + <!-- Row 2 --> + <item style="width: 50px;">2</item> + <item style="width: 50px;">5</item> + </div> + <div class="row"> + <!-- Row 3 --> + <item style="width: 30px;">3</item> + <item style="width: 70px;">4</item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-002.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: normal (row direction)</title> + <link rel="author" title="Apple Inc."> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#item-tolerance"> + <link rel="match" href="item-tolerance-row-002-ref.html"> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-masonry; + grid-auto-flow: column; + gap: 10px; + grid-template-rows: repeat(3, 100px); + item-tolerance: normal; /* Should resolve to 1em (16px) */ + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + } + </style> +</head> +<body> + +<grid> + <item style="width: 70px">1</item> + <item style="width: 50px">2</item> + <item style="width: 30px">3</item> + <item style="width: 70px">4</item> + <item style="width: 50px">5</item> + <item style="width: 30px">6</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-003-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: 51px (row direction - reference)</title> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + .outer-grid { + display: inline-grid; + grid-template-rows: repeat(3, auto); + row-gap: 10px; + column-gap: 0; + color: #444; + border: 1px solid; + padding: 2px; + } + + .row { + display: grid; + grid-auto-flow: column; + grid-auto-columns: auto; + gap: 10px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + height: 70px; + box-sizing: content-box; + } + </style> +</head> +<body> + +<div class="outer-grid"> + <div class="row"> + <!-- Row 1 --> + <item style="width: 150px;">1</item> + <item style="width: 50px;">6</item> + </div> + <div class="row"> + <!-- Row 2 --> + <item style="width: 100px;">2</item> + <item style="width: 100px;">4</item> + </div> + <div class="row"> + <!-- Row 3 --> + <item style="width: 90px;">3</item> + <item style="width: 110px;">5</item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-003.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: 51px (row direction)</title> + <link rel="author" title="Apple Inc."> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#item-tolerance"> + <link rel="match" href="item-tolerance-row-003-ref.html"> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-masonry; + grid-auto-flow: column; + gap: 10px; + grid-template-rows: repeat(3, 100px); + item-tolerance: 51px; /* Tracks within 51px are considered equal */ + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + } + </style> +</head> +<body> + +<grid> + <item style="width: 150px">1</item> + <item style="width: 100px">2</item> + <item style="width: 90px">3</item> + <item style="width: 100px">4</item> + <item style="width: 110px">5</item> + <item style="width: 50px">6</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-004-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: infinite (row direction - reference)</title> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + .outer-grid { + display: inline-grid; + grid-template-rows: repeat(2, auto); + row-gap: 10px; + column-gap: 0; + color: #444; + border: 1px solid; + padding: 2px; + } + + .row { + display: grid; + grid-auto-flow: column; + grid-auto-columns: auto; + gap: 10px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + height: 70px; + box-sizing: content-box; + } + </style> +</head> +<body> + +<div class="outer-grid"> + <div class="row"> + <!-- Row 1 --> + <item style="width: 100px;">1</item> + <item style="width: 50px;">3</item> + </div> + <div class="row"> + <!-- Row 2 --> + <item style="width: 50px;">2</item> + <item style="width: 100px;">4</item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/item-tolerance-row-004.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with item-tolerance: infinite (row direction)</title> + <link rel="author" title="Apple Inc."> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#item-tolerance"> + <link rel="match" href="item-tolerance-row-004-ref.html"> + <style> + html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-masonry; + grid-auto-flow: column; + gap: 10px; + grid-template-rows: repeat(2, 100px); + item-tolerance: infinite; /* Always place in order */ + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 10px; + margin: 3px; + border: 2px solid blue; + } + </style> +</head> +<body> + +<grid> + <item style="width: 100px">1</item> + <item style="width: 50px">2</item> + <item style="width: 50px">3</item> + <item style="width: 100px">4</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002.html @@ -21,6 +21,7 @@ color: #444; border: 1px solid; padding: 2px; + item-tolerance: 0px; } item {