diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.html')
-rw-r--r-- | testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.html | 224 |
1 files changed, 224 insertions, 0 deletions
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 new file mode 100644 index 0000000000..25ec77bc51 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.html @@ -0,0 +1,224 @@ +<!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> |