diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-002-ref.html')
-rw-r--r-- | testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-002-ref.html | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-002-ref.html new file mode 100644 index 0000000000..01f24ea986 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-002-ref.html @@ -0,0 +1,68 @@ +<!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 `align-tracks:stretch`</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:6px/1 monospace; padding:0; margin:0; +} +grid { + display: inline-grid; + grid-template-rows: auto auto; + grid-template-columns: 30px; + gap: 1px 2px; + padding: 2px 3px 1px 1px; + border-style: solid; + border-width: 1px 7px 3px 5px; + border-inline-start-color: magenta; + border-block-start-color: blue; + background: lightgrey content-box; + block-size: 25px; + vertical-align: top; +} +item { + border-inline-start: 1px solid magenta; + border-block-start: 2px solid blue; +} +item:nth-child(2n+1) { background: grey; } +item:nth-child(2n) { background: cyan; } +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vll { writing-mode: vertical-lr; direction:ltr; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } +.vrr { writing-mode: vertical-rl; direction:rtl; } +.swl { writing-mode: sideways-lr; direction:ltr; } +.swr { writing-mode: sideways-lr; direction:rtl; } +</style> +</head> +<body> +<div style="display:none"> +<grid> + <item>1</item> + <item>2a<br>2b</item> +</grid> +</div> +<script> +let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ]; +let grid = document.getElementsByTagName('grid')[0]; +for (const reorder of [false, true]) { + for (const cb_wm of wms) { + for (const child_wm of wms) { + let e = grid.cloneNode(true); + e.className = cb_wm; + e.children[1].className = child_wm; + if (reorder) { + e.children[0].style.order = '1'; + } + document.body.appendChild(e); + } + } +} +</script> +</body></html> |