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