commit a3c0dd6c4e9b07412114548b35474dcf532fb9bc parent 018b3ec17fc78894116db8e24250836460dcbb2e Author: Brandon Stewart <stewartb2@gmail.com> Date: Thu, 20 Nov 2025 09:53:45 +0000 Bug 2001027 [wpt PR 56110] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=302718, a=testonly Automatic update from web-platform-tests WebKit export of https://bugs.webkit.org/show_bug.cgi?id=302718 (#56110) -- wpt-commits: e1b28d94ba3db526618bb2b23cb2e5f56302473d wpt-pr: 56110 Diffstat:
58 files changed, 4474 insertions(+), 989 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001a-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001a-ref.html @@ -0,0 +1,97 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-001a)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 50px 80px 40px; + grid-template-columns: auto; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +masonry-track { + display: grid; + gap: 4px 2px; +} +masonry-track:nth-child(1) { + grid-template-rows: 50px; + grid-template-columns: min-content auto; +} +masonry-track:nth-child(2) { + grid-auto-flow: column; + grid-template-rows: 80px 40px; + grid-template-columns: auto; +} +.rows { + grid-template-columns: 50px 122px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(1) { + grid-template-columns: 50px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(2) { + grid-template-columns: 80px 40px; + grid-template-rows: auto; + align-content: start; +} +item { + background: grey; + width: 3ch; + position: relative; +} +.purple { background:purple; width:auto; justify-self:start; } +.rows .purple { justify-self:stretch; } +.nth-1 { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / 2ch auto; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +masonry-track > subgrid { + grid-row: 1 / span 2; +} +.rows > masonry-track > subgrid { + grid: auto auto / subgrid; + grid-row: 2; + grid-column: 1 / span 2; +} +.js { justify-self:stretch; } +</style> +</head> +<body> + +<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: --> + +<grid style="grid:masonry/none"> + <item class="nth-1">1</item> + <item class="purple js">2</item> + <item>3</item> + <subgrid style="grid:masonry/none"> + <item class="nth-1">4a</item> + <item style="margin-right:15px" class="purple js">4b</item> + </subgrid> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001a.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001a.html @@ -0,0 +1,67 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-001a)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-001a-ref.html"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 50px 80px 40px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + grid-template-columns: 50px 80px 40px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / subgrid; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +.rows > subgrid { + grid-row: initial; + grid-column: 2 / span 2; +} +</style> +</head> +<body> + + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid> + <item>4a</item> + <item style="margin-right:15px">4b</item> + </subgrid> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001b-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001b-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-001b)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 50px 80px 40px; + grid-template-columns: auto; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +masonry-track { + display: grid; + gap: 4px 2px; +} +masonry-track:nth-child(1) { + grid-template-rows: 50px; + grid-template-columns: min-content auto; +} +masonry-track:nth-child(2) { + grid-auto-flow: column; + grid-template-rows: 80px 40px; + grid-template-columns: auto; +} +.rows { + grid-template-columns: 50px 122px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(1) { + grid-template-columns: 50px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(2) { + grid-template-columns: 80px 40px; + grid-template-rows: auto; + align-content: start; +} +item { + background: grey; + width: 3ch; + position: relative; +} +.purple { background:purple; width:auto; justify-self:start; } +.rows .purple { justify-self:stretch; } +.nth-1 { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / 2ch auto; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +masonry-track > subgrid { + grid-row: 1 / span 2; +} +.rows > masonry-track > subgrid { + grid: auto auto / subgrid; + grid-row: 2; + grid-column: 1 / span 2; +} +.js { justify-self:stretch; } +</style> +</head> +<body> + +<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: --> + +<grid> + <masonry-track> + <item class="nth-1">1</item> + <item>5</item> + </masonry-track> + <masonry-track> + <item class="purple">2</item> + <item>3</item> + <subgrid> + <item class="nth-1" style="grid-column:span 2">4a</item> + <item class="purple js">4b</item> + <item>4c</item> + </subgrid> + </masonry-track> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001b.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001b.html @@ -0,0 +1,69 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-001b)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-001b-ref.html"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 50px 80px 40px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + grid-template-columns: 50px 80px 40px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / subgrid; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +.rows > subgrid { + grid-row: initial; + grid-column: 2 / span 2; +} +</style> +</head> +<body> + + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001c-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001c-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-001c)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 50px 80px 40px; + grid-template-columns: auto; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +masonry-track { + display: grid; + gap: 4px 2px; +} +masonry-track:nth-child(1) { + grid-template-rows: 50px; + grid-template-columns: min-content auto; +} +masonry-track:nth-child(2) { + grid-auto-flow: column; + grid-template-rows: 80px 40px; + grid-template-columns: auto; +} +.rows { + grid-template-columns: 50px 122px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(1) { + grid-template-columns: 50px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(2) { + grid-template-columns: 80px 40px; + grid-template-rows: auto; + align-content: start; +} +item { + background: grey; + width: 3ch; + position: relative; +} +.purple { background:purple; width:auto; justify-self:start; } +.rows .purple { justify-self:stretch; } +.nth-1 { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / 2ch auto; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +masonry-track > subgrid { + grid-row: 1 / span 2; +} +.rows > masonry-track > subgrid { + grid: auto auto / subgrid; + grid-row: 2; + grid-column: 1 / span 2; +} +.js { justify-self:stretch; } +</style> +</head> +<body> + +<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: --> + +<grid> + <masonry-track> + <item class="nth-1">1</item> + <item>5</item> + </masonry-track> + <masonry-track> + <item class="purple">2</item> + <item>3</item> + <subgrid style="grid:subgrid/auto"> + <item class="nth-1">4a</item> + <item class="purple js">4b</item> + <item>4c</item> + </subgrid> + </masonry-track> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001c.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001c.html @@ -0,0 +1,69 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-001c)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-001c-ref.html"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 50px 80px 40px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + grid-template-columns: 50px 80px 40px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / subgrid; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +.rows > subgrid { + grid-row: initial; + grid-column: 2 / span 2; +} +</style> +</head> +<body> + + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid:subgrid/auto"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001d-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001d-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-001d)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 50px 80px 40px; + grid-template-columns: auto; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +masonry-track { + display: grid; + gap: 4px 2px; +} +masonry-track:nth-child(1) { + grid-template-rows: 50px; + grid-template-columns: min-content auto; +} +masonry-track:nth-child(2) { + grid-auto-flow: column; + grid-template-rows: 80px 40px; + grid-template-columns: auto; +} +.rows { + grid-template-columns: 50px 122px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(1) { + grid-template-columns: 50px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(2) { + grid-template-columns: 80px 40px; + grid-template-rows: auto; + align-content: start; +} +item { + background: grey; + width: 3ch; + position: relative; +} +.purple { background:purple; width:auto; justify-self:start; } +.rows .purple { justify-self:stretch; } +.nth-1 { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / 2ch auto; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +masonry-track > subgrid { + grid-row: 1 / span 2; +} +.rows > masonry-track > subgrid { + grid: auto auto / subgrid; + grid-row: 2; + grid-column: 1 / span 2; +} +.js { justify-self:stretch; } +</style> +</head> +<body> + +<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: --> + +<grid> + <masonry-track> + <item class="nth-1">1</item> + <item>5</item> + </masonry-track> + <masonry-track> + <item class="purple">2</item> + <item>3</item> + <subgrid style="grid:subgrid/auto; grid-auto-flow:column"> + <item class="nth-1">4a</item> + <item class="purple js">4b</item> + <item>4c</item> + </subgrid> + </masonry-track> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001d.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001d.html @@ -0,0 +1,69 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-001d)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-001d-ref.html"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 50px 80px 40px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + grid-template-columns: 50px 80px 40px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / subgrid; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +.rows > subgrid { + grid-row: initial; + grid-column: 2 / span 2; +} +</style> +</head> +<body> + + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid:subgrid/auto; grid-auto-flow:column"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001e-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001e-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-001e)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 50px 80px 40px; + grid-template-columns: auto; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +masonry-track { + display: grid; + gap: 4px 2px; +} +masonry-track:nth-child(1) { + grid-template-rows: 50px; + grid-template-columns: min-content auto; +} +masonry-track:nth-child(2) { + grid-auto-flow: column; + grid-template-rows: 80px 40px; + grid-template-columns: auto; +} +.rows { + grid-template-columns: 50px 122px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(1) { + grid-template-columns: 50px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(2) { + grid-template-columns: 80px 40px; + grid-template-rows: auto; + align-content: start; +} +item { + background: grey; + width: 3ch; + position: relative; +} +.purple { background:purple; width:auto; justify-self:start; } +.rows .purple { justify-self:stretch; } +.nth-1 { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / 2ch auto; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +masonry-track > subgrid { + grid-row: 1 / span 2; +} +.rows > masonry-track > subgrid { + grid: auto auto / subgrid; + grid-row: 2; + grid-column: 1 / span 2; +} +.js { justify-self:stretch; } +</style> +</head> +<body> + +<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: --> + +<grid> + <masonry-track> + <item class="nth-1">1</item> + <item>5</item> + </masonry-track> + <masonry-track> + <item class="purple">2</item> + <item>3</item> + <subgrid style="grid:auto auto/masonry"> + <item class="nth-1">4a</item> + <item class="purple">4b</item> + <item>4c</item> + </subgrid> + </masonry-track> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001e.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-001e.html @@ -0,0 +1,69 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-001e)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-001e-ref.html"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 50px 80px 40px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + grid-template-columns: 50px 80px 40px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / subgrid; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +.rows > subgrid { + grid-row: initial; + grid-column: 2 / span 2; +} +</style> +</head> +<body> + + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid:auto auto/subgrid"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002a-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002a-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002a)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: none / masonry"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002a.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002a.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002a)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002a-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002b-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002b-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002b)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <subgrid class="definite"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>2</item> + <item>3</item> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002b.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002b.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002b)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002b-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <subgrid> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>2</item> + <item>3</item> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002c-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002c-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002c)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: 29px 19px / masonry"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002c.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002c.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002c)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002c-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid class="definite"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002d-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002d-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002d)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid class="extent" style="grid: 39px 28px 19px / masonry"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002d.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002d.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002d)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002d-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid class="extent"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002e-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002e-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002e)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: none / masonry"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002e.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002e.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002e)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002e-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: subgrid / none"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002f-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002f-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002f)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <subgrid class="definite"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>2</item> + <item>3</item> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002f.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002f.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002f)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002f-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <subgrid style="grid: subgrid / none"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>2</item> + <item>3</item> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002g-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002g-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002g)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: 29px 19px / masonry"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002g.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002g.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002g)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002g-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid class="definite"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002h-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002h-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002h)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid class="extent" style="grid: 39px 28px 19px / masonry"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002h.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002h.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002h)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002h-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid class="extent"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002i-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002i-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002i)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: auto auto / masonry"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002i.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/column/masonry-subgrid-002i.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002i)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002i-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: auto auto / subgrid"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.html @@ -1,224 +0,0 @@ -<!DOCTYPE HTML> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html><head> - <meta charset="utf-8"> - <title>Reference: Masonry layout with a subgrid</title> - <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> -<style> -html,body { - color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; -} - -grid { - display: inline-grid; - grid-template-rows: 50px 80px 40px; - grid-template-columns: auto; - gap: 4px 2px; - padding: 1px 3px 5px 7px; - border: solid; - border-width: 3px 5px 1px 1px; - background: lightgrey content-box; -} -masonry-track { - display: grid; - gap: 4px 2px; -} -masonry-track:nth-child(1) { - grid-template-rows: 50px; - grid-template-columns: min-content auto; -} -masonry-track:nth-child(2) { - grid-auto-flow: column; - grid-template-rows: 80px 40px; - grid-template-columns: auto; -} -.rows { - grid-template-columns: 50px 122px; - grid-template-rows: auto; - align-content: start; -} -.rows > masonry-track:nth-child(1) { - grid-template-columns: 50px; - grid-template-rows: auto; - align-content: start; -} -.rows > masonry-track:nth-child(2) { - grid-template-columns: 80px 40px; - grid-template-rows: auto; - align-content: start; -} -item { - background: grey; - width: 3ch; - position: relative; -} -.purple { background:purple; width:auto; justify-self:start; } -.rows .purple { justify-self:stretch; } -.nth-1 { - border: solid; - border-width: 3px 13px 1px 1px; - margin: 7px 1px 5px 3px; -} -subgrid { - display: grid; - grid: subgrid / 2ch auto; - grid-row: 2 / span 2; - grid-gap: 8px 20px; - background: yellow; -} -masonry-track > subgrid { - grid-row: 1 / span 2; -} -.rows > masonry-track > subgrid { - grid: auto auto / subgrid; - grid-row: 2; - grid-column: 1 / span 2; -} -.js { justify-self:stretch; } -</style> -</head> -<body> - -<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: --> -<grid style="grid:masonry/none"> - <item class="nth-1">1</item> - <item class="purple js">2</item> - <item>3</item> - <subgrid style="grid:masonry/none"> - <item class="nth-1">4a</item> - <item style="margin-right:15px" class="purple js">4b</item> - </subgrid> -</grid> - -<grid> - <masonry-track> - <item class="nth-1">1</item> - <item>5</item> - </masonry-track> - <masonry-track> - <item class="purple">2</item> - <item>3</item> - <subgrid> - <item class="nth-1" style="grid-column:span 2">4a</item> - <item class="purple js">4b</item> - <item>4c</item> - </subgrid> - </masonry-track> -</grid> - -<grid> - <masonry-track> - <item class="nth-1">1</item> - <item>5</item> - </masonry-track> - <masonry-track> - <item class="purple">2</item> - <item>3</item> - <subgrid style="grid:subgrid/auto"> - <item class="nth-1">4a</item> - <item class="purple js">4b</item> - <item>4c</item> - </subgrid> - </masonry-track> -</grid> - -<grid> - <masonry-track> - <item class="nth-1">1</item> - <item>5</item> - </masonry-track> - <masonry-track> - <item class="purple">2</item> - <item>3</item> - <subgrid style="grid:subgrid/auto; grid-auto-flow:column"> - <item class="nth-1">4a</item> - <item class="purple js">4b</item> - <item>4c</item> - </subgrid> - </masonry-track> -</grid> - -<grid> - <masonry-track> - <item class="nth-1">1</item> - <item>5</item> - </masonry-track> - <masonry-track> - <item class="purple">2</item> - <item>3</item> - <subgrid style="grid:auto auto/masonry"> - <item class="nth-1">4a</item> - <item class="purple">4b</item> - <item>4c</item> - </subgrid> - </masonry-track> -</grid> - -<grid class="rows"> - <masonry-track> - <item class="nth-1">1</item> - <item>5</item> - </masonry-track> - <masonry-track> - <item class="purple">2</item> - <item>3</item> - <subgrid> - <item class="nth-1" style="grid-row:span 2; align-self:start">4a</item> - <item class="purple">4b</item> - <item style="grid-column:2">4c</item> - </subgrid> - </masonry-track> -</grid> - -<grid class="rows"> - <masonry-track> - <item class="nth-1">1</item> - <item>5</item> - </masonry-track> - <masonry-track> - <item class="purple">2</item> - <item>3</item> - <subgrid style="grid:auto/subgrid"> - <item class="nth-1">4a</item> - <item class="purple">4b</item> - <item>4c</item> - </subgrid> - </masonry-track> -</grid> - -<grid class="rows"> - <masonry-track> - <item class="nth-1">1</item> - <item>5</item> - </masonry-track> - <masonry-track> - <item class="purple">2</item> - <item>3</item> - <subgrid style="grid:auto/subgrid; grid-auto-flow:column"> - <item class="nth-1">4a</item> - <item class="purple">4b</item> - <item>4c</item> - </subgrid> - </masonry-track> -</grid> - -<grid class="rows"> - <masonry-track> - <item class="nth-1">1</item> - <item>5</item> - </masonry-track> - <masonry-track> - <item class="purple">2</item> - <item>3</item> - <subgrid style="grid:auto auto/subgrid"> - <item class="nth-1">4a</item> - <item class="purple">4b</item> - <item>4c</item> - </subgrid> - </masonry-track> -</grid> - -</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.html @@ -1,162 +0,0 @@ -<!DOCTYPE HTML> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html><head> - <meta charset="utf-8"> - <title>CSS Grid Test: Masonry layout with a subgrid</title> - <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> - <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> - <link rel="match" href="masonry-subgrid-001-ref.html"> -<style> -html,body { - color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; -} - -grid { - display: inline-grid-lanes; - masonry-direction: row; - grid-template-rows: 50px 80px 40px; - gap: 4px 2px; - padding: 1px 3px 5px 7px; - border: solid; - border-width: 3px 5px 1px 1px; - background: lightgrey content-box; -} -.rows { - grid-template-columns: 50px 80px 40px; -} -item { - background: grey; - width: 3ch; - position: relative; -} -item:nth-child(2n) { background:purple; width:auto; } -item:nth-child(1) { - border: solid; - border-width: 3px 13px 1px 1px; - margin: 7px 1px 5px 3px; -} -subgrid { - display: grid; - grid: subgrid / subgrid; - grid-row: 2 / span 2; - grid-gap: 8px 20px; - background: yellow; -} -.rows > subgrid { - grid-row: initial; - grid-column: 2 / span 2; -} -</style> -</head> -<body> - -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid> - <item>4a</item> - <item style="margin-right:15px">4b</item> - </subgrid> -</grid> - -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid:subgrid/auto"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid:subgrid/auto; grid-auto-flow:column"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid:auto auto/subgrid"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid:auto/subgrid"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid:auto/subgrid; grid-auto-flow:column"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid:auto auto/subgrid"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002-ref.html @@ -1,302 +0,0 @@ -<!DOCTYPE HTML> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html><head> - <meta charset="utf-8"> - <title>Reference: Masonry layout with a subgrid</title> - <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> -<style> -html,body { - color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; -} - -grid { - display: inline-grid; - grid-template-rows: 40px 30px 20px; - grid-template-columns: masonry; - gap: 4px 2px; - padding: 1px 3px 5px 7px; - border: solid; - border-width: 3px 5px 1px 1px; - background: lightgrey content-box; - grid-auto-flow: column; -} -.rows { - grid-template-columns: 40px 30px 20px; - grid-template-rows: masonry; - grid-auto-flow: row; -} -item { - background: grey; - width: 3ch; - position: relative; -} -item:nth-child(2n) { background:purple; width:auto; } -item:nth-child(1) { - border: solid; - border-width: 3px 5px 1px 1px; - margin: 7px 1px 5px 3px; -} -subgrid { - display: grid; - grid-row: auto/span 2; - grid-column: auto/span 2; - grid: subgrid / subgrid; - grid-gap: 6px 8px; - background: yellow; -} -subgrid.definite { - grid-row-start:2; -} -subgrid.extent { - grid-row: 1/span 3; -} -.rows > subgrid.definite { - grid-column-start:2; - grid-row-start:auto; -} -.rows > subgrid.extent { - grid-row: auto/span 2; - grid-column: 1/span 3; -} -</style> -</head> -<body> - -<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: none / masonry"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... unless it's auto-placed in the first track ... --> -<grid> - <item>1</item> - <subgrid class="definite"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>2</item> - <item>3</item> - <item>5</item> -</grid> - -<!-- ... or has definite start position --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: 29px 19px / masonry"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... or span all tracks in the grid-axis --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid class="extent" style="grid: 39px 28px 19px / masonry"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: none / masonry"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... unless it's auto-placed in the first track ... --> -<grid> - <item>1</item> - <subgrid class="definite"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>2</item> - <item>3</item> - <item>5</item> -</grid> - -<!-- ... or has definite start position --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: 29px 19px / masonry"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... or span all tracks in the grid-axis --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid class="extent" style="grid: 39px 28px 19px / masonry"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: auto auto / masonry"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: masonry / none"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... unless it's auto-placed in the first track ... --> -<grid class="rows"> - <item>1</item> - <subgrid class="definite"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>2</item> - <item>3</item> - <item>5</item> -</grid> - -<!-- ... or has definite start position --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: masonry / 27px 17px"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... or span all tracks in the grid-axis --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid class="extent" style="grid: masonry / 37px 24px 17px"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: masonry / none"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... unless it's auto-placed in the first track ... --> -<grid class="rows"> - <item>1</item> - <subgrid class="definite"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>2</item> - <item>3</item> - <item>5</item> -</grid> - -<!-- ... or has definite start position --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: masonry / 27px 17px"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... or span all tracks in the grid-axis --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid class="extent" style="grid: masonry / 37px 24px 17px"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: masonry / auto auto"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002.html @@ -1,301 +0,0 @@ -<!DOCTYPE HTML> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html><head> - <meta charset="utf-8"> - <title>CSS Grid Test: Masonry layout with a subgrid</title> - <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> - <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> - <link rel="match" href="masonry-subgrid-002-ref.html"> -<style> -html,body { - color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; -} - -grid { - display: inline-grid-lanes; - masonry-direction: row; - grid-template-rows: 40px 30px 20px; - gap: 4px 2px; - padding: 1px 3px 5px 7px; - border: solid; - border-width: 3px 5px 1px 1px; - background: lightgrey content-box; -} -.rows { - masonry-direction: column; - grid-template-columns: 40px 30px 20px; -} -item { - background: grey; - width: 3ch; - position: relative; -} -item:nth-child(2n) { background:purple; width:auto; } -item:nth-child(1) { - border: solid; - border-width: 3px 5px 1px 1px; - margin: 7px 1px 5px 3px; -} -subgrid { - display: grid; - grid-row: auto/span 2; - grid-column: auto/span 2; - grid: subgrid / subgrid; - grid-gap: 6px 8px; - background: yellow; -} -subgrid.definite { - grid-row-start:2; -} -subgrid.extent { - grid-row: auto/span 3; -} -.rows > subgrid.definite { - grid-column-start:2; -} -.rows > subgrid.extent { - grid-row: auto/span 2; - grid-column: auto/span 3; -} -</style> -</head> -<body> - -<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... unless it's auto-placed in the first track ... --> -<grid> - <item>1</item> - <subgrid> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>2</item> - <item>3</item> - <item>5</item> -</grid> - -<!-- ... or has definite start position --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid class="definite"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... or span all tracks in the grid-axis --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid class="extent"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: subgrid / none"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... unless it's auto-placed in the first track ... --> -<grid> - <item>1</item> - <subgrid style="grid: subgrid / none"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>2</item> - <item>3</item> - <item>5</item> -</grid> - -<!-- ... or has definite start position --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid class="definite"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... or span all tracks in the grid-axis --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid class="extent"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own --> -<grid> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: auto auto / subgrid"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... unless it's auto-placed in the first track ... --> -<grid class="rows"> - <item>1</item> - <subgrid> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>2</item> - <item>3</item> - <item>5</item> -</grid> - -<!-- ... or has definite start position --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid class="definite"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... or span all tracks in the grid-axis --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid class="extent"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: none / subgrid"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... unless it's auto-placed in the first track ... --> -<grid class="rows"> - <item>1</item> - <subgrid style="grid: none / subgrid"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>2</item> - <item>3</item> - <item>5</item> -</grid> - -<!-- ... or has definite start position --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid class="definite"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- ... or span all tracks in the grid-axis --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid class="extent"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own --> -<grid class="rows"> - <item>1</item> - <item>2</item> - <item>3</item> - <subgrid style="grid: subgrid / auto auto"> - <item>4a</item> - <item>4b</item> - <item>4c</item> - </subgrid> - <item>5</item> -</grid> - -</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001a-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001a-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-001a)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 50px 80px 40px; + grid-template-columns: auto; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +masonry-track { + display: grid; + gap: 4px 2px; +} +masonry-track:nth-child(1) { + grid-template-rows: 50px; + grid-template-columns: min-content auto; +} +masonry-track:nth-child(2) { + grid-auto-flow: column; + grid-template-rows: 80px 40px; + grid-template-columns: auto; +} +.rows { + grid-template-columns: 50px 122px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(1) { + grid-template-columns: 50px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(2) { + grid-template-columns: 80px 40px; + grid-template-rows: auto; + align-content: start; +} +item { + background: grey; + width: 3ch; + position: relative; +} +.purple { background:purple; width:auto; justify-self:start; } +.rows .purple { justify-self:stretch; } +.nth-1 { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / 2ch auto; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +masonry-track > subgrid { + grid-row: 1 / span 2; +} +.rows > masonry-track > subgrid { + grid: auto auto / subgrid; + grid-row: 2; + grid-column: 1 / span 2; +} +.js { justify-self:stretch; } +</style> +</head> +<body> + +<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: --> + +<grid class="rows"> + <masonry-track> + <item class="nth-1">1</item> + <item>5</item> + </masonry-track> + <masonry-track> + <item class="purple">2</item> + <item>3</item> + <subgrid> + <item class="nth-1" style="grid-row:span 2; align-self:start">4a</item> + <item class="purple">4b</item> + <item style="grid-column:2">4c</item> + </subgrid> + </masonry-track> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001a.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001a.html @@ -0,0 +1,69 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-001a)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-001a-ref.html"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 50px 80px 40px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + grid-template-columns: 50px 80px 40px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / subgrid; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +.rows > subgrid { + grid-row: initial; + grid-column: 2 / span 2; +} +</style> +</head> +<body> + + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001b-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001b-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-001b)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 50px 80px 40px; + grid-template-columns: auto; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +masonry-track { + display: grid; + gap: 4px 2px; +} +masonry-track:nth-child(1) { + grid-template-rows: 50px; + grid-template-columns: min-content auto; +} +masonry-track:nth-child(2) { + grid-auto-flow: column; + grid-template-rows: 80px 40px; + grid-template-columns: auto; +} +.rows { + grid-template-columns: 50px 122px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(1) { + grid-template-columns: 50px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(2) { + grid-template-columns: 80px 40px; + grid-template-rows: auto; + align-content: start; +} +item { + background: grey; + width: 3ch; + position: relative; +} +.purple { background:purple; width:auto; justify-self:start; } +.rows .purple { justify-self:stretch; } +.nth-1 { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / 2ch auto; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +masonry-track > subgrid { + grid-row: 1 / span 2; +} +.rows > masonry-track > subgrid { + grid: auto auto / subgrid; + grid-row: 2; + grid-column: 1 / span 2; +} +.js { justify-self:stretch; } +</style> +</head> +<body> + +<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: --> + +<grid class="rows"> + <masonry-track> + <item class="nth-1">1</item> + <item>5</item> + </masonry-track> + <masonry-track> + <item class="purple">2</item> + <item>3</item> + <subgrid style="grid:auto/subgrid"> + <item class="nth-1">4a</item> + <item class="purple">4b</item> + <item>4c</item> + </subgrid> + </masonry-track> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001b.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001b.html @@ -0,0 +1,69 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-001b)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-001b-ref.html"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 50px 80px 40px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + grid-template-columns: 50px 80px 40px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / subgrid; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +.rows > subgrid { + grid-row: initial; + grid-column: 2 / span 2; +} +</style> +</head> +<body> + + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid:auto/subgrid"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001c-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001c-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-001c)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 50px 80px 40px; + grid-template-columns: auto; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +masonry-track { + display: grid; + gap: 4px 2px; +} +masonry-track:nth-child(1) { + grid-template-rows: 50px; + grid-template-columns: min-content auto; +} +masonry-track:nth-child(2) { + grid-auto-flow: column; + grid-template-rows: 80px 40px; + grid-template-columns: auto; +} +.rows { + grid-template-columns: 50px 122px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(1) { + grid-template-columns: 50px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(2) { + grid-template-columns: 80px 40px; + grid-template-rows: auto; + align-content: start; +} +item { + background: grey; + width: 3ch; + position: relative; +} +.purple { background:purple; width:auto; justify-self:start; } +.rows .purple { justify-self:stretch; } +.nth-1 { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / 2ch auto; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +masonry-track > subgrid { + grid-row: 1 / span 2; +} +.rows > masonry-track > subgrid { + grid: auto auto / subgrid; + grid-row: 2; + grid-column: 1 / span 2; +} +.js { justify-self:stretch; } +</style> +</head> +<body> + +<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: --> + +<grid class="rows"> + <masonry-track> + <item class="nth-1">1</item> + <item>5</item> + </masonry-track> + <masonry-track> + <item class="purple">2</item> + <item>3</item> + <subgrid style="grid:auto/subgrid; grid-auto-flow:column"> + <item class="nth-1">4a</item> + <item class="purple">4b</item> + <item>4c</item> + </subgrid> + </masonry-track> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001c.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001c.html @@ -0,0 +1,69 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-001c)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-001c-ref.html"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 50px 80px 40px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + grid-template-columns: 50px 80px 40px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / subgrid; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +.rows > subgrid { + grid-row: initial; + grid-column: 2 / span 2; +} +</style> +</head> +<body> + + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid:auto/subgrid; grid-auto-flow:column"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001d-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001d-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-001d)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 50px 80px 40px; + grid-template-columns: auto; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +masonry-track { + display: grid; + gap: 4px 2px; +} +masonry-track:nth-child(1) { + grid-template-rows: 50px; + grid-template-columns: min-content auto; +} +masonry-track:nth-child(2) { + grid-auto-flow: column; + grid-template-rows: 80px 40px; + grid-template-columns: auto; +} +.rows { + grid-template-columns: 50px 122px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(1) { + grid-template-columns: 50px; + grid-template-rows: auto; + align-content: start; +} +.rows > masonry-track:nth-child(2) { + grid-template-columns: 80px 40px; + grid-template-rows: auto; + align-content: start; +} +item { + background: grey; + width: 3ch; + position: relative; +} +.purple { background:purple; width:auto; justify-self:start; } +.rows .purple { justify-self:stretch; } +.nth-1 { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / 2ch auto; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +masonry-track > subgrid { + grid-row: 1 / span 2; +} +.rows > masonry-track > subgrid { + grid: auto auto / subgrid; + grid-row: 2; + grid-column: 1 / span 2; +} +.js { justify-self:stretch; } +</style> +</head> +<body> + +<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: --> + +<grid class="rows"> + <masonry-track> + <item class="nth-1">1</item> + <item>5</item> + </masonry-track> + <masonry-track> + <item class="purple">2</item> + <item>3</item> + <subgrid style="grid:auto auto/subgrid"> + <item class="nth-1">4a</item> + <item class="purple">4b</item> + <item>4c</item> + </subgrid> + </masonry-track> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001d.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-001d.html @@ -0,0 +1,69 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-001d)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-001d-ref.html"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 50px 80px 40px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + grid-template-columns: 50px 80px 40px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 13px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid: subgrid / subgrid; + grid-row: 2 / span 2; + grid-gap: 8px 20px; + background: yellow; +} +.rows > subgrid { + grid-row: initial; + grid-column: 2 / span 2; +} +</style> +</head> +<body> + + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid:auto auto/subgrid"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002a-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002a-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002a)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: masonry / none"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002a.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002a.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002a)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002a-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002b-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002b-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002b)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <subgrid class="definite"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>2</item> + <item>3</item> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002b.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002b.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002b)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002b-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <subgrid> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>2</item> + <item>3</item> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002c-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002c-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002c)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: masonry / 27px 17px"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002c.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002c.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002c)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002c-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid class="definite"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002d-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002d-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002d)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid class="extent" style="grid: masonry / 37px 24px 17px"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002d.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002d.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002d)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002d-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid class="extent"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002e-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002e-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002e)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: masonry / none"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002e.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002e.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002e)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002e-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: none / subgrid"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002f-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002f-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002f)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <subgrid class="definite"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>2</item> + <item>3</item> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002f.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002f.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002f)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002f-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <subgrid style="grid: none / subgrid"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>2</item> + <item>3</item> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002g-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002g-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002g)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: masonry / 27px 17px"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002g.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002g.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002g)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002g-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid class="definite"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002h-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002h-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002h)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid class="extent" style="grid: masonry / 37px 24px 17px"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002h.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002h.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002h)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002h-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid class="extent"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002i-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002i-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Masonry layout with a subgrid (masonry-subgrid-002i)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + grid-template-rows: 40px 30px 20px; + grid-template-columns: masonry; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; + grid-auto-flow: column; +} +.rows { + grid-template-columns: 40px 30px 20px; + grid-template-rows: masonry; + grid-auto-flow: row; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: 1/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; + grid-row-start:auto; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: 1/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: masonry / auto auto"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002i.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/row/masonry-subgrid-002i.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry layout with a subgrid (masonry-subgrid-002i)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> + <link rel="match" href="masonry-subgrid-002i-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid-lanes; + masonry-direction: row; + grid-template-rows: 40px 30px 20px; + gap: 4px 2px; + padding: 1px 3px 5px 7px; + border: solid; + border-width: 3px 5px 1px 1px; + background: lightgrey content-box; +} +.rows { + masonry-direction: column; + grid-template-columns: 40px 30px 20px; +} +item { + background: grey; + width: 3ch; + position: relative; +} +item:nth-child(2n) { background:purple; width:auto; } +item:nth-child(1) { + border: solid; + border-width: 3px 5px 1px 1px; + margin: 7px 1px 5px 3px; +} +subgrid { + display: grid; + grid-row: auto/span 2; + grid-column: auto/span 2; + grid: subgrid / subgrid; + grid-gap: 6px 8px; + background: yellow; +} +subgrid.definite { + grid-row-start:2; +} +subgrid.extent { + grid-row: auto/span 3; +} +.rows > subgrid.definite { + grid-column-start:2; +} +.rows > subgrid.extent { + grid-row: auto/span 2; + grid-column: auto/span 3; +} +</style> +</head> +<body> + +<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... --> + +<grid class="rows"> + <item>1</item> + <item>2</item> + <item>3</item> + <subgrid style="grid: subgrid / auto auto"> + <item>4a</item> + <item>4b</item> + <item>4c</item> + </subgrid> + <item>5</item> +</grid> + +</body></html>