diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/masonry')
94 files changed, 10229 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/masonry/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-grid/masonry/WEB_FEATURES.yml new file mode 100644 index 0000000000..30261400ce --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/WEB_FEATURES.yml @@ -0,0 +1,3 @@ +features: +- name: masonry + files: "**" diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001-ref.html new file mode 100644 index 0000000000..fff6cf2138 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001-ref.html @@ -0,0 +1,125 @@ +<!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-content` in masonry axis</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: 1em auto; + color: #444; + border: 1px solid; + padding: 2px; + height: 100px; + align-items: start; +} + +item { + background-color: #444; + color: #fff; +} + +.tall { padding-top:30px; grid-row:span 2; } +</style> +</head> +<body> + +<grid style="align-content:start"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:start"> + <item style="grid-column:1/2">1</item> + <item style="grid-column:2/3" class="tall">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:end"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:end"> + <item style="grid-column:1/2">1</item> + <item style="grid-column:2/3" class="tall">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:center"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:center"> + <item style="grid-column:1/2">1</item> + <item style="grid-column:2/3" class="tall">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:stretch"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:start"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:center"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:center"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001.html new file mode 100644 index 0000000000..dfefd998c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001.html @@ -0,0 +1,125 @@ +<!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 `align-content` in masonry axis</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-align-content-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; + height: 100px; +} + +item { + background-color: #444; + color: #fff; +} + +</style> +</head> +<body> + +<grid style="align-content:start"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:start"> + <item>1</item> + <item style="padding-top:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:end"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:end"> + <item>1</item> + <item style="padding-top:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:center"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:center"> + <item>1</item> + <item style="padding-top:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:stretch"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:space-between"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:space-around"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:space-evenly"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002-ref.html new file mode 100644 index 0000000000..67318b323a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002-ref.html @@ -0,0 +1,126 @@ +<!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-content` in masonry axis</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: 1em auto; + color: #444; + border: 1px solid; + padding: 2px; + width: 100px; + align-items: start; + writing-mode: vertical-lr; +} + +item { + background-color: #444; + color: #fff; +} + +.tall { padding-right:30px; grid-row:span 2; } +</style> +</head> +<body> + +<grid style="align-content:start"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:start"> + <item style="grid-column:1/2">1</item> + <item style="grid-column:2/3" class="tall">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:end"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:end"> + <item style="grid-column:1/2">1</item> + <item style="grid-column:2/3" class="tall">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:center"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:center"> + <item style="grid-column:1/2">1</item> + <item style="grid-column:2/3" class="tall">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:stretch"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:start"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:center"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="align-content:center"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002.html new file mode 100644 index 0000000000..75b82654fe --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002.html @@ -0,0 +1,126 @@ +<!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 `align-content` in masonry axis</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-align-content-002-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; + width: 100px; + writing-mode: vertical-lr; +} + +item { + background-color: #444; + color: #fff; +} + +</style> +</head> +<body> + +<grid style="align-content:start"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:start"> + <item>1</item> + <item style="padding-right:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:end"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:end"> + <item>1</item> + <item style="padding-right:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:center"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:center"> + <item>1</item> + <item style="padding-right:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:stretch"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:space-between"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:space-around"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:space-evenly"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003-ref.html new file mode 100644 index 0000000000..9780d5f5dc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003-ref.html @@ -0,0 +1,127 @@ +<!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-content` in grid axis</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: 1ch auto; + grid-template-rows: repeat(4,auto); + background: content-box silver; + border: 1px solid; + padding: 0 3px 2px 0; + width: 100px; + height: 120px; + align-content: center; + justify-items: start; +} + +item { + background-color: #444; + color: #fff; +} + +.tall { grid-row: span 2; padding: 3px 11px 1px 13px; } +</style> +</head> +<body> + +<grid style="align-content:start"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:start"> + <item style="grid-row:1/2">1</item> + <item class="tall" style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:1/2">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:end"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:end"> + <item style="grid-row:1/2">1</item> + <item class="tall" style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:1/2">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:center"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:center"> + <item style="grid-row:1/2">1</item> + <item class="tall" style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:1/2">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:stretch"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:space-between"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:space-around"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:space-evenly"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003.html new file mode 100644 index 0000000000..ae58e79cb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003.html @@ -0,0 +1,129 @@ +<!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 `align-content` in grid axis</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-align-content-003-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: masonry; + grid-template-rows: repeat(4,auto); + background: content-box silver; + border: 1px solid; + padding: 0 3px 2px 0; + width: 100px; + height: 120px; + align-content: center; + justify-items: start; +} + +item { + background-color: #444; + color: #fff; +} + +.tall { padding: 3px 11px 1px 13px; } +</style> +</head> +<body> + +<grid style="align-content:start"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:start"> + <item>1</item> + <item class="tall">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:end"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:end"> + <item>1</item> + <item class="tall">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:center"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:center"> + <item>1</item> + <item class="tall">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:stretch"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:space-between"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:space-around"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:space-evenly"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004-ref.html new file mode 100644 index 0000000000..de11c836b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004-ref.html @@ -0,0 +1,126 @@ +<!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-content` in grid axis</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: 1ch auto; + grid-template-rows: repeat(4,20px); + background: content-box silver; + border: 1px solid; + padding: 2px; + width: 100px; + justify-items: start; + writing-mode: vertical-rl; +} + +item { + background-color: #444; + color: #fff; +} + +.tall { grid-column: span 2; padding-top: 30px; } +</style> +</head> +<body> + +<grid style="align-content:start"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:start"> + <item style="grid-row:1/2">1</item> + <item class="tall" style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:1/2">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:end"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:end"> + <item style="grid-row:1/2">1</item> + <item class="tall" style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:1/2">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:center"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:center"> + <item style="grid-row:1/2">1</item> + <item class="tall" style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:1/2">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:stretch"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:space-between"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:space-around"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="align-content:space-evenly"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004.html new file mode 100644 index 0000000000..3f07aa1fe7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004.html @@ -0,0 +1,127 @@ +<!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 `align-content` in grid axis</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-align-content-004-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: masonry; + grid-template-rows: repeat(4,20px); + background: content-box silver; + border: 1px solid; + padding: 2px; + width: 100px; + writing-mode: vertical-rl; +} + +item { + background-color: #444; + color: #fff; +} + +.tall { padding-top: 30px; } +</style> +</head> +<body> + +<grid style="align-content:start"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:start"> + <item>1</item> + <item class="tall">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:end"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:end"> + <item>1</item> + <item class="tall">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:center"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:center"> + <item>1</item> + <item class="tall">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:stretch"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:space-between"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:space-around"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="align-content:space-evenly"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001-ref.html new file mode 100644 index 0000000000..cdb6d4fdf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001-ref.html @@ -0,0 +1,88 @@ +<!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: align-content:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +.grid { + float: left; + display: grid; + grid: auto / repeat(4, auto); + border: 2px solid; + padding: 1px; + margin: 1px; +} +.c { + grid: repeat(4, auto) / auto; +} + +span { + background: lime; + border: 1px solid black; +} + +span:nth-child(1) { font-size:15px; } +span:nth-child(2) { font-size:30px; } +span:nth-child(3) { font-size:10px; } +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-content:baseline; align-self:self-start; justify-self:self-start; } +.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div> +<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div> +<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div> +<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div> +<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div> +<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="fb" style="padding-top:27px">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid hl"><span class="fb pbe" style="padding-top:27px">A<br>B</span><span class="lb" style="margin-bottom:7px">M<br>N</span></div> +<div class="grid vl"><span class="fb" style="padding-left:18px">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="lb" style="padding-left:2px">M<br>N</span></div> +<div class="grid vr"><span class="fb" style="padding-right:27px">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="fb pbe" style="padding-right:27px">A<br>B</span><span class="lb" style="margin-left:7px">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div> +<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div> +<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div> +<div class="grid c vl" style="inline-size:100px"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div> +<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div> +<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="fb vl" style="padding-left:18px">A<br>B</span><span class="vl">M<br>N</span></div> +<div class="grid c hl"><span class="fb vl pbe" style="padding-left:18px">A<br>B</span><span class="vl">M<br>N</span></div> +<div class="grid c vl"><span class="fb hl" style="padding-top:27px">A<br>B</span><span class="hl">M<br>N</span></div> +<div class="grid c vl"><span class="fb hl pbs" style="padding-top:22px">A<br>B</span><span class="hl">M<br>N</span></div> +<div class="grid c vr"><span class="fb hl" style="padding-top:27px">A<br>B</span><span class="hl">M<br>N</span></div> +<div class="grid c vr" style="inline-size:100px"><span class="hl pbe" style="justify-self:start; padding-top:27px">A<br>B</span><span class="fb hl">M<br>N</span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001.html new file mode 100644 index 0000000000..60d11653b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001.html @@ -0,0 +1,90 @@ +<!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: align-content:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content"> + <link rel="match" href="masonry-grid-item-content-baseline-001-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +.grid { + float: left; + display: grid; + grid: masonry / repeat(4, auto); + border: 2px solid; + padding: 1px; + margin: 1px; +} +.c { + grid: repeat(4, auto) / masonry; +} + +span { + background: lime; + border: 1px solid black; +} + +span:nth-child(1) { font-size:15px; } +span:nth-child(2) { font-size:30px; } +span:nth-child(3) { font-size:10px; } +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-content:baseline; } +.lb { align-content:last baseline; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div> +<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div> +<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div> +<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div> +<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div> +<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid hl"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="lb pbs">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div> +<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div> +<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div> +<div class="grid c vl" style="inline-size:100px"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div> +<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div> +<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div> +<div class="grid c hl"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div> +<div class="grid c vl"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div> +<div class="grid c vl"><span class="lb hl pbs">A<br>B</span><span class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div> +<div class="grid c vr" style="inline-size:100px"><span class="lb hl pbe">A<br>B</span><span class="lb hl">M<br>N</span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001-ref.html new file mode 100644 index 0000000000..817f19ff84 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001-ref.html @@ -0,0 +1,123 @@ +<!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: align-self/justify-self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} +body { width:600px; height:600px; border:1px solid; box-sizing:border-box; } + +.grid { + float: left; + display: grid; + grid: auto / repeat(4, auto); + place-items: start; + padding-block-start: 1px; + margin-left: 1px; + border:1px solid; +} +.c { + grid: repeat(4, auto) / auto; +} + +span { + text-decoration: underline lime; + text-decoration-thickness: 1px; + text-underline-offset: 0; + text-decoration-skip-ink: none; + background: grey; +} +.central > span { text-decoration-line: line-through; } +x { display:block; visibility:hidden; } +span:nth-child(1) { font-size:10px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:25px; } +span:nth-child(4) { font-size:30px; } +.pbe { padding-block-end:20px; } +.pbs { padding-block-start:20px; } + +.fb { align-self:baseline; } +.lb { align-self:last baseline; } + +.jfb { justify-self:baseline; } +.jlb { justify-self:last baseline; } + +.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; } +.swr { writing-mode: sideways-rl; } + +</style> +</head> +<body> + +<div class="grid"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div> +<div class="grid"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div> +<div class="grid vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> + +<br clear="all"> + +<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +<br clear="all"> + +<div class="grid c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div> +<div class="grid c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div> +<div class="grid c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<!-- TODO: baseline alignment affects intrinsic inline size +<div class="grid c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +--> +<div class="grid c vll" style="height:80px"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<!-- TODO +<div class="grid c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<div class="grid c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<div class="grid c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +--> +<div class="grid c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> + +<br clear="all"> + +<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +<br clear="all"> + +<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001.html new file mode 100644 index 0000000000..bb486d983d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001.html @@ -0,0 +1,125 @@ +<!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: align-self/justify-self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> + <link rel="match" href="masonry-grid-item-self-baseline-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} +body { width:600px; height:600px; border:1px solid; box-sizing:border-box; } + +.grid { + float: left; + display: grid; + grid: masonry / repeat(4, auto); + place-items: start; + padding-block-start: 1px; + margin-left: 1px; + border:1px solid; +} +.c { + grid: repeat(4, auto) / masonry; +} + +span { + text-decoration: underline lime; + text-decoration-thickness: 1px; + text-underline-offset: 0; + text-decoration-skip-ink: none; + background: grey; +} +.central > span { text-decoration-line: line-through; } +x { display:block; visibility:hidden; } +span:nth-child(1) { font-size:10px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:25px; } +span:nth-child(4) { font-size:30px; } +.pbe { padding-block-end:20px; } +.pbs { padding-block-start:20px; } + +.fb { align-self:baseline; } +.lb { align-self:last baseline; } + +.jfb { justify-self:baseline; } +.jlb { justify-self:last baseline; } + +.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; } +.swr { writing-mode: sideways-rl; } + +</style> +</head> +<body> + +<div class="grid"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div> +<div class="grid"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div> +<div class="grid vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> + +<br clear="all"> + +<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +<br clear="all"> + +<div class="grid c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div> +<div class="grid c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div> +<div class="grid c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<!-- TODO: baseline alignment affects intrinsic inline size +<div class="grid c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +--> +<div class="grid c vll" style="height:80px"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<!-- TODO +<div class="grid c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<div class="grid c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<div class="grid c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +--> +<div class="grid c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> + +<br clear="all"> + +<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +<br clear="all"> + +<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a-ref.html new file mode 100644 index 0000000000..ddce4e34a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a-ref.html @@ -0,0 +1,102 @@ +<!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: align-self/justify-self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} +body { width:600px; height:600px; border:1px solid; box-sizing:border-box; } + +.grid { + float: left; + display: grid; + grid: auto / repeat(4, auto); + place-items: start; + padding-block-start: 1px; + margin-left: 1px; + border:1px solid; + height: 100px; + width: 100px; +} +.c { grid: repeat(4, auto) / auto; } +.ae { align-content: end; } +.je { justify-content: end; } + +span { + text-decoration: underline lime; + text-decoration-thickness: 1px; + text-underline-offset: 0; + text-decoration-skip-ink: none; + background: grey; +} +.central > span { text-decoration-line: line-through; } +x { display:block; visibility:hidden; } +span:nth-child(1) { font-size:10px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:25px; } +span:nth-child(4) { font-size:30px; } +.pbe { padding-block-end:20px; } +.pbs { padding-block-start:20px; } + +.fb { align-self:baseline; } +.lb { align-self:last baseline; } + +.jfb { justify-self:baseline; } +.jlb { justify-self:last baseline; } + +.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; } +.swr { writing-mode: sideways-rl; } + +</style> +</head> +<body> + +<div class="grid ae"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div> +<div class="grid ae"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div> +<div class="grid ae vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid ae vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid ae vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> + +<br clear="all"> + +<div class="grid ae vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid ae vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid ae vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid ae swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid ae swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> + +<br clear="all"> + +<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +<br clear="all"> + +<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid je c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div> +<div class="grid je c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div> + +<br clear="all"> + +<div class="grid je c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<div class="grid je c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a.html new file mode 100644 index 0000000000..6708e58332 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a.html @@ -0,0 +1,105 @@ +<!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: align-self/justify-self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> + <link rel="match" href="masonry-grid-item-self-baseline-002a-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} +body { width:600px; height:600px; border:1px solid; box-sizing:border-box; } + +.grid { + float: left; + display: grid; + grid: masonry / repeat(4, auto); + place-items: start; + padding-block-start: 1px; + margin-left: 1px; + border:1px solid; + masonry-auto-flow: next; + height: 100px; + width: 100px; +} +.c { grid: repeat(4, auto) / masonry; } +.ae { align-content: end; } +.je { justify-content: end; } + +span { + text-decoration: underline lime; + text-decoration-thickness: 1px; + text-underline-offset: 0; + text-decoration-skip-ink: none; + background: grey; +} +.central > span { text-decoration-line: line-through; } +x { display:block; background:yellow; visibility:hidden; } +span:nth-child(1) { font-size:10px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:25px; } +span:nth-child(4) { font-size:30px; } +.pbe { padding-block-end:20px; } +.pbs { padding-block-start:20px; } + +.fb { align-self:baseline; } +.lb { align-self:last baseline; } + +.jfb { justify-self:baseline; } +.jlb { justify-self:last baseline; } + +.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; } +.swr { writing-mode: sideways-rl; } + +</style> +</head> +<body> + +<div class="grid ae"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div> +<div class="grid ae"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div> +<div class="grid ae vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid ae vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid ae vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> + +<br clear="all"> + +<div class="grid ae vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid ae vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid ae vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid ae swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> +<div class="grid ae swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> + +<br clear="all"> + +<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +<br clear="all"> + +<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid je c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div> +<div class="grid je c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div> + +<br clear="all"> + +<div class="grid je c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<div class="grid je c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b-ref.html new file mode 100644 index 0000000000..44d8266436 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b-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: align-self/justify-self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} +body { width:600px; height:600px; border:1px solid; box-sizing:border-box; } + +.grid { + float: left; + display: grid; + grid: auto / repeat(4, auto); + place-items: start; + padding-block-start: 1px; + margin-left: 1px; + border:1px solid; + height: 100px; + width: 100px; +} +.c { grid: repeat(4, auto) / auto; } +.ae { align-content: end; } +.je { justify-content: end; } + +span { + text-decoration: underline lime; + text-decoration-thickness: 1px; + text-underline-offset: 0; + text-decoration-skip-ink: none; + background: grey; +} +.central > span { text-decoration-line: line-through; } +x { display:block; visibility:hidden; } +span:nth-child(1) { font-size:10px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:25px; } +span:nth-child(4) { font-size:30px; } +.pbe { padding-block-end:20px; } +.pbs { padding-block-start:20px; } + +.fb { align-self:baseline; } +.lb { align-self:last baseline; } + +.jfb { justify-self:baseline; } +.jlb { justify-self:last baseline; } + +.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; } +.swr { writing-mode: sideways-rl; } + +</style> +</head> +<body> + +<!-- TODO: baseline alignment is wrong (bug 1633610) +<div class="grid je c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<div class="grid je c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<div class="grid je c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +--> +<div class="grid je c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<div class="grid ae"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> + +<br clear="all"> + +<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +<br clear="all"> + +<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +<br clear="all"> + +<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b.html new file mode 100644 index 0000000000..34911b7c9f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b.html @@ -0,0 +1,101 @@ +<!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: align-self/justify-self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> + <link rel="match" href="masonry-grid-item-self-baseline-002b-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} +body { width:600px; height:600px; border:1px solid; box-sizing:border-box; } + +.grid { + float: left; + display: grid; + grid: masonry / repeat(4, auto); + place-items: start; + padding-block-start: 1px; + margin-left: 1px; + border:1px solid; + masonry-auto-flow: next; + height: 100px; + width: 100px; +} +.c { grid: repeat(4, auto) / masonry; } +.ae { align-content: end; } +.je { justify-content: end; } + +span { + text-decoration: underline lime; + text-decoration-thickness: 1px; + text-underline-offset: 0; + text-decoration-skip-ink: none; + background: grey; +} +.central > span { text-decoration-line: line-through; } +x { display:block; background:yellow; visibility:hidden; } +span:nth-child(1) { font-size:10px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:25px; } +span:nth-child(4) { font-size:30px; } +.pbe { padding-block-end:20px; } +.pbs { padding-block-start:20px; } + +.fb { align-self:baseline; } +.lb { align-self:last baseline; } + +.jfb { justify-self:baseline; } +.jlb { justify-self:last baseline; } + +.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; } +.swr { writing-mode: sideways-rl; } + +</style> +</head> +<body> + +<!-- TODO: baseline alignment is wrong (bug 1633610) +<div class="grid je c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<div class="grid je c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +<div class="grid je c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> +--> +<div class="grid je c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> + +<div class="grid ae"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> + +<br clear="all"> + +<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> +<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +<br clear="all"> + +<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +<br clear="all"> + +<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> +<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001-ref.html new file mode 100644 index 0000000000..c9318ae0bb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001-ref.html @@ -0,0 +1,333 @@ +<!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 fragmentation</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; +} +wrapper { + display: block; + width: 600px; + height: 600px; + overflow: hidden; +} +.columns { + width: 330px; + columns: 6; + column-fill: auto; + column-gap: 1px; + background-color: rgba(80,80,80,.2); + margin-bottom: 10px; +} +.columns:nth-child(2n) { + background-color: rgba(10,100,10,.5); +} +.grid { + display: flow-root; + border: 1px solid; + gap: 2px; +} +.first { border-bottom-width:0; height:calc(100% - 1px); } +.middle { border-top-width:0; border-bottom-width:0; height:100%; } +.last { border-top-width:0; } +x { + background: cyan; + height: 5px; +} +y { + background: blue; + height: 10px; +} +z { + background: pink; + height: 12px; +} +masonry-track { + float: left; + height: 100%; + gap: 2px; +} +x,y,z,masonry-track { display: block; } +masonry-track > * { margin-bottom:2px; } +.last > masonry-track > :last-child { margin-bottom:0; } +masonry-track:nth-child(1) { width: 10px; } +masonry-track:nth-child(2) { width: 15px; margin-left:2px; } +masonry-track:nth-child(3) { width: 20px; margin-left:2px; } +</style></head> +<body> +<wrapper> +<div class="columns"> + <div class="grid first"> + <masonry-track><x></x><y></y><y></y><y></y><x></x><x></x><x></x><x></x></masonry-track> + <masonry-track><x></x><z></z><x></x><x></x><x></x><z></z><z></z></masonry-track> + <masonry-track><x></x><x></x><x></x><z></z><x></x><y></y><x></x><x></x><y style="height:9px"></y></masonry-track> + </div> + <div class="grid last" style="height:1px"> + <masonry-track></masonry-track> + <masonry-track></masonry-track> + <masonry-track><y style="height:1px"></y></masonry-track> + </div> +</div> + +<div class="columns"> + <div class="grid first"> + <masonry-track><x></x><y></y><y></y><y></y><x></x><x></x><x></x></masonry-track> + <masonry-track><x></x><z></z><x></x><x></x><x></x><z></z></masonry-track> + <masonry-track><x></x><x></x><x></x><z></z><x></x><y></y><x></x><x></x></masonry-track> + </div> + <div class="grid last" style="height:12px"> + <masonry-track><z></z></masonry-track> + <masonry-track><x></x></masonry-track> + <masonry-track><y></y></masonry-track> + </div> +</div> + +<div class="columns"> + <div class="grid first"> + <masonry-track><x></x><y></y><y></y><y></y><x></x><x></x></masonry-track> + <masonry-track><x></x><z></z><x></x><x></x><x></x><z></z></masonry-track> + <masonry-track><x></x><x></x><x></x><z></z><x></x><y></y></masonry-track> + </div> + <div class="grid last" style="height:24px"> + <masonry-track><x></x><x></x><y></y></masonry-track> + <masonry-track><z></z></masonry-track> + <masonry-track><x></x><x></x></masonry-track> + </div> +</div> + +<div class="columns"> + <div class="grid first"> + <masonry-track><x></x><y></y><y></y><y></y></masonry-track> + <masonry-track><x></x><z></z><x></x><x></x><x></x></masonry-track> + <masonry-track><x></x><x></x><x></x><z></z><x></x><y style="height:5px;"></y></masonry-track> + </div> + <div class="grid last" style="height:31px"> + <masonry-track><z></z><z></z></masonry-track> + <masonry-track><x></x><x></x><x></x><x></x></masonry-track> + <masonry-track><y style="height:5px"></y><x></x><x></x><y></y></masonry-track> + </div> +</div> + +<div class="columns"> + <div class="grid first"> + <masonry-track><x></x><y></y><y></y><y style="height:6px;"></y></masonry-track> + <masonry-track><x></x><z></z><x></x><x></x></masonry-track> + <masonry-track><x></x><x></x><x></x><z></z></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><y style="height:4px;"></y><z></z><z></z></masonry-track> + <masonry-track><x></x><y></y><x></x><x></x><y style="height:5px;"></y></masonry-track> + <masonry-track><x></x><x></x><x></x><x></x><x></x></masonry-track> + </div> + <div class="grid last" style="height:5px"> + <masonry-track></masonry-track> + <masonry-track><y style="height:5px;"></y></masonry-track> + <masonry-track></masonry-track> + </div> +</div> + +<div class="columns"> + <div class="grid first"> + <masonry-track><x></x><y></y><y style="height:8px;"></y></masonry-track> + <masonry-track><x></x><z></z><x></x></masonry-track> + <masonry-track><x></x><x></x><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><y style="height:2px;"></y><y></y><y></y></masonry-track> + <masonry-track><z></z><x></x><x></x></masonry-track> + <masonry-track><x></x><x></x><z></z></masonry-track> + </div> + <div class="grid last" style="height:24px"> + <masonry-track><x></x><x></x><x></x></masonry-track> + <masonry-track><x></x><x></x><y></y></masonry-track> + <masonry-track><z></z></masonry-track> + </div> +</div> + +<div class="columns"> + <div class="grid first"> + <masonry-track><x></x><y></y></masonry-track> + <masonry-track><x></x></masonry-track> + <masonry-track><x></x><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z></z></masonry-track> + <masonry-track><x></x><x></x><y style="height:4px;"></y></masonry-track> + <masonry-track><y></y></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z></z></masonry-track> + <masonry-track><y style="height:6px;"></y><x></x></masonry-track> + <masonry-track><x></x><x></x><y style="height:4px;"></y></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z></z></masonry-track> + <masonry-track><x></x><x></x></masonry-track> + <masonry-track><y style="height:6px;"></y><x></x></masonry-track> + </div> + <div class="grid last"> + <masonry-track><z></z></masonry-track> + <masonry-track><x></x><x></x></masonry-track> + <masonry-track><x></x><y></y></masonry-track> + </div> +</div> + +<div class="columns"> + <div class="grid first"> + <masonry-track><x></x><y style="height:4px;"></masonry-track> + <masonry-track><x></x></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><y style="height:6px;"></y><y style="height:4px;"></y></masonry-track> + <masonry-track><z style="height:12px;"></z></masonry-track> + <masonry-track><x></x><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><y style="height:6px;"></y><y style="height:4px;"></y></masonry-track> + <masonry-track><x></x><x></x></masonry-track> + <masonry-track><z style="height:12px;"></z></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><y style="height:6px;"></y></masonry-track> + <masonry-track><x></x></masonry-track> + <masonry-track><x></x><y style="height:5px;"></y></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z style="height:12px;"></z></masonry-track> + <masonry-track><x></x><x></x></masonry-track> + <masonry-track><y style="height:5px;"></y><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z style="height:12px;"></z></masonry-track> + <masonry-track><x></x><x></x></masonry-track> + <masonry-track><x></x><y style="height:5px;"></y></masonry-track> + </div> + <div class="grid last" style="height:5px;"> + <masonry-track></masonry-track> + <masonry-track></masonry-track> + <masonry-track><y style="height:5px;"></y></masonry-track> + </div> +</div> + +<div class="columns"> + <div class="grid first"> + <masonry-track><x></x><y style="height:3px;"></masonry-track> + <masonry-track><x></x></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><y style="height:7px;"></y><y style="height:3px;"></y></masonry-track> + <masonry-track><z style="height:11px;"></z></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><y style="height:8px;"></y></masonry-track> + <masonry-track><z style="height:1px;"></z><x></x><y style="height:1px;"></y></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z style="height:11px;"></z></masonry-track> + <masonry-track><y style="height:9px;"></y></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z style="height:1px;"></z></masonry-track> + <masonry-track><x></x><y style="height:4px;"></y></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z style="height:11px;"></z></masonry-track> + <masonry-track><y style="height:6px;"></y></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z style="height:1px;"></z></masonry-track> + <masonry-track><x></x></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z style="height:11px;"></z></masonry-track> + <masonry-track><x></x></masonry-track> + <masonry-track><x></x><y style="height:4px;"></y></masonry-track> + </div> + <div class="grid last" style="height:6px;"> + <masonry-track><z style="height:1px;"></z></masonry-track> + <masonry-track><x></x></masonry-track> + <masonry-track><y style="height:6px;"></y></masonry-track> + </div> +</div> + +<div class="columns"> + <div class="grid first"> + <masonry-track><x></x></masonry-track> + <masonry-track><x></x></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><y style="height:8px;"></y></masonry-track> + <masonry-track><z style="height:8px;"></z></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><y style="height:2px;"></y><y style="height:4px;"></y></masonry-track> + <masonry-track><z style="height:4px;"></z></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><y style="height:6px;"></y></masonry-track> + <masonry-track><x></x></masonry-track> + <masonry-track><z style="height:8px;"></z></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><x></x></masonry-track> + <masonry-track><y style="height:8px;"></y></masonry-track> + <masonry-track><z style="height:4px;"></z></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><x></x><y style="height:1px;"></y></masonry-track> + <masonry-track><y style="height:2px;"></y></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><y style="height:8px;"></y></masonry-track> + <masonry-track><z style="height:8px;"></z></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><y style="height:1px;"></y><x></x></masonry-track> + <masonry-track><z style="height:4px;"></z></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z style="height:8px;"></z></masonry-track> + <masonry-track><x></x></masonry-track> + <masonry-track><x></x><y style="height:1px;"></y></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z style="height:4px;"></z></masonry-track> + <masonry-track><x></x></masonry-track> + <masonry-track><y style="height:8px;"></y></masonry-track> + </div> + <div class="grid last" style="height:1px;"> + <masonry-track></masonry-track> + <masonry-track></masonry-track> + <masonry-track><y style="height:1px;"></y></masonry-track> + </div> +</div> +<script> +let elts = document.querySelectorAll(".columns"); +let heights = [ 78, 68, 58, 48, 38, 28, 18, 12, 11, 8 ]; +for (let i = 0; i < heights.length; ++i) { + elts[i].style.height = heights[i] + "px"; +} +</script> +</wrapper> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001.html new file mode 100644 index 0000000000..69182c5425 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001.html @@ -0,0 +1,79 @@ +<!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 fragmentation</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-fragmentation-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} +wrapper { + display: block; + width: 600px; + height: 600px; + overflow: hidden; +} +.columns { + width: 330px; + columns: 6; + column-fill: auto; + column-gap: 1px; + background-color: rgba(80,80,80,.2); + margin-bottom: 10px; +} +.columns:nth-child(2n) { + background-color: rgba(10,100,10,.5); +} +.grid { + display: grid; + grid-template-columns: 10px 15px 20px; + grid-template-rows: masonry; + border: 1px solid; + gap: 2px; +} +x { + background: cyan; + height: 5px; + break-inside: avoid; +} +x:nth-child(4n) { + background: blue; + height: 10px; + break-inside: auto; +} +x:nth-child(5n) { + background: pink; + height: 12px; + break-inside: avoid; +} +</style></head> +<body> +<wrapper style="display:none"> +<div style="display:none"> +<div class="columns"> + <div class="grid"> + <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x> + <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x> + </div> +</div> +</div> +<script> +let wrapper = document.querySelectorAll("wrapper")[0]; +let tmplt = document.querySelectorAll(".columns")[0]; +let heights = [ 78, 68, 58, 48, 38, 28, 18, 12, 11, 8 ]; +for (let h of heights) { + let e = tmplt.cloneNode(true); + e.style.height = h + "px"; + wrapper.appendChild(e); +} +wrapper.style.display=""; +</script> +</wrapper> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002-ref.html new file mode 100644 index 0000000000..ea21350f43 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002-ref.html @@ -0,0 +1,132 @@ +<!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 fragmentation</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; +} +wrapper { + display: block; + width: 600px; + height: 600px; + overflow: hidden; +} +.columns { + width: 330px; + columns: 6; + column-fill: auto; + column-gap: 1px; + background-color: rgba(80,80,80,.2); + margin-bottom: 10px; +} +.columns:nth-child(2n) { + background-color: rgba(10,100,10,.5); +} +.grid { + display: flow-root; + border: 1px solid; + gap: 2px; +} +.first { border-bottom-width:0; height:calc(100% - 1px); } +.middle { border-top-width:0; border-bottom-width:0; height:100%; } +.last { border-top-width:0; } +x { + background: cyan; + height: 5px; +} +y { + background: blue; + height: 10px; +} +.c1 { width: 27px; } +.c2 { width: 37px; } +s { height: 10px; } +z { + background: pink; + height: 12px; +} +masonry-track { + float: left; + height: 100%; + gap: 2px; +} +x,y,s,z,masonry-track { display: block; } +masonry-track > * { margin-bottom:2px; } +masonry-track.last > :last-child { margin-bottom:0; } +masonry-track:nth-child(1) { width: 10px; } +masonry-track:nth-child(2) { width: 15px; margin-left:2px; } +masonry-track:nth-child(3) { width: 20px; margin-left:2px; } +</style></head> +<body> +<wrapper> +<div class="columns"> + <div class="grid first"> + <masonry-track><x></x><y class="c1"></y><x></x><y class="c1"></y><x></x></masonry-track> + <masonry-track><x></x><s></s><x></x><s style="margin-bottom:6px"></s><y class="c2" style="height:5px"></y></masonry-track> + <masonry-track><x></x><z></z><x></x><z></z></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><x></x><x></x><s style="height:5px"></s><y class="c1"></y><z class="c1"></z><y class="c1" style="height:1px"></y></masonry-track> + <masonry-track><y class="c2" style="height:5px"></y><z></z></masonry-track> + <masonry-track><s style="height:5px"></s><x></x><x></x><x></x><x></x><x></x><x></x></masonry-track> + </div> + <div class="grid last" style="height:9px"> + <masonry-track><y style="height:9px" class="c1"></y></masonry-track> + <masonry-track></masonry-track> + <masonry-track></masonry-track> + </div> +</div> + +<div class="columns"> + <div class="grid first"> + <masonry-track><x></x><y class="c1"></masonry-track> + <masonry-track><x></x></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z></z></masonry-track> + <masonry-track><x></x><y class="c2"></y></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><x></x><s style="height:5px"></s><y style="height:4px" class="c1"></y></masonry-track> + <masonry-track><z></z></masonry-track> + <masonry-track><x></x><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><y style="height:6px" class="c1"></y><y class="c1"></y></masonry-track> + <masonry-track></masonry-track> + <masonry-track><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z></z></masonry-track> + <masonry-track><x></x><x></x></masonry-track> + <masonry-track><x></x><x></x></masonry-track> + </div> + <div class="grid middle"> + <masonry-track><z class="c1"></z><y style="height:4px" class="c1"></y></masonry-track> + <masonry-track></masonry-track> + <masonry-track><x></x><x></x></masonry-track> + </div> + <div class="grid last" style="height:6px;"> + <masonry-track><y style="height:6px" class="c1"></y></masonry-track> + <masonry-track></masonry-track> + <masonry-track></masonry-track> + </div> +</div> +<script> +let elts = document.querySelectorAll(".columns"); +let heights = [ 48, 18 ]; +for (let i = 0; i < heights.length; ++i) { + elts[i].style.height = heights[i] + "px"; +} +</script> +</wrapper> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002.html new file mode 100644 index 0000000000..01c4de00b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002.html @@ -0,0 +1,80 @@ +<!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 fragmentation</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-fragmentation-002-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} +wrapper { + display: block; + width: 600px; + height: 600px; + overflow: hidden; +} +.columns { + width: 330px; + columns: 6; + column-fill: auto; + column-gap: 1px; + background-color: rgba(80,80,80,.2); + margin-bottom: 10px; +} +.columns:nth-child(2n) { + background-color: rgba(10,100,10,.5); +} +.grid { + display: grid; + grid-template-columns: 10px 15px 20px; + grid-template-rows: masonry; + border: 1px solid; + gap: 2px; +} +x { + background: cyan; + height: 5px; + break-inside: avoid; +} +x:nth-child(4n) { + grid-column: span 2; + background: blue; + height: 10px; + break-inside: auto; +} +x:nth-child(5n) { + background: pink; + height: 12px; + break-inside: avoid; +} +</style></head> +<body> +<wrapper style="display:none"> +<div style="display:none"> +<div class="columns"> + <div class="grid"> + <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x> + <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x> + </div> +</div> +</div> +<script> +let wrapper = document.querySelectorAll("wrapper")[0]; +let tmplt = document.querySelectorAll(".columns")[0]; +let heights = [ 48, 18 ]; +for (let h of heights) { + let e = tmplt.cloneNode(true); + e.style.height = h + "px"; + wrapper.appendChild(e); +} +wrapper.style.display=""; +</script> +</wrapper> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003-ref.html new file mode 100644 index 0000000000..9d1036dfeb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003-ref.html @@ -0,0 +1,114 @@ +<!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: Grid axis fragmentation with column masonry layout</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; +} +wrapper { + display: block; + width: 600px; + height: 600px; + overflow: hidden; +} + +.columns { + columns: 3; + column-fill: auto; + background: lightgrey; + margin-bottom: 15px; +} + +.grid { + display: grid; + grid: 20px auto 30px / auto; + border: solid; + border-width: 3px 1px 7px 5px; + padding: 1px 3px 5px 7px; + gap: 1px 5px; +} + +x { + background: cyan; + min-width: 20px; + min-height: 10px; +} +y { + background: blue; + width: 35px; +} +z { + background: gray; + width: 40px; +} +masonry-track { + display: grid; + justify-content: start; + column-gap: 5px; +} +</style> +</head> +<body> +<wrapper style="display:none"> +<div class="columns" style="height:90px"> + <div class="grid"> + <masonry-track><x></x><y></y><y></y><x></x></masonry-track> + <masonry-track><x></x><x></x><x></x><z></z></masonry-track> + <masonry-track><z></z><z></z><x></x><z></z></masonry-track> + </div> +</div> +<div class="columns" style="height:68px"> + <div class="grid"> + <masonry-track><x></x><y></y><y></y><x></x></masonry-track> + <masonry-track><x></x><x></x><x></x><z></z></masonry-track> + <masonry-track><z></z><z></z><x></x><z></z></masonry-track> + </div> +</div> +<div class="columns" style="height:48px"> + <div class="grid"> + <masonry-track><x></x><y></y><y></y><x></x></masonry-track> + <masonry-track><x></x><x></x><x></x><z></z></masonry-track> + <masonry-track><z></z><z></z><x></x><z></z></masonry-track> + </div> +</div> +<div class="columns" style="height:38px"> + <div class="grid"> + <masonry-track><x></x><y></y><y></y><x></x></masonry-track> + <masonry-track><x></x><x></x><x></x><z></z></masonry-track> + <masonry-track><z></z><z></z><x></x><z></z></masonry-track> + </div> +</div> +<div class="columns" style="height:28px"> + <div class="grid"> + <masonry-track><x></x><y></y><y></y><x></x></masonry-track> + <masonry-track><x></x><x></x><x></x><z></z></masonry-track> + <masonry-track><z></z><z></z><x></x><z></z></masonry-track> + </div> +</div> +<div class="columns" style="height:18px"> + <div class="grid"> + <masonry-track><x></x><y></y><y></y><x></x></masonry-track> + <masonry-track><x></x><x></x><x></x><z></z></masonry-track> + <masonry-track><z></z><z></z><x></x><z></z></masonry-track> + </div> +</div> +</wrapper> + +<script> +let wrapper = document.querySelectorAll("wrapper")[0]; +let grids = document.querySelectorAll(".grid"); +for (let e of grids) { + for (let track of e.children) { + track.style.gridTemplateColumns = "repeat(" + track.children.length + ",auto)"; + } +} +wrapper.style.display=""; +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003.html new file mode 100644 index 0000000000..fe150e7f83 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003.html @@ -0,0 +1,76 @@ +<!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: Grid axis fragmentation with column masonry layout</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-fragmentation-003-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} +wrapper { + display: block; + width: 600px; + height: 600px; + overflow: hidden; +} + +.columns { + columns: 3; + column-fill: auto; + background: lightgrey; + margin-bottom: 15px; +} + +.grid { + display: grid; + grid: 20px auto 30px / masonry; + border: solid; + border-width: 3px 1px 7px 5px; + padding: 1px 3px 5px 7px; + gap: 1px 5px; +} + +.grid > * { + background: cyan; + min-width: 20px; + min-height: 10px; +} +.grid > :nth-child(4n) { + background: blue; + width: 35px; +} +.grid > :nth-child(3n) { + background: gray; + width: 40px; +} +</style> +</head> +<body> +<wrapper style="display:none"> +<div style="display:none"> +<div class="columns"> + <div class="grid"> + <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x> + </div> +</div> +</div> +<script> +let wrapper = document.querySelectorAll("wrapper")[0]; +let tmplt = document.querySelectorAll(".columns")[0]; +let heights = [ 90, 68, 48, 38, 28, 18 ]; +for (let h of heights) { + let e = tmplt.cloneNode(true); + e.style.height = h + "px"; + wrapper.appendChild(e); +} +wrapper.style.display=""; +</script> +</wrapper> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001-ref.html new file mode 100644 index 0000000000..031629e926 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001-ref.html @@ -0,0 +1,42 @@ +<!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 definite `gap` in both axes</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:25px/1 "Courier New", monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 10px 20px; + grid-template-columns: auto min-content repeat(2,auto); + color: #444; + border: 1px solid; + padding: 2px; +} + +item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; +} +</style> +</head> +<body> + +<grid> + <item>1</item> + <item style="padding:0; place-self:start; min-width:0">2</item> + <item>3</item> + <item>4</item> + <item style="order:1; width:0; margin-right:-23px; margin-top:-37px; align-self:start">5</item> + <item>6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001.html new file mode 100644 index 0000000000..673bbe40e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001.html @@ -0,0 +1,45 @@ +<!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 definite `gap` in both axes</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-gap-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:25px/1 "Courier New", monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 10px 20px; + grid-template-columns: repeat(4,auto); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; +} + +item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; +} +</style> +</head> +<body> + +<grid> + <item>1</item> + <item style="padding:0">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001-ref.html new file mode 100644 index 0000000000..c99b117f2e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001-ref.html @@ -0,0 +1,129 @@ +<!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: Placement involving named lines</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +body,html { color:black; background:white; font-size:15px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-gap: 1px; + grid-auto-flow: dense; +} +.t1 { + grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px; + +} +.t2 { + grid-template-columns: 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px; +} + +x { + background: grey; + border: 1px solid; +} +y { + position: absolute; + border-top: 1px solid blue; + bottom:0;height:0;left:0;right:0; +} + + </style> +</head> +<body> + +<pre>grid-column-start:</pre> +<div class="grid t1" style="padding-right:13px; border-right-width:5px"> +<x style="grid-column-start:4; background:grey"></x> +<x style="grid-column-start:7">-1</x> +<x style="grid-column-start:7">4</x> +<x style="grid-column-start:6">-2</x> +<x style="grid-column-start:5">-3</x> +<x style="grid-column-start:4">-4</x> +<x style="grid-column-start:3">-5</x> +<x style="grid-column-start:5">A -1</x> +<x style="grid-column-start:3">B -1</x> +<x style="grid-column-start:4">A -2</x> +<x style="grid-column-start:3">A -3</x> +<x style="grid-column-start:2">A -4</x> +<x style="grid-column-start:1">A -5</x> +<x style="grid-column-start:4">A</x> +<x style="grid-column-start:4">B</x> +<x style="grid-column-start:4">A 1</x> +<x style="grid-column-start:5">A 2</x> +<x style="grid-column-start:8">A 3</x> +<x style="grid-column-start:9">A 4</x> +<x style="grid-column-start:10">A 5</x> +<y style="grid-column-start:7; top:0"></y> +<y style="grid-column-start:7; top:2px"></y> +<y style="grid-column-start:6; top:4px"></y> +<y style="grid-column-start:5; top:6px"></y> +<y style="grid-column-start:4; top:8px"></y> +<y style="grid-column-start:3; top:10px"></y> +<y style="grid-column-start:5; top:12px"></y> +<y style="grid-column-start:3; top:14px"></y> +<y style="grid-column-start:4; top:16px"></y> +<y style="grid-column-start:3; top:18px"></y> +<y style="grid-column-start:2; top:20px"></y> +<y style="grid-column-start:1; top:22px"></y> +<y style="grid-column-start:4; top:24px"></y> +<y style="grid-column-start:4; top:26px"></y> +<y style="grid-column-start:4; top:28px"></y> +<y style="grid-column-start:5; top:30px"></y> +<y style="grid-column-start:8; top:32px"></y> +<y style="grid-column-start:9; top:34px"></y> +<y style="grid-column-start:10; top:36px"></y> +</div> + +<pre>grid-column-end:</pre> +<div class="grid t2" style="padding-left:13px;"> +<x style="grid-column-start:5; background:grey"></x> +<x style="grid-column-start:7">-1</x> +<x style="grid-column-start:7">4</x> +<x style="grid-column-start:6">-2</x> +<x style="grid-column-start:5">-3</x> +<x style="grid-column-start:4">-4</x> +<x style="grid-column-start:3">-5</x> +<x style="grid-column-start:5">A -1</x> +<x style="grid-column-start:3">B -1</x> +<x style="grid-column-start:4">A -2</x> +<x style="grid-column-start:3">A -3</x> +<x style="grid-column-start:2">A -4</x> +<x style="grid-column-start:1">A -5</x> +<x style="grid-column-start:4">A</x> +<x style="grid-column-start:5">B</x> +<x style="grid-column-start:4">A 1</x> +<x style="grid-column-start:5">A 2</x> +<x style="grid-column-start:8">A 3</x> +<x style="grid-column-start:9">A 4</x> +<x style="grid-column-start:10">A 5</x> +<y style="grid-column-end:8; top:0px"></y> +<y style="grid-column-end:8; top:2px"></y> +<y style="grid-column-end:4; top:4px"></y> +<y style="grid-column-end:5; top:6px"></y> +<y style="grid-column-end:6; top:8px"></y> +<y style="grid-column-end:7; top:10px"></y> +<y style="grid-column-end:6; top:12px"></y> +<y style="grid-column-end:4; top:14px"></y> +<y style="grid-column-end:5; top:16px"></y> +<y style="grid-column-end:4; top:18px"></y> +<y style="grid-column-end:3; top:20px"></y> +<y style="grid-column-end:2; top:22px"></y> +<y style="grid-column-end:5; top:24px"></y> +<y style="grid-column-end:6; top:26px"></y> +<y style="grid-column-end:5; top:28px"></y> +<y style="grid-column-end:6; top:30px"></y> +<y style="grid-column-end:9; top:32px"></y> +<y style="grid-column-end:10; top:34px"></y> +<y style="grid-column-end:11; top:36px"></y> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001.html new file mode 100644 index 0000000000..b6745f6973 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001.html @@ -0,0 +1,127 @@ +<!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: Placement involving named lines</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int"> + <link rel="match" href="masonry-grid-placement-named-lines-001-ref.html"> + <style> +body,html { color:black; background:white; font-size:15px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-template-columns: [A-start] 60px 60px 60px; + grid-template-rows: masonry; + grid-template-areas: "B A"; + grid-auto-columns: 40px; + grid-gap: 1px; +} + +x { + background: grey; + border: 1px solid; +} +y { + position: absolute; + border-top: 1px solid blue; + height:0;left:0;right:0; +} + + </style> +</head> +<body> + +<pre>grid-column-start:</pre> +<div class="grid" style="padding-right:13px; border-right-width:5px"> +<x style="grid-column:1; background:grey"> </x> +<x style="grid-column-start:-1">-1</x> +<x style="grid-column-start:4">4</x> +<x style="grid-column-start:-2">-2</x> +<x style="grid-column-start:-3">-3</x> +<x style="grid-column-start:-4">-4</x> +<x style="grid-column-start:-5">-5</x> +<x style="grid-column-start:A-start -1">A -1</x> +<x style="grid-column-start:B -1">B -1</x> +<x style="grid-column-start:A-start -2">A -2</x> +<x style="grid-column-start:A-start -3">A -3</x> +<x style="grid-column-start:A-start -4">A -4</x> +<x style="grid-column-start:A-start -5">A -5</x> +<x style="grid-column-start:A-start">A</x> +<x style="grid-column-start:B">B</x> +<x style="grid-column-start:A-start 1">A 1</x> +<x style="grid-column-start:A-start 2">A 2</x> +<x style="grid-column-start:A-start 3">A 3</x> +<x style="grid-column-start:A-start 4">A 4</x> +<x style="grid-column-start:A-start 5">A 5</x> +<y style="grid-column-start:-1; top:0"></y> +<y style="grid-column-start:4; top:2px"></y> +<y style="grid-column-start:-2; top:4px"></y> +<y style="grid-column-start:-3; top:6px"></y> +<y style="grid-column-start:-4; top:8px"></y> +<y style="grid-column-start:-5; top:10px"></y> +<y style="grid-column-start:A-start -1; top:12px"></y> +<y style="grid-column-start:B -1; top:14px"></y> +<y style="grid-column-start:A-start -2; top:16px"></y> +<y style="grid-column-start:A-start -3; top:18px"></y> +<y style="grid-column-start:A-start -4; top:20px"></y> +<y style="grid-column-start:A-start -5; top:22px"></y> +<y style="grid-column-start:A-start; top:24px"></y> +<y style="grid-column-start:B; top:26px"></y> +<y style="grid-column-start:A-start 1; top:28px"></y> +<y style="grid-column-start:A-start 2; top:30px"></y> +<y style="grid-column-start:A-start 3; top:32px"></y> +<y style="grid-column-start:A-start 4; top:34px"></y> +<y style="grid-column-start:A-start 5; top:36px"></y> +</div> + +<pre>grid-column-end:</pre> +<div class="grid" style="padding-left:13px;"> +<x style="grid-column:1; background:grey"> </x> +<x style="grid-column-end:-1">-1</x> +<x style="grid-column-end:4">4</x> +<x style="grid-column-end:-5">-5</x> +<x style="grid-column-end:-4">-4</x> +<x style="grid-column-end:-3">-3</x> +<x style="grid-column-end:-2">-2</x> +<x style="grid-column-end:A-start -1">A -1</x> +<x style="grid-column-end:B -1">B -1</x> +<x style="grid-column-end:A-start -2">A -2</x> +<x style="grid-column-end:A-start -3">A -3</x> +<x style="grid-column-end:A-start -4">A -4</x> +<x style="grid-column-end:A-start -5">A -5</x> +<x style="grid-column-end:A-start">A</x> +<x style="grid-column-end:B">B</x> +<x style="grid-column-end:A-start 1">A 1</x> +<x style="grid-column-end:A-start 2">A 2</x> +<x style="grid-column-end:A-start 3">A 3</x> +<x style="grid-column-end:A-start 4">A 4</x> +<x style="grid-column-end:A-start 5">A 5</x> +<y style="grid-column-end:-1; top:0"></y> +<y style="grid-column-end:4; top:2px"></y> +<y style="grid-column-end:-5; top:4px"></y> +<y style="grid-column-end:-4; top:6px"></y> +<y style="grid-column-end:-3; top:8px"></y> +<y style="grid-column-end:-2; top:10px"></y> +<y style="grid-column-end:A-start -1; top:12px"></y> +<y style="grid-column-end:B -1; top:14px"></y> +<y style="grid-column-end:A-start -2; top:16px"></y> +<y style="grid-column-end:A-start -3; top:18px"></y> +<y style="grid-column-end:A-start -4; top:20px"></y> +<y style="grid-column-end:A-start -5; top:22px"></y> +<y style="grid-column-end:A-start; top:24px"></y> +<y style="grid-column-end:B; top:26px"></y> +<y style="grid-column-end:A-start 1; top:28px"></y> +<y style="grid-column-end:A-start 2; top:30px"></y> +<y style="grid-column-end:A-start 3; top:32px"></y> +<y style="grid-column-end:A-start 4; top:34px"></y> +<y style="grid-column-end:A-start 5; top:36px"></y> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002-ref.html new file mode 100644 index 0000000000..dd589f90c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002-ref.html @@ -0,0 +1,80 @@ +<!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: Placement involving named lines</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px; + position: relative; + border: 1px solid; + grid-auto-flow: dense; + column-gap: 1px; +} + +x { + background: grey; +} +y { + position: absolute; + border: 1px solid blue; + top:0;height:0;left:0;right:0; + grid-row-end:span 1!important; +} + + </style> +</head> +<body> + +<pre>grid-column: / span A-start 2</pre> +<div class="grid"> +<x style="grid-row:1; grid-column:4"> </x> +<x style="grid-row:1; grid-column:7/span 2;">-1</x> +<x style="grid-row:2; grid-column:7/span 2;">4</x> +<x style="grid-row:4; grid-column:6/span 3;">-2</x> +<x style="grid-row:5; grid-column:5/span 4;">-3</x> +<x style="grid-row:6; grid-column:4/span 4;">-4</x> +<x style="grid-row:7; grid-column:3/span 2;">-5</x> +<x style="grid-row:7; grid-column:5/span 4;">A -1</x> +<x style="grid-row:9; grid-column:3/span 2;">B -1</x> +<x style="grid-row:10; grid-column:4/span 4;">A -2</x> +<x style="grid-row:11; grid-column:3/span 2;">A -3</x> +<x style="grid-row:12; grid-column:2/span 3;">A -4</x> +<x style="grid-row:13; grid-column:1/span 4;">A -5</x> +<x style="grid-row:14; grid-column:4/span 4;">A</x> +<x style="grid-row:15; grid-column:4/span 4;">B</x> +<x style="grid-row:16; grid-column:4/span 4;">A 1</x> +<x style="grid-row:17; grid-column:5/span 4;">A 2</x> +<x style="grid-row:18; grid-column:8/span 2;">A 3</x> +<x style="grid-row:1; grid-column:9/span 2;">A 4</x> +<x style="grid-row:2; grid-column:10/span 2;">A 5</x> +<y style="grid-row:1; grid-column:7/span 2;"></y> +<y style="grid-row:2; grid-column:7/span 2;"></y> +<y style="grid-row:4; grid-column:6/span 3;"></y> +<y style="grid-row:5; grid-column:5/span 4;"></y> +<y style="grid-row:6; grid-column:4/span 4;"></y> +<y style="grid-row:7; grid-column:3/span 2;"></y> +<y style="grid-row:7; grid-column:5/span 4;"></y> +<y style="grid-row:9; grid-column:3/span 2;"></y> +<y style="grid-row:10; grid-column:4/span 4;"></y> +<y style="grid-row:11; grid-column:3/span 2;"></y> +<y style="grid-row:12; grid-column:2/span 3;"></y> +<y style="grid-row:13; grid-column:1/span 4;"></y> +<y style="grid-row:14; grid-column:4/span 4;"></y> +<y style="grid-row:15; grid-column:4/span 4;"></y> +<y style="grid-row:16; grid-column:4/span 4;"></y> +<y style="grid-row:17; grid-column:5/span 4;"></y> +<y style="grid-row:18; grid-column:8/span 2;"></y> +<y style="grid-row:1; grid-column:9/span 2;"></y> +<y style="grid-row:2; grid-column:10/span 2;"></y> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002.html new file mode 100644 index 0000000000..0ad0dfcea3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002.html @@ -0,0 +1,85 @@ +<!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: Placement involving named lines</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int"> + <link rel="match" href="masonry-grid-placement-named-lines-002-ref.html"> + <style> +body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-template-columns: [A-start] 60px 60px 60px; + grid-template-rows: masonry; + grid-template-areas: "B A"; + grid-auto-columns: 40px; + grid-auto-flow: dense; + gap: 0 1px; +} + +x { + background: grey; +} +y { + position: absolute; + border: 1px solid blue; + bottom:0;height:0;left:0;right:0; + grid-row-end:span 1!important; +} + + </style> +</head> +<body> + +<pre>grid-column: / span A-start 2</pre> +<div class="grid"> +<x style="grid-column:1"> </x> +<x style="grid-column:-1/span A-start 2">-1</x> +<x style="grid-column:4/span A-start 2">4</x> +<x style="grid-column:-2/span A-start 2">-2</x> +<x style="grid-column:-3/span A-start 2">-3</x> +<x style="grid-column:-4/span A-start 2">-4</x> +<x style="grid-column:-5/span A-start 2">-5</x> +<x style="grid-column:A-start -1/span A-start 2">A -1</x> +<x style="grid-column:B -1/span A-start 2">B -1</x> +<x style="grid-column:A-start -2/span A-start 2">A -2</x> +<x style="grid-column:A-start -3/span A-start 2">A -3</x> +<x style="grid-column:A-start -4/span A-start 2">A -4</x> +<x style="grid-column:A-start -5/span A-start 2">A -5</x> +<x style="grid-column:A-start/span A-start 2">A</x> +<x style="grid-column:B/span B">B</x> +<x style="grid-column:A-start 1/span A-start 2">A 1</x> +<x style="grid-column:A-start 2/span A-start 2">A 2</x> +<x style="grid-column:A-start 3/span A-start 2">A 3</x> +<x style="grid-column:A-start 4/span A-start 2">A 4</x> +<x style="grid-column:A-start 5/span A-start 2">A 5</x> +<y style="grid-column:-1/span A-start 2; top:0em"></y> +<y style="grid-column:4/span A-start 2; top:1em"></y> +<y style="grid-column:-2/span A-start 2; top:2em"></y> +<y style="grid-column:-3/span A-start 2; top:3em"></y> +<y style="grid-column:-4/span A-start 2; top:4em"></y> +<y style="grid-column:-5/span A-start 2; top:5em"></y> +<y style="grid-column:A-start -1/span A-start 2; top:5em"></y> +<y style="grid-column:B -1/span A-start 2; top:6em"></y> +<y style="grid-column:A-start -2/span A-start 2; top:7em"></y> +<y style="grid-column:A-start -3/span A-start 2; top:8em"></y> +<y style="grid-column:A-start -4/span A-start 2; top:9em"></y> +<y style="grid-column:A-start -5/span A-start 2; top:10em"></y> +<y style="grid-column:A-start/span A-start 2; top:11em"></y> +<y style="grid-column:B/span B; top:12em"></y> +<y style="grid-column:A-start 1/span A-start 2; top:13em"></y> +<y style="grid-column:A-start 2/span A-start 2; top:14em"></y> +<y style="grid-column:A-start 3/span A-start 2; top:15em"></y> +<y style="grid-column:A-start 4/span A-start 2; top:0em"></y> +<y style="grid-column:A-start 5/span A-start 2; top:1em"></y> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001-ref.html new file mode 100644 index 0000000000..898bff16d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001-ref.html @@ -0,0 +1,271 @@ +<!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 intrinsic sizing</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,auto); + grid-auto-rows: 1em; + border: 1px solid; + padding: 0 1px 0 2px; + vertical-align: top; +} +.fr { + grid-template-columns: 1fr 2fr 1fr 1fr; +} +.mixed { + grid-template-columns: 1fr 2fr min-content max-content; +} + +item { + background-color: #444; + color: blue; +} +</style> +</head> +<body> + +<grid> + <item style="width:2ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> +</grid> + +<grid style="grid-template-columns: 1ch repeat(3,auto)"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:span 4">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5</item> +</grid> + +<grid style="grid-template-columns: repeat(4,1ch)"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5</item> +</grid> + +<!-- ditto with 'fr' sizing --> + +<grid class="fr"> + <item style="width:2ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> +</grid> + +<grid class="fr" style="grid-template-columns: 1ch 2fr 1fr 1fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:span 4">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5</item> +</grid> + +<grid class="fr" style="grid-template-columns: 1ch 2ch 1ch 1ch"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5</item> +</grid> + + +<!-- ditto with mixed sizing --> + +<grid class="mixed" style="grid-template-columns: 2ch 4ch 1ch 1ch"> + <item style="width:2ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> +</grid> + +<grid class="mixed" style="grid-template-columns: 1ch 2ch 1ch 1ch"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:span 4">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5</item> +</grid> + +<grid class="mixed" style="grid-template-columns: 1ch 2ch 1ch 1ch"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001.html new file mode 100644 index 0000000000..0f6cdb1495 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001.html @@ -0,0 +1,273 @@ +<!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 intrinsic sizing</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-intrinsic-sizing-001-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,auto); + grid-template-rows: masonry; + border: 1px solid; + padding: 0 1px 0 2px; + vertical-align: top; +} +.fr { + grid-template-columns: 1fr 2fr 1fr 1fr; +} +.mixed { + grid-template-columns: 1fr 2fr min-content max-content; +} + +item { + background-color: #444; + color: blue; +} +</style> +</head> +<body> + +<grid> + <item style="width:2ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:span 4">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5</item> +</grid> + +<!-- ditto with 'fr' sizing --> + +<grid class="fr"> + <item style="width:2ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:span 4">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5</item> +</grid> + + +<!-- ditto with mixed sizing --> + +<grid class="mixed"> + <item style="width:2ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:span 4">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002-ref.html new file mode 100644 index 0000000000..4f6519db94 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002-ref.html @@ -0,0 +1,272 @@ +<!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 intrinsic sizing</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,auto); + grid-auto-rows: 1em; + border: 1px solid; + padding: 0 1px 0 2px; + vertical-align: top; + width: min-content; +} +.fr { + grid-template-columns: 1fr 2fr 1fr 1fr; +} +.mixed { + grid-template-columns: 1fr 2fr min-content max-content; +} + +item { + background-color: #444; + color: blue; +} +</style> +</head> +<body> + +<grid> + <item style="width:2ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> +</grid> + +<grid style="grid-template-columns: 1ch repeat(3,auto)"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:span 4">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5</item> +</grid> + +<grid style="grid-template-columns: repeat(4,1ch)"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5</item> +</grid> + +<!-- ditto with 'fr' sizing --> + +<grid class="fr"> + <item style="width:2ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> +</grid> + +<grid class="fr" style="grid-template-columns: 1ch 2fr 1fr 1fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:span 4">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5</item> +</grid> + +<grid class="fr" style="grid-template-columns: 1ch 1ch 1ch 1ch"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5</item> +</grid> + + +<!-- ditto with mixed sizing --> + +<grid class="mixed" style="grid-template-columns: 2ch 1ch 1ch 1ch"> + <item style="width:2ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> +</grid> + +<grid class="mixed" style="grid-template-columns: 1ch 1ch 1ch 1ch"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:span 4">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5</item> +</grid> + +<grid class="mixed" style="grid-template-columns: 1ch 1ch 1ch 1ch"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002.html new file mode 100644 index 0000000000..db83299bf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002.html @@ -0,0 +1,274 @@ +<!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 intrinsic sizing</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-intrinsic-sizing-002-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,auto); + grid-template-rows: masonry; + border: 1px solid; + padding: 0 1px 0 2px; + vertical-align: top; + width: min-content; +} +.fr { + grid-template-columns: 1fr 2fr 1fr 1fr; +} +.mixed { + grid-template-columns: 1fr 2fr min-content max-content; +} + +item { + background-color: #444; + color: blue; +} +</style> +</head> +<body> + +<grid> + <item style="width:2ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:span 4">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5</item> +</grid> + +<!-- ditto with 'fr' sizing --> + +<grid class="fr"> + <item style="width:2ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:span 4">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5</item> +</grid> + + +<!-- ditto with mixed sizing --> + +<grid class="mixed"> + <item style="width:2ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-column:span 4">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003-ref.html new file mode 100644 index 0000000000..61eb21570d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003-ref.html @@ -0,0 +1,269 @@ +<!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 min-content sizing</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,auto); + grid-auto-rows: 1em; + border: 1px solid; + padding: 0 1px 0 2px; + vertical-align: top; + width: min-content; +} +.fr { + grid-template-columns: 1fr 2fr 1fr 1fr; +} +.mixed { + grid-template-columns: 1fr 2fr min-content max-content; +} + +item { + background-color: #444; + color: blue; +} +item.start { align-self: start; } +</style> +</head> +<body> + +<grid style="grid-template-rows: 1em 2em"> + <item style="width:2ch">1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item>5 5</item> +</grid> + +<grid style="grid: 1em 2em / 1ch repeat(3,auto); "> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch">5 5</item> +</grid> + +<grid style="grid-template-rows: 2em 2em"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:2ch; grid-column:2">5 5</item> +</grid> + +<grid style="grid-template-rows: 2em 1em"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:4ch; grid-column:2/span 2">5 5</item> +</grid> + +<grid style="grid-template-rows: 2em 1em"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid style="grid-template-rows: 2em 1em"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:3ch; grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid style="grid-template-rows: 2em 1em"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="grid-column:span 4">5 5</item> +</grid> + +<grid style="grid-template-rows: 2em 1em"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:6ch; grid-column:span 4">5 5</item> +</grid> + +<grid style="grid: 2em 1em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:6ch; grid-column:span 3">5 5</item> +</grid> + +<!-- ditto with 'fr' sizing --> + +<grid class="fr" style="grid: 1em 2em / 2ch 2fr 1fr 1fr"> + <item style="width:2ch" class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item>5 5</item> +</grid> + +<grid class="fr" style="grid: 1em 2em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:2ch">5 5</item> +</grid> + +<grid class="fr" style="grid: 2em 2em / 1ch 2ch repeat(2,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:2ch; grid-column:2">5 5</item> +</grid> + +<grid class="fr" style="grid: 2em 1em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:4ch; grid-column:2/span 2">5 5</item> +</grid> + +<grid class="fr" style="grid: 2em 2em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="fr" style="grid: 2em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:3ch; grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="fr" style="grid: 2em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="grid-column:span 4">5 5</item> +</grid> + +<grid class="fr" style="grid: 2em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:6ch; grid-column:span 4">5 5</item> +</grid> + +<grid class="fr" style="grid: 2em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:6ch; grid-column:span 3">5 5</item> +</grid> + +<!-- ditto with mixed sizing --> + +<grid class="mixed" style="grid: 1em 2em / 2ch repeat(3,1ch)"> + <item style="width:2ch" class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item>5 5</item> +</grid> + +<grid class="mixed" style="grid: 1em 2em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:2ch">5 5</item> +</grid> + +<grid class="mixed" style="grid: 2em 2em / 1ch 2ch repeat(2,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:2ch; grid-column:2">5 5</item> +</grid> + +<grid class="mixed" style="grid: 2em 1em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:4ch; grid-column:2/span 2">5 5</item> +</grid> + +<grid class="mixed" style="grid: 2em 2em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="mixed" style="grid: 2em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:3ch; grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="mixed" style="grid: 2em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="grid-column:span 4">5 5</item> +</grid> + +<grid class="mixed" style="grid: 2em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:6ch; grid-column:span 4">5 5</item> +</grid> + +<grid class="mixed" style="grid: 2em / repeat(4,1ch)"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:6ch; grid-column:span 3">5 5</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003.html new file mode 100644 index 0000000000..e43bc86c9b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003.html @@ -0,0 +1,270 @@ +<!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 min-content sizing</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-intrinsic-sizing-003-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,auto); + grid-template-rows: masonry; + border: 1px solid; + padding: 0 1px 0 2px; + vertical-align: top; + width: min-content; +} +.fr { + grid-template-columns: 1fr 2fr 1fr 1fr; +} +.mixed { + grid-template-columns: 1fr 2fr min-content max-content; +} + +item { + background-color: #444; + color: blue; +} +</style> +</head> +<body> + +<grid> + <item style="width:2ch">1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item>5 5</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch">5 5</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5 5</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5 5</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="grid-column:span 4">5 5</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5 5</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5 5</item> +</grid> + +<!-- ditto with 'fr' sizing --> + +<grid class="fr"> + <item style="width:2ch">1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item>5 5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch">5 5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5 5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5 5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="grid-column:span 4">5 5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5 5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5 5</item> +</grid> + +<!-- ditto with mixed sizing --> + +<grid class="mixed"> + <item style="width:2ch">1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item>5 5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch">5 5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5 5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5 5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="grid-column:span 4">5 5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5 5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5 5</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004-ref.html new file mode 100644 index 0000000000..6a5d81fedb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004-ref.html @@ -0,0 +1,270 @@ +<!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 max-content sizing</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: 1ch 3ch 3ch 1ch; + grid-auto-rows: 1em; + border: 1px solid; + padding: 0 1px 0 2px; + vertical-align: top; + align-items: start; + width: max-content; +} +.fr { + grid-template-columns: 1fr 2fr 1fr 1fr; +} +.mixed { + grid-template-columns: 1fr 2fr min-content max-content; +} + +item { + background-color: #444; + color: blue; +} +item.start { align-self: start; } +</style> +</head> +<body> + +<grid style="grid: 1em 2em / 2ch 3ch 3ch 1ch"> + <item style="width:2ch">1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item>5 5</item> +</grid> + +<grid style="grid: 1em 2em / 1ch 3ch 3ch 1ch; "> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch">5 5</item> +</grid> + +<grid style="grid-template-rows: 1em 2em"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:2ch; grid-column:2">5 5</item> +</grid> + +<grid> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:4ch; grid-column:2/span 2">5 5</item> +</grid> + +<grid> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:3ch; grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="grid-column:span 4">5 5</item> +</grid> + +<grid> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:6ch; grid-column:span 4">5 5</item> +</grid> + +<grid> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:6ch; grid-column:span 3">5 5</item> +</grid> + +<!-- ditto with 'fr' sizing --> + +<grid class="fr"> + <item style="width:2ch" class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item>5 5</item> +</grid> + +<grid class="fr" style="grid: 1em 2em / 3ch 6ch 3ch 3ch"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:2ch">5 5</item> +</grid> + +<grid class="fr" style="grid: 1em 2em / 3ch 6ch 3ch 3ch"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:2ch; grid-column:2">5 5</item> +</grid> + +<grid class="fr"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:4ch; grid-column:2/span 2">5 5</item> +</grid> + +<grid class="fr"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="fr"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:3ch; grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="fr"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="grid-column:span 4">5 5</item> +</grid> + +<grid class="fr"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:6ch; grid-column:span 4">5 5</item> +</grid> + +<grid class="fr"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:6ch; grid-column:span 3">5 5</item> +</grid> + +<!-- ditto with mixed sizing --> + +<grid class="mixed" style="grid: 1em 2em / 2ch 4ch 1ch 1ch"> + <item style="width:2ch" class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item>5 5</item> +</grid> + +<grid class="mixed" style="grid: 1em 2em / calc(3ch/2) 3ch 1ch 1ch"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:2ch">5 5</item> +</grid> + +<grid class="mixed" style="grid: 1em 2em / calc(3ch/2) 3ch 1ch 1ch"> + <item class="start">1</item> + <item>2 2</item> + <item>3 3</item> + <item class="start">4</item> + <item style="width:2ch; grid-column:2">5 5</item> +</grid> + +<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch"> + <item class="start">1</item> + <item class="start">2 2</item> + <item class="start">3 3</item> + <item class="start">4</item> + <item style="width:4ch; grid-column:2/span 2">5 5</item> +</grid> + +<grid class="mixed" style="grid: 2em 1em 1em / calc(3ch/2) 3ch 1ch 1ch"> + <item class="start">1</item> + <item class="start">2 2</item> + <item class="start">3 3</item> + <item class="start">4</item> + <item style="grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch"> + <item class="start">1</item> + <item class="start">2 2</item> + <item class="start">3 3</item> + <item class="start">4</item> + <item style="width:3ch; grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch"> + <item class="start">1</item> + <item class="start">2 2</item> + <item class="start">3 3</item> + <item class="start">4</item> + <item style="grid-column:span 4">5 5</item> +</grid> + +<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch"> + <item class="start">1</item> + <item class="start">2 2</item> + <item class="start">3 3</item> + <item class="start">4</item> + <item style="width:6ch; grid-column:span 4">5 5</item> +</grid> + +<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch"> + <item class="start">1</item> + <item class="start">2 2</item> + <item class="start">3 3</item> + <item class="start">4</item> + <item style="width:6ch; grid-column:span 3">5 5</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004.html new file mode 100644 index 0000000000..5365208c00 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004.html @@ -0,0 +1,270 @@ +<!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 max-content sizing</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-intrinsic-sizing-004-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,auto); + grid-template-rows: masonry; + border: 1px solid; + padding: 0 1px 0 2px; + vertical-align: top; + width: max-content; +} +.fr { + grid-template-columns: 1fr 2fr 1fr 1fr; +} +.mixed { + grid-template-columns: 1fr 2fr min-content max-content; +} + +item { + background-color: #444; + color: blue; +} +</style> +</head> +<body> + +<grid> + <item style="width:2ch">1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item>5 5</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch">5 5</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5 5</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5 5</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="grid-column:span 4">5 5</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5 5</item> +</grid> + +<grid> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5 5</item> +</grid> + +<!-- ditto with 'fr' sizing --> + +<grid class="fr"> + <item style="width:2ch">1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item>5 5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch">5 5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5 5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5 5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="grid-column:span 4">5 5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5 5</item> +</grid> + +<grid class="fr"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5 5</item> +</grid> + +<!-- ditto with mixed sizing --> + +<grid class="mixed"> + <item style="width:2ch">1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item>5 5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch">5 5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:2ch; grid-column:2">5 5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:4ch; grid-column:2/span 2">5 5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:3ch; grid-column:2/span 2">5 5</item> + <item style="width:5ch; grid-column:1/span 3">6</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="grid-column:span 4">5 5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 4">5 5</item> +</grid> + +<grid class="mixed"> + <item>1</item> + <item>2 2</item> + <item>3 3</item> + <item>4</item> + <item style="width:6ch; grid-column:span 3">5 5</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005-ref.html new file mode 100644 index 0000000000..e564fb1b3e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005-ref.html @@ -0,0 +1,83 @@ +<!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 intrinsic sizing</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-auto-flow: column; + border: 1px solid; + padding: 0 1px 0 2px; + vertical-align: top; +} + +item { + background-color: #444; + color: blue; + writing-mode: vertical-lr; +} +</style> +</head> +<body> + +<grid style="grid-template-rows: 3ch repeat(3,1ch)"> + <item style="height:3ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5 5</item> + <item>6</item> + <item>7</item> + <item>8</item> + <item>9 9</item> +</grid> + +<grid style="grid-template-rows: repeat(4,1ch)"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="height:3ch">5 5</item> + <item>6</item> + <item>7</item> + <item>8</item> + <item>9 9</item> +</grid> + +<grid style="grid-template-rows: 3ch repeat(3,1ch)"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="height:3ch; grid-row:1">5 5</item> + <item>6</item> + <item>7</item> + <item>8</item> + <item>9 9</item> +</grid> + +<grid style="grid-template-rows: 3ch repeat(3,1ch)"> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="height:3ch; grid-column:1">5 5</item> + <item>6</item> + <item>7</item> + <item>8</item> + <item>9 9</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005.html new file mode 100644 index 0000000000..cf9b680869 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005.html @@ -0,0 +1,86 @@ +<!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 intrinsic sizing</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-intrinsic-sizing-005-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: masonry; + grid-template-rows: repeat(4,auto); + border: 1px solid; + padding: 0 1px 0 2px; + vertical-align: top; +} + +item { + background-color: #444; + color: blue; + writing-mode: vertical-lr; +} +</style> +</head> +<body> + +<grid> + <item style="height:3ch">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5 5</item> + <item>6</item> + <item>7</item> + <item>8</item> + <item>9 9</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="height:3ch">5 5</item> + <item>6</item> + <item>7</item> + <item>8</item> + <item>9 9</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="height:3ch; grid-row:1">5 5</item> + <item>6</item> + <item>7</item> + <item>8</item> + <item>9 9</item> +</grid> + +<grid> + <item>1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="height:3ch; grid-column:1">5 5</item> + <item>6</item> + <item>7</item> + <item>8</item> + <item>9 9</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006-ref.html new file mode 100644 index 0000000000..e1cb015cfe --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006-ref.html @@ -0,0 +1,60 @@ +<!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 intrinsic sizing</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-auto-flow: column; + grid-template-columns: 1ch; + grid-template-rows: repeat(4,1em); + border: 1px solid; + padding: 0 1px 0 2px; + vertical-align: top; +} + +item { + background-color: #444; + color: blue; +} +</style> +</head> +<body> + +<grid> + <item style="width:3ch">1 1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-row:2">5 5</item> +</grid> + +<grid> + <item style="width:3ch">1 1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-row:2">5 5</item> +</grid> + +<grid style="height:5em"> + <item style="width:3ch">1 1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item style="grid-row:2">5 5</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006.html new file mode 100644 index 0000000000..49fd53bb79 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006.html @@ -0,0 +1,61 @@ +<!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 intrinsic sizing</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-intrinsic-sizing-006-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: masonry; + grid-template-rows: repeat(4,auto); + border: 1px solid; + padding: 0 1px 0 2px; + vertical-align: top; +} + +item { + background-color: #444; + color: blue; +} +</style> +</head> +<body> + +<grid style="max-height:5em; grid-template-rows: repeat(auto-fill,1em);"> + <item>1 1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5 5</item> +</grid> + +<grid style="min-height:4em; grid-template-rows: repeat(auto-fill,1em);"> + <item>1 1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5 5</item> +</grid> + +<grid style="height:5em; grid-template-rows: repeat(auto-fill,1em);"> + <item>1 1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5 5</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001-ref.html new file mode 100644 index 0000000000..b6373f8d2d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001-ref.html @@ -0,0 +1,47 @@ +<!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 masonry columns masonry-auto-flow next</title> + <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow"> + <meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" /> + <style> +html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 10px 20px; + grid-template-rows: repeat(4,80px); + grid-template-columns: auto; + grid-auto-flow: column; + color: #444; + border: 1px solid; + padding: 2px; +} + +item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; +} +</style> +</head> +<body> + +<grid> + <item>1</item> + <item style="grid-row: span 3">2</item> + <item>3</item> + <item style="grid-row: span 4">4</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001.html new file mode 100644 index 0000000000..eacc943bf7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001.html @@ -0,0 +1,48 @@ +<!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 masonry columns masonry-auto-flow next</title> + <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow"> + <link rel="match" href="masonry-columns-item-placement-auto-flow-next-001-ref.html"> + <meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" /> + <style> +html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 10px 20px; + grid-template-rows: repeat(4,80px); + grid-template-columns: masonry; + color: #444; + border: 1px solid; + padding: 2px; + masonry-auto-flow: next; +} + +item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; +} +</style> +</head> +<body> + +<grid> + <item>1</item> + <item style="grid-row: span 3">2</item> + <item>3</item> + <item style="grid-row: span 4">4</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001-ref.html new file mode 100644 index 0000000000..2e100c3be6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001-ref.html @@ -0,0 +1,46 @@ +<!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 using `grid-column/row`</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> + html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-grid; + gap: 10px 20px; + grid-template-columns: repeat(4,80px); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; + } + </style> +</head> +<body> + +<grid> + <item style="grid-column:1">6</item> + <item style="grid-column:2">5</item> + <item style="grid-column:span 2">4</item> + <item style="margin-top:10px">3</item> + <item style="grid-column:span 2">1</item> + <item>2</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001.html new file mode 100644 index 0000000000..649e1edb7c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001.html @@ -0,0 +1,48 @@ +<!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 using `grid-column/row`</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-item-placement-001-ref.html"> + <style> + html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-grid; + gap: 10px 20px; + grid-template-columns: repeat(4,80px); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; + } + </style> +</head> +<body> + +<grid> + <item style="grid-column:1">6</item> + <item>5</item> + <item style="margin-top:10px">3</item> + <item style="grid-column:span 2">1</item> + <item>2</item> + <item style="grid-column:3/span 2">4</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002-ref.html new file mode 100644 index 0000000000..a02009ec30 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002-ref.html @@ -0,0 +1,47 @@ +<!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 using `grid-column/row`</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 10px 20px; + grid-template-columns: repeat(4,80px); + grid-template-rows: auto; + color: #444; + border: 1px solid; + padding: 2px; +} + +item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; +} +</style> +</head> +<body> + +<grid> + <item style="grid-column:1/-1">1</item> + <item>3</item> + <x></x> + <item>2</item> + <item>5</item> + <item style="grid-column:1/-2">4</item> + <item>6</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002.html new file mode 100644 index 0000000000..7d321bf731 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002.html @@ -0,0 +1,48 @@ +<!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 using `grid-column/row`</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-item-placement-002-ref.html"> + <style> + html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-grid; + gap: 10px 20px; + grid-auto-columns: 80px; + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; + } + </style> +</head> +<body> + +<grid> + <item style="grid-column:1/span 4;">1</item> + <item>3</item> + <item style="grid-column:foo 2; grid-row:span 2">2</item> + <item style="grid-column:span 3">4</item> + <item>5</item> + <item>6</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003-ref.html new file mode 100644 index 0000000000..5cbd8db9ef --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003-ref.html @@ -0,0 +1,46 @@ +<!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 using `grid-column/row` and `dense`</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 10px 20px; + grid-auto-columns: 80px; + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; +} + +item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; +} +</style> +</head> +<body> + +<grid> + <item>1</item> + <item>3</item> + <item>2</item> + <item style="grid-column:span 3">4</item> + <item>5</item> + <item>6</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003.html new file mode 100644 index 0000000000..8a183cffc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003.html @@ -0,0 +1,49 @@ +<!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 using `grid-column/row` and `dense`</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-item-placement-003-ref.html"> + <style> + html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-grid; + gap: 10px 20px; + grid-auto-flow: dense; + grid-auto-columns: 80px; + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; + } + </style> +</head> +<body> + +<grid> + <item style="grid-row:-100">1</item> + <item>3</item> + <item style="grid-column:foo 2; grid-row:span 2">2</item> + <item style="grid-column:span 3">4</item> + <item>5</item> + <item>6</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004-ref.html new file mode 100644 index 0000000000..75d6b741c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004-ref.html @@ -0,0 +1,107 @@ +<!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 using `grid-column/row`</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: auto; + color: #444; + border: 1px solid; + padding: 2px; +} + +item { + background-color: #444; + color: #fff; +} +</style> +</head> +<body> + +<grid> + <item style="grid-column:1/2">3</item> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:2/1">5</item> + <item style="grid-column:2/3">6</item> + <item style="grid-column:3/span 2">4</item> +</grid> + +<grid> + <item style="grid-column:1/2">3</item> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/span 2">4</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">3</item> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:2/1">5</item> + <item style="grid-column:2/3">6</item> + <item style="grid-column:3/span 2">4</item> +</grid> + +<grid> + <item style="grid-column:1/2">3</item> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:2/1">5</item> + <item style="grid-column:2/3">6</item> + <item style="grid-column:3/span 2">4</item> +</grid> + +<div style="direction:rtl"> +<grid> + <item style="grid-column:1/2">3</item> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:2/1">5</item> + <item style="grid-column:2/3">6</item> + <item style="grid-column:3/span 2">4</item> +</grid> + +<grid> + <item style="grid-column:1/2">3</item> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/span 2">4</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">3</item> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:2/1">5</item> + <item style="grid-column:2/3">6</item> + <item style="grid-column:3/span 2">4</item> +</grid> + +<grid> + <item style="grid-column:1/2">3</item> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:2/1">5</item> + <item style="grid-column:2/3">6</item> + <item style="grid-column:3/span 2">4</item> +</grid> +</div> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004.html new file mode 100644 index 0000000000..4d1a454a86 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004.html @@ -0,0 +1,109 @@ +<!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 using `grid-column/row`</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-item-placement-004-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; +} + +item { + background-color: #444; + color: #fff; +} +</style> +</head> +<body> + +<grid> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:3/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="masonry-auto-flow: next"> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:3/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="masonry-auto-flow: ordered"> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:3/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="masonry-auto-flow: next ordered"> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:3/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<div style="direction:rtl"> +<grid> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:3/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="masonry-auto-flow: next"> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:3/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="masonry-auto-flow: ordered"> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:3/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="masonry-auto-flow: next ordered"> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:3/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> +</div> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005-ref.html new file mode 100644 index 0000000000..806f314300 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005-ref.html @@ -0,0 +1,107 @@ +<!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 using `grid-column/row`</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: auto; + color: #444; + border: 1px solid; + padding: 2px; +} + +item { + background-color: #444; + color: #fff; +} +</style> +</head> +<body> + +<grid> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:1/span 2">4</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">5</item> + <item style="grid-column:1/2">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">3</item> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:1/span 2">4</item> + <item style="grid-column:3/4">5</item> + <item style="grid-column:4/5">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">3</item> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:1/span 2">4</item> + <item style="grid-column:3/4">5</item> + <item style="grid-column:4/5">6</item> +</grid> + +<grid> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:1/span 2">4</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">5</item> + <item style="grid-column:1/2">6</item> +</grid> + +<div style="direction:rtl"> +<grid> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:1/span 2">4</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">5</item> + <item style="grid-column:1/2">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">3</item> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:1/span 2">4</item> + <item style="grid-column:3/4">5</item> + <item style="grid-column:4/5">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">3</item> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:1/span 2">4</item> + <item style="grid-column:3/4">5</item> + <item style="grid-column:4/5">6</item> +</grid> + +<grid> + <item style="grid-column:2/span 2">1</item> + <item style="grid-column:4/5">2</item> + <item style="grid-column:1/span 2">4</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">5</item> + <item style="grid-column:1/2">6</item> +</grid> +</div> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005.html new file mode 100644 index 0000000000..ddfbc9e54e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005.html @@ -0,0 +1,109 @@ +<!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 using `grid-column/row`</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-item-placement-005-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; +} + +item { + background-color: #444; + color: #fff; +} +</style> +</head> +<body> + +<grid> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:1/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="masonry-auto-flow: ordered"> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:1/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="masonry-auto-flow: ordered next"> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:1/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="masonry-auto-flow: next"> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:1/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<div style="direction:rtl"> +<grid> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:1/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="masonry-auto-flow: ordered"> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:1/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="masonry-auto-flow: ordered next"> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:1/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="masonry-auto-flow: next"> + <item style="grid-column:2/span 2">1</item> + <item>2</item> + <item>3</item> + <item style="grid-column:1/span 2">4</item> + <item>5</item> + <item>6</item> +</grid> +</div> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006-ref.html new file mode 100644 index 0000000000..a6e9b75d0e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006-ref.html @@ -0,0 +1,144 @@ +<!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 item placement</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; +} + +item { + background-color: #444; + color: #fff; +} +</style> +</head> +<body> + +<grid> + <item style="padding-top:30px; grid-column:1/2">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid> + <item style="padding-top:30px; grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:4/5">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:3/span 2">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:1/2">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:1/span 3">4</item> + <item style="grid-column:4/5">5</item> + <item style="grid-column:4/5">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:1/span 4">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:2/3">6</item> +</grid> + +<span class="next"> +<grid> + <item style="padding-top:30px; grid-column:1/2">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:2/3">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:2/3">6</item> +</grid> + +<grid> + <item style="padding-top:30px; grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:2/3">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:1/span 2">4</item> + <item style="grid-column:3/4">5</item> + <item style="grid-column:4/5">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:1/span 3">4</item> + <item style="grid-column:4/5">5</item> + <item style="grid-column:1/2">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:1/span 4">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:2/3">6</item> +</grid> +</span> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006.html new file mode 100644 index 0000000000..0082d72df2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006.html @@ -0,0 +1,149 @@ +<!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 item placement</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-item-placement-006-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; +} + +item { + background-color: #444; + color: #fff; +} +.next > grid { + masonry-auto-flow: next; +} +</style> +</head> +<body> + +<grid> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item style="padding-top:30px">1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item style="grid-column:span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item style="grid-column:span 3">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item style="grid-column:span 4">4</item> + <item>5</item> + <item>6</item> +</grid> + +<span class="next"> +<grid> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item style="padding-top:30px">1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item style="grid-column:span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item style="grid-column:span 3">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item style="grid-column:span 4">4</item> + <item>5</item> + <item>6</item> +</grid> +</span> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007-ref.html new file mode 100644 index 0000000000..50236046fb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007-ref.html @@ -0,0 +1,145 @@ +<!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 item placement (RTL)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; + direction: rtl; +} + +item { + background-color: #444; + color: #fff; +} +</style> +</head> +<body> + +<grid> + <item style="padding-top:30px; grid-column:1/2">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid> + <item style="padding-top:30px; grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:4/5">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:3/span 2">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:1/2">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:1/span 3">4</item> + <item style="grid-column:4/5">5</item> + <item style="grid-column:4/5">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:1/span 4">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:2/3">6</item> +</grid> + +<span class="next"> +<grid> + <item style="padding-top:30px; grid-column:1/2">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:2/3">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:2/3">6</item> +</grid> + +<grid> + <item style="padding-top:30px; grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:2/3">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:1/span 2">4</item> + <item style="grid-column:3/4">5</item> + <item style="grid-column:4/5">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:1/span 3">4</item> + <item style="grid-column:4/5">5</item> + <item style="grid-column:1/2">6</item> +</grid> + +<grid> + <item style="grid-column:1/2">1</item> + <item style="padding-top:30px; grid-column:2/3">2</item> + <item style="padding-top:10px; grid-column:3/4">3</item> + <item style="grid-column:1/span 4">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:2/3">6</item> +</grid> +</span> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007.html new file mode 100644 index 0000000000..67a02560f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007.html @@ -0,0 +1,150 @@ +<!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 item placement (RTL)</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-item-placement-007-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; + direction: rtl; +} + +item { + background-color: #444; + color: #fff; +} +.next > grid { + masonry-auto-flow: next; +} +</style> +</head> +<body> + +<grid> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item style="padding-top:30px">1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item style="grid-column:span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item style="grid-column:span 3">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item style="grid-column:span 4">4</item> + <item>5</item> + <item>6</item> +</grid> + +<span class="next"> +<grid> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item style="padding-top:30px">1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item style="grid-column:span 2">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item style="grid-column:span 3">4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid> + <item>1</item> + <item style="padding-top:30px">2</item> + <item style="padding-top:10px">3</item> + <item style="grid-column:span 4">4</item> + <item>5</item> + <item>6</item> +</grid> +</span> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008-ref.html new file mode 100644 index 0000000000..e14ca3173a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry item placement w/ Images</title> + <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> +</head> + +<body> +<style> +grid { + display: inline-grid; + grid-template-columns: 400px; +} + +img { + width: 100%; + height: auto; + background-color: cyan; +} +</style> + +<grid> + <img width="400" height="400" /> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008.html new file mode 100644 index 0000000000..c68a9787b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Test: Masonry item placement w/ Images</title> + <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="masonry-item-placement-008-ref.html"> +</head> + +<body> +<style> +grid { + display: inline-grid; + grid-template-rows: masonry; + grid-template-columns: repeat( auto-fill, minmax(200px, 400px) ); + gap: 30px; + max-width: 50vw; +} + +img { + width: 100%; + height: auto; + background-color: cyan; +} +</style> + +<grid> + <img width="400" height="400" /> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001-ref.html new file mode 100644 index 0000000000..cbb3e825a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001-ref.html @@ -0,0 +1,46 @@ +<!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 masonry rows masonry-auto-flow next</title> + <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow"> + <meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" /> + <style> +html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 10px 20px; + grid-template-columns: repeat(4,80px); + grid-template-rows: auto; + color: #444; + border: 1px solid; + padding: 2px; +} + +item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; +} +</style> +</head> +<body> + +<grid> + <item>1</item> + <item style="grid-column: span 3">2</item> + <item>3</item> + <item style="grid-column: span 4">4</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001.html new file mode 100644 index 0000000000..c425490d2d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001.html @@ -0,0 +1,48 @@ +<!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 masonry rows masonry-auto-flow next</title> + <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow"> + <link rel="match" href="masonry-rows-item-placement-auto-flow-next-001-ref.html"> + <meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" /> + <style> +html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 10px 20px; + grid-template-columns: repeat(4,80px); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; + masonry-auto-flow: next; +} + +item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; +} +</style> +</head> +<body> + +<grid> + <item>1</item> + <item style="grid-column: span 3">2</item> + <item>3</item> + <item style="grid-column: span 4">4</item> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed-ref.html new file mode 100644 index 0000000000..71c081f2ca --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="When the width of the masonry grid changes, items are repositioned with correct offsets and are not overlapping"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +grid { + display: grid; + width: 1%; + grid-template-rows: masonry; + grid-template-columns: auto; + grid-gap: 10px; + font-family: Ahem; + font-size: 40px; +} +item { + background-color: grey; +} +</style> +</head> +<body> + <grid> + <item>Hello, world!</item> + <item>2</item> + </grid> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed.html new file mode 100644 index 0000000000..3a1c4cfa9c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="masonry-rows-with-grid-width-changed-ref.html"> +<meta name="assert" content="When the width of the masonry grid changes, items are repositioned with correct offsets and are not overlapping"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> + grid { + display: grid; + grid-template-rows: masonry; + grid-template-columns: auto; + grid-gap: 10px; + font-family: Ahem; + font-size: 40px; + } + item { + background-color: grey; + } +</style> +</head> +<body> + <grid> + <item>Hello, world!</item> + <item>2</item> + </grid> +</body> +<script> + // Make sure layout occurs and then mutate the style to retrigger it + document.body.offsetHeight; + document.querySelector("grid").style["width"] = "1%"; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001-ref.html new file mode 100644 index 0000000000..f7d9ccf48f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001-ref.html @@ -0,0 +1,125 @@ +<!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 `justify-content` in grid axis</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: 1em auto; + color: #444; + border: 1px solid; + padding: 2px; + width: 100px; + align-items: start; +} + +item { + background-color: #444; + color: #fff; +} + +.tall { padding-top:30px; grid-row:span 2; } +</style> +</head> +<body> + +<grid style="justify-content:start"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:start"> + <item style="grid-column:1/2">1</item> + <item style="grid-column:2/3" class="tall">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:end"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:end"> + <item style="grid-column:1/2">1</item> + <item style="grid-column:2/3" class="tall">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:center"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:center"> + <item style="grid-column:1/2">1</item> + <item style="grid-column:2/3" class="tall">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:stretch"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:space-between"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:space-around"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:space-evenly"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001.html new file mode 100644 index 0000000000..3d60ac19fe --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001.html @@ -0,0 +1,125 @@ +<!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 `justify-content` in grid axis</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-justify-content-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; + width: 100px; +} + +item { + background-color: #444; + color: #fff; +} + +</style> +</head> +<body> + +<grid style="justify-content:start"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:start"> + <item>1</item> + <item style="padding-top:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:end"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:end"> + <item>1</item> + <item style="padding-top:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:center"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:center"> + <item>1</item> + <item style="padding-top:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:stretch"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:space-between"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:space-around"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:space-evenly"> + <item style="padding-top:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002-ref.html new file mode 100644 index 0000000000..6889af7eac --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002-ref.html @@ -0,0 +1,126 @@ +<!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 `justify-content` in grid axis</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: 1em auto; + color: #444; + border: 1px solid; + padding: 2px; + height: 100px; + writing-mode: vertical-lr; + align-items: start; +} + +item { + background-color: #444; + color: #fff; +} + +.tall { padding-right:30px; grid-row:span 2; } +</style> +</head> +<body> + +<grid style="justify-content:start"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:start"> + <item style="grid-column:1/2">1</item> + <item style="grid-column:2/3" class="tall">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:end"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:end"> + <item style="grid-column:1/2">1</item> + <item style="grid-column:2/3" class="tall">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:center"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:center"> + <item style="grid-column:1/2">1</item> + <item style="grid-column:2/3" class="tall">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:1/2">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:stretch"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:space-between"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:space-around"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> + +<grid style="justify-content:space-evenly"> + <item style="grid-column:1/2" class="tall">1</item> + <item style="grid-column:2/3">2</item> + <item style="grid-column:3/4">3</item> + <item style="grid-column:4/5">4</item> + <item style="grid-column:2/3">5</item> + <item style="grid-column:3/4">6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002.html new file mode 100644 index 0000000000..b1db084d4e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002.html @@ -0,0 +1,126 @@ +<!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 `justify-content` in grid axis</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-justify-content-002-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: repeat(4,20px); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; + height: 100px; + writing-mode: vertical-lr; +} + +item { + background-color: #444; + color: #fff; +} + +</style> +</head> +<body> + +<grid style="justify-content:start"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:start"> + <item>1</item> + <item style="padding-right:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:end"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:end"> + <item>1</item> + <item style="padding-right:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:center"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:center"> + <item>1</item> + <item style="padding-right:30px">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:stretch"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:space-between"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:space-around"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:space-evenly"> + <item style="padding-right:30px">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003-ref.html new file mode 100644 index 0000000000..81d0fba410 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003-ref.html @@ -0,0 +1,125 @@ +<!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 `justify-content` in masonry axis</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: 1ch auto; + grid-template-rows: repeat(4,20px); + background: content-box silver; + border: 1px solid; + padding: 2px; + width: 100px; + justify-items: start; +} + +item { + background-color: #444; + color: #fff; +} + +.tall { grid-column:span 2; padding-left: 30px; } +</style> +</head> +<body> + +<grid style="justify-content:start"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:start"> + <item style="grid-row:1/2">1</item> + <item class="tall" style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:1/2">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:end"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:end"> + <item style="grid-row:1/2">1</item> + <item class="tall" style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:1/2">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:center"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:center"> + <item style="grid-row:1/2">1</item> + <item class="tall" style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:1/2">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:stretch"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:start"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:center"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:center"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003.html new file mode 100644 index 0000000000..772984b9e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003.html @@ -0,0 +1,126 @@ +<!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 `justify-content` in masonry axis</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-justify-content-003-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: masonry; + grid-template-rows: repeat(4,20px); + background: content-box silver; + border: 1px solid; + padding: 2px; + width: 100px; +} + +item { + background-color: #444; + color: #fff; +} + +.tall { padding-left: 30px; } +</style> +</head> +<body> + +<grid style="justify-content:start"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:start"> + <item>1</item> + <item class="tall">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:end"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:end"> + <item>1</item> + <item class="tall">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:center"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:center"> + <item>1</item> + <item class="tall">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:stretch"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:space-between"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:space-around"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:space-evenly"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004-ref.html new file mode 100644 index 0000000000..43af71fc01 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004-ref.html @@ -0,0 +1,128 @@ +<!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 `justify-content` in masonry axis</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: 1ch auto; + grid-template-rows: repeat(4,20px); + background: content-box silver; + border: 1px solid; + padding: 0 3px 2px 0; + width: 100px; + height: 120px; + align-content: center; + justify-items: start; + writing-mode: vertical-rl; +} + +item { + background-color: #444; + color: #fff; +} + +.tall { grid-column: span 2; padding: 11px 3px 13px 7px; } +</style> +</head> +<body> + +<grid style="justify-content:start"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:start"> + <item style="grid-row:1/2">1</item> + <item class="tall" style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:1/2">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:end"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:end"> + <item style="grid-row:1/2">1</item> + <item class="tall" style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:1/2">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:center"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:center"> + <item style="grid-row:1/2">1</item> + <item class="tall" style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:1/2">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:stretch"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:start"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:center"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> + +<grid style="justify-content:center"> + <item class="tall" style="grid-row:1/2">1</item> + <item style="grid-row:2/3">2</item> + <item style="grid-row:3/4">3</item> + <item style="grid-row:4/5">4</item> + <item style="grid-row:2/3">5</item> + <item style="grid-row:3/4">6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004.html new file mode 100644 index 0000000000..7d04ffeb4b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004.html @@ -0,0 +1,129 @@ +<!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 `justify-content` in masonry axis</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-justify-content-004-ref.html"> + <style> +html,body { + color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 1px 2px; + grid-template-columns: masonry; + grid-template-rows: repeat(4,20px); + background: content-box silver; + border: 1px solid; + padding: 0 3px 2px 0; + width: 100px; + height: 120px; + align-content: center; + writing-mode: vertical-rl; +} + +item { + background-color: #444; + color: #fff; +} + +.tall { padding: 11px 3px 13px 7px; } +</style> +</head> +<body> + +<grid style="justify-content:start"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:start"> + <item>1</item> + <item class="tall">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:end"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:end"> + <item>1</item> + <item class="tall">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:center"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:center"> + <item>1</item> + <item class="tall">2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:stretch"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:space-between"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:space-around"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> + +<grid style="justify-content:space-evenly"> + <item class="tall">1</item> + <item>2</item> + <item>3</item> + <item>4</item> + <item>5</item> + <item>6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-columns-item-containing-block-is-grid-content-width.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-columns-item-containing-block-is-grid-content-width.html new file mode 100644 index 0000000000..e48b650253 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-columns-item-containing-block-is-grid-content-width.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3/#containing-block"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Svg should use grid's content logical width for its containing block size and get sized to 100px x 100px"> +<style> +grid { + display: grid; + grid-template-columns:masonry; + grid-template-rows: auto; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<grid> + <svg width="100" height="100" viewBox="0 0 1 1" style="width: 100%; max-width: 100px; background: green;"></svg> +</grid> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-grid-template-columns-computed-withcontent.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-grid-template-columns-computed-withcontent.html new file mode 100644 index 0000000000..b36efb664d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-grid-template-columns-computed-withcontent.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masonry Test: getComputedStyle().gridTemplateColumns</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns"> +<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + display: grid; + grid-template-rows: masonry; + font-size: 40px; + min-width: 200px; + width: 300px; + max-width: 400px; + min-height: 500px; + height: 600px; + max-height: 700px; + } + #child { + min-width: 20px; + width: 30px; + max-width: 40px; + min-height: 50px; + height: 60px; + max-height: 70px; + } +</style> +</head> +<body> +<div id="container"> + <div id="target"> + <div id="child"></div> + </div> +</div> +<script> +test_computed_value("grid-template-rows", 'masonry', 'masonry'); +test_computed_value("grid-template-columns", 'none', 'none'); // "none" without #child + +// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto +test_computed_value("grid-template-columns", '20%', '60px'); // 20% * width +test_computed_value("grid-template-columns", 'calc(-0.5em + 10px)', '0px'); +test_computed_value("grid-template-columns", 'calc(0.5em + 10px)', '30px'); +test_computed_value("grid-template-columns", 'calc(30% + 40px)', '130px'); // 30% * width + 40px +test_computed_value("grid-template-columns", '5fr', '300px'); // width +test_computed_value("grid-template-columns", 'min-content', '30px'); +test_computed_value("grid-template-columns", 'max-content', '30px'); +test_computed_value("grid-template-columns", 'auto', '300px'); // width + +// track-size minmax( <inflexible-breadth> , <track-breadth> ) +test_computed_value("grid-template-columns", 'minmax(10px, auto)', '300px'); // width +test_computed_value("grid-template-columns", 'minmax(20%, max-content)', '60px'); // 20% * width +test_computed_value("grid-template-columns", 'minmax(min-content, calc(-0.5em + 10px))', '30px'); +test_computed_value("grid-template-columns", 'minmax(auto, 0)', '30px'); + +// track-size fit-content( <length-percentage> ) +test_computed_value("grid-template-columns", 'fit-content(70px)', '30px'); +test_computed_value("grid-template-columns", 'fit-content(20%)', '30px'); +test_computed_value("grid-template-columns", 'fit-content(calc(-0.5em + 10px))', '30px'); + +// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? ) +test_computed_value("grid-template-columns", 'repeat(1, 10px)', '10px'); +test_computed_value("grid-template-columns", 'repeat(1, [one two] 20%)', '[one two] 60px'); +test_computed_value("grid-template-columns", 'repeat(2, minmax(10px, auto))', '160px 140px'); + +test_computed_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])', + '30px [three four] 30px 40px [five six] 0px [three four] 30px 40px [five six]'); + +// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>? +test_computed_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))', + '30px 54px 54px 54px 54px 54px'); +test_computed_value("grid-template-columns", '[] 150px [] 1fr []', '150px 150px'); + +// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? ) +test_computed_value("grid-template-columns", 'repeat(auto-fill, 200px)', '200px'); +test_computed_value("grid-template-columns", 'repeat(auto-fit, [one] 20%)', + '[one] 60px [one] 60px [one] 60px [one] 60px [one] 60px'); +test_computed_value("grid-template-columns", 'repeat(auto-fill, minmax(100px, 5fr) [two])', + '100px [two] 100px [two] 100px [two]'); +test_computed_value("grid-template-columns", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])', + '[three] 240px [four]'); + +// <auto-track-list> = +// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? +// <auto-repeat> +// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? + +test_computed_value("grid-template-columns", '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]', + '[one] 50px 50px [two] 30px [three] 10px 40px [four five] 200px 200px [six]'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001-ref.html new file mode 100644 index 0000000000..3e86b8a89b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Grid Reference</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<style> +grid { + vertical-align: top; + display: inline-grid; + grid-template-columns: 60px 60px; + grid-template-rows: 60px; + border: 2px solid black; +} +item { + width: 60px; + height: 60px; + background: cyan; +} +.tall { + background: tan; +} +</style> +<grid> + <item class="tall"></item> + <item></item> +</grid> +<grid class="overflowSet"> + <item class="tall"></item> + <item></item> +</grid> +<grid class="containSet"> + <item class="tall"></item> + <item></item> +</grid> +<grid class="containSet overflowSet"> + <item class="tall"></item> + <item></item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001.html new file mode 100644 index 0000000000..54499d3d69 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Grid Test: Masonry layout shouldn't be inhibited simply due to being an independent formatting context (unlike subgrid)</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3/"> +<link rel="match" href="masonry-not-inhibited-001-ref.html"> +<style> +grid { + vertical-align: top; + display: inline-grid; + grid-template-columns: 60px 60px; + grid-template-rows: masonry; + border: 2px solid black; +} +.overflowSet { + overflow: hidden; +} +.containSet { + contain: layout; +} +item { + width: 60px; + height: 30px; + background: cyan; +} +.tall { + /* This item is taller than the others, which lets us know if masonry + layout is being applied or not. If we're using masonry, then the second + and third items will stack in the same column. If not, then the third + item will automatically fill in below this tall item. */ + height: 60px; + background: tan; +} +</style> +<grid> + <item class="tall"></item> + <item></item> + <item></item> +</grid> +<grid class="overflowSet"> + <item class="tall"></item> + <item></item> + <item></item> +</grid> +<grid class="containSet"> + <item class="tall"></item> + <item></item> + <item></item> +</grid> +<grid class="containSet overflowSet"> + <item class="tall"></item> + <item></item> + <item></item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001-ref.html new file mode 100644 index 0000000000..6f20bd0583 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001-ref.html @@ -0,0 +1,43 @@ +<!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 using `order`</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> + html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-grid; + gap: 10px 20px; + grid-template-columns: repeat(4,auto); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; + } + </style> +</head> +<body> + +<grid> + <item>1</item> + <item style="margin-top:10px">4</item> + <item>6</item> + <item>2</item> + <item style="grid-column: span 2">5</item> + <item>3</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001.html new file mode 100644 index 0000000000..d01f52ea04 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001.html @@ -0,0 +1,45 @@ +<!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 using `order`</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-order-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; +} + +grid { + display: inline-grid; + gap: 10px 20px; + grid-template-columns: repeat(4,auto); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; +} + +item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; +} +</style> +</head> +<body> + +<grid> + <item>1</item> + <item style="order:1">2</item> + <item style="order:2">3</item> + <item style="margin-top:10px">4</item> + <item style="order:1; grid-column:span 2">5</item> + <item>6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002-ref.html new file mode 100644 index 0000000000..15be3fde83 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002-ref.html @@ -0,0 +1,43 @@ +<!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 using `order` and `masonry-auto-flow: next`</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> + html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-grid; + gap: 10px 20px; + grid-template-columns: repeat(4,auto); + grid-template-rows: masonry; + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; + } + </style> +</head> +<body> + +<grid> + <item style="grid-column: 1">1</item> + <item style="margin-top:10px; grid-column: 2;">4</item> + <item style="grid-column: 3">6</item> + <item style="grid-column: 4">2</item> + <item style="grid-column: 2/span 2">5</item> + <item>3</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002.html new file mode 100644 index 0000000000..abad3d44b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002.html @@ -0,0 +1,46 @@ +<!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 using `order` and `masonry-auto-flow: next`</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-order-002-ref.html"> + <style> + html,body { + color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0; + } + + grid { + display: inline-grid; + gap: 10px 20px; + grid-template-columns: repeat(4,auto); + grid-template-rows: masonry; + masonry-auto-flow: next; + color: #444; + border: 1px solid; + padding: 2px; + } + + item { + background-color: #444; + color: #fff; + padding: 20px; + margin: 3px; + border: 5px solid blue; + } + </style> +</head> +<body> + +<grid> + <item>1</item> + <item style="order:1">2</item> + <item style="order:1">3</item> + <item style="margin-top:10px">4</item> + <item style="order:2; grid-column:span 2">5</item> + <item>6</item> +</grid> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/parsing/masonry-parsing.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/parsing/masonry-parsing.html new file mode 100644 index 0000000000..e3245095fa --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/parsing/masonry-parsing.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Masonry Test: parsing properties and shortands</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template-columns"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +function masonry_test_template_prop(name) { + test_valid_value(name, 'masonry'); + test_invalid_value(name, 'masonry []'); + test_invalid_value(name, 'masonry [foo] 40px'); + test_invalid_value(name, 'masonry 40px'); + test_invalid_value(name, '[foo] masonry'); + test_invalid_value(name, '0px masonry'); + test_invalid_value(name, 'masonry masonry'); + test_invalid_value(name, 'subgrid masonry'); + test_invalid_value(name, 'masonry subgrid'); + test_invalid_value(name, 'masonry repeat(1, [])'); + test_invalid_value(name, 'masonry repeat(auto-fill, [])'); + test_invalid_value(name, 'masonry / none'); +} +masonry_test_template_prop("grid-template-columns"); +masonry_test_template_prop("grid-template-rows"); + +test_shorthand_value("grid-template", 'masonry / masonry', { + 'grid-template-rows': 'masonry', + 'grid-template-columns': 'masonry', + 'grid-template-areas': 'none' +}); + +test_shorthand_value("grid-template", 'masonry / subgrid [foo]', { + 'grid-template-rows': 'masonry', + 'grid-template-columns': 'subgrid [foo]', + 'grid-template-areas': 'none' +}); + +test_shorthand_value("grid-template", '10px / masonry', { + 'grid-template-rows': '10px', + 'grid-template-columns': 'masonry', + 'grid-template-areas': 'none' +}); + +test_shorthand_value("grid", 'masonry / masonry', { + 'grid-template-rows': 'masonry', + 'grid-template-columns': 'masonry', + 'grid-template-areas': 'none', + 'grid-auto-rows': 'auto', + 'grid-auto-columns': 'auto', + 'grid-auto-flow': 'row' +}); + +test_shorthand_value("grid", 'masonry / subgrid [foo]', { + 'grid-template-rows': 'masonry', + 'grid-template-columns': 'subgrid [foo]', + 'grid-template-areas': 'none', + 'grid-auto-rows': 'auto', + 'grid-auto-columns': 'auto', + 'grid-auto-flow': 'row' +}); + +test_shorthand_value("grid", '10px / masonry', { + 'grid-template-rows': '10px', + 'grid-template-columns': 'masonry', + 'grid-template-areas': 'none', + 'grid-auto-rows': 'auto', + 'grid-auto-columns': 'auto', + 'grid-auto-flow': 'row' +}); + +test_valid_value("masonry-auto-flow", 'pack'); +test_valid_value("masonry-auto-flow", 'pack ordered', 'ordered'); +test_valid_value("masonry-auto-flow", 'ordered next', 'next ordered'); +test_valid_value("masonry-auto-flow", 'next definite-first', 'next'); +test_valid_value("masonry-auto-flow", 'definite-first pack', 'pack'); +test_invalid_value("masonry-auto-flow", 'auto'); +test_invalid_value("masonry-auto-flow", 'none'); +test_invalid_value("masonry-auto-flow", '10px'); +test_invalid_value("masonry-auto-flow", 'row'); +test_invalid_value("masonry-auto-flow", 'dense'); + +</script> +</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 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> 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> 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> 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 new file mode 100644 index 0000000000..466e95eb03 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002.html @@ -0,0 +1,301 @@ +<!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://drats.csswg.org/css-grid-2"> + <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; + 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; +} +.rows { + grid-template-columns: 40px 30px 20px; + 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 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 / 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 style="grid: subgrid / masonry"> + <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: masonry / 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: masonry / 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/track-sizing/masonry-track-sizing-check-grid-height-on-resize-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize-ref.html new file mode 100644 index 0000000000..7196886492 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + +<head> +<meta charset="utf-8"> +<link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="When the height of an element in the grid changes, ensure the grid is properly resized"> +</head> + +<style> + grid { + display: grid; + grid-template-rows: masonry; + grid-template-columns: auto; + grid-gap: 10px; + border: 10px; + border-style: solid; + } + item1 { + background-color: grey; + height: 125px; + width: 250px; + } + item2 { + background-color: grey; + height: 250px; + width: 250px; + } +</style> +</head> +<body> + <grid> + <item1>1</item1> + <item2>2</item2> + </grid> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize.html new file mode 100644 index 0000000000..06c2901f27 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + +<head> +<meta charset="utf-8"> +<link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="masonry-track-sizing-check-grid-height-on-resize-ref.html"> +<meta name="assert" content="When the height of an element in the grid changes, ensure the grid is properly resized"> +</head> + +<style> + grid { + display: grid; + grid-template-rows: masonry; + grid-template-columns: auto; + grid-gap: 10px; + border: 10px; + border-style: solid; + } + item { + background-color: grey; + height: 250px; + width: 250px; + } +</style> +</head> +<body> + <grid> + <item>1</item> + <item>2</item> + </grid> +</body> +<script> + /* Force a relayout */ + document.body.offsetHeight; + document.querySelector("item").style["height"] = "125px"; +</script> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block-ref.html new file mode 100644 index 0000000000..993017919f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>CSS Grid Reference: Verify definite blocks effect track-sizing algorithm.</title> +</head> + +<body> +<style> +grid { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: 50px 50px; + width: 300px; + height: 100px; +} + +box1 { + height: 50px; + width: 30px; + background-color: blue; +} + +box2 { + height: 50px; + background-color: red; +} + +box3 { + height: 50px; + width: 100px; + grid-row: 2; + grid-column: 1; + background-color: purple; +} + +box4 { + height: 50px; + background-color: green; +} + +</style> + +<grid> + <box1>1</box1> + <box2>2</box2> + <box3>3</box3> + <box4>4</box4> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block.html new file mode 100644 index 0000000000..3cc98708fe --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>CSS Grid Test: Verify definite blocks effect track-sizing algorithm.</title> + <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing"> + <link rel="match" href="masonry-track-sizing-explicit-block-ref.html"> +</head> + +<body> +<style> + grid { + display: grid; + grid-template-columns: 100px 1fr; + grid-template-rows: masonry; + width: 300px; + height: 100px; + } + + box1 { + height: 50px; + width: 30px; + background-color: blue; + } + + box2 { + height: 50px; + background-color: red; + } + + box3 { + height: 50px; + width: 100px; + background-color: purple; + } + + box4 { + height: 50px; + background-color: green; + } + +</style> + +<grid> + <box1>1</box1> + <box2>2</box2> + <box3>3</box3> + <box4>4</box4> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side-ref.html new file mode 100644 index 0000000000..5a31517183 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>CSS Grid Test: Verify correct behavior of track-sizing</title> + <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing"> +</head> + +<body> +<style> +grid { + display: grid; + grid-template-columns: 50px 1fr; + grid-template-rows: 50px 250px; + width: 300px; + height: 100px; +} + +box1 { + height: 50px; + width: 50px; + background-color: blue; +} + +box2 { + height: 50px; + background-color: red; +} + +box3 { + width: 100px; + height: 50px; + background-color: purple; + z-index: 1; +} + +box4 { + height: 50px; + background-color: green; +} +</style> + +<grid> + <box1>1</box1> + <box2>2</box2> + <box3>3</box3> + <box4>4</box4> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side.html new file mode 100644 index 0000000000..cd1b78a47b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>CSS Grid Test: Verify correct behavior of track-sizing</title> + <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing"> + <link rel="match" href="masonry-track-sizing-overflow-left-side-ref.html"> +</head> + +<body> +<style> +grid { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: masonry; + width: 300px; + height: 100px; +} + +box1 { + height: 50px; + width: 50px; + background-color: blue; +} + +box2 { + height: 50px; + background-color: red; +} + +box3 { + width: 100px; + height: 50px; + background-color: purple; + z-index: 1; +} + +box4 { + height: 50px; + background-color: green; +} +</style> + +<grid> + <box1>1</box1> + <box2>2</box2> + <box3>3</box3> + <box4>4</box4> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side-ref.html new file mode 100644 index 0000000000..51e657e2a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>CSS Grid Test: Verify correct behavior of track-sizing</title> + <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing"> +</head> + +<body> +<style> +grid { + display: grid; + grid-template-columns: 1fr 50px; + grid-template-rows: 1fr 50px; + width: 300px; + height: 100px; +} + +box1 { + height: 50px; + background-color: red; +} + +box2 { + height: 50px; + width: 50px; + background-color: blue; +} + +box3 { + height: 50px; + background-color: green; +} + +box4 { + width: 100px; + height: 50px; + background-color: purple; + z-index: 1; +} + +</style> + +<grid> + <box1>1</box1> + <box2>2</box2> + <box3>3</box3> + <box4>4</box4> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side.html new file mode 100644 index 0000000000..e4c17fd7b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>CSS Grid Test: Verify correct behavior of track-sizing</title> + <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing"> + <link rel="match" href="masonry-track-sizing-overflow-right-side-ref.html"> +</head> + +<body> +<style> +grid { + display: grid; + grid-template-columns: 1fr auto; + grid-template-rows: masonry; + width: 300px; + height: 100px; +} + +box1 { + width: 1fr; + height: 50px; + background-color: red; +} + +box2 { + height: 50px; + width: 50px; + background-color: blue; +} + +box3 { + height: 50px; + background-color: green; +} + +box4 { + width: 100px; + height: 50px; + background-color: purple; + z-index: 1; +} + +</style> + +<grid> + <box1>1</box1> + <box2>2</box2> + <box3>3</box3> + <box4>4</box4> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row-ref.html new file mode 100644 index 0000000000..b3e5fef233 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>CSS Grid Reference: Verify that fully spanning blocks take presedence over indefinite ones.</title> +</head> + +<body> +<style> +grid { + display: grid; + grid-template-columns: 50px 1fr; + grid-template-rows: auto auto auto; + width: 300px; + height: 100px; +} + +box1 { + height: 50px; + width: 50px; + background-color: blue; +} + +box2 { + height: 50px; + background-color: red; +} + +box3 { + width: 100px; + height: 50px; + background-color: purple; + z-index: 1; +} + +box4 { + height: 50px; + width: 300px; + grid-column-start: 1; + grid-column-end: 3; + background-color: green; +} +</style> + +<grid> + <box1>1</box1> + <box2>2</box2> + <box4>4</box4> + <box3>3</box3> +</grid> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row.html new file mode 100644 index 0000000000..475c27f1eb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>CSS Grid Test: Verify that fully spanning blocks take presedence over indefinite ones.</title> + <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing"> + <link rel="match" href="masonry-track-sizing-span-row-ref.html"> +</head> + +<body> +<style> + grid { + display: grid; + grid-template-columns: 50px 1fr; + grid-template-rows: masonry; + width: 300px; + height: 100px; + } + + box1 { + height: 50px; + width: 50px; + background-color: blue; + } + + box2 { + height: 50px; + background-color: red; + } + + box3 { + width: 100px; + height: 50px; + background-color: purple; + z-index: 1; + } + + box4 { + height: 50px; + width: 300px; + grid-column: span 2; + background-color: green; + } +</style> + +<grid> + <box1>1</box1> + <box2>2</box2> + <box4>4</box4> + <box3>3</box3> +</grid> + +</body> +</html> |