diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.html | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.html')
-rw-r--r-- | testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.html | 164 |
1 files changed, 164 insertions, 0 deletions
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 new file mode 100644 index 0000000000..de07dfb78d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.html @@ -0,0 +1,164 @@ +<!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-2"> + <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; + grid-template-rows: 50px 80px 40px; + grid-template-columns: masonry; + 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; + grid-template-rows: masonry; +} +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> + +<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: --> +<grid style="grid:masonry/masonry"> + <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> |