diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /layout/reftests/css-grid | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
504 files changed, 55217 insertions, 0 deletions
diff --git a/layout/reftests/css-grid/bug1306106-ref.html b/layout/reftests/css-grid/bug1306106-ref.html new file mode 100644 index 0000000000..d4f7dc4fc5 --- /dev/null +++ b/layout/reftests/css-grid/bug1306106-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Table grid item bug</title> +</head> +<body> + +<pre>You should see "A B" below:</pre> + +<div style="display:grid; grid: 50px / 50px 50px"> +<div style="display:table">A</div> +<div style="display:table">B</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/bug1306106.html b/layout/reftests/css-grid/bug1306106.html new file mode 100644 index 0000000000..7bc6ce7778 --- /dev/null +++ b/layout/reftests/css-grid/bug1306106.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Table grid item bug</title> +</head> +<body> + +<pre>You should see "A B" below:</pre> + +<div style="display:grid; grid: 50px / 50px 50px"> +<div style="display:table">B</div> +<div style="display:table; grid-area:1/1">A</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/bug1349571-ref.html b/layout/reftests/css-grid/bug1349571-ref.html new file mode 100644 index 0000000000..1f5a73f05b --- /dev/null +++ b/layout/reftests/css-grid/bug1349571-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1349571</title> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.container { + display: grid; + grid: 250px / 500px; + border: 3px solid; + width: 500px; +} + +.responsive-container { + background: lightgrey; +} + + </style> +</head> +<body> + +<div class="container"> + <div class="responsive-container"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/bug1349571.html b/layout/reftests/css-grid/bug1349571.html new file mode 100644 index 0000000000..e21b487b3f --- /dev/null +++ b/layout/reftests/css-grid/bug1349571.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1349571</title> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.container { + display: grid; + grid-template-columns: 1fr; + border: 3px solid; + width: 500px; +} + +.responsive-container { + padding-bottom: 50%; + height: 0; + background: lightgrey; +} + + </style> +</head> +<body> + +<div class="container"> + <div> + <div class="responsive-container"></div> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/bug1350925-ref.html b/layout/reftests/css-grid/bug1350925-ref.html new file mode 100644 index 0000000000..0d8e581427 --- /dev/null +++ b/layout/reftests/css-grid/bug1350925-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1350925</title> + <style type="text/css"> +html, body, .grid { margin: 0; } + +.grid { + display: grid; + overflow: auto; + height: 100%; + width: 100%; +} + + </style> +</head> +<body> + +<div style="height:300px; width:100px"> +<div class="grid" style="overflow-x:hidden"><div style="width:10px;height:700px"></div></div> +</div> + +<div style="width:300px; height:100px"> +<div class="grid" style="overflow-y:hidden"><div style="height:10px;width:700px"></div></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/bug1350925.html b/layout/reftests/css-grid/bug1350925.html new file mode 100644 index 0000000000..a2a81b16e7 --- /dev/null +++ b/layout/reftests/css-grid/bug1350925.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1350925</title> + <style type="text/css"> +html, body, .grid { margin: 0; } + +.grid { + display: grid; + overflow: auto; + height: 100%; + width: 100%; +} + + </style> +</head> +<body> + +<div style="height:300px; width:100px"> +<div class="grid"><div style="width:10px;height:700px"></div></div> +</div> + +<div style="width:300px; height:100px"> +<div class="grid"><div style="height:10px;width:700px"></div></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/bug1356820-ref.html b/layout/reftests/css-grid/bug1356820-ref.html new file mode 100644 index 0000000000..b0cd50fea6 --- /dev/null +++ b/layout/reftests/css-grid/bug1356820-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<div style="display: grid; width: 5em;"> + <div style="word-wrap: break-word; width: 5em; justify-self:start"> + first item with a longlonglongword + </div> + <div> + second item + </div> +</div> +<div style="display: grid; width: 5em;"> + <div style="width: 5em; justify-self:start"> + first item with a longlonglongword + </div> + <div> + second item + </div> +</div> +<div style="display: grid; width: 5em;"> + <div style="word-wrap: break-word; writing-mode:vertical-lr; justify-self:start"> + first item with a longlonglongword + </div> + <div> + second item + </div> +</div> diff --git a/layout/reftests/css-grid/bug1356820.html b/layout/reftests/css-grid/bug1356820.html new file mode 100644 index 0000000000..e37c0d049f --- /dev/null +++ b/layout/reftests/css-grid/bug1356820.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<div style="display: grid; width: 5em;"> + <div style="word-wrap: break-word; min-width: 0;"> + first item with a longlonglongword + </div> + <div> + second item + </div> +</div> +<div style="display: grid; width: 5em;"> + <div style="min-width: 0;"> + first item with a longlonglongword + </div> + <div> + second item + </div> +</div> +<div style="display: grid; width: 5em;"> + <div style="word-wrap: break-word; min-height: 0; writing-mode:vertical-lr"> + first item with a longlonglongword + </div> + <div> + second item + </div> +</div> diff --git a/layout/reftests/css-grid/grid-abspos-items-001-ref.html b/layout/reftests/css-grid/grid-abspos-items-001-ref.html new file mode 100644 index 0000000000..a036134450 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-001-ref.html @@ -0,0 +1,185 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + /*display: grid;*/ + position: relative; + border: 1px solid; + grid-auto-flow: row; + grid-auto-columns: 23px; + grid-auto-rows: 7px; + padding: 17px 7px 11px 13px; + width: 100px; + height: 60px; +} +.zero-size { width:0; height:0; } +.auto-size { width:auto; height:0px; } + +.a { + position: absolute; + left: 13px; top: 31px; + height: 12px; width: 44px; + background: blue; +} + +.abs { + position: absolute; + opacity: 0.7; + width: 21px; + height: 15px; +} +.b { + left: 1px; top: 3px; bottom: 1px; + width: 28px; height: auto; +} +.c { + right: 5px; bottom: 1px; + width: 112px; height: 82px; +} +.d { + left: 1px; top: 20px; + width: 5px; height: 1px; +} +.e { + right: 5px; bottom: 1px; + width: 112px; height: 51px; +} +.f { + right: 5px; top: 3px; + width: 112px; height: 11px; +} +.g { + left: 14px; top: 27px; + width: 38px; height: 1px; +} +.h { + top:3px; left:1px; right:5px; bottom:1px; + width:auto; height:auto; +} +.i, .j { + top:3px; left:1px; right:5px; bottom:1px; + border:none; + width:auto; height:auto; +} +span { + background: lime; + border: 1px solid; +} + </style> +</head> +<body> + +<div style="float:left"> + +<div class="grid"> +<span class="a"></span> +<span class="b abs">b</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="c abs">c</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="d abs">d</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="e abs">e</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="f abs">f</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="g abs">g</span> +</div> + +</div><div style="float:left"> + +<div class="grid"> +<span class="a"></span> +<span class="b abs">b</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="c abs">c</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="d abs">d</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="e abs">e</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="f abs">f</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="g abs">g</span> +</div> + +</div><div style="float:left"> + +<div class="grid zero-size"> +<span class="b abs" style="width:12px">b</span> +</div> + +<div class="grid auto-size"> +<span class="h abs">h</span> +</div> + +<div class="grid" style="height:7px"> +<span class="i abs">i</span> +</div> + +<div class="grid" style="height:7px"> +<span class="j abs">j</span> +</div> + +<div class="grid" style="width:43px; height:53px"> +<span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span> +<span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span> +<span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span> +<span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span> +</div> + +<div class="grid" style="width:43px; height:28px; border-width:0;"> +<span class="abs" style="right:48px; top:3px; height:11px; width:12px;"></span> +</div> +<div class="grid" style="width:43px; height:28px; border-width:0;"> +<span class="abs" style="left:1px; bottom:57px; height:22px; width:5px;"></span> +</div> +<div class="grid" style="width:43px; height:28px; border-width:0;"> +<span class="abs" style="right:48px; bottom:85px; height:22px; width:12px;"></span> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-001.html b/layout/reftests/css-grid/grid-abspos-items-001.html new file mode 100644 index 0000000000..97ac1f77b2 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-001.html @@ -0,0 +1,190 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-items-001-ref.html"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-flow: row; + grid-auto-columns: 23px; + grid-auto-rows: 7px; + padding: 17px 7px 11px 13px; + width: 100px; + height: 60px; +} +.zero-size { width:0; height:0; } +.auto-size { width:auto; height:auto; } + +.a { + grid-column: 1 / 3; + grid-row: 3 / 5; + background: blue; +} + +.abs { + position: absolute; + top:3px; left:1px; right:5px; bottom:1px; + opacity: 0.7; +} +.b { + grid-column: auto / 2; + grid-row: auto / auto; +} +.c { + grid-column: 9 / auto; /* 9 is outside the grid */ + grid-row: 9 / auto; /* 9 is outside the grid */ +} +.d { + grid-column: auto / 1; + grid-row: 2 / 1; +} +.e { + grid-column: 4 / auto; + grid-row: 3 / auto; +} +.f { + grid-column: 4 / auto; + grid-row: auto / 1; +} +.g { + grid-column: 1 / 3; + grid-row: 2 / 3; +} +.h { + grid-column: auto / auto; + grid-row: auto / auto; +} +.i { + grid-column: span 1 / span 2; + grid-row: span 2 / span A; + background: lime; +} +.j { + grid-column: span A / span 2; + grid-row: span 2 / span 1; + background: lime; +} +span { + background: lime; + border: 1px solid; +} + </style> +</head> +<body> + +<div style="float:left"> + +<div class="grid"> +<span class="a"></span> +<span class="b abs">b</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="c abs">c</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="d abs">d</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="e abs">e</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="f abs">f</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="g abs">g</span> +</div> + +</div><div style="float:left"> + +<div class="grid"> +<span class="a"></span> +<div><span class="b abs">b</span></div> +</div> + +<div class="grid"> +<span class="a"></span> +<x><span class="c abs">c</span></x> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="d abs">d</span> +</div> + +<div class="grid"> +<span class="a"></span> +<div><span class="e abs">e</span></div> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="f abs">f</span> +</div> + +<div class="grid"> +<span class="a"></span> +<x><span class="g abs">g</span></x> +</div> + +</div><div style="float:left"> + +<div class="grid zero-size"> +<span class="b abs">b</span> +</div> + +<div class="grid auto-size"> +<span class="h abs">h</span> +</div> + +<div class="grid" style="height:auto"> +<div style="grid-column: 1 / span 3"></div> +<div class="i abs">i</div> +</div> + +<div class="grid" style="height:auto"> +<div style="grid-column: 1 / span 3"></div> +<div class="j abs">j</div> +</div> + +<div class="grid" style="width:43px; height:53px"> +<span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span> +<span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span> +<span class="abs" style="grid-column-end:1; grid-row-start:1;">c</span> +<span class="abs" style="grid-column-start:1; grid-row-start:1;">d</span> +</div> + +<div class="grid" style="width:0px; height:0px; border-width:0;"> +<span class="abs" style="grid-column-start:2; grid-row-end:1;"></span> +</div> +<div class="grid" style="width:0px; height:0px; border-width:0;"> +<span class="abs" style="grid-column-end:1; grid-row-start:2;"></span> +</div> +<div class="grid" style="width:0px; height:0px; border-width:0;"> +<span class="abs" style="grid-column-start:2; grid-row-start:2;"></span> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-002-ref.html b/layout/reftests/css-grid/grid-abspos-items-002-ref.html new file mode 100644 index 0000000000..9be7f8adf5 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-002-ref.html @@ -0,0 +1,176 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + /*display: grid;*/ + position: relative; + top:2px; left:1px; + border: 1px solid; + grid-auto-flow: row; + grid-auto-columns: 23px; + grid-auto-rows: 7px; + padding: 17px 7px 11px 13px; + width: 100px; + height: 60px; +} +.zero-size { width:0; height:0; } +.auto-size { width:auto; height:0px; } + +.a { + position: absolute; + left: 13px; top: 31px; + height: 12px; width: 44px; + background: blue; +} + +.abs { + position: absolute; + opacity: 0.7; + width: 21px; + height: 15px; +} +.b { + left: 1px; top: 3px; bottom: 1px; + width: 28px; height: auto; +} +.c { + right: 5px; bottom: 1px; + width: 112px; height: 82px; +} +.d { + left: 1px; top: 20px; + width: 5px; height: 1px; +} +.e { + right: 5px; bottom: 1px; + width: 112px; height: 51px; +} +.f { + right: 5px; top: 3px; + width: 112px; height: 11px; +} +.g { + left: 14px; top: 27px; + width: 38px; height: 1px; +} +.h { + top:3px; left:1px; right:5px; bottom:1px; + width:auto; height:auto; +} +.i, .j { + top:3px; left:1px; right:5px; bottom:1px; + border:none; + width:auto; height:auto; +} +span { + background: lime; + border: 1px solid; +} + </style> +</head> +<body> + +<div style="float:left"> + +<div class="grid"> +<span class="a"></span> +<span class="b abs">b</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="c abs">c</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="d abs">d</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="e abs">e</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="f abs">f</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="g abs">g</span> +</div> + +</div><div style="float:left"> + +<div class="grid"> +<span class="a"></span> +<span class="b abs">b</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="c abs">c</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="d abs">d</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="e abs">e</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="f abs">f</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="g abs">g</span> +</div> + +</div><div style="float:left"> + +<div class="grid zero-size"> +<span class="b abs" style="width:12px">b</span> +</div> + +<div class="grid auto-size"> +<span class="h abs">h</span> +</div> + +<div class="grid" style="height:7px"> +<span class="i abs">i</span> +</div> + +<div class="grid" style="height:7px"> +<span class="j abs">j</span> +</div> + +<div class="grid" style="width:43px; height:53px"> +<span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span> +<span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span> +<span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span> +<span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-002.html b/layout/reftests/css-grid/grid-abspos-items-002.html new file mode 100644 index 0000000000..a045ab0be1 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-002.html @@ -0,0 +1,180 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-items-002-ref.html"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + transform: translate(1px,2px); + border: 1px solid; + grid-auto-flow: row; + grid-auto-columns: 23px; + grid-auto-rows: 7px; + padding: 17px 7px 11px 13px; + width: 100px; + height: 60px; +} +.zero-size { width:0; height:0; } +.auto-size { width:auto; height:auto; } + +.a { + grid-column: 1 / 3; + grid-row: 3 / 5; + background: blue; +} + +.abs { + position: fixed; + top:3px; left:1px; right:5px; bottom:1px; + opacity: 0.7; +} +.b { + grid-column: auto / 2; + grid-row: auto / auto; +} +.c { + grid-column: 9 / auto; /* 9 is outside the grid */ + grid-row: 9 / auto; /* 9 is outside the grid */ +} +.d { + grid-column: auto / 1; + grid-row: 2 / 1; +} +.e { + grid-column: 4 / auto; + grid-row: 3 / auto; +} +.f { + grid-column: 4 / auto; + grid-row: auto / 1; +} +.g { + grid-column: 1 / 3; + grid-row: 2 / 3; +} +.h { + grid-column: auto / auto; + grid-row: auto / auto; +} +.i { + grid-column: span 1 / span 2; + grid-row: span 2 / span A; + background: lime; +} +.j { + grid-column: span A / span 2; + grid-row: span 2 / span 1; + background: lime; +} +span { + background: lime; + border: 1px solid; +} + </style> +</head> +<body> + +<div style="float:left"> + +<div class="grid"> +<span class="a"></span> +<span class="b abs">b</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="c abs">c</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="d abs">d</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="e abs">e</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="f abs">f</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="g abs">g</span> +</div> + +</div><div style="float:left"> + +<div class="grid"> +<span class="a"></span> +<div><span class="b abs">b</span></div> +</div> + +<div class="grid"> +<span class="a"></span> +<x><span class="c abs">c</span></x> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="d abs">d</span> +</div> + +<div class="grid"> +<span class="a"></span> +<div><span class="e abs">e</span></div> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="f abs">f</span> +</div> + +<div class="grid"> +<span class="a"></span> +<x><span class="g abs">g</span></x> +</div> + +</div><div style="float:left"> + +<div class="grid zero-size"> +<span class="b abs">b</span> +</div> + +<div class="grid auto-size"> +<span class="h abs">h</span> +</div> + +<div class="grid" style="height:auto"> +<div style="grid-column: 1 / span 3"></div> +<div class="i abs">i</div> +</div> + +<div class="grid" style="height:auto"> +<div style="grid-column: 1 / span 3"></div> +<div class="j abs">j</div> +</div> + +<div class="grid" style="width:43px; height:53px"> +<span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span> +<span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span> +<span class="abs" style="grid-column-end:1; grid-row-start:1;">c</span> +<span class="abs" style="grid-column-start:1; grid-row-start:1;">d</span> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-003-ref.html b/layout/reftests/css-grid/grid-abspos-items-003-ref.html new file mode 100644 index 0000000000..74cb8e3368 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-003-ref.html @@ -0,0 +1,71 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: block; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 11px 31px 13px / 13px 23px 7px; + margin-right: 4px; + inline-size: 55px; + block-size: 43px; +} + +abs1,abs2 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; +} + +abs2 { background:white; } +.hl abs2 { top:13px;left:11px; height:23px; width:31px; } +.hr abs2 { top:13px;right:11px; height:23px; width:31px; } +.vl abs2 { top:11px;left:13px; height:31px; width:23px; } +.vr abs2 { top:11px;right:13px; height:31px; width:23px; } +.vlr abs2 { bottom:11px;left:13px; height:31px; width:23px; } +.vrl abs2 { top:11px;right:13px; height:31px; width:23px; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-003.html b/layout/reftests/css-grid/grid-abspos-items-003.html new file mode 100644 index 0000000000..89ea7f2b01 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-003.html @@ -0,0 +1,69 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-items-003-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 13px 23px 7px / 11px 31px 13px; + margin-right: 4px; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-004-ref.html b/layout/reftests/css-grid/grid-abspos-items-004-ref.html new file mode 100644 index 0000000000..0f1d6b8a84 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-004-ref.html @@ -0,0 +1,73 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: block; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 11px 13px 15px 17px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 11px 31px 13px / 13px 23px 7px; + margin-right: 4px; + inline-size: 55px; + block-size: 43px; +} + +abs1,abs2 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; + margin:11px 13px 15px 17px; +} + +abs2 { background:white; } +.hl abs2 { top:13px;left:11px; height:23px; width:31px; } +.hr abs2 { top:13px;right:11px; height:23px; width:31px; } +.vl abs2 { top:11px;left:13px; height:31px; width:23px; } +.vr abs2 { top:11px;right:13px; height:31px; width:23px; } +.vlr abs2 { bottom:11px;left:13px; height:31px; width:23px; } +.vrl abs2 { top:11px;right:13px; height:31px; width:23px; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-004.html b/layout/reftests/css-grid/grid-abspos-items-004.html new file mode 100644 index 0000000000..e960440217 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-004.html @@ -0,0 +1,70 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-items-004-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 11px 13px 15px 17px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 13px 23px 7px / 11px 31px 13px; + margin-right: 4px; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-005-ref.html b/layout/reftests/css-grid/grid-abspos-items-005-ref.html new file mode 100644 index 0000000000..fc0c44c2cb --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-005-ref.html @@ -0,0 +1,74 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: block; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 11px 31px 13px / 13px 23px 7px; + margin-right: 4px; + inline-size: 65px; + block-size: 43px; +} + +abs1,abs2 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; + margin:1px; + margin-inline-end:11px; +} + +abs2 { background:white; } +.hl abs2 { top:13px;left:11px; height:23px; width:31px; } +.hr abs2 { top:13px;right:11px; height:23px; width:31px; } +.vl abs2 { top:11px;left:13px; height:31px; width:23px; } +.vr abs2 { top:11px;right:13px; height:31px; width:23px; } +.vlr abs2 { bottom:11px;left:13px; height:31px; width:23px; } +.vrl abs2 { top:11px;right:13px; height:31px; width:23px; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-005.html b/layout/reftests/css-grid/grid-abspos-items-005.html new file mode 100644 index 0000000000..897ce76c4c --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-005.html @@ -0,0 +1,71 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-items-004-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 13px 23px 7px / 11px 31px 13px; + margin-right: 4px; + inline-size: 65px; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-006-ref.html b/layout/reftests/css-grid/grid-abspos-items-006-ref.html new file mode 100644 index 0000000000..efca38b24b --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-006-ref.html @@ -0,0 +1,71 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: block; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 11px 31px 13px / 13px 23px 7px; + margin-right: 4px; + inline-size: 55px; + block-size: 57px; +} + +abs1,abs2 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; + margin-block-end:14px; +} +abs2 { background:white; } +.hl abs2 { top:13px;left:11px; height:23px; width:31px; } +.hr abs2 { top:13px;right:11px; height:23px; width:31px; } +.vl abs2 { top:11px;left:13px; height:31px; width:23px; } +.vr abs2 { top:11px;right:13px; height:31px; width:23px; } +.vlr abs2 { bottom:11px;left:13px; height:31px; width:23px; } +.vrl abs2 { top:11px;right:13px; height:31px; width:23px; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-006.html b/layout/reftests/css-grid/grid-abspos-items-006.html new file mode 100644 index 0000000000..4209a7caad --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-006.html @@ -0,0 +1,70 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-items-006-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 13px 23px 7px / 11px 31px 13px; + margin-right: 4px; + block-size: 57px; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-007-ref.html b/layout/reftests/css-grid/grid-abspos-items-007-ref.html new file mode 100644 index 0000000000..97f5837ff9 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-007-ref.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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: block; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + border-block-start-color: blue; + border-inline-start-color: lime; + inline-size: 55px; + block-size: 43px; + margin-right: 4px; +} + +abs1 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-007.html b/layout/reftests/css-grid/grid-abspos-items-007.html new file mode 100644 index 0000000000..b092f9ea6b --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-007.html @@ -0,0 +1,62 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-items-007-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 13px 23px 7px / 11px 31px 13px; + margin-right: 4px; +} + +abs1 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-008-ref.html b/layout/reftests/css-grid/grid-abspos-items-008-ref.html new file mode 100644 index 0000000000..8131e13454 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-008-ref.html @@ -0,0 +1,62 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: block; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 11px 13px 15px 17px; + border-block-start-color: blue; + border-inline-start-color: lime; + inline-size: 55px; + block-size: 43px; + margin-right: 4px; +} + +abs1 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-008.html b/layout/reftests/css-grid/grid-abspos-items-008.html new file mode 100644 index 0000000000..a3a9d75365 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-008.html @@ -0,0 +1,63 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-items-008-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 11px 13px 15px 17px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 13px 23px 7px / 11px 31px 13px; + margin-right: 4px; +} + +abs1 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-009-ref.html b/layout/reftests/css-grid/grid-abspos-items-009-ref.html new file mode 100644 index 0000000000..1714ec63aa --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-009-ref.html @@ -0,0 +1,63 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: block; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px; + border-block-start-color: blue; + border-inline-start-color: lime; + inline-size: 55px; + block-size: 43px; + margin-right: 4px; + block-size: 57px; +} + +abs1 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-009.html b/layout/reftests/css-grid/grid-abspos-items-009.html new file mode 100644 index 0000000000..35bc6d7488 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-009.html @@ -0,0 +1,64 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-items-009-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 13px 23px 7px / 11px 31px 13px; + margin-right: 4px; + block-size: 57px; +} + +abs1 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-010-ref.html b/layout/reftests/css-grid/grid-abspos-items-010-ref.html new file mode 100644 index 0000000000..53e2a343ce --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-010-ref.html @@ -0,0 +1,62 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: block; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + border-block-start-color: blue; + border-inline-start-color: lime; + inline-size: 65px; + block-size: 43px; + grid-template: 11px 31px 13px / 13px 23px 7px; + margin-right: 4px; +} + +abs1 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-010.html b/layout/reftests/css-grid/grid-abspos-items-010.html new file mode 100644 index 0000000000..abd2774cb0 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-010.html @@ -0,0 +1,63 @@ +<!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: abs pos areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-items-010-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 13px 23px 7px / 11px 31px 13px; + margin-right: 4px; + inline-size: 65px; +} + +abs1 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: grey; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-011-ref.html b/layout/reftests/css-grid/grid-abspos-items-011-ref.html new file mode 100644 index 0000000000..55ddb6da8b --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-011-ref.html @@ -0,0 +1,82 @@ +<!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: abs pos areas in empty grid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215099"> + <style type="text/css"> + +div { + display: block; + position: relative; + float: left; + width: 20px; + height: 20px; + background: red; +} +x div { + padding: 4px; + background: white; +} + +span { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lime; +} + +</style> +</head> +<body> + +There should be no red areas. +<br clear="all"> + +<div><span class="cs"></span></div> +<div><span class="ce"></span></div> +<div><span class="rs"></span></div> +<div><span class="re"></span></div> + +<div><span class="cs ce"></span></div> +<div><span class="cs rs"></span></div> +<div><span class="cs re"></span></div> +<div><span class="ce rs"></span></div> +<div><span class="ce re"></span></div> +<div><span class="rs re"></span></div> + +<div><span class="cs ce rs"></span></div> +<div><span class="cs ce re"></span></div> +<div><span class="rs re cs"></span></div> +<div><span class="rs re ce"></span></div> + +<div><span class="cs ce rs re"></span></div> + +<br clear="all"> +<br clear="all"> + +<x> +<div><span class="cs" style="left:4px"></span></div> +<div><span class="ce" style="right:auto;width:4px"></span></div> +<div><span class="rs" style="top:4px"></span></div> +<div><span class="re" style="bottom:auto;height:4px"></span></div> + +<div><span class="cs ce" style="left:4px;"></span></div> +<div><span class="cs rs" style="left:4px;top:4px"></span></div> +<div><span class="cs re" style="left:4px;bottom:auto;height:4px"></span></div> +<div><span class="ce rs" style="right:auto;width:4px;top:4px"></span></div> +<div><span class="ce re" style="right:auto;width:4px;bottom:auto;height:4px"></span></div> +<div><span class="rs re" style="top:4px"></span></div> + +<div><span class="cs ce rs" style="left:4px;top:4px"></span></div> +<div><span class="cs ce re" style="left:4px;bottom:auto;height:4px"></span></div> +<div><span class="rs re cs" style="left:4px;top:4px"></span></div> +<div><span class="rs re ce" style="top:4px;right:auto;width:4px"></span></div> + +<div><span class="cs ce rs re" style="left:4px;top:4px"></span></div> +</x> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-011.html b/layout/reftests/css-grid/grid-abspos-items-011.html new file mode 100644 index 0000000000..5706998fef --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-011.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>CSS Grid Test: abs pos areas in empty grid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215099"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-items-011-ref.html"> + <style type="text/css"> + +div { + display: grid; + position: relative; + float: left; + width: 20px; + height: 20px; + background: red; +} +div.green { + background: lime; +} +x div { + padding: 4px; + background: white; +} + +span { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lime; +} +span.red { + background: red; +} + +.cs { grid-column-start: 1; } +.ce { grid-column-end: 1; } +.rs { grid-row-start: 1; } +.re { grid-row-end: 1; } + +</style> +</head> +<body> + +There should be no red areas. +<br clear="all"> + +<div><span class="cs"></span></div> +<div class="green"><span class="ce red"></span></div> +<div><span class="rs"></span></div> +<div class="green"><span class="re red"></span></div> + +<div><span class="cs ce"></span></div> +<div><span class="cs rs"></span></div> +<div class="green"><span class="cs re red"></span></div> +<div class="green"><span class="ce rs red"></span></div> +<div class="green"><span class="ce re red"></span></div> +<div><span class="rs re"></span></div> + +<div><span class="cs ce rs"></span></div> +<div class="green"><span class="cs ce re red"></span></div> +<div><span class="rs re cs"></span></div> +<div class="green"><span class="rs re ce red"></span></div> + +<div><span class="cs ce rs re"></span></div> + +<br clear="all"> +<br clear="all"> + +<!-- the same combinations in a grid container with padding --> + +<x> +<div><span class="cs"></span></div> +<div><span class="ce"></span></div> +<div><span class="rs"></span></div> +<div><span class="re"></span></div> + +<div><span class="cs ce"></span></div> +<div><span class="cs rs"></span></div> +<div><span class="cs re"></span></div> +<div><span class="ce rs"></span></div> +<div><span class="ce re"></span></div> +<div><span class="rs re"></span></div> + +<div><span class="cs ce rs"></span></div> +<div><span class="cs ce re"></span></div> +<div><span class="rs re cs"></span></div> +<div><span class="rs re ce"></span></div> + +<div><span class="cs ce rs re"></span></div> +</x> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-012-ref.html b/layout/reftests/css-grid/grid-abspos-items-012-ref.html new file mode 100644 index 0000000000..e0feef2051 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-012-ref.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>Reference: margin:auto on grid abs.pos. child</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783"> + <style type="text/css"> + +div { + display: block; + position: relative; + grid-template-columns: 100px; + grid-template-rows: 100px; + width: 100px; + height: 100px; + border: 1px solid; +} + +span { + display: block; + position: absolute; + background: lime; + width: 20px; + height: 20px; + margin: 5px 7px 11px 13px; + top:0; left:0; right:0; bottom:0; +} + + </style> +</head> +<body> + +<div><span style="margin-left:auto"></span></div> +<div><span style="margin-right:auto"></span></div> +<div><span style="margin-left:auto; margin-right:auto"></span></div> +<div><span style="margin-top:auto"></span></div> +<div><span style="margin-bottom:auto"></span></div> +<div><span style="margin-top:auto; margin-bottom:auto"></span></div> +<div><span style="margin:auto"></span></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-012.html b/layout/reftests/css-grid/grid-abspos-items-012.html new file mode 100644 index 0000000000..69c96640c1 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-012.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 Test: margin:auto on grid abs.pos. child</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos"> + <link rel="match" href="grid-abspos-items-012-ref.html"> + <style type="text/css"> + +div { + display: grid; + position: relative; + grid-template-columns: 100px; + grid-template-rows: 100px; + width: 100px; + height: 100px; + border: 1px solid; +} + +span { + display: block; + position: absolute; + background: lime; + width: 20px; + height: 20px; + margin: 5px 7px 11px 13px; + top:0; left:0; right:0; bottom:0; +} + + </style> +</head> +<body> + +<div><span style="margin-left:auto"></span></div> +<div><span style="margin-right:auto"></span></div> +<div><span style="margin-left:auto; margin-right:auto"></span></div> +<div><span style="margin-top:auto"></span></div> +<div><span style="margin-bottom:auto"></span></div> +<div><span style="margin-top:auto; margin-bottom:auto"></span></div> +<div><span style="margin:auto"></span></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-013-ref.html b/layout/reftests/css-grid/grid-abspos-items-013-ref.html new file mode 100644 index 0000000000..3e4ef381b1 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-013-ref.html @@ -0,0 +1,133 @@ +<!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 abs.pos. child in grid with gutters</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1230695"> + <style type="text/css"> +body { width:800px; } + +.grid { + display: block; + position: relative; + grid-template-columns: repeat(5, 20px); + grid-auto-rows: 10px; + grid-gap: 100px 10px; + border: 1px solid; + padding: 0 3px 0 5px; + height: 40px; + margin-bottom: 2px; +} +.grid.r { + grid-template-columns: 20px; + grid-template-rows: repeat(5, 20px); + height: 160px; + padding: 2px 3px 4px 5px; + float: left; + min-width: 70px; + margin-right: 2px; +} + +x { + position: absolute; + width: 20px; + height: 10px; + background: lime; +} + +a { + position: absolute; + left:0; right:0; bottom:20px; height: 3px; + background: black; +} +b { + position: absolute; + left:0; right:0; bottom:10px; height: 3px; + background: grey; +} +c { + position: absolute; + left:0; right:0; bottom:0; height: 3px; + background: blue; +} + +.r a { + left:50px; top:0; bottom:0; width: 3px; height:auto; +} +.r b { + left:40px; top:0; bottom:0; width: 3px; height:auto; +} +.r c { + left:30px; top:0; bottom:0; width: 3px; height:auto; +} + +x:nth-of-type(1) { left:5px; } +x:nth-of-type(2) { left:125px; } +x:nth-of-type(3) { left:245px; } +x:nth-of-type(4) { left:365px; } + +.r x { left:5px; height:20px; } +.r x:nth-of-type(1) { top:2px; } +.r x:nth-of-type(2) { top:32px; } +.r x:nth-of-type(3) { top:62px; } +.r x:nth-of-type(4) { top:92px; } + +.s x:nth-of-type(1) { left:120px; } +.s x:nth-of-type(2) { left:255px; } +.s x:nth-of-type(3) { left:390px; } +.s x:nth-of-type(4) { left:525px; } + + </style> +</head> +<body> + +<div class="grid"> +<x></x><x></x><x></x><x></x> +<a style="left:125px; width:140px"></a><b style="width:265px"></b><c style="left:365px"></c> +</div> + +<div class="grid"> +<x></x><x></x><x></x><x></x> +<a style="left:5px; width:260px"></a><b style="width:5px"></b><c style="left:5px"></c> +</div> + +<div class="grid"> +<x></x><x></x><x></x><x></x> +<a style="left:505px"></a><b style="width:505px"></b><c style="left:505px"></c> +</div> + +<div class="grid s"> +<x></x><x></x><x></x><x></x> +<a style="left:255px; width:155px"></a><b style="width:410px"></b><c style="left:525px"></c> +</div> + +<div class="grid s"> +<x></x><x></x><x></x><x></x> +<a style="left:120px; width:290px"></a><b style="width:120px"></b><c style="left:120px"></c> +</div> + +<div class="grid s"> +<x></x><x></x><x></x><x></x> +<a style="left:680px"></a><b style="width:680px"></b><c style="left:680px"></c> +</div> + +<div class="grid r"> +<x></x><x></x><x></x><x></x> +<a style="top:32px; height:50px"></a><b style="height:82px"></b><c style="top:92px"></c> +</div> + +<div class="grid r"> +<x></x><x></x><x></x><x></x> +<a style="top:2px; height:80px"></a><b style="height:2px"></b><c style="top:2px"></c> +</div> + +<div class="grid r"> +<x></x><x></x><x></x><x></x> +<a style="top:142px"></a><b style="height:142px"></b><c style="top:142px"></c> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-013.html b/layout/reftests/css-grid/grid-abspos-items-013.html new file mode 100644 index 0000000000..9cb3c82a3c --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-013.html @@ -0,0 +1,120 @@ +<!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 abs.pos. child in grid with gutters</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1230695"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos"> + <link rel="match" href="grid-abspos-items-013-ref.html"> + <style type="text/css"> +body { width:800px; } + +.grid { + display: grid; + position: relative; + grid-template-columns: repeat(5, 20px); + grid-auto-rows: 10px; + grid-gap: 10px 100px; + border: 1px solid; + padding: 0 3px 0 5px; + height: 40px; + margin-bottom: 2px; +} +.grid.r { + grid-template-columns: 20px; + grid-template-rows: repeat(5, 20px); + height: 160px; + padding: 2px 3px 4px 5px; + float: left; + min-width: 70px; + margin-right: 2px; +} +.c.s { + justify-content: space-evenly; + grid-gap: 0; +} + +x { + background: lime; +} + +a { + position: absolute; + left:0; right:0; bottom:20px; height: 3px; + background: black; +} +b { + position: absolute; + left:0; right:0; bottom:10px; height: 3px; + background: grey; +} +c { + position: absolute; + left:0; right:0; bottom:0; height: 3px; + background: blue; +} + +.r a { + left:50px; top:0; bottom:0; width: 3px; height:auto; +} +.r b { + left:40px; top:0; bottom:0; width: 3px; height:auto; +} +.r c { + left:30px; top:0; bottom:0; width: 3px; height:auto; +} + + </style> +</head> +<body> + +<div class="grid c"> +<x></x><x></x><x></x><x></x> +<a style="grid-column:2/4"></a><b style="grid-column:auto/4"></b><c style="grid-column:4/auto"></c> +</div> + +<div class="grid c"> +<x></x><x></x><x></x><x></x> +<a style="grid-column:1/4"></a><b style="grid-column:auto/1"></b><c style="grid-column:1/auto"></c> +</div> + +<div class="grid c"> +<x></x><x></x><x></x><x></x> +<a style="grid-column:6/6"></a><b style="grid-column:auto/6"></b><c style="grid-column:6/auto"></c> +</div> + +<div class="grid c s"> +<x></x><x></x><x></x><x></x> +<a style="grid-column:2/4"></a><b style="grid-column:auto/4"></b><c style="grid-column:4/auto"></c> +</div> + +<div class="grid c s"> +<x></x><x></x><x></x><x></x> +<a style="grid-column:1/4"></a><b style="grid-column:auto/1"></b><c style="grid-column:1/auto"></c> +</div> + +<div class="grid c s"> +<x></x><x></x><x></x><x></x> +<a style="grid-column:6/6"></a><b style="grid-column:auto/6"></b><c style="grid-column:6/auto"></c> +</div> + +<div class="grid r"> +<x></x><x></x><x></x><x></x> +<a style="grid-row:2/4"></a><b style="grid-row:auto/4"></b><c style="grid-row:4/auto"></c> +</div> + +<div class="grid r"> +<x></x><x></x><x></x><x></x> +<a style="grid-row:1/4"></a><b style="grid-row:auto/1"></b><c style="grid-row:1/auto"></c> +</div> + +<div class="grid r"> +<x></x><x></x><x></x><x></x> +<a style="grid-row:6/6"></a><b style="grid-row:auto/6"></b><c style="grid-row:6/auto"></c> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-014-ref.html b/layout/reftests/css-grid/grid-abspos-items-014-ref.html new file mode 100644 index 0000000000..2cc4989b6a --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-014-ref.html @@ -0,0 +1,78 @@ +<!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: abs pos static position (grid container as abs.pos. CB)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + border-style: solid; + border-width: 1px 3px 5px 7px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 3px 51px 5px / 5px 33px 7px; + margin-right: 4px; +} + +abs1,abs2,abs3,abs4 { + grid-area: 2 / 2 / 3 / 3; + position: absolute; +} +abs1 { top:17px; bottom:2px; background:lime; } +abs2 { right:13px; left:3px; background:pink; } +abs3 { right:5px; left:11px; top:9px; background:cyan; } +abs4 { top:23px; bottom:1px; left:11px; background:yellow; } +abs1::before { content:"1";} +abs2::before { content:"2";} +abs3::before { content:"3";} +abs4::before { content:"4";} + +x { + position: relative; + grid-area: 2 / 2 / 3 / 3; + background: grey; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +document.body.style.display="none"; +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(x = document.createElement("x")); + x.appendChild(document.createElement("abs1")); + x.appendChild(document.createElement("abs2")); + x.appendChild(document.createElement("abs3")); + x.appendChild(document.createElement("abs4")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +document.body.style.display=""; +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-014.html b/layout/reftests/css-grid/grid-abspos-items-014.html new file mode 100644 index 0000000000..000914ca0f --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-014.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: abs pos static position (grid container as abs.pos. CB)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#static-position"> + <link rel="match" href="grid-abspos-items-014-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border-style: solid; + border-width: 1px 3px 5px 7px; + border-block-start-color: blue; + border-inline-start-color: lime; + grid-template: 3px 51px 5px / 5px 33px 7px; + margin-right: 4px; +} + +abs1,abs2,abs3,abs4 { + grid-area: 2 / 2 / 3 / 3; + position: absolute; +} +abs1 { top:17px; bottom:2px; background:lime; } +abs2 { right:13px; left:3px; background:pink; } +abs3 { right:5px; left:11px; top:9px; background:cyan; } +abs4 { top:23px; bottom:1px; left:11px; background:yellow; } +abs1::before { content:"1";} +abs2::before { content:"2";} +abs3::before { content:"3";} +abs4::before { content:"4";} + +x { + grid-area: 2 / 2 / 3 / 3; + background: grey; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +document.body.style.display="none"; +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + div.appendChild(document.createElement("x")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +document.body.style.display=""; +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-015-ref.html b/layout/reftests/css-grid/grid-abspos-items-015-ref.html new file mode 100644 index 0000000000..974f7cbc6a --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-015-ref.html @@ -0,0 +1,103 @@ +<!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 Reference: abs pos static position (ancestor of grid container as abs.pos. CB)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + position: relative; + display: grid; + padding: 1px 3px 5px 7px; + grid-template: 25px 33px 7px / 30px 51px 5px; + margin-right: 4px; + height: 100px; + width: 92px; +} +.wrap { + position: relative; + float: left; + padding: 3px 5px 7px 9px; + border-style: solid; + border-width: 1px 3px 5px 7px; + border-block-start-color: blue; + border-inline-start-color: lime; + writing-mode: vertical-lr; direction:rtl; + z-index:1; +} + +abs1,abs3,abs4 { + grid-area: 2 / 2 / 3 / 3; + position: absolute; +} +abs1 { width:20px; height:97px; top:-12px; left:-30px; background:lime; } +abs3 { top: -20px; left:-35px; right:-18px; background:cyan; } +abs4 { width:20px; top:-6px; bottom:-53px; background:silver; } +abs1::before { content:"1";} +abs3::before { content:"3";} +abs4::before { content:"4";} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hr abs3 { left:-16px; right:-37px; } +.vl abs3, .vr abs3, .vrl abs3, .vlr abs3 { left:-30px; top:-14px; right:-41px; } +.vr abs3, .vrl abs3 { left:-39px; right:-32px; } +.vrl abs3 { top:-25px; } + +.hr abs1 { left: 61px; } +.vl abs1, .vr abs1, .vrl abs1, .vlr abs1 { top:-6px; left:-25px; } +.vr abs1, .vrl abs1 { left:38px; } +.vrl abs1 { top:-17px; } + +.hl abs4 { left:51px; } +.hr abs4 { left:-20px; } +.vl abs4, .vr abs4, .vrl abs4, .vlr abs4 { top:0px; bottom:-41px; left:-25px; } +.vr abs4, .vrl abs4 { left:38px; } +.vrl abs4 { top:-11px; bottom:-30px; } + +</style> +</head> +<body> + +<script> +document.body.style.display="none"; +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + + div.appendChild(span = document.createElement("span")); + span.appendChild(document.createTextNode("A")); + div.appendChild(document.createElement("abs1")); + div.appendChild(span = document.createElement("span")); + span.appendChild(document.createTextNode("BC")); + + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + var wrap = document.createElement("div"); + wrap.className = "wrap "; + wrap.appendChild(div); + document.body.appendChild(wrap) + } + document.body.appendChild(document.createElement("separator")); +} +document.body.style.display=""; +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-015.html b/layout/reftests/css-grid/grid-abspos-items-015.html new file mode 100644 index 0000000000..25a3427cb4 --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-015.html @@ -0,0 +1,100 @@ +<!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: abs pos static position (ancestor of grid container as abs.pos. CB)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#static-position"> + <link rel="match" href="grid-abspos-items-015-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + padding: 1px 3px 5px 7px; + grid-template: 25px 33px 7px / 30px 51px 5px; + margin-right: 4px; + height: 100px; + width: 92px; +} +.wrap { + position: relative; + float: left; + padding: 3px 5px 7px 9px; + border-style: solid; + border-width: 1px 3px 5px 7px; + border-block-start-color: blue; + border-inline-start-color: lime; + writing-mode: vertical-lr; direction:rtl; +} + +abs1,abs3,abs4 { + grid-area: 2 / 2 / 3 / 3; + position: absolute; + display: block; /* Avoid bug 1769072 */ +} + +/* Specify width or provide enough constraint to avoid bug 1769102 */ +abs1 { width:20px; top:17px; bottom:2px; background:lime; } +abs3 { right:5px; left:11px; top:9px; background:cyan; } +abs4 { width:20px; top:23px; bottom:1px; background:silver; } +abs1::before { content:"1";} +abs3::before { content:"3";} +abs4::before { content:"4";} + +x { + grid-area: 2 / 2 / 3 / 3; +} +y { + grid-area: 3 / 3; + display: block; +} +z { + grid-area: 1 / 3; + display: block; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +document.body.style.display="none"; +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createTextNode("A")); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createTextNode("BC")); + div.appendChild(y = document.createElement("y")); + y.appendChild(document.createElement("abs3")); + div.appendChild(z = document.createElement("z")); + z.appendChild(document.createElement("abs4")); + var wrap = document.createElement("div"); + wrap.className = "wrap "; + wrap.appendChild(div); + document.body.appendChild(wrap) + } + document.body.appendChild(document.createElement("separator")); +} +document.body.style.display=""; +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-abspos-items-016.html b/layout/reftests/css-grid/grid-abspos-items-016.html new file mode 100644 index 0000000000..fab024325a --- /dev/null +++ b/layout/reftests/css-grid/grid-abspos-items-016.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>CSS Grid Test: abs pos static position (ancestor of grid container as abs.pos. CB)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#static-position"> + <link rel="match" href="grid-abspos-items-015-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + padding: 1px 3px 5px 7px; + grid-template: 25px 33px 7px / 30px 51px 5px; + margin-right: 4px; + height: 100px; + width: 92px; +} +.wrap { + position: relative; + float: left; + padding: 3px 5px 7px 9px; + border-style: solid; + border-width: 1px 3px 5px 7px; + border-block-start-color: blue; + border-inline-start-color: lime; + writing-mode: vertical-lr; direction:rtl; +} + +abs1,abs2,abs3,abs4 { + grid-area: 2 / 2 / 3 / 3; + position: absolute; + /* This is the only difference with grid-abspos-items-015.html */ + display: inline list-item; + list-style-type: none; +} +abs1 { top:17px; bottom:2px; background:lime; } +abs2 { right:13px; left:3px; background:pink; } +abs3 { right:5px; left:11px; top:9px; background:cyan; } +abs4 { top:23px; bottom:1px; background:silver; } +abs1::before { content:"1";} +abs2::before { content:"2";} +abs3::before { content:"3";} +abs4::before { content:"4";} + +x { + grid-area: 2 / 2 / 3 / 3; +} +y { + grid-area: 3 / 3; + display: block; +} +z { + grid-area: 1 / 3; + display: block; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +<script> +document.body.style.display="none"; +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +for (var i = 0; i < wm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + var div = document.createElement("div"); + div.className = "grid " + wm[i]; + div.appendChild(document.createTextNode("A")); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createTextNode("BC")); + div.appendChild(y = document.createElement("y")); + y.appendChild(document.createElement("abs3")); + div.appendChild(z = document.createElement("z")); + z.appendChild(document.createElement("abs4")); + var wrap = document.createElement("div"); + wrap.className = "wrap "; + wrap.appendChild(div); + document.body.appendChild(wrap) + } + document.body.appendChild(document.createElement("separator")); +} +document.body.style.display=""; +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-align-content-001-ref.html b/layout/reftests/css-grid/grid-align-content-001-ref.html new file mode 100644 index 0000000000..ab4ad2d298 --- /dev/null +++ b/layout/reftests/css-grid/grid-align-content-001-ref.html @@ -0,0 +1,91 @@ +<!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</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 3px 5px 7px / 11px 7px 5px; + padding: 1px 1px 3px 2px; + margin-right: 4px; + width: 40px; + height: 40px; +} + +item1,item2,item3 { + display: block; + position: relative; + background: grey; + justify-self: stretch; + align-self: stretch; +} + +item1 { grid-area: 1 / 1; } +item2 { grid-area: 2 / 2; } +item3 { grid-area: 3 / 3; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.aend *, .aflexend * { inset-block-start:25px; } +.acenter * { inset-block-start:12.5px; } + + +.aspace-between item2 { inset-block-start:12.5px; } +.aspace-between item3 { inset-block-start:25px; } + +.aspace-around item1 { inset-block-start:4.1666px; } +.aspace-around item2 { inset-block-start:12.5px; } +.aspace-around item3 { inset-block-start:20.8333px; } + +.aspace-evenly item1 { inset-block-start:6.25px; } +.aspace-evenly item2 { inset-block-start:12.5px; } +.aspace-evenly item3 { inset-block-start:18.75px; } + +.astretch2 { grid-template-rows: 1fr 5px 7px; } +.astretch3 { grid-template-rows: 15.5px 17.5px 7px; } +.astretch4 { grid-template-rows: 11.33333px 13.33333px 15.33333px; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "space-between", "space-around", "space-evenly", + "stretch1", "stretch2", "stretch3", "stretch4" ]; +for (var k = 0; k < test.length; ++k) { + for (var i = 0; i < gridwm.length; ++i) { + var div = document.createElement("div"); + div.className = "grid a" + test[k] + " " + gridwm[i]; + div.appendChild(document.createElement("item1")); + div.appendChild(document.createElement("item2")); + div.appendChild(document.createElement("item3")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-align-content-001.html b/layout/reftests/css-grid/grid-align-content-001.html new file mode 100644 index 0000000000..725b654083 --- /dev/null +++ b/layout/reftests/css-grid/grid-align-content-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</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content"> + <link rel="match" href="grid-align-content-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 3px 5px 7px / 11px 7px 5px; + padding: 1px 1px 3px 2px; + margin-right: 4px; + width: 40px; + height: 40px; +} + +item1,item2,item3 { + display: block; + background: grey; + justify-self: stretch; + align-self: stretch; +} + +item1 { grid-area: 1 / 1; } +item2 { grid-area: 2 / 2; } +item3 { grid-area: 3 / 3; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.astart { align-content:start; } +.aend { align-content:end; } +.aflexstart { align-content:flex-start; } +.aflexend { align-content:flex-end; } +.acenter { align-content:center; } +.aleft { align-content:left; } +.aright { align-content:right; } + +.aspace-between{ align-content:space-between; } +.aspace-around { align-content:space-around; } +.aspace-evenly { align-content:space-evenly; } + +.astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch; } +.astretch2 { grid-template-rows: minmax(3px,auto) 5px 7px; } +.astretch3 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) 7px; } +.astretch4 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) minmax(7px,auto); } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "space-between", "space-around", "space-evenly", + "stretch1", "stretch2", "stretch3", "stretch4" ]; +for (var k = 0; k < test.length; ++k) { + for (var i = 0; i < gridwm.length; ++i) { + var div = document.createElement("div"); + div.className = "grid a" + test[k] + " " + gridwm[i]; + div.appendChild(document.createElement("item1")); + div.appendChild(document.createElement("item2")); + div.appendChild(document.createElement("item3")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html new file mode 100644 index 0000000000..e532358b1e --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-definite-001-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: Testing 'auto' min-sizing with definite min-width/height</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } +br { clear:both; } + +.grid { + display: grid; + border: 1px dashed silver; + grid-template-columns: minmax(0,min-content); + grid-template-rows: minmax(0,min-content) minmax(0,min-content); + float: left; + margin-bottom:20px; + align-items: start; + justify-items: start; +} +.v { + writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; +} +.h { + writing-mode: horizontal-tb; + -webkit-writing-mode: horizontal-tb; +} +.bb { + box-sizing: border-box; +} + +span { + display: block; + background: lime; + margin: 7px 13px 50% 20%; + padding:1px 3px 10% 30%; +} + +span.v { + height: 30px; + width: 10px; + border-left: 1px solid; + border-top: 3px solid; +} + +span.h { + width: 30px; + height: 10px; + border-left: 3px solid; + border-top: 1px solid; +} + +b40 { + display: block; + width: 40px; + height: 40px; + border: 1px solid pink; + z-index: 1; position:relative; +} + +.h.r { + height: 42px; + width: 42px; + /* 49px is the percentage basis, i.e. the column size */ + margin-left: calc(0.2 * 49px); + padding: 1px 3px calc(0.1 * 49px) calc(0.3 * 49px); +} +.v.r { + height: 42px; + width: 42px; + /* This margin-left is 20% of 54px-wide grid area */ + /* 27px is the percentage basis, i.e. the column size */ + margin-left: calc(0.2 * 27px); + padding: 1px 3px calc(0.1 * 27px) calc(0.3 * 27px); +} + +.r { position:relative; } + +.t4 { width: 49px; + height: calc(10px /* item min-height */ + + 7px /* item margin-top */ + + 1px /* item padding-top */ + + 1px /* item border-top */ + + calc(0.5 * 49px) /* item margin-bottom */ + + calc(0.1 * 49px) /* item padding-bottom */); + } +.t6 { width:46px; } +.t8 { width: 27px; + height: calc(30px /* item min-height */ + + 7px /* item margin-top */ + + 3px /* item padding-top */ + + 1px /* item border-top */ + + calc(0.5 * 27px) /* item margin-bottom */ + + calc(0.1 * 27px) /* item padding-bottom */); + } + + +xx { + display: block; + background: lime; + padding: 32px 32px calc(0.2 * 32px) calc(0.4 * 32px); + margin: 0 0 calc(0.4 * 32px) calc(0.2 * 32px); +} +.t9, .t10 { + position: relative; + z-index: 1; + grid: calc(32px + calc(0.4 * 32px) + calc(0.2 * 32px)) 0 / 32px; +} + </style> +</head> +<body> + + +<div class="grid"><span class="h"><x></x></span></div> +<div class="grid"><span class="h bb"><x></x></span></div> +<div class="grid"><span class="h"><x></x></span><span class="h"><x></x></span></div> +<div class="grid t4"><span class="h r"><b40></b40></span></div> +<br> +<div class="grid"><span class="v"><x></x></span></div> +<div class="grid"><span class="v bb"><x></x></span></div> +<div class="grid"><span class="v"><x></x></span><span class="v"><x></x></span></div> +<div class="grid t8"><span class="v r"><b40></b40></span></div> + +<div class="grid t9"><xx class="v"></xx></div> +<div class="grid v t10"><xx class="h"></xx></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-definite-001.html b/layout/reftests/css-grid/grid-auto-min-sizing-definite-001.html new file mode 100644 index 0000000000..ecedf1512f --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-definite-001.html @@ -0,0 +1,91 @@ +<!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: 'auto' min-sizing with definite min-width/height</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-definite-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } +br { clear:both; } + +.grid { + display: grid; + border: 1px dashed silver; + grid-template-columns: minmax(auto,0); + grid-template-rows: minmax(auto,0) minmax(auto,0); + float: left; + margin-bottom:20px; + align-items: start; + justify-items: start; +} +.v { + writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; +} +.h { + writing-mode: horizontal-tb; + -webkit-writing-mode: horizontal-tb; +} +.bb { + box-sizing: border-box; +} + +span { + display: block; + background: lime; + margin: 7px 13px 50% 20%; + padding:1px 3px 10% 30%; +} + +span.v { + min-height: 30px; + min-width: 10px; + border-left: 1px solid; + border-top: 3px solid; +} + +span.h { + min-width: 30px; + min-height: 10px; + border-left: 3px solid; + border-top: 1px solid; +} + +b40 { + display: block; + width: 40px; + height: 40px; + border: 1px solid pink; +} + +xx { + display: block; + background: lime; + padding:32px 32px 20% 40%; + margin: 0 0 40% 20%; +} + + </style> +</head> +<body> + +<div class="grid"><span class="h"><x></x></span></div> +<div class="grid"><span class="h bb"><x></x></span></div> +<div class="grid"><span class="h"><x></x></span><span class="h"><x></x></span></div> +<div class="grid"><span class="h"><b40></b40></span></div> +<br> +<div class="grid"><span class="v"><x></x></span></div> +<div class="grid"><span class="v bb"><x></x></span></div> +<div class="grid"><span class="v"><x></x></span><span class="v"><x></x></span></div> +<div class="grid"><span class="v"><b40></b40></span></div> + +<div class="grid"><xx class="v"></xx></div> +<div class="grid v"><xx class="h"></xx></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001-ref.html new file mode 100644 index 0000000000..d2320ecbd1 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001-ref.html @@ -0,0 +1,154 @@ +<!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: auto min-sizing with intrinsic min-width</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: minmax(min-content,0) minmax(0,1fr); + border: 1px solid; + width: 500px; + align-items: start; + justify-items: start; +} +span,img { min-height:0; } + +.c1 { border:2px solid; min-width:auto; } +.c3 { background: blue; min-width:min-content; min-width:-webkit-min-content; } +.c4 { background: lime; min-width:max-content; min-width:-webkit-max-content; } +.c5 { background: cyan; min-width:-moz-available; min-width:-webkit-fill-available; } +.c6 { background: yellow; min-width:-moz-fit-content; min-width:-webkit-fit-content; } +.w20 { width: 20px; } +.w450 { width: 450px; } +.max50 { max-width: 50px; } +.h05 { height: 0.5px; } +.h4 { height: 4px; } + +c2 { opacity:0.5; background: grey; min-height:10px; } +i { display:inline-block; width:20px; height:10px; background:blue; } +span, c2 { min-width:0; } +.rel { border:none; padding:2px; position:relative; } +.rel2 { border:none; position:relative; } +z { position:absolute; border:2px solid; width:450px; top:0;bottom:0;left:0; } +.rel2 z { border:none; background:inherit; } + </style> +</head> +<body> + +<!-- +<div class="grid"> + <span class="c1"><i style="width:100px"></i></span><c2></c2> +</div> +--> +<div class="grid"> + <span class="c1"></span><c2></c2> +</div> +<div class="grid"> + <span class="c1 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c1 rel"><z></z><i style="width:100px;margin-right:-80px;"></i></span><c2></c2> +</div> +<!-- TODO: disabled until we have support for "transferred size" +<div class="grid"> + <img class="c1" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1" style="width:12.5px" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 h4" style="width:100px" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 h4 max50"style="width:50px" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 w20" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <span class="c1 rel2" style="height:22px;width:29px"><z style="width:450px;background:lime;border:2px solid;"></z></span><c2></c2> +</div> +<div class="grid"> + <span class="c1 rel2" style="height:6px;width:29px"><z style="width:50px;background:lime;border:2px solid;"></z></span><c2></c2> +</div> +--> + +<!-- +<div class="grid" style="margin-left:300px; width:200px"> + <span class="c3">1 2 3 4 5</span><c2></c2> +</div> +--> +<div class="grid"> + <span class="c4"><i style="width:100px"></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c4"><i style="width:100px"></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c4 rel2"><z><i style="width:100px"></i></z><i style="width:100px"></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c4"><i style="width:100px"></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid" style="margin-left:40px;margin-bottom:100px"> + <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c5 rel2"><z><i style="width:100px"></i></z><i style="width:100px; margin-right:-80px;"></i></span><c2></c2> +</div> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid" style="margin-bottom:2em"> + <span class="c5 w450 max50">1 2 3 4 5</span><c2></c2> +</div> +--> +<div class="grid"> + <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid" style="margin-left:40px;margin-bottom:100px"> + <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c6 rel2"><z><i style="width:100px"></i></z><i style="width:100px; margin-right:-80px;"></i></span><c2></c2> +</div> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid" style="margin-bottom:2em"> + <span class="c6 w450 max50">1 2 3 4 5</span><c2></c2> +</div> +--> +<!-- TODO: disabled until we have support for "transferred size" +<div class="grid"> + <img class="c3" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c4" src="support/lime-25x1.png"><c2></c2> +</div> +--> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid"> + <img class="c5" src="support/lime-25x1.png"><c2></c2> +</div> +--> +<!-- TODO: disabled until we have support for "transferred size" +<div class="grid"> + <img class="c6" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid" style="grid-template-columns:25px 1fr"> + <img class="c6 w450" src="support/lime-25x1.png"><c2 class="rel2"></c2> +</div> +<div class="grid" style="grid-template-columns:25px 1fr"> + <img class="c6 w450 max50" src="support/lime-25x1.png"><c2></c2> +</div> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001.html new file mode 100644 index 0000000000..7d6b0fd94c --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-001.html @@ -0,0 +1,148 @@ +<!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: auto min-sizing with intrinsic min-width</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-intrinsic-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: minmax(auto,0) minmax(0,1fr); + border: 1px solid; + width: 500px; + align-items: start; + justify-items: start; +} +span,img { min-height:0; } + +.c1 { border:2px solid; min-width:auto; } +.c3 { background: blue; min-width:min-content; min-width:-webkit-min-content; } +.c4 { background: lime; min-width:max-content; min-width:-webkit-max-content; } +.c5 { background: cyan; min-width:-moz-available; min-width:-webkit-fill-available; } +.c6 { background: yellow; min-width:-moz-fit-content; min-width:-webkit-fit-content; } +.w20 { width: 20px; } +.w450 { width: 450px; } +.max50 { max-width: 50px; } +.h05 { height: 0.5px; } +.h4 { height: 4px; } + +c2 { opacity:0.5; background: grey; min-height:10px; } +i { display:inline-block; width:20px; height:10px; background:blue; } + </style> +</head> +<body> + +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid"> + <span class="c1"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +--> +<div class="grid"> + <span class="c1"></span><c2></c2> +</div> +<div class="grid"> + <span class="c1 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c1 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<!-- TODO: disabled until we have support for "transferred size" +<div class="grid"> + <img class="c1" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 h05" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 h4" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 h4 max50" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 w20" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 w450" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 w450 max50" src="support/lime-25x1.png"><c2></c2> +</div> +--> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid" style="margin-left:300px; width:200px"> + <span class="c3"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +--> +<div class="grid"> + <span class="c4"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c4 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c4 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c4 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid" style="margin-left:40px;margin-bottom:100px"> + <span class="c5 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c5 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid" style="margin-bottom:2em"> + <span class="c5 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +--> +<div class="grid"> + <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid" style="margin-left:40px;margin-bottom:100px"> + <span class="c6 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c6 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid" style="margin-bottom:2em"> + <span class="c6 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +--> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid"> + <img class="c3" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c4" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c5" src="support/lime-25x1.png"><c2></c2> +</div> +--> +<!-- TODO: disabled until we have support for "transferred size" +<div class="grid"> + <img class="c6" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c6 w450" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c6 w450 max50" src="support/lime-25x1.png"><c2></c2> +</div> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002-ref.html new file mode 100644 index 0000000000..ecc8c3d5f0 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002-ref.html @@ -0,0 +1,155 @@ +<!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: 'auto' min-sizing with intrinsic min-width and overflow:hidden</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: minmax(min-content,0) minmax(0,1fr); + border: 1px solid; + width: 500px; + align-items: start; + justify-items: start; +} +.min4 { grid-template-columns: minmax(4px,0) minmax(0,1fr); } +span,img { min-height:0; } +span, c2 { min-width:0; } + +.c1 { border:2px solid; min-width:auto; } +.c3 { background: blue; min-width:min-content; min-width:-webkit-min-content; } +.c4 { background: lime; min-width:max-content; min-width:-webkit-max-content; } +.c5 { background: cyan; min-width:-moz-available; min-width:-webkit-fill-available; } +.c6 { background: yellow; min-width:-moz-fit-content; min-width:-webkit-fit-content; } +.w20 { width: 20px; } +.w450 { width: 450px; } +.max50 { max-width: 50px; } +.h05 { height: 0.5px; } +.h4 { height: 4px; } + +c2 { opacity:0.5; background: grey; min-height:10px; } +i { display:inline-block; width:20px; height:10px; background:blue; } +.rel { border:none; padding:2px; position:relative; } +.rel2 { border:none; position:relative; } +z { position:absolute; border:2px solid; width:450px; top:0;bottom:0;left:0; } +.rel2 z { border:none; background:inherit; } +.hide { overflow:hidden; } + </style> +</head> +<body> + +<!-- +<div class="grid min4"> + <span class="c1 hide"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +--> +<div class="grid"> + <span class="c1"></span><c2></c2> +</div> +<div class="grid min4"> + <span class="c1 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid min4"> + <span class="c1 rel"><z></z><i style="width:100px"></i></span><c2></c2> +</div> +<!-- TODO: disabled until we have support for "transferred size" +<div class="grid min4"> + <img class="c1" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid min4"> + <img class="c1" style="width:12.5px" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid min4"> + <img class="c1 h4" style="width:100px" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid min4"> + <img class="c1 h4 max50"style="width:50px" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid min4"> + <img class="c1 w20" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid min4"> + <span class="c1 rel2" style="height:22px;width:29px"><z style="width:450px;background:lime;border:2px solid;"></z></span><c2></c2> +</div> +<div class="grid min4"> + <span class="c1 rel2" style="height:6px;width:29px"><z style="width:50px;background:lime;border:2px solid;"></z></span><c2></c2> +</div> +--> +<!-- +<div class="grid" style="margin-left:300px; width:200px"> + <span class="c3">1 2 3 4 5</span><c2></c2> +</div> +--> +<div class="grid"> + <span class="c4"><i style="width:100px"></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c4"><i style="width:100px"></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c4 rel2"><z><i style="width:100px"></i></z><i style="width:100px"></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c4"><i style="width:100px"></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid" style="margin-left:40px;margin-bottom:100px"> + <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c5 rel2"><z><i style="width:100px"></i></z><i style="width:100px; margin-right:-80px;"></i></span><c2></c2> +</div> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid" style="margin-bottom:2em"> + <span class="c5 w450 max50">1 2 3 4 5</span><c2></c2> +</div> +--> +<div class="grid"> + <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid" style="margin-left:40px;margin-bottom:100px"> + <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c6 rel2"><z><i style="width:100px"></i></z><i style="width:100px; margin-right:-80px;"></i></span><c2></c2> +</div> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid" style="margin-bottom:2em"> + <span class="c6 w450 max50">1 2 3 4 5</span><c2></c2> +</div> +--> +<!-- TODO: disabled until we have support for "transferred size" +<div class="grid"> + <img class="c3" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c4" src="support/lime-25x1.png"><c2></c2> +</div> +--> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid"> + <img class="c5" src="support/lime-25x1.png"><c2></c2> +</div> +--> +<!-- TODO: disabled until we have support for "transferred size" +<div class="grid"> + <img class="c6" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid" style="grid-template-columns:25px 1fr"> + <img class="c6 w450" src="support/lime-25x1.png"><c2 class="rel2"></c2> +</div> +<div class="grid" style="grid-template-columns:25px 1fr"> + <img class="c6 w450 max50" src="support/lime-25x1.png"><c2></c2> +</div> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002.html new file mode 100644 index 0000000000..9df842138f --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-002.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: 'auto' min-sizing with intrinsic min-width and overflow:hidden</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-intrinsic-002-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: minmax(auto,0) minmax(0,1fr); + border: 1px solid; + width: 500px; + align-items: start; + justify-items: start; +} +span,img { min-height:0; overflow:hidden; } + +.c1 { border:2px solid; min-width:auto; } +.c3 { background: blue; min-width:min-content; min-width:-webkit-min-content; } +.c4 { background: lime; min-width:max-content; min-width:-webkit-max-content; } +.c5 { background: cyan; min-width:-moz-available; min-width:-webkit-fill-available; } +.c6 { background: yellow; min-width:-moz-fit-content; min-width:-webkit-fit-content; } +.w20 { width: 20px; } +.w450 { width: 450px; } +.max50 { max-width: 50px; } +.h05 { height: 0.5px; } +.h4 { height: 4px; } + +c2 { opacity:0.5; background: grey; min-height:10px; } +i { display:inline-block; width:20px; height:10px; background:blue; } + </style> +</head> +<body> + +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid"> + <span class="c1"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +--> +<div class="grid"> + <span class="c1"></span><c2></c2> +</div> +<div class="grid"> + <span class="c1 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c1 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<!-- TODO: disabled until we have support for "transferred size" +<div class="grid"> + <img class="c1" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 h05" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 h4" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 h4 max50" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 w20" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 w450" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c1 w450 max50" src="support/lime-25x1.png"><c2></c2> +</div> +--> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid" style="margin-left:300px; width:200px"> + <span class="c3"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +--> +<div class="grid"> + <span class="c4"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c4 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c4 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c4 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c5"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid" style="margin-left:40px;margin-bottom:100px"> + <span class="c5 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c5 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid" style="margin-bottom:2em"> + <span class="c5 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +--> +<div class="grid"> + <span class="c6"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid" style="margin-left:40px;margin-bottom:100px"> + <span class="c6 w20"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<div class="grid"> + <span class="c6 w450"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid" style="margin-bottom:2em"> + <span class="c6 w450 max50"><i></i><i></i><i></i><i></i><i></i></span><c2></c2> +</div> +--> +<!-- TODO: disabled until we have support for "transferred size" +<div class="grid"> + <img class="c3" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c4" src="support/lime-25x1.png"><c2></c2> +</div> +--> +<!-- TODO: row height doesn't seem right - revisit after bug 1174569 +<div class="grid"> + <img class="c5" src="support/lime-25x1.png"><c2></c2> +</div> +--> +<!-- TODO: disabled until we have support for "transferred size" +<div class="grid"> + <img class="c6" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c6 w450" src="support/lime-25x1.png"><c2></c2> +</div> +<div class="grid"> + <img class="c6 w450 max50" src="support/lime-25x1.png"><c2></c2> +</div> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003-ref.html new file mode 100644 index 0000000000..2bbce7e175 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003-ref.html @@ -0,0 +1,66 @@ +<!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: min-width|min-height:auto</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + width: 60px; + grid-template-columns: 30px 30px; + grid-auto-rows: 30px; + align-items: start; + justify-items: start; + border: 3px solid blue; +} +span { + border: 1px solid; + background: lime; + min-width:0; + min-height:0; +} +</style> +</head> +<body> + +<div class="grid"> + <span>a</span> + <span style="width:max-content">IAmReallyWideAndTheBorderShouldSurroundMe</span> +</div> + +<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre> +<div class="grid"> + <span>a</span> + <span style="width: 130%">IAmReallyWideButIHaveADefiniteWidthSoIOverflow</span> + <span>c</span> + <span style="width: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span> + <span style="width: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span> + <span style="width: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span> +</div> + +<pre>Now the same tests for 'height':</pre> + +<div class="grid" style="margin-bottom:50px;"> + <span>a</span> + <span style="font-size:72px;width:max-content;height:max-content">IAmReallyTall</span> + <span>c</span> + <span>d</span> +</div> + +The border shouldn't shrink-wrap the text vertically below, due to definite "height" values: +<div class="grid"> + <span>a</span> + <span style="font-size:72px; height:10%;width:max-content">IAmReallyTall</span> + <span>c</span> + <span style="font-size:72px; height:10px;width:max-content">SameHere</span> + <span style="font-size:72px; height:40px;width:max-content">SameHere</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003.html new file mode 100644 index 0000000000..dddfe96e06 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-003.html @@ -0,0 +1,66 @@ +<!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: min-width|min-height:auto</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-intrinsic-003-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + width: 60px; + grid-template-columns: 30px 30px; + grid-auto-rows: 30px; + align-items: start; + justify-items: start; + border: 3px solid blue; +} +span { + border: 1px solid; + background: lime; +} +</style> +</head> +<body> + +<div class="grid"> + <span>a</span> + <span>IAmReallyWideAndTheBorderShouldSurroundMe</span> +</div> + +<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre> +<div class="grid"> + <span>a</span> + <span style="width: 130%">IAmReallyWideButIHaveADefiniteWidthSoIOverflow</span> + <span>c</span> + <span style="width: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span> + <span style="width: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span> + <span style="width: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span> +</div> + +<pre>Now the same tests for 'height':</pre> + +<div class="grid" style="margin-bottom:50px;"> + <span>a</span> + <span style="font-size:72px">IAmReallyTall</span> + <span>c</span> + <span>d</span> +</div> + +The border shouldn't shrink-wrap the text vertically below, due to definite "height" values: +<div class="grid"> + <span>a</span> + <span style="font-size:72px; height:10%">IAmReallyTall</span> + <span>c</span> + <span style="font-size:72px; height:10px">SameHere</span> + <span style="font-size:72px; height:40px">SameHere</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004-ref.html new file mode 100644 index 0000000000..adce0b3754 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004-ref.html @@ -0,0 +1,75 @@ +<!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: min-width|min-height:auto w. vertical writing-mode</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + width: 60px; + grid-template-columns: 30px 30px; + grid-auto-rows: 30px; + align-items: start; + justify-items: start; + border: 3px solid blue; + writing-mode: vertical-rl; + direction: ltr; + margin-left: 50px; +} +span { + border: 1px solid; + background: lime; + min-width:0; + min-height:0; +} +pre { + writing-mode: vertical-rl; + direction: ltr; + float: left; +} +</style> +</head> +<body> + +<div class="grid" style="margin-left:0"> + <span>a</span> + <span style="height:max-content">IAmReallyWideAndTheBorderShouldSurroundMe</span> +</div> + +<pre>The border shouldn't shrink-wrap the wide text below, due to definite "height" values:</pre> +<div class="grid"> + <span>a</span> + <span style="height: 130%;">IAmReallyWideButIHaveADefiniteHeightSoIOverflow</span> + <span>c</span> + <span style="height: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span> + <span style="height: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span> + <span style="height: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span> +</div> + +<pre>Now the same tests for 'width':</pre> + +<div class="grid" style="margin-bottom:50px;"> + <span>a</span> + <span style="font-size:72px;height:max-content;width:max-content">IAmReallyTall</span> + <span>c</span> + <span>d</span> +</div> + +<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre> +<div class="grid"> + <span>a</span> + <span style="font-size:72px; width:10%;height:max-content">IAmReallyTall</span> + <span>c</span> + <span style="font-size:72px; width:10px;height:max-content">SameHere</span> + <span style="font-size:72px; width:40px;height:max-content">SameHere</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004.html b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004.html new file mode 100644 index 0000000000..35874df27f --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-intrinsic-004.html @@ -0,0 +1,75 @@ +<!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: min-width|min-height:auto w. vertical writing-mode</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-intrinsic-004-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + width: 60px; + grid-template-columns: 30px 30px; + grid-auto-rows: 30px; + align-items: start; + justify-items: start; + border: 3px solid blue; + writing-mode: vertical-rl; + direction: ltr; + margin-left: 50px; +} +span { + border: 1px solid; + background: lime; +} +pre { + writing-mode: vertical-rl; + direction: ltr; + float: left; +} +</style> +</head> +<body> + +<div class="grid" style="margin-left:0"> + <span>a</span> + <span>IAmReallyWideAndTheBorderShouldSurroundMe</span> +</div> + +<pre>The border shouldn't shrink-wrap the wide text below, due to definite "height" values:</pre> +<div class="grid"> + <span>a</span> + <span style="height: 130%">IAmReallyWideButIHaveADefiniteHeightSoIOverflow</span> + <span>c</span> + <span style="height: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span> + <span style="height: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span> + <span style="height: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span> +</div> + +<pre>Now the same tests for 'width':</pre> + +<div class="grid" style="margin-bottom:50px;"> + <span>a</span> + <span style="font-size:72px">IAmReallyTall</span> + <span>c</span> + <span>d</span> +</div> + +<pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre> +<div class="grid"> + <span>a</span> + <span style="font-size:72px; width:10%">IAmReallyTall</span> + <span>c</span> + <span style="font-size:72px; width:10px">SameHere</span> + <span style="font-size:72px; width:40px">SameHere</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001-ref.html new file mode 100644 index 0000000000..a157cf074a --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testing track 'auto' min-sizing function with 'min-width:min-content' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom:1em; +} + +.col { grid-auto-rows:10px; } +.col img { min-height:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var coltest = [ +"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px", +"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px", +"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px", +"min-height:4px", "min-height:4px; max-width: 30px" +]; +var results = [ +"24px", "48px", "24px", "24px", "24px", "24px", "80px", "24px", "24px", "24px", +"24px", "24px", "24px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < coltest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid col"); + grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-24x2.png"); + img.setAttribute("style",coltest[i] + "; min-width:"+ results[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001.html new file mode 100644 index 0000000000..93a251be43 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-001.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-width:min-content' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-min-content-min-size-001-ref.html"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom: 1em; +} + +.col { grid-template-columns:minmax(auto,0.0001fr); grid-auto-rows:10px; } +.col img { + min-height: 0; + min-width: -webkit-min-content; + min-width: min-content; +} + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var coltest = [ +"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px", +"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px", +"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px", +"min-height:4px", "min-height:4px; max-width: 30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < coltest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid col"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-24x2.png"); + img.setAttribute("style",coltest[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html new file mode 100644 index 0000000000..183f00e24f --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testing track 'auto' min-sizing function with 'min-width:min-content' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom:1em; +} + +.col { grid-template-columns:minmax(auto,0); grid-auto-rows:10px; } +.col img { min-height:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var coltest = [ +"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%", +"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%", +"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px", +"min-height:40%", "min-height:40%; max-width:30px" +]; +var results = [ +"24px", "24px", "24px", "24px", "24px", "24px", "80px", "24px", "24px", "24px", +"24px", "24px", "24px" +]; +var item_width = [ +"48px", "48px", "24px", "24px", "24px;max-width:none;", "360px", "80px", "60px", "24px", "24px", +"24px;max-width:none;", "48px", "30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < coltest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid col"); + grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-24x2.png"); + img.setAttribute("style",coltest[i] + "; width:"+ item_width[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002.html new file mode 100644 index 0000000000..8809d5b06e --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-width:min-content' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-min-content-min-size-002-ref.html"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom: 1em; +} + +.col { grid-template-columns:minmax(auto,0.0001fr); grid-auto-rows:10px; } +.col img { + min-height: 0; + min-width: -webkit-min-content; + min-width: min-content; +} + +br { clear:both; } + + </style> +</head> +<body> + + +<script> +var coltest = [ +"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%", +"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%", +"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px", +"min-height:40%", "min-height:40%; max-width:30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < coltest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid col"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-24x2.png"); + img.setAttribute("style",coltest[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003-ref.html new file mode 100644 index 0000000000..9ec975d62d --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testing track 'auto' min-sizing function with 'min-height:min-content' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom:1em; +} + +.row { } +.row img { min-width:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var coltest = [ +"12px", "12px", "4px", "1px", "2px", "1px", "1px", "1px", "1px", "3px", "5px" +]; +var rowtest = [ +"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px", +"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px", +"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px" +]; +var results = [ +"48px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < rowtest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid row"); + grid.setAttribute("style","grid:minmax("+results[i]+",0) / " + coltest[i]); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-2x24.png"); + img.setAttribute("style",rowtest[i] + "; min-height:"+ results[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003.html new file mode 100644 index 0000000000..ae34753eba --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-003.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-height:min-content' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-min-content-min-size-003-ref.html"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom: 1em; +} + +.row { grid-template-rows:minmax(auto,0.0001fr); } +.row img { + min-width: 0; + min-height: -webkit-min-content; + min-height: min-content; +} + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var rowtest = [ +"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px", +"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px", +"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < rowtest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid row"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-2x24.png"); + img.setAttribute("style",rowtest[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html new file mode 100644 index 0000000000..6533c97b67 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testing track 'auto' min-sizing function with 'min-height:min-content' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } +body { overflow:hidden; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom:1em; +} + +.row { } +.row img { min-width:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var rowtest = [ +"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%", +"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px", +"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%" +]; +var results = [ +"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "312px/52px" +]; +var item_height = [ +"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < rowtest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid row"); + grid.setAttribute("style","grid:" + results[i]); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-2x24.png"); + img.setAttribute("style",rowtest[i] + "; max-height:auto; height:"+ item_height[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004.html new file mode 100644 index 0000000000..c2b650525c --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-height:min-content' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-min-content-min-size-004-ref.html"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } +body { overflow:hidden; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom: 1em; +} + +.row { grid-template-rows:minmax(auto,0.0001fr); } +.row img { + min-width: 0; + min-height: -webkit-min-content; + min-height: min-content; +} + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var rowtest = [ +"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%", +"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px", +"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < rowtest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid row"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-2x24.png"); + img.setAttribute("style",rowtest[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html new file mode 100644 index 0000000000..d435f8f3e1 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html @@ -0,0 +1,147 @@ +<!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: Testing 'auto' min-sizing with percentage sizes</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <style type="text/css"> +body,html { color:black; background:white; font-size:10px; padding:0; margin:0; } + +.wrap { + float: left; +} + +.grid { + display: grid; + float: left; + grid-template-columns: minmax(0,0) 1fr; + grid-auto-rows: 10px; + border: 1px solid; +} + +.item { + grid-row: 1 / 2; + grid-column: 1 / 2; + background:lime; + min-height:10px; +} + +.item2 { + grid-row: 2 / 3; + grid-column: 1 / 2; + min-width:0; + min-height:10px; + justify-self:stretch; + background:grey; +} + +br { clear:both; } + +#px-border .item { border-left:20px solid blue; } +#percent-border .item { padding-left:10%; } + +#px-border .grid { grid-template-columns: minmax(20px,0) 1fr; } +.c100 { grid-template-columns: minmax(100px,0) 1fr; } +.c100100 { grid-template-columns: minmax(100px,0) 100px; } +.c200 { grid-template-columns: 200px; } +#px-border .c100 { grid-template-columns: minmax(120px,0) 1fr; } +#px-border .c100calc100 { grid-template-columns: minmax(120px,0) 1fr; } +#px-border .c100100 { grid-template-columns: minmax(120px,0) 120px; } +#px-border .c200 { grid-template-columns: 240px; } +.c10 { grid-template-columns: minmax(10px,0) 1fr; } +#px-border .c10 { grid-template-columns: minmax(30px,0) 1fr; } + +#percent-border .c100 { grid-template-columns: 100px 0; } +#percent-border .c100calc100 { grid-template-columns: 100px 10px; } +#percent-border .c10 { grid-template-columns: minmax(10px,0) 0; } +#percent-border .c100100 { grid-template-columns: minmax(100px,0) 150px; } +#percent-border .c200 { grid-template-columns: 250px; } + </style> +</head> +<body> + +<table border="1"> +<tr><th>no border/padding/margin</th><th>'border-left:20px'</th><th>'padding-left:10%'</th> +<tr><td id="no-border"></td><td id="px-border"></td><td id="percent-border"></td> +</tr></table> + +<script> +var styles = [ +"width:50%", +"width:50%; max-width:1px", +"width:50%; min-width:100px", +"width:calc(100px)", +"width:calc(100px + 50%)", +"width:100px; padding-right:50%", +"width:calc(100px + 50%); min-width:10px", +"width:calc(10px + 50%); min-width:100px", +"width:calc(75px + 50%); min-width:100px", +"width:calc(100px + 50%); max-width:1px", +"width:calc(100px + 50%); max-width:150px", +"min-width:50%", +"min-width:50%; max-width:1px", +"min-width:50%; width:100px", +"min-width:calc(100px)", +"min-width:calc(100px + 50%)", +"min-width:100px; padding-right:50%", +"min-width:calc(100px + 50%); width:10px", +"min-width:calc(10px + 50%); width:100px", +"min-width:calc(75px + 50%); width:100px", +"min-width:calc(100px + 50%); max-width:1px", +"min-width:calc(100px + 50%); max-width:150px", +]; +var grids = [ +"grid", +"grid", +"grid c100", +"grid c100", +"grid", +"grid c100", +"grid c10", +"grid c100", +"grid c100", +"grid", +"grid", +"grid", +"grid", +"grid c100", +"grid c100", +"grid", +"grid c100", +"grid c10", +"grid c100", +"grid c100", +"grid", +"grid", +]; +var containers = [ "no-border", "px-border", "percent-border" ]; +for (var i = 0; i < containers.length; ++i) { + var c = document.querySelector("#"+containers[i]); + for (var j = 0; j < styles.length; ++j) { + c.appendChild(document.createElement('br')); + c.appendChild(document.createTextNode(styles[j])); + c.appendChild(document.createElement('br')); + var item = document.createElement('div'); + item.setAttribute("class","item"); + item.setAttribute("style", styles[j]); + var item2 = document.createElement('div'); + item2.setAttribute("class","item2"); + var grid = document.createElement('div'); + grid.setAttribute("class",grids[j]); + grid.appendChild(item); + grid.appendChild(item2); + var wrap = document.createElement('div'); + wrap.setAttribute("class","wrap"); + wrap.appendChild(grid); + c.appendChild(wrap); + } +} +</script> + + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-percent-001.html b/layout/reftests/css-grid/grid-auto-min-sizing-percent-001.html new file mode 100644 index 0000000000..6854ad71f2 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-percent-001.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: Testing 'auto' min-sizing with percentage sizes</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-percent-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:10px; padding:0; margin:0; } + +.wrap { + float: left; +} + +.grid { + display: grid; + float: left; + grid-template-columns: minmax(auto,0) 1fr; + grid-auto-rows: 10px; + border: 1px solid; +} + +.item { + grid-row: 1 / 2; + grid-column: 1 / 2; + background:lime; + min-height:10px; +} + +.item2 { + grid-row: 2 / 3; + grid-column: 1 / 2; + min-width:0; + min-height:10px; + justify-self:stretch; + background:grey; +} + +br { clear:both; } + +#px-border .item { border-left:20px solid blue; } +#percent-border .item { padding-left:10%; } + + </style> +</head> +<body> + +<table border="1"> +<tr><th>no border/padding/margin</th><th>'border-left:20px'</th><th>'padding-left:10%'</th> +<tr><td id="no-border"></td><td id="px-border"></td><td id="percent-border"></td> +</tr></table> + +<script> +var styles = [ +"width:50%", +"width:50%; max-width:1px", +"width:50%; min-width:100px", +"width:calc(100px)", +"width:calc(100px + 50%)", +"width:100px; padding-right:50%", +"width:calc(100px + 50%); min-width:10px", +"width:calc(10px + 50%); min-width:100px", +"width:calc(75px + 50%); min-width:100px", +"width:calc(100px + 50%); max-width:1px", +"width:calc(100px + 50%); max-width:150px", +"min-width:50%", +"min-width:50%; max-width:1px", +"min-width:50%; width:100px", +"min-width:calc(100px)", +"min-width:calc(100px + 50%)", +"min-width:100px; padding-right:50%", +"min-width:calc(100px + 50%); width:10px", +"min-width:calc(10px + 50%); width:100px", +"min-width:calc(75px + 50%); width:100px", +"min-width:calc(100px + 50%); max-width:1px", +"min-width:calc(100px + 50%); max-width:150px", +]; +var containers = [ "no-border", "px-border", "percent-border" ]; +for (var i = 0; i < containers.length; ++i) { + var c = document.querySelector("#"+containers[i]); + for (var j = 0; j < styles.length; ++j) { + c.appendChild(document.createElement('br')); + c.appendChild(document.createTextNode(styles[j])); + c.appendChild(document.createElement('br')); + var item = document.createElement('div'); + item.setAttribute("class","item"); + item.setAttribute("style", styles[j]); + var item2 = document.createElement('div'); + item2.setAttribute("class","item2"); + var grid = document.createElement('div'); + grid.setAttribute("class","grid"); + grid.appendChild(item); + grid.appendChild(item2); + var wrap = document.createElement('div'); + wrap.setAttribute("class","wrap"); + wrap.appendChild(grid); + c.appendChild(wrap); + } +} +</script> + + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001-ref.html new file mode 100644 index 0000000000..12f76d401e --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testing track 'auto' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom:1em; +} + +.col { grid-auto-rows:10px; } +.col img { min-height:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var coltest = [ +"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px", +"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px", +"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px", +"min-height:4px", "min-height:4px; max-width: 30px" +]; +var results = [ +"48px", "48px", "12px", "12px", "12px", "360px", "80px", "12px", "20px", "12px", +"6px", "48px", "30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < coltest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid col"); + grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-24x2.png"); + img.setAttribute("style",coltest[i] + "; min-width:"+ results[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001.html new file mode 100644 index 0000000000..147965ff36 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-001.html @@ -0,0 +1,59 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-transferred-size-001-ref.html"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom: 1em; +} + +.col { grid-template-columns:minmax(auto,0.0001fr); grid-auto-rows:10px; } +.col img { min-height:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var coltest = [ +"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px", +"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px", +"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px", +"min-height:4px", "min-height:4px; max-width: 30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < coltest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid col"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-24x2.png"); + img.setAttribute("style",coltest[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html new file mode 100644 index 0000000000..528d63bc72 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testing track 'auto' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom:1em; +} + +.col { grid-template-columns:minmax(auto,0); grid-auto-rows:10px; } +.col img { min-height:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var coltest = [ +"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%", +"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%", +"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px", +"min-height:40%", "min-height:40%; max-width:30px" +]; +var results = [ +"360px", "0px", "0px", "0px", "24px", "360px", "80px", "24px", "20px", "24px", +"6px", "24px", "24px" +]; +var item_width = [ +"0px", "0px", "0px", "0px", "0px", "360px", "80px", "60px", "20px", "24px", +"6px", "48px", "30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < coltest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid col"); + grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-24x2.png"); + img.setAttribute("style",coltest[i] + "; width:"+ item_width[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002.html new file mode 100644 index 0000000000..24bca5b2ed --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002.html @@ -0,0 +1,60 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-transferred-size-002-ref.html"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom: 1em; +} + +.col { grid-template-columns:minmax(auto,0.0001fr); grid-auto-rows:10px; } +.col img { min-height:0; } + +br { clear:both; } + + </style> +</head> +<body> + + +<script> +var coltest = [ +"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%", +"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%", +"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px", +"min-height:40%", "min-height:40%; max-width:30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-columns:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < coltest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid col"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-24x2.png"); + img.setAttribute("style",coltest[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html new file mode 100644 index 0000000000..915c3348a0 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testing track 'auto' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + place-items: start; + margin-bottom:1em; +} + +.row { } +.row img { min-width:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var coltest = [ +"12px", "12px", "4px", "1px", "2px", "1px", "1px", "1px", "1px", "3px", "5px" +]; +var rowtest = [ +"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px", +"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px", +"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px" +]; +var results = [ +"48px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < rowtest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid row"); + grid.setAttribute("style","grid:minmax("+results[i]+",0) / " + coltest[i]); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-2x24.png"); + img.setAttribute("style",rowtest[i] + "; min-height:"+ results[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003.html new file mode 100644 index 0000000000..7a82f050e9 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-003.html @@ -0,0 +1,58 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-transferred-size-003-ref.html"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom: 1em; +} + +.row { grid-template-rows:minmax(auto,0.0001fr); } +.row img { min-width:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var rowtest = [ +"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px", +"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px", +"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < rowtest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid row"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-2x24.png"); + img.setAttribute("style",rowtest[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html new file mode 100644 index 0000000000..4eb623b7d4 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testing track 'auto' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } +body { overflow:hidden; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom:1em; +} + +.row { } +.row img { min-width:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var rowtest = [ +"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%", +"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px", +"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%" +]; +var results = [ +"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "312px/52px" +]; +var item_height = [ +"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < rowtest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid row"); + grid.setAttribute("style","grid:" + results[i]); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-2x24.png"); + img.setAttribute("style",rowtest[i] + "; max-height:auto; height:"+ item_height[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004.html new file mode 100644 index 0000000000..82cb6aadc9 --- /dev/null +++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004.html @@ -0,0 +1,59 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track 'auto' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-auto-min-sizing-transferred-size-004-ref.html"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } +body { overflow:hidden; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom: 1em; +} + +.row { grid-template-rows:minmax(auto,0.0001fr); } +.row img { min-width:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var rowtest = [ +"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%", +"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px", +"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)")); +document.body.appendChild(h3); +for (var i = 0; i < rowtest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid row"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-2x24.png"); + img.setAttribute("style",rowtest[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-clamping-001-ref.html b/layout/reftests/css-grid/grid-clamping-001-ref.html new file mode 100644 index 0000000000..050eac08a4 --- /dev/null +++ b/layout/reftests/css-grid/grid-clamping-001-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Reference: bug 1229999</title> + <style type="text/css"> +html,body { color:black; background-color:white; font-size:16px; padding:0; margin:0; } + +.grid { + position: fixed; + bottom: 0; + display: grid; + grid-template-rows: 10000px; + grid-auto-rows: 1px; + grid-auto-columns: 10px; + border: 1px solid; +} + +x { + position: absolute; + grid-row-start: span 2; + top:0; bottom:0; left:10px; width:20px; + background: grey; +} + </style> +</head> +<body> + + <div class="grid"> + <span style="background:yellow"></span> + <span style="background:lime"></span> + <span style="background:blue"></span> + <span style="background:blue"></span> + <x></x> + </div> + + <div class="grid" style="left:50px"> + <span style="background:yellow"></span> + <span style="background:lime"></span> + <span style="background:blue"></span> + <x></x> + </div> + + <div class="grid" style="left:100px"> + <span style="background:yellow"></span> + <span style="background:yellow"></span> + <span style="background:blue"></span> + <x></x> + </div> + + <div class="grid" style="left:150px"> + <span style="background:yellow"></span> + <span style="background:yellow"></span> + <span style="background:blue"></span> + <x></x> + </div> + + <div class="grid" style="left:200px"> + <span style="background:yellow"></span> + <span style="background:yellow"></span> + <span style="background:blue"></span> + <x></x> + </div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-clamping-001.html b/layout/reftests/css-grid/grid-clamping-001.html new file mode 100644 index 0000000000..7d96b2e852 --- /dev/null +++ b/layout/reftests/css-grid/grid-clamping-001.html @@ -0,0 +1,78 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1229999</title> + <style type="text/css"> +html,body { color:black; background-color:white; font-size:16px; padding:0; margin:0; } + +.grid { + position: fixed; + bottom: 0; + display: grid; + grid-auto-rows: 1px; + grid-auto-columns: 10px; + border: 1px solid; +} + +x { + position: absolute; + grid-row-start: span 2; + top:0; bottom:0; left:10px; width:20px; + background: grey; +} +y { background:blue; } +y:nth-of-type(2n+1) { background:lime; } + </style> +</head> +<body> + + <div class="grid"> + <span style="grid-row-start: A -4;"></span> + <span style="grid-row-end: span 134217729; background:yellow"></span> + <y></y><y></y><y></y><y></y><y></y><y></y> + <y></y><y></y><y></y><y></y><y></y><y></y> + <x></x> + </div> + + <div class="grid" style="left:50px;"> + <span style="grid-row-start: A -3;"></span> + <span style="grid-row-end: span 134217729; background:yellow"></span> + <y></y><y></y><y></y><y></y><y></y><y></y> + <y></y><y></y><y></y><y></y><y></y><y></y> + <x></x> + </div> + + <div class="grid" style="left:100px;"> + <span style="grid-row-start: A -2;"></span> + <span style="grid-row-end: span 134217729; background:yellow"></span> + <y></y><y></y><y></y><y></y><y></y><y></y> + <y></y><y></y><y></y><y></y><y></y><y></y> + <x></x> + </div> + + <div class="grid" style="left:150px;"> + <span style="grid-row-start: A -1;"></span> + <span style="grid-row-end: span 134217729; background:yellow"></span> + <y></y><y></y><y></y><y></y><y></y><y></y> + <y></y><y></y><y></y><y></y><y></y><y></y> + <x></x> + </div> + + <div class="grid" style="left:150px;"> + <span style="grid-row-start: 1;"></span> + <span style="grid-row-end: span 134217729; background:yellow"></span> + <y></y><y></y><y></y><y></y><y></y><y></y> + <y></y><y></y><y></y><y></y><y></y><y></y> + <x></x> + </div> + + <div class="grid" style="left:200px;"> + <span style="grid-row-end: span 134217729; background:yellow"></span> + <y></y><y></y><y></y><y></y><y></y><y></y> + <y></y><y></y><y></y><y></y><y></y><y></y> + <x></x> + </div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-clamping-002-ref.html b/layout/reftests/css-grid/grid-clamping-002-ref.html new file mode 100644 index 0000000000..d605ff9f1b --- /dev/null +++ b/layout/reftests/css-grid/grid-clamping-002-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Reference: Clamp number of auto-fill tracks</title> + <style type="text/css"> +html,body { color:black; background-color:white; font-size:16px; padding:0; margin:0; } + +.grid { + position: fixed; + bottom: 0; + display: grid; + grid-template-rows: 10000px; + grid-auto-rows: 1px; + grid-auto-columns: 10px; + border: 1px solid; +} + +x { + position: absolute; + grid-row-start: span 2; + top:0; bottom:0; left:10px; width:20px; + background: grey; +} + </style> +</head> +<body> + + <div class="grid"> + <span style="background:yellow"></span> + <span style="background:lime"></span> + <span style="background:blue"></span> + <span style="background:lime"></span> + <span style="background:blue"></span> + <x></x> + </div> + + <div class="grid" style="left:50px"> + <span style="background:yellow"></span> + <span style="background:lime"></span> + <span style="background:blue"></span> + <span style="background:lime"></span> + <x></x> + </div> + + <div class="grid" style="left:100px"> + <span style="background:yellow"></span> + <span style="background:lime"></span> + <span style="background:blue"></span> + <x></x> + </div> + + <div class="grid" style="left:150px"> + <span style="background:yellow"></span> + <span style="background:yellow"></span> + <span style="background:yellow"></span> + <x></x> + </div> + + <div class="grid" style="left:200px"> + <span style="background:yellow"></span> + <span style="background:yellow"></span> + <span style="background:yellow"></span> + <x></x> + </div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-clamping-002.html b/layout/reftests/css-grid/grid-clamping-002.html new file mode 100644 index 0000000000..cb3db0d276 --- /dev/null +++ b/layout/reftests/css-grid/grid-clamping-002.html @@ -0,0 +1,75 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase: Clamp number of auto-fill tracks</title> + <style type="text/css"> +html,body { color:black; background-color:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + position: fixed; + bottom: 0; + height: 9999px; /* results in 9999 rows, i.e. the max line is 10000 */ + grid-template-rows: repeat(auto-fill, 1px); + grid-template-columns: 10px; + grid-auto-flow: column; + border: 1px solid; +} + +x { + position: absolute; + grid-row-start: span 2; + top:0; bottom:0; left:10px; width:20px; + background: grey; +} +y { background:blue; } +y:nth-of-type(2n+1) { background:lime; } + </style> +</head> +<body> + + <div class="grid"> + <span style="grid-row: 1/ span 9995; background:yellow"></span> + <y></y><y></y><y></y><y></y><y></y><y></y> + <y></y><y></y><y></y><y></y><y></y><y></y> + <x></x> + </div> + + <div class="grid" style="left:50px;"> + <span style="grid-row: 1/ span 9996; background:yellow"></span> + <y></y><y></y><y></y><y></y><y></y><y></y> + <y></y><y></y><y></y><y></y><y></y><y></y> + <x></x> + </div> + + <div class="grid" style="left:100px;"> + <span style="grid-row: 1/ span 9997; background:yellow"></span> + <y></y><y></y><y></y><y></y><y></y><y></y> + <y></y><y></y><y></y><y></y><y></y><y></y> + <x></x> + </div> + + <div class="grid" style="left:150px;"> + <span style="grid-row: 1/ span 9998; background:yellow"></span> + <y></y><y></y><y></y><y></y><y></y><y></y> + <y></y><y></y><y></y><y></y><y></y><y></y> + <x></x> + </div> + + <div class="grid" style="left:150px;"> + <span style="grid-row: 1/ span 9999; background:yellow"></span> + <y></y><y></y><y></y><y></y><y></y><y></y> + <y></y><y></y><y></y><y></y><y></y><y></y> + <x></x> + </div> + + <div class="grid" style="left:200px;"> + <span style="grid-row: 1/ span 10000; background:yellow"></span> + <y></y><y></y><y></y><y></y><y></y><y></y> + <y></y><y></y><y></y><y></y><y></y><y></y> + <x></x> + </div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html b/layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html new file mode 100644 index 0000000000..da30a8b89b --- /dev/null +++ b/layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html @@ -0,0 +1,89 @@ +<!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: Testing track max-sizing 'max-content'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: block; + border: dashed blue; + float:left; + clear:left; +} + +.c1 { width:40px; margin-bottom: 2px; margin-right: 47px; } +.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; } +.c3 { width:10px; margin: 2px 18px 1px 71px; } + +span { + display: block; + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 1px 5px; +} + +x { display:inline-block; width:10px; height:18px; } + </style> +</head> +<body> + +<div class="grid"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +</div> + +<div class="grid"> +<span class="c1" style="margin-right:54px"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="c3"><x> </x></span> +</div> + +<div class="grid"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="r1"><x> </x></span> +</div> + +<div class="grid" style="width:436px"> +<span class="c1" style="width:374px; margin-right:41px"><x> </x></span> +<span class="r1" style="margin-left:5px"><x> </x></span> +<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x> </x></span> +</div> + +<div class="grid" style="width:500px;"> +<span class="c1" style="width:20px;margin-right:448px"><x> </x></span> +<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span> +<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x> </x></span> +<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span> +</div> + +<div class="grid" style="width:583px;"> +<span class="c1" style="width:507px; margin-right:55px"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x> </x></span> +</div> + +<div class="grid" style="width:389px;"> +<span class="c1" style="width:100px"><x> </x></span> +<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span> +<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span> +</div> + +<div class="grid" style="width:389px;"> +<span class="c1" style="width:100px"><x> </x></span> +<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span> +<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span> +</div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-col-max-sizing-max-content-001.html b/layout/reftests/css-grid/grid-col-max-sizing-max-content-001.html new file mode 100644 index 0000000000..ee87346873 --- /dev/null +++ b/layout/reftests/css-grid/grid-col-max-sizing-max-content-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: Testing track max-sizing 'max-content'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content"> + <link rel="match" href="grid-col-max-sizing-max-content-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + grid-auto-columns: minmax(min-content,max-content); + border: dashed blue; + float:left; + clear:left; + justify-items: stretch; +} + +.c1 { grid-column: 1 / span 2; min-width:40px; } +.r1 { grid-column: 2 / span 3; min-width:70px; } +.c3 { grid-column: 3 / span 1; min-width:0; } + +span { + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 1px 5px; +} + +x { display:inline-block; width:10px; height:18px; } + </style> +</head> +<body> + +<div class="grid"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +</div> + +<div class="grid"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="c3"><x> </x></span> +</div> + +<div class="grid"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="r1"><x> </x></span> +</div> +<div class="grid" style="grid-template-columns: minmax(min-content,max-content) 400px;"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="c3"><x> </x></span> +</div> + +<div class="grid" style="width:500px;"> +<span class="c1" style="min-width:20px"><x> </x></span> +<span class="r1" style="min-width:10px"><x> </x></span> +<span class="r1" style="min-width:30px"><x> </x></span> +<span class="r1" style="min-width:10px"><x> </x></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(min-content,max-content) minmax(min-content,500px);"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="c3"><x> </x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px"><x> </x></span> +<span class="r1" style="width:300px"><x> </x></span> +<span class="c3"><x> </x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px; border-sizing:border-box"><x> </x></span> +<span class="r1" style="width:300px; border-sizing:border-box"><x> </x></span> +<span class="c3"><x> </x></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html b/layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html new file mode 100644 index 0000000000..eeb4e407ff --- /dev/null +++ b/layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html @@ -0,0 +1,93 @@ +<!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: Testing track max-sizing 'max-content'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: block; + float:left; + clear:left; +} +.wrap { + border: dashed blue; + overflow:hidden; + clear:left; +} + +.c1 { width:40px; margin-bottom: 2px; margin-right: 47px; } +.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; } +.c3 { width:10px; margin: 2px 18px 1px 71px; } + +span { + display: block; + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 1px 5px; +} + +x { display:inline-block; width:10px; height:18px; } + </style> +</head> +<body> + +<div class="wrap"><div class="grid"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +</div></div> + +<div class="wrap"><div class="grid"> +<span class="c1" style="margin-right:54px"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="c3"><x> </x></span> +</div></div> + +<div class="wrap"><div class="grid"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="r1"><x> </x></span> +</div></div> + +<div class="wrap"><div class="grid" style="width:436px"> +<span class="c1" style="width:374px; margin-right:41px"><x> </x></span> +<span class="r1" style="margin-left:5px"><x> </x></span> +<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x> </x></span> +</div></div> + +<div class="wrap" style="float:left;"><div class="grid" style="width:500px;"> +<span class="c1" style="width:20px;margin-right:448px"><x> </x></span> +<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span> +<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x> </x></span> +<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span> +</div></div> + +<div class="wrap"><div class="grid" style="width:583px;"> +<span class="c1" style="width:507px; margin-right:55px"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x> </x></span> +</div></div> + +<div class="wrap"><div class="grid" style="width:389px;"> +<span class="c1" style="width:100px"><x> </x></span> +<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span> +<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span> +</div></div> + +<div class="wrap"><div class="grid" style="width:389px;"> +<span class="c1" style="width:100px"><x> </x></span> +<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span> +<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span> +</div></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-col-max-sizing-max-content-002.html b/layout/reftests/css-grid/grid-col-max-sizing-max-content-002.html new file mode 100644 index 0000000000..9aaa8c0340 --- /dev/null +++ b/layout/reftests/css-grid/grid-col-max-sizing-max-content-002.html @@ -0,0 +1,87 @@ +<!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: Testing track max-sizing 'max-content'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content"> + <link rel="match" href="grid-col-max-sizing-max-content-002-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + grid-auto-columns: minmax(min-content,max-content); + border: dashed blue; +} + +.c1 { grid-column: 1 / span 2; min-width:40px; } +.r1 { grid-column: 2 / span 3; min-width:70px; } +.c3 { grid-column: 3 / span 1; min-width:0; } + +span { + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 1px 5px; +} + +x { display:inline-block; width:10px; height:18px; } + </style> +</head> +<body> + +<div class="grid"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +</div> + +<div class="grid"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="c3"><x> </x></span> +</div> + +<div class="grid"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="r1"><x> </x></span> +</div> +<div class="grid" style="grid-template-columns: minmax(min-content,max-content) 400px;"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="c3"><x> </x></span> +</div> + +<div class="grid" style="width:500px;"> +<span class="c1" style="min-width:20px"><x> </x></span> +<span class="r1" style="min-width:10px"><x> </x></span> +<span class="r1" style="min-width:30px"><x> </x></span> +<span class="r1" style="min-width:10px"><x> </x></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(min-content,max-content) minmax(min-content,500px);"> +<span class="c1"><x> </x></span> +<span class="r1"><x> </x></span> +<span class="c3"><x> </x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px"><x> </x></span> +<span class="r1" style="width:300px"><x> </x></span> +<span class="c3"><x> </x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px; border-sizing:border-box"><x> </x></span> +<span class="r1" style="width:300px; border-sizing:border-box"><x> </x></span> +<span class="c3"><x> </x></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-column-gap-001-ref.html b/layout/reftests/css-grid/grid-column-gap-001-ref.html new file mode 100644 index 0000000000..39adc0199e --- /dev/null +++ b/layout/reftests/css-grid/grid-column-gap-001-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: 'grid-column-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-columns: minmax(1px,auto); + grid-template-rows: 0px 7px; + border: 2px solid black; + float: left; + margin-right: 20px; +} + +.grid :last-child { background:grey; } +.grid :nth-child(2) { background:pink; } +.grid .gap { background:transparent; } + +x { background: lime; height:7px; } + </style> +</head> +<body> + +<script> +document.body.style.display = "none"; +var justify = [ + "start", + // "end", + // "center", + // "start", + // "end", + "start", + "start", + "start", + "start", + "end", + "center", + "start", + // "end", + // "start", + // "end safe", + // "end", + "center", + // "center", + // "end", + // "end safe", + // "start", + "center", + // "end", + // "end safe", + // "left", + // "end", +]; +var cols = [ "0", "1", "2", "3", "8", "9" ]; +var widths = [ "0", "1", "5", "6" ]; +var gaps = [ "1", "2" ]; +for (var j = 0; j < justify.length; ++j) { + // document.body.appendChild(document.createTextNode(justify[j])); // for debugging + var chunk = document.createElement('div'); + chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden"); + for (var c = 0; c < cols.length; ++c) { + for (var w = 0; w < widths.length; ++w) { + // set this to true if you want to see all tests + var run_test = widths[w] < cols[c] || cols[c] == 0 || cols[c] == 1; + if (run_test) { + for (var g = 0; g < gaps.length; ++g) { + var grid = document.createElement('div'); + grid.style.width = widths[w]+"px"; + grid.className = "grid"; + grid.style.justifyContent = justify[j]; + var span = document.createElement('span'); + grid.appendChild(span); + var numCols = parseInt(cols[c]); + var gapCols = numCols==0 ? 0 : (numCols-1); + numCols += gapCols*parseInt(gaps[g]); + span.style.gridColumn = "1 / span " + numCols; + for (var x = 0; x < numCols; ++x) { + var item = document.createElement('x'); + if (x % (1+(parseInt(gaps[g]))) != 0) + item.className = "gap"; + grid.appendChild(item); + } + // if (j < 5) { // The stretch tests. + if (j < 1) { // The stretch test. + if (c == 1) + grid.style.background = 'pink' + } + // if (j == 6 && cols[c] == 1) { // The 'safe end' tests. + if (j == 2 && cols[c] == 1) { // The 'safe end' tests. + if (widths[w] != 0) grid.style.justifyContent = 'end'; + } + // if (j == 7 && cols[c] == 1) { // The 'safe center' tests. + if (j == 3 && cols[c] == 1) { // The 'safe center' tests. + if (widths[w] != 0) grid.style.justifyContent = 'center'; + } + // if (j > 15) { // The space-around and space-evenly tests. + if (j > 7) { // The space-around and space-evenly tests. + if (cols[c] == 1) { + if (widths[w] == 0) { + if (grid.style.justifyContent != 'end') { + grid.style.justifyContent = 'start'; + } + } else { + grid.style.justifyContent = 'center'; + } + } + } + chunk.appendChild(grid); + } + } + } + } + document.body.appendChild(chunk); +} +document.body.style.display = ""; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-column-gap-001.html b/layout/reftests/css-grid/grid-column-gap-001.html new file mode 100644 index 0000000000..a0c85de0f1 --- /dev/null +++ b/layout/reftests/css-grid/grid-column-gap-001.html @@ -0,0 +1,104 @@ +<!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-column-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters"> + <link rel="match" href="grid-column-gap-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-columns: minmax(1px,auto); + grid-template-rows: 0px 7px; + border: 2px solid black; + float: left; + margin-right: 20px; +} + +.grid :last-child { background:grey; } +.grid :nth-child(2) { background:pink; } + +x { background: lime; height:7px; } + + </style> +</head> +<body> + +<script> +document.body.style.display = "none"; +var justify = [ + "stretch", + // FIXME: When https://github.com/w3c/csswg-drafts/issues/1002 is implemented. + // "stretch end", + // "stretch center", + // "stretch safe end", + // "stretch unsafe end", + "safe start", + "safe end", + "safe center", + "unsafe start", + "unsafe end", + "unsafe center", + "space-between", + // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 + // "space-between end", + // "space-between start", + // "space-between safe end", + // "space-between unsafe end", + "space-around", + // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 + // "space-around center", + // "space-around right", + // "space-around safe right", + // "space-around left", + "space-evenly", + // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 + // "space-evenly flex-end", + // "space-evenly safe flex-end", + // "space-evenly unsafe flex-start", + // "space-evenly right", +]; +var cols = [ "0", "1", "2", "3", "8", "9" ]; +var widths = [ "0", "1", "5", "6" ]; +var gaps = [ "1", "2" ]; +for (var j = 0; j < justify.length; ++j) { + // document.body.appendChild(document.createTextNode(justify[j])); // for debugging + var chunk = document.createElement('div'); + chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden"); + for (var c = 0; c < cols.length; ++c) { + for (var w = 0; w < widths.length; ++w) { + // set this to true if you want to see all tests + var run_test = widths[w] < cols[c] || cols[c] == 0 || cols[c] == 1; + if (run_test) { + for (var g = 0; g < gaps.length; ++g) { + var grid = document.createElement('div'); + grid.style.width = widths[w]+"px"; + grid.style.gridColumnGap = gaps[g]+"px"; + grid.className = "grid"; + grid.style.justifyContent = justify[j]; + var span = document.createElement('span'); + span.style.gridColumn = "1 / span " + cols[c]; + grid.appendChild(span); + for (var x = 0; x < cols[c]; ++x) { + grid.appendChild(document.createElement('x')); + } + chunk.appendChild(grid); + } + } + } + } + document.body.appendChild(chunk); +} +document.body.style.display = ""; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-column-gap-002-ref.html b/layout/reftests/css-grid/grid-column-gap-002-ref.html new file mode 100644 index 0000000000..84d5a3c1be --- /dev/null +++ b/layout/reftests/css-grid/grid-column-gap-002-ref.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>Reference: 'grid-column-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: block; + border: dashed blue; + float: left; + clear: left; +} + +.c1 { grid-column: 1 / span 2; min-width:40px; } +.r1 { grid-column: 2 / span 3; min-width:70px; margin-left:40px; } +.c3 { grid-column: 3 / span 1; min-width:0; margin-left:138px; } + +span { + display: block; + float: left; + clear: left; + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 1px 5px; + justify-self: flex-start; +} + +x { display:inline-block; width:10px; height:18px; } + </style> +</head> +<body> + +<div class="grid"> +<span class="c1" style="width:40px"><x></x></span> +<span class="r1" style="width:74px"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:49px"><x></x></span> +<span class="r1" style="margin-left:44px; width:88px"><x></x></span> +<span class="c3" style="margin-left:83px; "><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:40px"><x></x></span> +<span class="r1" style="width:74px"><x></x></span> +<span class="r1" style="width:74px"><x></x></span> +<span class="r1" style="width:74px"><x></x></span> +</div> +<div class="grid" style=""> +<span class="c1" style="width:413px"><x></x></span> +<span class="r1" style="margin-left:44px; width:452px"><x></x></span> +<span class="c3" style="margin-left:447px;"><x></x></span> +</div> + +<div class="grid" style="width:500px;"> +<span class="c1" style="width:223px"><x></x></span> +<span class="r1" style="margin-left:131px; width:348px"><x></x></span> +<span class="r1" style="margin-left:131px; width:348px"><x></x></span> +<span class="r1" style="margin-left:131px; width:348px"><x></x></span> +</div> + +<div class="grid" style=""> +<span class="c1" style="width:513px"><x></x></span> +<span class="r1" style="margin-left:44px; width:552px"><x></x></span> +<span class="c3" style="margin-left:547px;"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px"><x></x></span> +<span class="r1" style="margin-left:115px; margin-right:5px; width:300px"><x></x></span> +<span class="c3" style="margin-left:224px; width:81px"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span> +<span class="r1" style="margin-left:115px; margin-right:5px; width:300px; border-sizing:border-box"><x></x></span> +<span class="c3" style="margin-left:224px; width:81px"><x></x></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-column-gap-002.html b/layout/reftests/css-grid/grid-column-gap-002.html new file mode 100644 index 0000000000..d00e640739 --- /dev/null +++ b/layout/reftests/css-grid/grid-column-gap-002.html @@ -0,0 +1,91 @@ +<!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-column-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters"> + <link rel="match" href="grid-column-gap-002-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + grid-auto-columns: minmax(0,1fr); + border: dashed blue; + float: left; + clear: left; + grid-column-gap: 3px; +} + +.c1 { grid-column: 1 / span 2; min-width:40px; } +.r1 { grid-column: 2 / span 3; min-width:70px; } +.c3 { grid-column: 3 / span 1; min-width:0; } + +span { + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 1px 5px; + justify-self: stretch; +} + +x { display:inline-block; width:10px; height:18px; } + </style> +</head> +<body> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +</div> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="r1"><x></x></span> +<span class="r1"><x></x></span> +</div> +<div class="grid" style="grid-template-columns: minmax(0,1fr) 400px;"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid" style="width:500px;"> +<span class="c1" style="min-width:20px"><x></x></span> +<span class="r1" style="min-width:10px"><x></x></span> +<span class="r1" style="min-width:30px"><x></x></span> +<span class="r1" style="min-width:10px"><x></x></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,500px);"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px"><x></x></span> +<span class="r1" style="width:300px"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span> +<span class="r1" style="width:300px; border-sizing:border-box"><x></x></span> +<span class="c3"><x></x></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-column-gap-003-ref.html b/layout/reftests/css-grid/grid-column-gap-003-ref.html new file mode 100644 index 0000000000..9b574ed1bd --- /dev/null +++ b/layout/reftests/css-grid/grid-column-gap-003-ref.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>Reference: 'grid-column-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +body { width: 800px; } +.grid { + display: block; + border: dashed blue; + clear: left; +} + +.c1 { grid-column: 1 / span 2; min-width:40px; margin-top:1px; } +.r1 { grid-column: 2 / span 3; min-width:70px; margin-left:38px; } +.c3 { grid-column: 3 / span 1; min-width:0; margin-left:138px; } + +span { + display: block; + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 2px 5px 1px 5px; + justify-self: flex-start; +} + +x { display:inline-block; width:10px; height:18px; } + </style> +</head> +<body> + +<div class="grid"> +<span class="c1" style="width:370px"><x></x></span> +<span class="r1" style="margin-left:204px;"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:370px"><x></x></span> +<span class="r1" style="margin-left:204px;"><x></x></span> +<span class="c3" style="margin-left:404px; width:170px"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:370px"><x></x></span> +<span class="r1" style="margin-left:204px;"><x></x></span> +<span class="r1" style="margin-left:204px;"><x></x></span> +<span class="r1" style="margin-left:204px;"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:505px"><x></x></span> +<span class="r1" style="margin-left:136px;"><x></x></span> +<span class="c3" style="margin-left:539px; width:103px"><x></x></span> +</div> + +<div class="grid" style="width:500px;"> +<span class="c1" style="width:223px"><x></x></span> +<span class="r1" style="margin-left:131px; width:348px"><x></x></span> +<span class="r1" style="margin-left:131px; width:348px"><x></x></span> +<span class="r1" style="margin-left:131px; width:348px"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:572px"><x></x></span> +<span class="r1" style="margin-left:103px;"><x></x></span> +<span class="c3" style="margin-left:606px; width:69px"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px"><x></x></span> +<span class="r1" style="margin-left:204px; width:300px"><x></x></span> +<span class="c3" style="margin-left:404px; width:170px"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px"><x></x></span> +<span class="r1" style="margin-left:204px; width:300px"><x></x></span> +<span class="c3" style="margin-left:404px; width:170px"><x></x></span> +</div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-column-gap-003.html b/layout/reftests/css-grid/grid-column-gap-003.html new file mode 100644 index 0000000000..f1c549b548 --- /dev/null +++ b/layout/reftests/css-grid/grid-column-gap-003.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: 'grid-column-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters"> + <link rel="match" href="grid-column-gap-003-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +body { width: 800px; } +.grid { + display: grid; + grid-auto-columns: minmax(0,1fr); + border: dashed blue; + grid-column-gap: 3px; +} + +.c1 { grid-column: 1 / span 2; min-width:40px; } +.r1 { grid-column: 2 / span 3; min-width:70px; } +.c3 { grid-column: 3 / span 1; min-width:0; } + +span { + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 1px 5px; + justify-self: stretch; +} + +x { display:inline-block; width:10px; height:18px; } + </style> +</head> +<body> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +</div> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="r1"><x></x></span> +<span class="r1"><x></x></span> +</div> +<div class="grid" style="grid-template-columns: minmax(0,1fr) 400px;"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid" style="width:500px;"> +<span class="c1" style="min-width:20px"><x></x></span> +<span class="r1" style="min-width:10px"><x></x></span> +<span class="r1" style="min-width:30px"><x></x></span> +<span class="r1" style="min-width:10px"><x></x></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,500px);"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px"><x></x></span> +<span class="r1" style="width:300px"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span> +<span class="r1" style="width:300px; border-sizing:border-box"><x></x></span> +<span class="c3"><x></x></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-column-gap-004-ref.html b/layout/reftests/css-grid/grid-column-gap-004-ref.html new file mode 100644 index 0000000000..4dff8adeec --- /dev/null +++ b/layout/reftests/css-grid/grid-column-gap-004-ref.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>Reference: Percentage 'grid-column-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1266268"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 3px 5px 7px / 11px 7px 5px; + padding: 1px 1px 3px 2px; + margin-right: 4px; + width: 60px; + height: 40px; + grid-column-gap: 6px; +} +.vl.grid, .vr.grid, .vlr.grid, .vrl.grid { grid-column-gap: 4px; } + +item1,item2,item3 { + display: block; + background: grey; + justify-self: stretch; + align-self: stretch; +} + +item1 { grid-area: 1 / 1; } +item2 { grid-area: 2 / 2; } +item3 { grid-area: 3 / 3; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.astart { align-content:start; } +.aend { align-content:end; } +.aflexstart { align-content:flex-start; } +.aflexend { align-content:flex-end; } +.acenter { align-content:center; } +.aleft { align-content:left; } +.aright { align-content:right; } + +.aspace-between{ align-content:space-between; } +.aspace-around { align-content:space-around; } +.aspace-evenly { align-content:space-evenly; } + +.astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch; } +.astretch2 { grid-template-rows: minmax(3px,auto) 5px 7px; } +.astretch3 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) 7px; } +.astretch4 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) minmax(7px,auto); } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "space-between", "space-around", "space-evenly", + "stretch1", "stretch2", "stretch3", "stretch4" ]; +for (var k = 0; k < test.length; ++k) { + for (var i = 0; i < gridwm.length; ++i) { + var div = document.createElement("div"); + div.className = "grid a" + test[k] + " " + gridwm[i]; + div.appendChild(document.createElement("item1")); + div.appendChild(document.createElement("item2")); + div.appendChild(document.createElement("item3")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-column-gap-004.html b/layout/reftests/css-grid/grid-column-gap-004.html new file mode 100644 index 0000000000..8546c579b0 --- /dev/null +++ b/layout/reftests/css-grid/grid-column-gap-004.html @@ -0,0 +1,91 @@ +<!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: Percentage 'grid-column-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1266268"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters"> + <link rel="match" href="grid-column-gap-004-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 3px 5px 7px / 11px 7px 5px; + padding: 1px 1px 3px 2px; + margin-right: 4px; + width: 60px; + height: 40px; + grid-column-gap: 10%; +} + +item1,item2,item3 { + display: block; + background: grey; + justify-self: stretch; + align-self: stretch; +} + +item1 { grid-area: 1 / 1; } +item2 { grid-area: 2 / 2; } +item3 { grid-area: 3 / 3; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.astart { align-content:start; } +.aend { align-content:end; } +.aflexstart { align-content:flex-start; } +.aflexend { align-content:flex-end; } +.acenter { align-content:center; } +.aleft { align-content:left; } +.aright { align-content:right; } + +.aspace-between{ align-content:space-between; } +.aspace-around { align-content:space-around; } +.aspace-evenly { align-content:space-evenly; } + +.astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch; } +.astretch2 { grid-template-rows: minmax(3px,auto) 5px 7px; } +.astretch3 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) 7px; } +.astretch4 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) minmax(7px,auto); } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "space-between", "space-around", "space-evenly", + "stretch1", "stretch2", "stretch3", "stretch4" ]; +for (var k = 0; k < test.length; ++k) { + for (var i = 0; i < gridwm.length; ++i) { + var div = document.createElement("div"); + div.className = "grid a" + test[k] + " " + gridwm[i]; + div.appendChild(document.createElement("item1")); + div.appendChild(document.createElement("item2")); + div.appendChild(document.createElement("item3")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-container-baselines-001-ref.html b/layout/reftests/css-grid/grid-container-baselines-001-ref.html new file mode 100644 index 0000000000..992e33695f --- /dev/null +++ b/layout/reftests/css-grid/grid-container-baselines-001-ref.html @@ -0,0 +1,89 @@ +<!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 container baselines</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +span { + background: lime; + display: inline-grid; + border: 1px solid black; + font-size:12px; +} +span:nth-child(1) {font-size:32px; } +span:nth-child(2) {padding-block-end:20px; } + +.sfb { align-self:baseline; } +.slb { align-self:last baseline; } +.cfb { align-content:baseline; align-self:start; } +.clb { align-content:last baseline; align-self:end; } +.s { align-self:stretch; } + +.jfb { justify-self:baseline; } +.jlb { justify-self:last baseline; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.ib { + display: inline-table; + align-items: start; + border: 2px solid; + height: 120px; + margin: 1px; + font-size:1px; + position:relative; +} +.ib2 { + display: inline-table; + align-items: start; + padding-bottom: 20px; + font-size:1px; +} + +</style> +</head> +<body> + +A<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div> +<div class="ib"><span style="float:left">B<br>B</span><span style="display:inline-flex">C<br>C</span></div> +<div class="ib"><span>B<br>B</span><span style="float:right; visibility:hidden">C<br>C</span><span style="position:absolute; bottom:2px; right:2px; padding-bottom:20px;">C<br>C</span></div> + +<!-- TODO: figure out a reference for the corresponding test --> +<!-- TODO: figure out a reference for the corresponding test --> + +<div class="ib"><div style="display:inline-grid; align-self:baseline; grid: 120px / auto auto"><span class="slb">B<br>B</span><span class="slb">C<br>C</span></div></div> +<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div> +<div class="ib"><span style="float:right">B<br>B</span><span style="display:inline-flex">C<br>C</span></div> +<!-- +<div class="ib"><span style="vertical-align:bottom; margin-bottom:-1px">B<br>B</span><span style="float:right">C<br>C</span></div> +<div class="ib"><span style="float:right">B<br>B</span><span style="vertical-align:bottom; margin-bottom:-21px">C<br>C</span></div> +--> +<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div> +<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div> +<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div> +<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div> + +<br> + +A<!--<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div> +<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div> +<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div> +<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div> +--><div class="ib"><span style="vertical-align:bottom; margin-top:50px">B<br>B</span><span style="float:right; margin-top:50px">C<br>C</span></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-container-baselines-001.html b/layout/reftests/css-grid/grid-container-baselines-001.html new file mode 100644 index 0000000000..529632ae61 --- /dev/null +++ b/layout/reftests/css-grid/grid-container-baselines-001.html @@ -0,0 +1,92 @@ +<!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 container baselines</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> + <link rel="match" href="grid-container-baselines-001-ref.html"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid: 120px / repeat(4, min-content); + align-items: start; + justify-items: start; + border: 2px solid; + margin: 1px; +} +.r2 { grid-template-rows: 0 120px; } +.r3 { grid-template-rows: 50px 70px; } +.r4 { grid-template-rows: 120px 0; } +.grid .grid { + border: 0; + margin: 0; +} +.vgrid { grid: repeat(4, min-content) / 120px;} + +span { + background: lime; + display: inline-block; + border: 1px solid black; +} +span:nth-child(1) {font-size:32px; } +span:nth-child(2) {font-size:12px; padding-block-end:20px;} + +.sfb { align-self:baseline; } +.slb { align-self:last baseline; } +.cfb { align-content:baseline; align-self:start; } +.clb { align-content:last baseline; align-self:end; } +.s { align-self:stretch; } + +.jfb { justify-self:baseline; } +.jlb { justify-self:last baseline; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +A<div class="grid"><span>B<br>B</span><span>C<br>C</span></div> +<div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span></div> +<div class="grid"><span>B<br>B</span><span class="slb">C<br>C</span></div> + +<!-- <div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span><span class="sfb">C<br>C</span></div> --> +<!-- <div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span><span class="sfb vl" style="padding:20px 0">D<br>D</span></div> --> + +<div class="grid"><span class="slb">B<br>B</span><span class="slb">C<br>C</span></div> +<div class="grid"><span style="order:1">B<br>B</span><span>C<br>C</span></div> +<div class="grid"><span style="order:1">B<br>B</span><span class="sfb">C<br>C</span></div> + +<!-- +<div class="grid r2"><span style="grid-row:2">B<br>B</span><span style="grid-row:2">C<br>C</span></div> +<div class="grid r2"><span style="grid-row:2; order:1">B<br>B</span><span style="grid-row:2">C<br>C</span></div> +--> + +<div class="grid r2"><span style="grid-row:span 2">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div> +<div class="grid r2"><span style="grid-row:span 2; order:1">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div> +<div class="grid r3"><span style="grid-row:span 2">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div> +<div class="grid r3"><span style="grid-row:span 2; order:1">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div> + +<br> +A<!--<div class="grid r4"><span>B<br>B</span><span>C<br>C</span></div> +<div class="grid r4"><span style="order:1">B<br>B</span><span>C<br>C</span></div> +<div class="grid"><div class="grid"><span>B<br>B</span><span>C<br>C</span></div></div> +<div class="grid"><div class="grid"><div class="grid"><span>B<br>B</span><span>C<br>C</span></div></div></div> +--><div class="grid"><div class="grid r3"><span style="grid-row:2">B<br>B</span><span style="grid-row:2">C<br>C</span></div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-container-baselines-002-ref.html b/layout/reftests/css-grid/grid-container-baselines-002-ref.html new file mode 100644 index 0000000000..960f911792 --- /dev/null +++ b/layout/reftests/css-grid/grid-container-baselines-002-ref.html @@ -0,0 +1,87 @@ +<!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 container baselines w. spacing before first row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +span { + background: lime; + display: inline-grid; + border: 1px solid black; + font-size: 12px; +} +span:nth-child(1) { font-size:32px; } +span:nth-child(2) { padding-block-end:20px; } + +.sfb { align-self:baseline; } +.slb { align-self:last baseline; } +.cfb { align-content:baseline; align-self:start; } +.clb { align-content:last baseline; align-self:end; } +.s { align-self:stretch; } + +.jfb { justify-self:baseline; } +.jlb { justify-self:last baseline; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.ib { + display: inline-table; + border: 2px solid; + height: 130px; + padding-top: 10px; + margin: 1px; + font-size: 1px; +} +.ib2 { display: inline-table; padding-top:10px; } +.ib3 { display: inline-table; padding-top:20px; } + +</style> +</head> +<body> + +A<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div> +<div class="ib"><span style="float:left">B<br>B</span><span style="display:inline-flex">C<br>C</span></div> + +<!-- TODO: figure out a reference for the corresponding test --> +<!-- TODO: figure out a reference for the corresponding test --> + +<div class="ib"><div style="display:inline-grid; height:120px; align-content:end;"><div style="display:grid; align-self:baseline; grid: 120px / auto auto"><span class="slb">B<br>B</span><span class="slb">C<br>C</span></div></div></div> + +<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div> +<div class="ib"><span style="float:right">B<br>B</span><span style="display:inline-flex">C<br>C</span></div> + +<!-- +<div class="ib"><span style="vertical-align:bottom; margin-bottom:-1px">B<br>B</span><span style="float:right">C<br>C</span></div> +<div class="ib"><span style="float:right">B<br>B</span><span style="vertical-align:bottom; margin-bottom:-21px">C<br>C</span></div> +--> + +<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div> +<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div> + +<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div> +<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div> + +<br> + +A<!--<div class="ib"><span>B<br>B</span><span style="float:right">C<br>C</span></div> +<div class="ib"><span style="float:right">B<br>B</span><span>C<br>C</span></div> +<div class="ib"><div class="ib2"><span>B<br>B</span><span style="float:right">C<br>C</span></div></div> +<div class="ib"><div class="ib3"><span>B<br>B</span><span style="float:right">C<br>C</span></div></div> +--><div class="ib"><span style="vertical-align:bottom; margin-top:60px">B<br>B</span><span style="float:right; margin-top:60px">C<br>C</span></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-container-baselines-002.html b/layout/reftests/css-grid/grid-container-baselines-002.html new file mode 100644 index 0000000000..dd94696aa5 --- /dev/null +++ b/layout/reftests/css-grid/grid-container-baselines-002.html @@ -0,0 +1,96 @@ +<!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 container baselines w. spacing before first row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> + <link rel="match" href="grid-container-baselines-002-ref.html"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid: 120px / repeat(4, min-content); + align-items: start; + justify-items: start; + border: 2px solid; + margin: 1px; + align-content: center; + height: 140px; +} +.r2 { grid-template-rows: 0 120px; } +.r3 { grid-template-rows: 50px 70px; } +.r4 { grid-template-rows: 120px 0; } +.grid .grid { + border: 0; + margin: 0; +} +.vgrid { grid: repeat(4, min-content) / 120px;} + +span { + background: lime; + display: inline-block; + border: 1px solid black; +} +span:nth-child(1) {font-size:32px; } +span:nth-child(2) {font-size:12px; padding-block-end:20px;} + +.sfb { align-self:first baseline; } +.slb { align-self:last baseline; } +.cfb { align-content:first baseline; align-self:start; } +.clb { align-content:last baseline; align-self:end; } +.s { align-self:stretch; } + +.jfb { justify-self:first baseline; } +.jlb { justify-self:last baseline; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +</style> +</head> +<body> + +A<div class="grid"><span>B<br>B</span><span>C<br>C</span></div> +<div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span></div> + +<!-- <div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span><span class="sfb">C<br>C</span></div> --> +<!-- <div class="grid"><span>B<br>B</span><span class="sfb">C<br>C</span><span class="sfb vl" style="padding:20px 0">D<br>D</span></div> --> + +<div class="grid"><span class="slb">B<br>B</span><span class="slb">C<br>C</span></div> + +<div class="grid"><span style="order:1">B<br>B</span><span>C<br>C</span></div> +<div class="grid"><span style="order:1">B<br>B</span><span class="sfb">C<br>C</span></div> + +<!-- +<div class="grid r2"><span style="grid-row:2">B<br>B</span><span style="grid-row:2">C<br>C</span></div> +<div class="grid r2"><span style="grid-row:2; order:1">B<br>B</span><span style="grid-row:2">C<br>C</span></div> +--> + +<div class="grid r2"><span style="grid-row:span 2">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div> +<div class="grid r2"><span style="grid-row:span 2; order:1">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div> + +<div class="grid r3"><span style="grid-row:span 2">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div> +<div class="grid r3"><span style="grid-row:span 2; order:1">B<br>B</span><span style="grid-row:span 2">C<br>C</span></div> + +<br> + +A<!--<div class="grid r4"><span>B<br>B</span><span>C<br>C</span></div> +<div class="grid r4"><span style="order:1">B<br>B</span><span>C<br>C</span></div> +<div class="grid"><div class="grid"><span>B<br>B</span><span>C<br>C</span></div></div> +<div class="grid"><div class="grid"><div class="grid"><span>B<br>B</span><span>C<br>C</span></div></div></div> +--><div class="grid"><div class="grid r3"><span style="grid-row:2">B<br>B</span><span style="grid-row:2">C<br>C</span></div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-container-baselines-003-ref.html b/layout/reftests/css-grid/grid-container-baselines-003-ref.html new file mode 100644 index 0000000000..a917d32ef9 --- /dev/null +++ b/layout/reftests/css-grid/grid-container-baselines-003-ref.html @@ -0,0 +1,124 @@ +<!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 container baselines, nested flex/grid/table</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.ib { + display: inline-table; + height: 163px; + width: 120px; + border: 1px solid; + margin: 1px; +} +.ib2 { + display: inline-flex; + border: 1px solid; + margin: 1px; +} + +span { display: inline-table; } +.a { + border: 3px solid black; + background:lime; +} + +span:nth-of-type(1) { font-size:32px; } +span:nth-of-type(2) { font-size:36px; } +span:nth-of-type(3) { font-size:48px; } +span:nth-of-type(4) { font-size:24px; } +span.i { font-size:12px; grid-column:2; } +.f { display:inline-flex; } + +.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; } + +.igrid { + display: inline-grid; + grid: 13px repeat(3,50px) / 60px 60px; + border: 1px solid; + margin: 1px; +} +/* don't clamp grid item automatic minimum size */ +* { + min-width: 0; + min-height: 0; +} +.slb { align-self:last baseline; align-content:self-end; } + +</style> +</head> +<body> + +A<div class="ib"> + <div class="ib" style="height:120px; width:56px;"><span + class="a f" style="width:30px; padding-bottom:5px;">A<br>B</span> + </div><span class="i a f" style="width:54px">C<br>D</span> +</div></div> + +<div class="ib" style="width:180px;"> + <div class="ib" style="height:120px; width:56px;"><span + class="a f" style="width:30px; padding-top:5px; margin-top:7px">A<br>B</span> + </div><span class="i a f" style="width:54px">C<br>D</span><span + class="a f" style="width:54px; padding-top:20px">E<br>F</span> +</div> + +<div class="ib" style="width:180px;"> + <div class="ib" style="height:120px; width:56px;"><span + class="a f" style="width:30px; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span> + </div><span class="i a f" style="width:54px">C<br>D</span><span + class="a f" style="width:54px; padding-top:20px">E<br>F</span> +</div> + + +<div class="ib" style="width:200px;"> + <div class="ib" style="height:120px; width:76px; white-space:nowrap"><span + class="a f" style="width:30px; margin-top:7px; padding-top:5px; padding-bottom:18px;">A<br>B</span><span + class="a f" style="float:right; width:30px; position:relative; left:-4px; padding-bottom:22px;">A<br>B</span> + </div><span class="i a f" style="width:54px">C<br>D</span><span + class="a f" style="width:54px; padding-top:20px;">E<br>F</span> +</div> + +<br> + +<x style="position:relative; top:-64px">A</x><div class="ib" style="width:200px;margin-top:32px"> + <div class="ib vl" style="height:70px; width:196px;"> + <span class="a" style="display:block; padding-block-end:15px; height:1px">A<br>B</span> + </div> +</div><div class="ib" style="width:200px"> + <div class="ib vl" style="height:70px; width:196px;"> + <span class="a" style="display:block; padding-block-end:15px; width:148px; height:1px">A<br>B</span> + </div> +</div><div class="ib" style="width:200px;position:relative; top:-31px"> + <div class="ib vl" style="height:70px; width:196px;"> + <span class="a" style="display:block; height:min-content; padding-block-end:15px; width:148px; height:min-content">A<br>B</span> + </div> +</div> + +<br> + +A<div class="igrid slb"> + <div class="igrid slb" style="grid: 7px 13px 100px / 36px 3px; grid-row: span 4;"> + <n></n> + <n style="grid-row:2"></n> + <span class="slb a" style="margin-bottom:7px; padding-bottom:5px; grid-row:3; display:inline-block">A<br>B</span> + </div> + <span class="slb i a" style="grid-row:4; display:inline-block">C<br>D</span> + <n></n> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-container-baselines-003.html b/layout/reftests/css-grid/grid-container-baselines-003.html new file mode 100644 index 0000000000..a1ac4e0c02 --- /dev/null +++ b/layout/reftests/css-grid/grid-container-baselines-003.html @@ -0,0 +1,228 @@ +<!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 container baselines, nested grids</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151204"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> + <link rel="match" href="grid-container-baselines-003-ref.html"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.igrid { display: inline-grid; } +.grid { display: grid; } +.grid, .igrid { + grid: 13px repeat(3,50px) / 60px 60px; + border: 1px solid; + margin: 1px; +} +.grid.sfb , .igrid.sfb { + grid: repeat(3,50px) 13px / 60px 60px; +} + +/* don't clamp grid item automatic minimum size */ +.igrid *, .grid * { + min-width: 0; + min-height: 0; +} + +.a { + border: 3px solid black; + background:lime; +} + +span:nth-of-type(1) { font-size:32px; } +span:nth-of-type(2) { font-size:36px; } +span:nth-of-type(3) { font-size:48px; } +span:nth-of-type(4) { font-size:24px; } +span.i { font-size:12px; grid-column:2; } + +.sfb { align-self:baseline; } +.slb { align-self:last baseline; align-content:self-end; } +.jfb { justify-self:baseline; justify-content:self-end; } +.jlb { justify-self:last baseline; justify-content: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> + +<!-- TODO: figure out a way to make a reference for these: + +A<div class="igrid"> + <div class="igrid slb" style="grid: 7px 13px 100px / 36px; grid-row: span 4;"> + <n></n> + <n></n> + <span class="slb a" style="grid-row:3; margin-bottom:7px; padding-bottom:5px;">A<br>B</span> + </div> + <n></n> + <span class="slb i a" style="grid-row:4">C<br>D</span> +</div> + +<div class="igrid" style="grid-template-columns:60px 60px 60px"> + <div class="igrid slb" style="grid: 7px 13px 100px / 36px; grid-row: span 4;"> + <n></n> + <span class="slb a" style="grid-row:3; margin-bottom:7px; padding-bottom:5px;">A<br>B</span> + </div> + <n></n> + <span class="slb i a" style="grid-row:4">C<br>D</span> + <span class="slb a" style="grid-row:4; grid-column:3; padding-bottom:20px">E<br>F</span> +</div> + +<div class="igrid" style="grid-template-columns:60px 60px 60px"> + <div class="igrid slb" style="grid: 7px 13px 100px / 36px; grid-row: span 4;"> + <n></n> + <n></n> + <span class="a" style="grid-row:3; margin-bottom:7px; padding-bottom:5px;">A<br>B</span> + </div> + <span class="slb i a" style="grid-row:4">C<br>D</span> + <span class="slb a " style="grid-row:4; grid-column:3; padding-bottom:20px">E<br>F</span> +</div> + +<div class="igrid" style="grid-template-columns:80px 60px 60px"> + <div class="igrid slb" style="grid: 7px 13px 100px / 36px 36px; grid-row: span 4;"> + <span class="a" style="grid-row:3; margin-bottom:7px; padding-bottom:5px;">A<br>B</span> + <span class="a" style="grid-row:3; ">A<br>B</span> + </div> + <n></n> + <span class="slb i a" style="grid-row:4">C<br>D</span> + <span class="slb a " style="grid-row:4; grid-column:3; padding-bottom:20px">E<br>F</span> +</div> + +<br> +--> + +A<div class="igrid sfb"> + <div class="igrid sfb" style="grid: 100px 7px 13px / 36px; grid-row: span 4;"> + <span class="sfb a" style="margin-bottom:7px; padding-bottom:5px;">A<br>B</span> + <n></n> + <n></n> + </div> + <span class="sfb i a" style="grid-row:1">C<br>D</span> + <n></n> +</div> + +<div class="igrid sfb" style="grid-template-columns:60px 60px 60px"> + <div class="igrid sfb" style="grid: 100px 7px 13px / 36px; grid-row: span 4;"> + <span class="sfb a" style="margin-top:7px; padding-top:5px;">A<br>B</span> + <n></n> + </div> + <span class="sfb i a" style="grid-row:1">C<br>D</span> + <span class="sfb a" style="grid-row:1; grid-column:3; padding-top:20px">E<br>F</span> + <n></n> +</div> +<div class="igrid sfb" style="grid-template-columns:60px 60px 60px"> + <div class="igrid sfb" style="grid: 100px 7px 13px / 36px; grid-row: span 4;"> + <span class="a" style="margin-top:7px; padding-top:5px;">A<br>B</span> + <n></n> + <n></n> + </div> + <span class="sfb i a" style="grid-row:1">C<br>D</span> + <span class="sfb a " style="grid-row:1; grid-column:3; padding-top:20px">E<br>F</span> +</div> + +<div class="igrid sfb" style="grid-template-columns:80px 60px 60px"> + <div class="igrid sfb" style="grid: 100px 7px 13px / 36px 36px; grid-row: span 4;"> + <span class="a" style="margin-top:7px; padding-top:5px;">A<br>B</span> + <span class="a" style="">A<br>B</span> + </div> + <span class="sfb i a" style="grid-row:1">C<br>D</span> + <span class="sfb a " style="grid-row:1; grid-column:3; padding-top:20px">E<br>F</span> + <n></n> +</div> + +<br> + +<!-- TODO: impossible to make a reference due to bug 1166120 + +A<div class="igrid" style="grid: auto / 100px;"> +<span class="jfb a vlr" style="margin:1px 3px 5px 7px">A<br>B</span> +</div> +<div class="igrid" style="grid: auto / 100px;"> +<span class="jlb a vlr" style="margin:1px 3px 5px 7px">A<br>B</span> +</div> +<div class="igrid slb" style="grid: auto / 100px;"> +<span class="jlb a vlr" style="margin:1px 3px 5px 7px">A<br>B</span> +</div> +<div class="igrid vl" style="grid: 100px / 50px;"> +<span class="jlb a" style="margin:1px 3px 5px 7px">A<br>B</span> +</div> +<div class="igrid slb vl" style="grid: 100px / 50px;"> +<span class="jfb a" style="margin:1px 3px 5px 7px">A<br>B</span> +</div> +<div class="igrid sfb vl" style="grid: 100px / 50px;"> +<span class="jfb a" style="margin:1px 3px 5px 7px">A<br>B</span> +</div> + +--> + +<!-- TODO: figure out a way to make a reference for these: + +A<div class="igrid" style="grid-template-columns:200px"> + <div class="igrid slb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;"> + <n></n> + <n></n> + <span class="slb a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span> + </div> +</div><div class="igrid" style="grid-template-columns:200px"> + <div class="igrid slb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;"> + <n></n> + <n></n> + <span class="a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span> + </div> +</div><div class="igrid" style="grid-template-columns:200px"> + <div class="igrid slb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;"> + <n></n> + <n></n> + <span class="jlb a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span> + </div> +</div> + +--> + +A<div class="igrid" style="grid-template-columns:200px"> + <div class="igrid sfb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;"> + <span class="sfb a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span> + <n></n> + <n></n> + </div> +</div><div class="igrid" style="grid-template-columns:200px"> + <div class="igrid sfb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;"> + <span class="a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span> + <n></n> + <n></n> + </div> +</div><div class="igrid" style="grid-template-columns:200px"> + <div class="igrid sfb vl" style="grid: 1fr / 7px 13px 50px; grid-row: span 4;"> + <span class="jfb a" style="margin-block-end:27px; padding-block-end:15px;">A<br>B</span> + <n></n> + <n></n> + </div> +</div> + +<br> + +A<div class="igrid slb"> + <div class="igrid slb" style="grid: 7px 13px 100px / 36px 3px; grid-row: span 4;"> + <n></n><n></n> + <n></n><n></n> + <span class="slb a" style="margin-bottom:7px; padding-bottom:5px;">A<br>B</span><n></n> + </div> + <span class="slb i a" style="grid-row:4">C<br>D</span> + <n></n> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-container-baselines-004-ref.html b/layout/reftests/css-grid/grid-container-baselines-004-ref.html new file mode 100644 index 0000000000..e1affb3387 --- /dev/null +++ b/layout/reftests/css-grid/grid-container-baselines-004-ref.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: Grid container baselines, nested flex/grid/table</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1306906"> + <style type="text/css"> + +* { + color:black; background-color:white; font-size:16px; font-family:monospace; padding:0; margin:0; +} + +grid, flex { + display: inline-flex; + border: 1px solid; + border-width: 10px 0 3px 0; + padding-top: 1px; +} + +flex { display:inline-grid; } +table { display:inline-table; } +td { vertical-align: baseline; } + + </style> +</head> +<body> + +A +<flex>A<br>B</flex> +<flex><span>A<br>B</span></flex> +<grid>A<br>B</grid> +<grid><span>A<br>B</span></grid> +<table cellpadding="0" cellspacing="0"><td><flex>A<br>B</flex></td></table> +<table cellpadding="0" cellspacing="0"><td><grid>A<br>B</grid></td></table> +<flex><grid>A<br>B</grid></flex> +<grid><flex>A<br>B</flex></grid> +<flex><flex>A<br>B</flex></flex> +<grid><grid>A<br>B</grid></grid> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-container-baselines-004.html b/layout/reftests/css-grid/grid-container-baselines-004.html new file mode 100644 index 0000000000..67f9882edb --- /dev/null +++ b/layout/reftests/css-grid/grid-container-baselines-004.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 Test: Grid container baselines, nested flex/grid/table</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1306906"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> + <link rel="match" href="grid-container-baselines-004-ref.html"> + <style type="text/css"> + +* { + color:black; background-color:white; font-size:16px; font-family:monospace; padding:0; margin:0; +} + +grid, flex { + display: inline-grid; + border: 1px solid; + border-width: 10px 0 3px 0; + padding-top: 1px; +} + +flex { display:inline-flex; } +table { display:inline-table; } +td { vertical-align: baseline; } + + </style> +</head> +<body> + +A +<flex>A<br>B</flex> +<flex><span>A<br>B</span></flex> +<grid>A<br>B</grid> +<grid><span>A<br>B</span></grid> +<table cellpadding="0" cellspacing="0"><td><flex>A<br>B</flex></td></table> +<table cellpadding="0" cellspacing="0"><td><grid>A<br>B</grid></td></table> +<flex><grid>A<br>B</grid></flex> +<grid><flex>A<br>B</flex></grid> +<flex><flex>A<br>B</flex></flex> +<grid><grid>A<br>B</grid></grid> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-container-min-max-width-height-001-ref.html b/layout/reftests/css-grid/grid-container-min-max-width-height-001-ref.html new file mode 100644 index 0000000000..0daecf81af --- /dev/null +++ b/layout/reftests/css-grid/grid-container-min-max-width-height-001-ref.html @@ -0,0 +1,56 @@ +<!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: definite min/max-width/height values on the grid container</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1229165"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: block; + float: left; + border: 1px solid black; + background: grey; + margin-right:50px; +} + +x { position:absolute; top:0; left:0; right:0; bottom:0; background:blue; } +x:nth-child(1) { right:14px; bottom:14px; } +x:nth-child(2) { left:14px; bottom:14px; } +x:nth-child(3) { top:14px; right:14px; } +x:nth-child(4) { top:14px; left:14px; } +w { display:block; position:relative; width:24px; height:24px; } + + </style> +</head> +<body> + +<div class="grid" style="min-width:50px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="max-width:10px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="min-width:50px; max-width:10px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="width:50px; max-width:10px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="width:50px; min-width:10px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="min-width:50px; width:10px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="min-width:50px; max-width:20px; width:10px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="max-width:10px; width:20px"><w><x></x><x></x><x></x><x></x></w></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid" style="min-height:50px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="max-height:10px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="min-height:50px; max-height:10px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="height:50px; max-height:10px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="height:50px; min-height:10px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="min-height:50px; height:10px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="min-height:50px; max-height:20px; height:10px"><w><x></x><x></x><x></x><x></x></w></div> +<div class="grid" style="max-height:10px; height:20px"><w><x></x><x></x><x></x><x></x></w></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-container-min-max-width-height-001.html b/layout/reftests/css-grid/grid-container-min-max-width-height-001.html new file mode 100644 index 0000000000..b5029429a8 --- /dev/null +++ b/layout/reftests/css-grid/grid-container-min-max-width-height-001.html @@ -0,0 +1,55 @@ +<!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: definite min/max-width/height values on the grid container</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1229165"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/"> + <link rel="match" href="grid-container-min-max-width-height-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + float: left; + grid-template: 10px 10px / 10px 10px; + grid-gap: 4px; + border: 1px solid black; + background: grey; + margin-right:50px; +} + +x { background:blue; } + + </style> +</head> +<body> + +<div class="grid" style="min-width:50px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="max-width:10px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="min-width:50px; max-width:10px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="width:50px; max-width:10px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="width:50px; min-width:10px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="min-width:50px; width:10px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="min-width:50px; max-width:20px; width:10px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="max-width:10px; width:20px"><x></x><x></x><x></x><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid" style="min-height:50px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="max-height:10px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="min-height:50px; max-height:10px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="height:50px; max-height:10px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="height:50px; min-height:10px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="min-height:50px; height:10px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="min-height:50px; max-height:20px; height:10px"><x></x><x></x><x></x><x></x></div> +<div class="grid" style="max-height:10px; height:20px"><x></x><x></x><x></x><x></x></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-container-overflow-001-ref.html b/layout/reftests/css-grid/grid-container-overflow-001-ref.html new file mode 100644 index 0000000000..ace9dfdc61 --- /dev/null +++ b/layout/reftests/css-grid/grid-container-overflow-001-ref.html @@ -0,0 +1,113 @@ +<!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: overflow:hidden/auto</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227162"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-rows: 5px; + grid-template-columns: repeat(3, 8px); + border: 1px solid black; + grid-row-gap: 4px; + grid-column-gap: 2px; + float: left; +} + +.grid :first-child { background:lime; } +.grid :nth-child(2n) { border-left:1px solid black; } + +x { background: grey; width:7px; height:5px; } +y { background: blue; width:7px; height:5px; } +z { background: green; width:7px; height:5px; } + + </style> +</head> +<body> + +<div class="grid"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="width:40px; justify-content:center; align-content:center;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="width:40px; justify-content:start; align-content:end;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="width:40px; height:40px; justify-content:center; align-content:center;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="height:40px; justify-content:start; align-content:end;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="width:8px; grid-template-columns: repeat(1, 8px);"> +<x></x> +<y></y> +<z></z> +</div> + +<div class="grid" style="height:8px; grid-template-rows: repeat(1, 5px);"> +<x></x><x></x><x></x> +</div> + +<div class="grid" style="width:8px; height:8px; grid-template-columns: 8px; grid-template-rows: 5px;"> +<x></x> +</div> + +<div class="grid" style="width:8px; height:8px; justify-content:center; grid-template-columns: 8px; grid-template-rows: 5px;"> +<x style="background:grey; border-left:1px solid black;"></x> +</div> + +<div class="grid" style="width:8px; height:8px; align-content:center;"> +<y style="background:blue; border-left:1px solid black;"></y> +</div> + +<div class="grid" style="grid-template-columns: repeat(3, 12px); justify-items:end;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="grid-auto-rows: 10px;; align-items:end;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="grid-auto-flow:column; grid-template-rows: repeat(3, 5px);"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="grid-auto-columns: 12px; grid-template-columns: none; "> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-container-overflow-001.html b/layout/reftests/css-grid/grid-container-overflow-001.html new file mode 100644 index 0000000000..1279d4c1c3 --- /dev/null +++ b/layout/reftests/css-grid/grid-container-overflow-001.html @@ -0,0 +1,124 @@ +<!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: overflow:hidden/auto</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227162"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/"> + <link rel="match" href="grid-container-overflow-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-rows: 5px; + grid-template-columns: repeat(3, 8px); + border: 1px solid black; + grid-row-gap: 4px; + grid-column-gap: 2px; + float: left; + overflow: hidden; +} + +.grid :first-child { background:lime; } +.grid :nth-child(2n) { border-left:1px solid black; } + +x { background: grey; width:7px; height:5px; } +y { background: blue; width:7px; height:5px; } +z { background: green; width:7px; height:5px; } + + </style> +</head> +<body> + +<div class="grid"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="width:40px; justify-content:center; align-content:center;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="width:40px; justify-content:start; align-content:end;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="width:40px; height:40px; justify-content:center; align-content:center;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="height:40px; justify-content:start; align-content:end;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="width:8px;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="height:8px;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="width:8px; height:8px;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="width:8px; height:8px; justify-content:center;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="width:8px; height:8px; align-content:center;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="grid-template-columns: repeat(3, 12px); justify-items:end; "> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="grid-auto-rows: 10px;; align-items:end;"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="grid-auto-flow:column; grid-template-rows: repeat(3, 5px);"> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +<div class="grid" style="grid-auto-columns: 12px; grid-template-columns: none; "> +<x></x><x></x><x></x> +<y></y><y></y><y></y> +<z></z><z></z><z></z> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-container-synthesized-baseline-001-ref.html b/layout/reftests/css-grid/grid-container-synthesized-baseline-001-ref.html new file mode 100644 index 0000000000..6b4498ef13 --- /dev/null +++ b/layout/reftests/css-grid/grid-container-synthesized-baseline-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: Synthesized grid container baseline.</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313068"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +.ib { + display: inline-block; +} +.ig { + display: inline-grid; +} +.ib, .ig { + border-style: solid; + border-width: 3px 1px 5px 1px; + padding: 7px 10px 3px 8px; + margin: 5px 3px 2px 1px; +} +</style> + +</head><body> + +<pre>Inline-level context:</pre> +Grid:<div class="ib"></div> +Block:<div class="ig"></div> + +<pre>Grid-level context:</pre> +<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start"> +Grid:<div class="ib"></div> +Block:<div class="ig"></div> +</div> + +<pre>Flexbox-level context:</pre> +<div style="display:inline-flex; align-items:baseline; justify-items:start"> +Grid:<div class="ib" style="margin-bottom:0"></div> +Block:<div class="ig"></div> +</div> + +</body></html> diff --git a/layout/reftests/css-grid/grid-container-synthesized-baseline-001.html b/layout/reftests/css-grid/grid-container-synthesized-baseline-001.html new file mode 100644 index 0000000000..76440f5455 --- /dev/null +++ b/layout/reftests/css-grid/grid-container-synthesized-baseline-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: Synthesized grid container baseline.</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313068"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> + <link rel="match" href="grid-container-synthesized-baseline-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +.ib { + display: inline-block; +} +.ig { + display: inline-grid; +} +.ib, .ig { + border-style: solid; + border-width: 3px 1px 5px 1px; + padding: 7px 10px 3px 8px; + margin: 5px 3px 2px 1px; +} +</style> + +</head><body> + +<pre>Inline-level context:</pre> +Grid:<div class="ig"></div> +Block:<div class="ib"></div> + +<pre>Grid-level context:</pre> +<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start"> +Grid:<div class="ig"></div> +Block:<div class="ib" style="margin-bottom:0"></div> +</div> + +<pre>Flexbox-level context:</pre> +<div style="display:inline-flex; align-items:baseline; justify-items:start"> +Grid:<div class="ig"></div> +Block:<div class="ib" style="margin-bottom:0"></div> +</div> + +</body></html> diff --git a/layout/reftests/css-grid/grid-flex-min-sizing-001-ref.html b/layout/reftests/css-grid/grid-flex-min-sizing-001-ref.html new file mode 100644 index 0000000000..e1cfdee8bd --- /dev/null +++ b/layout/reftests/css-grid/grid-flex-min-sizing-001-ref.html @@ -0,0 +1,344 @@ +<!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: flex/auto min-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + border: 1px solid; + float: left; + min-width:100px; +} +.fixed .grid { + width:140px; +} + +.g1 { + grid-template-columns: 24px + minmax(0,0) + minmax(0,0) + 1fr; + min-width:104px; +} + +.g2 { + grid-template-columns: minmax(0,max-content) + minmax(0,0) + minmax(0,0) + 1fr; +} + +.g3 { + grid-template-columns: minmax(0,auto) + minmax(0,0) + minmax(0,0) + 1fr; +} + +.g4 { + grid-template-columns: minmax(2px,0) + minmax(1px,0) + minmax(1px,0) + 1fr; + min-width:104px; +} + +.g5 { + grid-template-columns: minmax(20px,0) + minmax(0,0) + minmax(0,0) + 1fr; + min-width:104px; +} + +.g6 { + grid-template-columns: minmax(2px,0) + minmax(1px,0) + minmax(1px,0) + 20px; + min-width:124px; +} + +.g7 { + grid-template-columns: minmax(20px,1fr) + minmax(0,0) + minmax(0,0) + 20px; +} + +.g8 { + grid-template-columns: minmax(0,1fr) + minmax(0,0) + minmax(0,0) + 20px; +} + +.g9 { + grid-template-columns: 20px + 30px + minmax(0,0) + 10px; + min-width:114px; +} + +.gA { + grid-template-columns: minmax(0,0) + minmax(min-content,40px) + minmax(0,0) + 20px; + min-width:140px; +} + +.gB { + grid-template-columns: minmax(0,0) + minmax(auto,40px) + minmax(0,0) + 20px; +} + +.gC { + grid-template-columns: minmax(0,20px) + minmax(0,40px) + minmax(0,0) + 20px; + min-width:124px; +} + +.gD { + grid-template-columns: minmax(auto,20px) + minmax(auto,40px) + minmax(0,0) + min-content; +} + +.gE { + grid-template-columns: minmax(0,20px) + minmax(0,40px) + minmax(0,20px) + auto; + min-width:104px; +} + +.gF { + grid-template-columns: minmax(0,20px) + 44px + minmax(0,40px) + auto; +} + + +.t { grid-column: span 3; border:2px solid; } +.d1 { grid-column: 1 / span 2; background: grey; } +.d3 { grid-column: 3 / span 2; background: blue; } +div { min-width:0; min-height:10px; } +t { display:inline-block; width:20px; } + + </style> +</head> +<body> + + +<div class="g1 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g2 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g3 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g4 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g5 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="g6 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g7 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g8 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g9 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="gA grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gB grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gC grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gD grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gE grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gF grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<br clear="all" style="margin-top:100px"> + +<span class="fixed"> +<div class="g1 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g2 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g3 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g4 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g5 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="g6 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g7 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g8 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g9 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="gA grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gB grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gC grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gD grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="gE grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gF grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +</span> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-flex-min-sizing-001.html b/layout/reftests/css-grid/grid-flex-min-sizing-001.html new file mode 100644 index 0000000000..2c990faf8b --- /dev/null +++ b/layout/reftests/css-grid/grid-flex-min-sizing-001.html @@ -0,0 +1,343 @@ +<!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: flex/auto min-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax"> + <link rel="match" href="grid-flex-min-sizing-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + border: 1px solid; + float: left; + min-width:100px; +} +.fixed .grid { + width:140px; +} + +/* + * NOTE Due to a spec change, 'fr' min-sizing inside minmax() is now + * invalid, so they were replaced in this test with 'auto' instead (for now). + */ + +.g1 { + grid-template-columns: minmax(auto,min-content) + minmax(auto,0) + minmax(auto,0) + 1fr; +} + +.g2 { + grid-template-columns: minmax(auto,max-content) + minmax(auto,0) + minmax(auto,0) + 1fr; +} + +.g3 { + grid-template-columns: minmax(auto,auto) + minmax(auto,0) + minmax(auto,0) + 1fr; +} + +.g4 { + grid-template-columns: minmax(auto,0) + minmax(auto,0) + minmax(auto,0) + 1fr; +} + +.g5 { + grid-template-columns: minmax(20px,0) + minmax(auto,0) + minmax(auto,0) + 1fr; +} + +.g6 { + grid-template-columns: minmax(auto,0) + minmax(auto,0) + minmax(auto,0) + 20px; +} + +.g7 { + grid-template-columns: minmax(20px,1fr) + minmax(auto,0) + minmax(auto,0) + 20px; +} + +.g8 { + grid-template-columns: minmax(auto,1fr) + minmax(auto,0) + minmax(auto,0) + 20px; +} + +.g9 { + grid-template-columns: 20px + 30px + minmax(auto,0) + 10px; +} + +.gA { + grid-template-columns: minmax(auto,0) + minmax(min-content,40px) + minmax(auto,0) + 20px; +} + +.gB { + grid-template-columns: minmax(auto,0) + minmax(auto,40px) + minmax(auto,0) + 20px; +} + +.gC { + grid-template-columns: minmax(auto,20px) + minmax(auto,40px) + minmax(auto,0) + 20px; +} + +.gD { + grid-template-columns: minmax(auto,20px) + minmax(auto,40px) + minmax(auto,0) + min-content; +} + +.gE { + grid-template-columns: minmax(auto,20px) + minmax(auto,40px) + minmax(auto,20px) + auto; +} + +.gF { + grid-template-columns: minmax(auto,20px) + minmax(min-content,max-content) + minmax(auto,40px) + auto; +} + + +.t { grid-column: span 3; border:2px solid; } +.d1 { grid-column: 1 / span 2; background: grey; } +.d3 { grid-column: 3 / span 2; background: blue; } +div { min-width:0; min-height:10px; } +t { display:inline-block; width:20px; } + + </style> +</head> +<body> + + +<div class="g1 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g2 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g3 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g4 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g5 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="g6 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g7 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g8 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g9 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="gA grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gB grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gC grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gD grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gE grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gF grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<br clear="all" style="margin-top:100px"> + +<span class="fixed"> +<div class="g1 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g2 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g3 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g4 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g5 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="g6 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g7 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g8 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="g9 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="gA grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gB grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gC grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gD grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="gE grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +<div class="gF grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> + +</span> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html b/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html new file mode 100644 index 0000000000..e5b0ec1dd7 --- /dev/null +++ b/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.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>Reference: flex/auto min-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + border: 1px solid; + float: left; +} + +.g0 { + display: grid; + grid-template-columns: minmax(min-content,min-content); + border:1px solid; + float: left; + margin-right: 20px; +} + +.g1 { + grid-template-columns: 24px + minmax(0,0) + minmax(0,0) + 1fr; + min-width: 24px; +} + +.g2 { + grid-template-columns: min-content + 0 + 0 + 1fr; +} + +.g3 { + grid-template-columns: min-content + 0 + 0 + 1fr; +} + +.g4 { + grid-template-columns: minmax(2px,0) + 1px + 1px + 20px; +} + +.g5 { + grid-template-columns: minmax(20px,0) + minmax(0,0) + minmax(0,0) + 4px; +} + +.g6 { + grid-template-columns: minmax(1.333333px,0) + minmax(1.333333px,0) + minmax(1.333333px,0) + 20px; + min-width: 44px; +} + +.g7 { + grid-template-columns: minmax(20px,1fr) + minmax(min-content,0) + minmax(min-content,0) + 20px; +} + +.g8 { + grid-template-columns: minmax(min-content,1fr) + minmax(min-content,0) + minmax(min-content,0) + 20px; +} + +.g9 { + grid-template-columns: 20px + 30px + minmax(min-content,0) + 10px; +} + +.gA { + grid-template-columns: minmax(min-content,0) + minmax(min-content,40px) + minmax(min-content,0) + 20px; +} + +.gB { + grid-template-columns: 24px + 0 + 0 + 20px; + min-width: 44px; +} + +.gC { + grid-template-columns: minmax(24px,0) + 0 + 0 + 20px; + min-width: 44px; +} + +.gD { + grid-template-columns: minmax(24px,0) + 0 + 0 + 0; +} + +.gE { + grid-template-columns: minmax(8px,0) + minmax(8px,0) + minmax(8px,0) + 0px; +} + +.gF { + grid-template-columns: 2px + 20px + 2px + 0; +} + + +.t { grid-column: span 3; border:2px solid; } +.d1 { grid-column: 1 / span 2; background: grey; } +.d3 { grid-column: 3 / span 2; background: blue; } +div { min-width:0; min-height:10px; } +t { display:inline-block; width:20px; } + + </style> +</head> +<body> + + +<div class="g0"> +<div class="g1 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g2 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g3 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g4 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g5 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="g0"> +<div class="g6 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g7 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g8 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g9 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="g0"> +<div class="gA grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="gB grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="gC grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="gD grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="gE grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="gF grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-flex-min-sizing-002.html b/layout/reftests/css-grid/grid-flex-min-sizing-002.html new file mode 100644 index 0000000000..e10763f5ea --- /dev/null +++ b/layout/reftests/css-grid/grid-flex-min-sizing-002.html @@ -0,0 +1,277 @@ +<!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: flex/auto min-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax"> + <link rel="match" href="grid-flex-min-sizing-002-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + border: 1px solid; +} + +.g0 { + display: grid; + grid-template-columns: minmax(min-content,min-content); + border:1px solid; + float: left; + margin-right: 20px; + justify-items: start; +} + +/* + * NOTE Due to a spec change, 'fr' min-sizing inside minmax() is now + * invalid, so they were replaced in this test with 'auto' instead (for now). + */ + +.g1 { + grid-template-columns: minmax(auto,min-content) + minmax(auto,0) + minmax(auto,0) + 1fr; +} + +.g2 { + grid-template-columns: minmax(auto,max-content) + minmax(auto,0) + minmax(auto,0) + 1fr; +} + +.g3 { + grid-template-columns: minmax(auto,auto) + minmax(auto,0) + minmax(auto,0) + 1fr; +} + +.g4 { + grid-template-columns: minmax(auto,0) + minmax(auto,0) + minmax(auto,0) + 1fr; +} + +.g5 { + grid-template-columns: minmax(20px,0) + minmax(auto,0) + minmax(auto,0) + 1fr; +} + +.g6 { + grid-template-columns: minmax(auto,0) + minmax(auto,0) + minmax(auto,0) + 20px; +} + +.g7 { + grid-template-columns: minmax(20px,1fr) + minmax(auto,0) + minmax(auto,0) + 20px; +} + +.g8 { + grid-template-columns: minmax(auto,1fr) + minmax(auto,0) + minmax(auto,0) + 20px; +} + +.g9 { + grid-template-columns: 20px + 30px + minmax(auto,0) + 10px; +} + +.gA { + grid-template-columns: minmax(auto,0) + minmax(min-content,40px) + minmax(auto,0) + 20px; +} + +.gB { + grid-template-columns: minmax(auto,0) + minmax(auto,40px) + minmax(auto,0) + 20px; +} + +.gC { + grid-template-columns: minmax(auto,20px) + minmax(auto,40px) + minmax(auto,0) + 20px; +} + +.gD { + grid-template-columns: minmax(auto,20px) + minmax(auto,40px) + minmax(auto,0) + min-content; +} + +.gE { + grid-template-columns: minmax(auto,20px) + minmax(auto,40px) + minmax(auto,20px) + auto; +} + +.gF { + grid-template-columns: minmax(auto,20px) + minmax(min-content,max-content) + minmax(auto,40px) + auto; +} + + +.t { grid-column: span 3; border:2px solid; } +.d1 { grid-column: 1 / span 2; background: grey; } +.d3 { grid-column: 3 / span 2; background: blue; } +div { min-width:0; min-height:10px; } +t { display:inline-block; width:20px; } + + </style> +</head> +<body> + + +<div class="g0"> +<div class="g1 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g2 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g3 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g4 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g5 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="g0"> +<div class="g6 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g7 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g8 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="g9 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<br clear="all" style="margin-top:100px"> + +<div class="g0"> +<div class="gA grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="gB grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="gC grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="gD grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="gE grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + +<div class="g0"> +<div class="gF grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> + <div class="d3"></div> +</div> +</div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-001-ref.html b/layout/reftests/css-grid/grid-fragmentation-001-ref.html new file mode 100644 index 0000000000..52ac82aec8 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-001-ref.html @@ -0,0 +1,159 @@ +<!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: Fragmentation of height:auto grid, not top-of-page</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.block { + border:5px solid; +} +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-template-rows: 50px; + grid-column-gap: 12px; + border:5px solid; +} +.t { border-bottom-width:0; } +.b { border-top-width:0; } +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +br { page-break-before:always; break-before:always; } +</style> +</head> +<body> + +<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<br> +<div class="grid b"> +<span><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="block"> +</div></div></div> + +<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="block" style="height:2px/*creates a Class C break opportunity at the end*/"> +</div></div></div> + +<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<br> +<div class="grid b"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid b"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid b"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid b"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid b"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid b"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-001.html b/layout/reftests/css-grid/grid-fragmentation-001.html new file mode 100644 index 0000000000..d2d7eb7edd --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-001.html @@ -0,0 +1,120 @@ +<!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: Fragmentation of height:auto grid, not top-of-page</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 50px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +</style> +</head> +<body> + +<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +</div></div></div> + +<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid" style="height:2px/*creates a Class C break opportunity at the end*/"> +</div></div></div> + +<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-002-ref.html b/layout/reftests/css-grid/grid-fragmentation-002-ref.html new file mode 100644 index 0000000000..069bef3be2 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-002-ref.html @@ -0,0 +1,138 @@ +<!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: Fragmentation height:auto two row grid without grid items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.block { + position:relative; + border:5px solid; +} +.grid { + display: grid; + position:relative; + grid-template-columns: 30px 30px 30px; + grid-template-rows: 50px; + grid-gap: 12px; + border:5px solid; +} +span { grid-row:1/2; position:absolute; top:0;bottom:0;right:0;left:0;background:lime; border:1px solid black; } +x { display:block; height:20px; } + +.t { border-bottom-width:0; } +.b { border-top-width:0; } +br { page-break-before:always; break-before:always; } + +</style> +</head> +<body> + +<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span style="height:48px"><x></x></span> +</div> +<br> +<div class="grid b"> +</div></div></div> + +<div class="columns" style="height: 64px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span style="height:48px"><x></x></span> +</div> +<div class="grid b"> +</div></div></div> + +<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="block"> +<span style="height:0"></span> +</div></div></div> + +<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="block t" style="height:2px"> +<span style="height:0px"></span> +</div> +<div class="block b" style="margin-top:6px;height:0px"> +</div></div></div> + +<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span style="height:48px"><x></x></span> +</div> +<br> +<div class="grid b"> +</div></div></div> + +<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span style="height:48px"><x></x></span> +</div> +<div class="grid b"> +</div></div></div> + +<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span><x></x></span> +</div> +<div class="grid b"> +</div></div></div> + +<!-- + +TODO (bug 1347692): this caused too many intermittent failures, see bug 1317149 and bug 1264056 + +<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span><x></x></span> +</div> +<div class="grid b"> +</div></div></div> +--> + +<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span><x></x></span> +</div> +<div class="grid b"> +</div></div></div> + +<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span><x></x></span> +</div> +<div class="grid b"> +</div></div></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-002.html b/layout/reftests/css-grid/grid-fragmentation-002.html new file mode 100644 index 0000000000..dd5ce82ca5 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-002.html @@ -0,0 +1,115 @@ +<!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: Fragmentation height:auto two row grid without grid items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-002-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + position:relative; + grid-template-columns: 30px 30px 30px; + grid-template-rows: 50px 50px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { position:absolute; top:0;bottom:0;right:0;left:0;background:lime; border:1px solid black; } +x { display:block; height:20px; } + +</style> +</head> +<body> + +<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height: 64px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid" style="grid-template-rows:auto"> +<span></span> +</div></div></div> + +<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid" style="grid-template-rows:auto; height:2px/*creates a Class C break opportunity at the end*/"> +<span></span> +</div></div></div> + +<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span><x></x></span> +</div></div></div> + +<!-- + +TODO (bug 1347692): this caused too many intermittent failures, see bug 1317149 and bug 1264056 + +<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span><x></x></span> +</div></div></div> + +--> + + +<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span><x></x></span> +</div></div></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-003-ref.html b/layout/reftests/css-grid/grid-fragmentation-003-ref.html new file mode 100644 index 0000000000..a5f320d821 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-003-ref.html @@ -0,0 +1,136 @@ +<!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: Fragmentation height:auto grid with first grid row at top-of-page</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.block { + border:5px solid; + border-top-width:0; + border-bottom-width:10px; +} +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 50px; + grid-gap: 12px; + border:5px solid; + border-top-width:0; + border-bottom-width:10px; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +.t { border-bottom-width:0; } +.b { border-top-width:0; } +br { page-break-before:always; break-before:always; } + +</style> +</head> +<body> + +<div class="columns" style="height: 120px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="grid t"> +<span><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<br> +<div class="grid b"> +<span><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 8px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="block"> +</div></div></div> + +<div class="columns" style="height: 10px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="block" style="height:2px/*creates a Class C break opportunity at the end*/"> +</div></div></div> + +<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/"> +<div style="background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<br> +<div class="grid b"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */"> +<div style="background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid b"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px"> +<div style="background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid b"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px"> +<div style="background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid b"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-003.html b/layout/reftests/css-grid/grid-fragmentation-003.html new file mode 100644 index 0000000000..27a0cee571 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-003.html @@ -0,0 +1,103 @@ +<!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: Fragmentation height:auto grid with first grid row at top-of-page</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-003-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 50px; + grid-gap: 12px; + border:5px solid; + border-top-width:0; + border-bottom-width:10px; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +</style> +</head> +<body> + +<div class="columns" style="height: 120px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 8px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="grid"> +</div></div></div> + +<div class="columns" style="height: 10px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="grid" style="height:2px/*creates a Class C break opportunity at the end*/"> +</div></div></div> + +<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-004-ref.html b/layout/reftests/css-grid/grid-fragmentation-004-ref.html new file mode 100644 index 0000000000..a8fc867d58 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-004-ref.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>Reference: Fragmentation with first grid row at top-of-page and Class C break opportunities</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.block { + border:5px solid; + border-top-width:0; + border-bottom-width:10px; + height: 120px; +} +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 50px; + grid-gap: 12px; + border:5px solid; + border-top-width: 0; + border-bottom-width: 10px; + align-content: center; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-top-width:0; border-bottom-width:0; } +.grid.t {padding-top:4px;} + +.br1 { height:1px; } + +</style> +</head> +<body> + +<div class="columns" style="height: 122px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="grid t" style="height:112px; padding-bottom:4px;"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +</div> +<div style="height:2px;"></div> +<div class="block" style="border-top-style:none; height:0px;"> +</div></div></div> + +<div class="columns" style="height: 122px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="block"> +</div></div></div> + +<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/"> +<div style="background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="br1"></div> +<div class="grid b" style="padding-bottom:16px"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */"> +<div style="background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid m" style="padding-bottom:10px"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div> +<div class="block" style="border-top-style:none; height:6px;"> +</div> +</div></div> + +<!-- TODO XXX depends on bug 1238294 + +<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px"> +<div style="background:grey"> +<div class="br1"></div> +<div class="grid m"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid m"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div> +<div class="block" style="margin-top:-19px; border-top-style:none; height:20px;"> +</div> +</div></div> + +<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px"> +<div style="background:grey"> +<div class="br1"></div> +<div class="grid m"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid m"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div> +<div style="background:black; padding-bottom:10px;"></div> +</div></div> + +<div class="columns" style="height: 2px/*fragmentainer ends between the start border but before the first row */"> +<div style="background:grey;"> +<div class="br1"></div> +<div class="grid m"> +<span><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +<span class="t"><x></x></span> +</div> +<div class="grid m"> +<span><x></x></span> +<span class="b" style="height:11px; background:cyan"><x></x></span> +<span class="b"style=""><x></x></span> +</div> +<div style="background:black; padding-bottom:10px;"></div> +</div></div> + +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-004.html b/layout/reftests/css-grid/grid-fragmentation-004.html new file mode 100644 index 0000000000..575bb8205d --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-004.html @@ -0,0 +1,113 @@ +<!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: Fragmentation with first grid row at top-of-page and Class C break opportunities</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-004-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 50px; + grid-gap: 12px; + border:5px solid; + border-top-width: 0; + border-bottom-width: 10px; + height: 120px; /* 4px before/after first/last row are Class C break opportunities */ + align-content: center; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +</style> +</head> +<body> + +<div class="columns" style="height: 122px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 122px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="grid"> +</div></div></div> + +<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<!-- TODO XXX depends on bug 1238294 + +<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 2px/*fragmentainer ends between the start border but before the first row */"> +<div style="background:grey"> +<div class="grid"> +<span style="height:60px; background:cyan"><x></x></span> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span style="grid-row:1"><x></x></span> +</div></div></div> + +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-005-ref.html b/layout/reftests/css-grid/grid-fragmentation-005-ref.html new file mode 100644 index 0000000000..e78090fb04 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-005-ref.html @@ -0,0 +1,147 @@ +<!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: Fragmentation of height:auto grid, not top-of-page, forced breaks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-top-width:0; border-bottom-width:0; } + +.br1 { height:1px; } + +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*two rows would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span><x></x></span> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div style="height:40px;"></div> +<div class="grid b"> +<span class="b"><x></x></span> +<span class="b" style="grid-area:1/3; height:6px; background:cyan"><x></x></span> +<span style="grid-area:1/3; align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height:30px"> +<div style="padding-top:10px; background:grey"> +<div class="grid break-before"> +</div></div></div> + +<div class="columns" style="height: 60px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div style="height:40px;"></div> +<div class="grid"> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div style="height:40px;"></div> +<div class="grid b"> +<span class="b" style="grid-area:1/1; height:6px"><x></x></span> +<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="height:6px; background:cyan"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div style="height:40px;"></div> +<div class="grid b"> +<span class="b" style="grid-area:1/1; height:6px"><x></x></span> +<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="height:6px; background:cyan"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div style="height:90px;"></div> +<div class="grid"> +<span style="height:35px"><x></x></span> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div class="grid m"> +<span class="b" style="grid-area:1/1; height:6px"><x></x></span> +<span class="b" style="background:cyan"><x></x></span> +<span style="grid-area:1/1; align-self:end; background:pink"><x></x></span> +</div> +<div style="height:50px"></div> +<div class="grid b"> +<span style=""><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 160px/*everything would fit in 1st column*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid t"> +<span class="t" style="grid-row: span 2"><x></x></span> +<span style="grid-row: span 2"><x></x></span> +</div> +<div style="height:53px"></div> +<div class="grid b"> +<span class="b"><x></x></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-005.html b/layout/reftests/css-grid/grid-fragmentation-005.html new file mode 100644 index 0000000000..7dfc8f0fb1 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-005.html @@ -0,0 +1,131 @@ +<!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: Fragmentation of height:auto grid, not top-of-page, forced breaks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-005-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +m { display:block; padding-top:10px; } +.break-before { page-break-before:always; break-before:always; } +.break-after { page-break-after:always; break-after:always; } + +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*two rows would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span><x></x></span> +<span class="break-before" style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height:30px"> +<div style="padding-top:10px; background:grey"> +<div class="grid break-before"> +</div></div></div> + +<div class="columns" style="height: 60px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span class="break-before"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span class="break-before" style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span class="break-after" style="height:35px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span class="break-before" style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span style="grid-row:3"><x></x></span> +<span class="break-after" style="grid-row:span 2; background:cyan"><x></x></span> +<span class="break-before" style="grid-row:2; align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 160px/*everything would fit in 1st column*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span class="break-after" style="grid-row: span 3"><x></x></span> +<span class="break-after" style="grid-row: span 2"><x></x></span> +</div> +</div></div> + +<!-- TODO XXX bug 775628? (break-after on last row should propagate to container) +<div class="columns" style="height: 135px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span class="break-after" style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div> +<div style="height:20px;background:yellow"></div> +</div></div> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-006-ref.html b/layout/reftests/css-grid/grid-fragmentation-006-ref.html new file mode 100644 index 0000000000..bb6638291d --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-006-ref.html @@ -0,0 +1,116 @@ +<!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: Fragmentation of height:auto grid, not top-of-page, item break-inside:avoid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: space-evenly; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.br1 { height:94px; border-width:5px; border-top-style:solid; } + +</style> +</head> +<body> + +<div class="columns" style="height: 110px/*trigger IsInlineBreakBefore() for the item*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 70px/*item will be INCOMPLETE*/"> +<div style="background:grey"> +<div class="grid"> +<span><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*item will be INCOMPLETE*/"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<!-- bug 1415301 +<div class="columns" style="height: 140px/*trigger IsInlineBreakBefore() for the item*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span style="grid-row:span 3"><x></x></span> +<span style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span></div> +</div></div> +--> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-auto-rows: 50px; height:50px;"> +<span class="t" style="grid-row:span 2; height:49px; overflow:hidden"><i></i><i></i><i></i><x></x></span> +</div> +<div style="height:44px"></div> +<div class="grid b" style="grid-auto-rows: 50px; height:50px;"> +<span class="b" style="grid-row:span 2; height:11px; overflow:hidden"><i style="margin-top:0;height:2px"></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item*/"> +<div style="padding-top:1px; background:grey"> +<div class="br1"></div> +<div class="grid b" style="grid-auto-rows: 50px; height:116px;"> +<span style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item*/"> +<div style="padding-top:1px; background:grey"> +<div class="br1"></div> +<div class="grid b" style="grid-auto-rows: 50px; height:116px; grid-gap:0;"> +<span style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item*/"> +<div style="padding-top:1px; background:grey"> +<div class="br1"></div> +<div class="grid b" style="grid-auto-rows: 50px; height:116px; grid-gap:0;"> +<span style="height:100px; background:pink"><x></x></span> +<span style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-006.html b/layout/reftests/css-grid/grid-fragmentation-006.html new file mode 100644 index 0000000000..29e4c161cb --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-006.html @@ -0,0 +1,108 @@ +<!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: Fragmentation of height:auto grid, not top-of-page, item break-inside:avoid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-006-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: space-evenly; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 110px/*trigger IsInlineBreakBefore() for the item*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span class="avoid-break"><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 70px/*item will be INCOMPLETE*/"> +<div style="background:grey"> +<div class="grid"> +<span class="avoid-break"><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*item will be INCOMPLETE*/"> +<div style="background:grey"> +<div class="grid"> +<span class="avoid-break" style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<!-- bug 1415301 +<div class="columns" style="height: 140px/*trigger IsInlineBreakBefore() for the item*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span style="grid-row:span 3"><x></x></span> +<span class="avoid-break" style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span></div> +</div></div> +--> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-auto-rows: 50px;"> +<span class="avoid-break" style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-auto-rows: 50px; height:116px;"> +<span class="avoid-break" style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-auto-rows: 50px; height:116px; grid-gap:0;"> +<span class="avoid-break" style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-auto-rows: 50px; height:116px; grid-gap:0;"> +<span style="height:100px; background:pink"><x></x></span> +<span class="avoid-break" style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-007-ref.html b/layout/reftests/css-grid/grid-fragmentation-007-ref.html new file mode 100644 index 0000000000..8031f6b5ea --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-007-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: Fragmentation of height:auto grid, not top-of-page, forced break growing 'fr' row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: space-evenly; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-top-width:0; border-bottom-width:0; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;"> +<span><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;"> +<span class="b"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;"> +<span class="m"><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 30px; grid-gap:0;"> +<span class="b"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span class="t" style="grid-row:1/span 2"><x></x></span> +</div> +<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;"> +<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span> +<span class="m" style="grid-column:3"><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;"> +<span class="b" style="grid-column:3"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px"> +<span class="t" style="grid-row:1/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div> +<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;"> +<span class="m"><x></x></span> +<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span> +</div> +<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;"> +<span class="b"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 50px; grid-gap:0;"> +</div> +<div class="grid m" style="grid-template-rows: 1fr; grid-gap:0; height:100px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;"> +<span class="b"><x></x></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-007.html b/layout/reftests/css-grid/grid-fragmentation-007.html new file mode 100644 index 0000000000..00a3096175 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-007.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>CSS Grid Test: Fragmentation of height:auto grid, not top-of-page, forced break growing 'fr' row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-007-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: space-evenly; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 4"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px 1fr 50px;"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span style="grid-row:1/span 5"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px 1fr 50px;"> +<span style="grid-row:1/span 5"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow row 2*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 50px 1fr 50px; grid-gap:0;"> +<span style="grid-row:2/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-008-ref.html b/layout/reftests/css-grid/grid-fragmentation-008-ref.html new file mode 100644 index 0000000000..9db9807073 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-008-ref.html @@ -0,0 +1,130 @@ +<!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: Fragmentation of height:auto grid, top-of-page</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + border-top-width:0; + align-content: start; +} +span { padding-top:20px; background:lime; border:1px solid black; } + +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-top-width:0; border-bottom-width:0; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 94px"> +<div style="background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:82px"> +<span style="height:50px;"><i style="height:54px"></i></span> +<span style="height:60px"><i></i><i></i><i></i></span> +</div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;"> +<span></span> +</div> +</div></div> + +<div class="columns" style="height: 94px"> +<div style="background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:82px"> +<span class="t"></span> +<span style="height:50px;"><i style="height:54px"></i></span> +<span style="height:60px"><i></i><i></i><i></i></span> +</div> +<div style="height:12px"></div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;"> +<span class="b"></span> +<span class="m" style="padding:0; height:6px; background:blue; margin: 0 1px; border-width:0"></span> +</div> +</div></div> + +<div class="columns" style="height: 94px"> +<div style="background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:82px"> +<span class="t"></span> +<span style="height:50px"><i style="height:54px"></i></span> +<span style="height:60px"><i></i><i></i><i></i></span> +</div> +<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;"> +<span class="m"></span> +<span class="m" style="padding:0; height:6px; background:blue; margin: 0 1px; border-width:0"></span> +</div> +<div class="grid b" style="grid-template-rows: 30px; grid-gap:0;"> +<span class="b"></span> +</div> +</div></div> + +<div class="columns" style="height: 94px"> +<div style="background:grey"> +<div class="grid t" style="grid-template-rows: 5px; grid-row-gap:0; height:5px"> +<span class="t" style="grid-column:3"></span> +</div> +<div style="height:88px"></div> +<div class="grid m" style="grid-template-rows: 1fr; grid-row-gap:0; height:82px"> +<span style="height:50px"><i style="height:54px"></i></span> +<span style="height:60px"><i></i><i></i><i></i></span> +<span class="m"></span> +</div> +<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;"> +<span class="m" style="padding:0; height:6px; background:blue; margin: 0 1px; border-width:0"></span> +<span class="m" style="grid-column:3"></span> +</div> +<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;"> +<span class="b" style="grid-column:3"></span> +</div> +</div></div> + +<div class="columns" style="height: 94px"> +<div style="background:grey"> +<div class="grid t" style="grid-template-rows: 5px; grid-row-gap:0; height:5px"> +<span class="t"></span> +</div> +<div style="height:88px"></div> +<div class="grid m" style="grid-template-rows: 1fr; grid-row-gap:0; height:82px"> +<span class="m"></span> +<span style="height:50px"><i style="height:54px"></i></span> +<span style="height:60px"><i></i><i></i><i></i></span> +</div> +<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;"> +<span class="m"></span> +<span class="m" style="padding:0; height:6px; background:blue; margin: 0 1px; border-width:0"></span> +</div> +<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;"> +<span class="b"></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-008.html b/layout/reftests/css-grid/grid-fragmentation-008.html new file mode 100644 index 0000000000..6d356e8de1 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-008.html @@ -0,0 +1,93 @@ +<!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: Fragmentation of height:auto grid, top-of-page</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-008-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + border-top-width:0; + align-content: space-evenly; +} +span { padding-top:20px; background:lime; border:1px solid black; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 94px/*trigger OVERFLOW_INCOMPLETE for the item*/"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i></span> +<span style="grid-row:2"></span> +</div> +</div></div> + +<div class="columns" style="height: 94px/*trigger OVERFLOW_INCOMPLETE for the item*/"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i></span> +<span style="grid-row:1/span 2"></span> +</div> +</div></div> + +<div class="columns" style="height: 94px/*trigger OVERFLOW_INCOMPLETE for the item*/"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i></span> +<span style="grid-row:1/span 4"></span> +</div> +</div></div> + +<div class="columns" style="height: 94px/*trigger INCOMPLETE for the item*/"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 5px 1fr 50px;"> +<span style="grid-row:2; height:50px"><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i></span> +<span style="grid-row:1/span 5"></span> +</div> +</div></div> + +<div class="columns" style="height: 94px/*trigger INCOMPLETE for the item*/"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 5px 1fr 50px;"> +<span style="grid-row:1/span 5"></span> +<span style="grid-row:2; height:50px"><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-009-ref.html b/layout/reftests/css-grid/grid-fragmentation-009-ref.html new file mode 100644 index 0000000000..e55bf120b8 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-009-ref.html @@ -0,0 +1,159 @@ +<!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: Fragmentation of definite height, not top-of-page, forced breaks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-top-width:0; border-bottom-width:0; } + +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*two rows would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span><x></x></span> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div style="height:40px;"></div> +<div class="grid b" style="height:60px"> +<span class="b"><x></x></span> +<span class="b" style="grid-area:1/3; height:6px; background:cyan"><x></x></span> +<span style="grid-area:1/3; align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height:30px"> +<div style="padding-top:10px; background:grey"> +<div style="height:90px;border:5px solid;"></div> +</div></div> + +<div class="columns" style="height: 60px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div style="height:50px;"></div> +<div class="grid t"> +<span><x></x></span> +</div> +<div style="height:60px; border:5px solid; border-top-width:0;"> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div style="height:40px;"></div> +<div class="grid b" style="padding-bottom:30px"> +<span class="b" style="grid-area:1/1; height:6px"><x></x></span> +<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="height:6px; background:cyan"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div style="height:40px;"></div> +<div class="grid b" style="padding-bottom:30px"> +<span class="b" style="grid-area:1/1; height:6px"><x></x></span> +<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="height:6px; background:cyan"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div style="height:90px;"></div> +<div class="grid" style="padding-bottom:18px"> +<span style="height:35px"><x></x></span> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/"> +<div style="padding-top:10px; background:grey"> +<div style="height:87px;"></div> +<div class="grid t" style="padding-bottom:18px"> +<span style="height:35px"><x></x></span> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span> +</div> +<div class="grid b"></div> +</div></div> + +<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div class="grid m"> +<span class="b" style="grid-area:1/1; height:6px"><x></x></span> +<span class="b" style="background:cyan"><x></x></span> +<span style="grid-area:1/1; align-self:end; background:pink"><x></x></span> +</div> +<div style="height:50px"></div> +<div class="grid b"> +<span><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 160px/*everything would fit in 1st column*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid t"> +<span class="t" style="grid-row: span 2"><x></x></span> +<span style="grid-row: span 2"><x></x></span> +</div> +<div style="height:53px"></div> +<div style="height:18px; border:5px solid; border-top-width:0;"> +<span class="b" style="display:block;height:29px;width:28px"></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-009.html b/layout/reftests/css-grid/grid-fragmentation-009.html new file mode 100644 index 0000000000..ae5a253148 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-009.html @@ -0,0 +1,142 @@ +<!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: Fragmentation of definite height grid, not top-of-page, forced breaks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-009-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + height: 90px; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +m { display:block; padding-top:10px; } +.break-before { page-break-before:always; break-before:always; } +.break-after { page-break-after:always; break-after:always; } + +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*two rows would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span><x></x></span> +<span class="break-before" style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height:30px"> +<div style="background:grey"><m></m> +<div class="grid break-before"> +</div></div></div> + +<div class="columns" style="height: 60px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span class="break-before"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span class="break-before" style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span class="break-after" style="height:35px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span class="break-before" style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span class="break-before" style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span style="grid-row:3"><x></x></span> +<span class="break-after" style="grid-row:span 2; background:cyan"><x></x></span> +<span class="break-before" style="grid-row:2; align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 160px/*everything would fit in 1st column*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span class="break-after" style="grid-row: span 3"><x></x></span> +<span class="break-after" style="grid-row: span 2"><x></x></span> +</div> +</div></div> + +<!-- TODO XXX bug 775628? (break-after on last row should propagate to container) +<div class="columns" style="height: 135px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span class="break-after" style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div> +<div style="height:20px;background:yellow"></div> +</div></div> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-010-ref.html b/layout/reftests/css-grid/grid-fragmentation-010-ref.html new file mode 100644 index 0000000000..1f27062cf4 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-010-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html lang="en-US" class="reftest-paged"><head> + <meta charset="utf-8"> + <title>Reference: Fragmentation in print context of height:auto grid, not top-of-page</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: 0.6in 0.6in 0.6in; + grid-auto-rows: 1in; + grid-gap: 0.1in; + border: 0.1in solid; +} +span { display:block; background:lime; border:0.05in solid black; } +x { display:block; height:0.2in; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +br { page-break-after:always; break-after:always; display:block; height:1px; } + +</style> +</head> +<body> + +<div style="padding-top:0.5in; background:grey"> +<div class="grid t"> +<span><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<br> +<div class="grid b"> +<span><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:0.54in; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-010.html b/layout/reftests/css-grid/grid-fragmentation-010.html new file mode 100644 index 0000000000..4acef58641 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-010.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html lang="en-US" class="reftest-paged"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Fragmentation in print context of height:auto grid, not top-of-page</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-010-ref.html"> + <style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: 0.6in 0.6in 0.6in; + grid-auto-rows: 1in; + grid-gap: 0.1in; + border: 0.1in solid; + align-content: start; +} +span { display:block; background:lime; border:0.05in solid black; } +x { display:block; height:0.2in; } + +</style> +</head> +<body> + +<div style="padding-top:0.5in; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:1.5in; background:cyan"><x></x></span> +<span><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-011-ref.html b/layout/reftests/css-grid/grid-fragmentation-011-ref.html new file mode 100644 index 0000000000..15167d3b99 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-011-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html lang="en-US" class="reftest-paged"><head> + <meta charset="utf-8"> + <title>Reference: Fragmentation in print context of height:auto grid with first grid row at top-of-page</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: 0.6in 0.6in 0.6in; + grid-auto-rows: 1in; + grid-gap: 0.1in; + border: 0.1in solid; + border-top-width: 0; +} +span { display:block; background:lime; border:0.05in solid black; } +x { display:block; height:0.2in; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +br { page-break-after:always; break-after:always; display:block; height:1px; } + +</style> +</head> +<body> + +<div style="background:grey"> +<div class="grid t"> +<span><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<br> +<div class="grid b"> +<span><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:0.54in; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-011.html b/layout/reftests/css-grid/grid-fragmentation-011.html new file mode 100644 index 0000000000..1611b9136c --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-011.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html lang="en-US" class="reftest-paged"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Fragmentation in print context of height:auto grid with first grid row at top-of-page</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-011-ref.html"> + <style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: 0.6in 0.6in 0.6in; + grid-auto-rows: 1in; + grid-gap: 0.1in; + border: 0.1in solid; + border-top-width: 0; + align-content: start; +} +span { display:block; background:lime; border:0.05in solid black; } +x { display:block; height:0.2in; } + +</style> +</head> +<body> + +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:1.5in; background:cyan"><x></x></span> +<span><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-012-ref.html b/layout/reftests/css-grid/grid-fragmentation-012-ref.html new file mode 100644 index 0000000000..c67d7cdd1f --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-012-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html lang="en-US" class="reftest-paged"><head> + <meta charset="utf-8"> + <title>Reference: Fragmentation in print context of height:auto grid, not top-of-page, forced breaks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: 0.6in 0.6in 0.6in; + grid-auto-rows: 0.5in; + grid-gap: 0.1in; + border: 0.1in solid; + border-top-width: 0; +} +span { display:block; background:lime; border:0.05in solid black; } +x { display:block; height:0.2in; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +br { page-break-after:always; break-after:always; display:block; height:1px; } + +</style> +</head> +<body> + +<div style="padding-top:0.5in; background:grey"> +<div class="grid t"> +<span><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<br> +<div class="grid b"> +<span><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:0.15in; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-012.html b/layout/reftests/css-grid/grid-fragmentation-012.html new file mode 100644 index 0000000000..c44784a9c3 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-012.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html lang="en-US" class="reftest-paged"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Fragmentation in print context of height:auto grid, not top-of-page, forced breaks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-012-ref.html"> + <style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: 0.6in 0.6in 0.6in; + grid-auto-rows: 0.5in; + grid-gap: 0.1in; + border: 0.1in solid; + border-top-width: 0; + align-content: start; +} +span { display:block; background:lime; border:0.05in solid black; } +x { display:block; height:0.2in; } +.break-before { page-break-before:always; break-before:always; } +.break-after { page-break-after:always; break-after:always; } + +</style> +</head> +<body> + +<div style="padding-top:0.5in; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:0.6in; background:cyan"><x></x></span> +<span><x></x></span> +<span class="break-before" style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-013-ref.html b/layout/reftests/css-grid/grid-fragmentation-013-ref.html new file mode 100644 index 0000000000..4db144aff2 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-013-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html lang="en-US" class="reftest-paged"><head> + <meta charset="utf-8"> + <title>Reference: Fragmentation in print context of height:auto grid, item break-inside:avoid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + height: 1in; + border: 0.1in solid; +} +.col { + height: 0; + width: 0.6in; +} +.col > div { + height: 1in; + position: relative; + background: lime; + border: 0.05in solid black; +} +</style> +</head> +<body> + +<div style="padding-top:1in; background:grey"> + <div class="grid"> + <div class="col"><div></div></div> + </div> +</div> + +<div style="padding-top:1in; background:grey;"> + <div class="grid"> + <div class="col"><div></div></div> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-013.html b/layout/reftests/css-grid/grid-fragmentation-013.html new file mode 100644 index 0000000000..f35d335404 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-013.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html lang="en-US" class="reftest-paged"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Fragmentation in print context of height:auto grid, item break-inside:avoid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-013-ref.html"> + <style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: 0.6in 0.6in 0.6in; + grid-auto-rows: 1in; + grid-gap: 0.1in; + border: 0.1in solid; + align-items: start; +} +span { display:block; background:lime; border:0.05in solid black; } +x { display:block; height:0.2in; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +</style> +</head> +<body> + +<div style="padding-top:1in; background:grey"> +<div class="grid"> +<span class="avoid-break"><x></x><x></x><x></x><x></x><x></x></span> +</div></div> + +<div style="padding-top:1in; background:grey"> +<div class="grid" style="align-content:end; grid-auto-rows:auto; height:1in"> +<span xclass="avoid-break"><x></x><x></x><x></x><x></x><x></x></span> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-014-ref.html b/layout/reftests/css-grid/grid-fragmentation-014-ref.html new file mode 100644 index 0000000000..8bbbdc2f24 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-014-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html lang="en-US" class="reftest-paged"><head> + <meta charset="utf-8"> + <title>Reference: Fragmentation in print context of height:auto grid, item break-inside:avoid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: 0.6in 0.6in 0.6in; + grid-auto-rows: 1in; + border: 0.1in solid; +} +span { display:block; background:lime; border:0.05in solid black; } +x { display:block; height:0.2in; } +i { display:block; height:0.1in; background:blue; } + +</style> +</head> +<body> + +<div style="padding-top:1in; background:grey"> +<div class="grid" style="grid-template-rows: .91in 1in;"> +<span style="height:0.2in"><i style="height:1.5in"></i><x></x></span> +<span style="height:0.25in"><i></i><i></i><i></i><x></x></span> +<span style="grid-area:2/2"><x></x></span> +</div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-014.html b/layout/reftests/css-grid/grid-fragmentation-014.html new file mode 100644 index 0000000000..c491f76b4d --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-014.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html lang="en-US" class="reftest-paged"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Fragmentation in print context of height:auto grid, item break-inside:avoid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-014-ref.html"> + <style type="text/css"> +@page { size:5in 3in; margin:0.5in; } +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: 0.6in 0.6in 0.6in; + grid-auto-rows: 1in; + grid-gap: 0.1in; + border: 0.1in solid; + align-content: start; +} +span { display:block; background:lime; border:0.05in solid black; } +x { display:block; height:0.2in; } +i { display:block; height:0.1in; background:blue; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +</style> +</head> +<body> + +<div style="padding-top:1in; background:grey"> +<div class="grid" style="grid-template-rows: 1fr 1in; grid-gap:0;"> +<span style="height:0.2in"><i style="height:1.5in"></i><x></x></span> +<span class="avoid-break" style="height:0.25in"><i></i><i></i><i></i><x></x></span> +<span style="grid-area:2/2"><x></x></span> +</div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-015-ref.html b/layout/reftests/css-grid/grid-fragmentation-015-ref.html new file mode 100644 index 0000000000..e66105599f --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-015-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: Fragmentation edge cases</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + height: 90px; + grid-template-columns: 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.break-before { page-break-before:always; break-before:always; } +.break-after { page-break-after:always; break-after:always; } + +</style> +</head> +<body> + +<!-- grid wrapped in inline --> +<div class="columns" style="height: 40px"> +<div style="padding-top:2px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></div></div> + +<!-- grid wrapped in inline with orthogonal writing-mode --> +<div class="columns" style="width: 40px; height:40px;"> +<div style="padding-top:2px; background:grey"> +<div class="grid" style="overflow:hidden; writing-mode:vertical-lr"> +<span style="grid-row:span 2;"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></div></div> + +<!-- grid wrapped in overflow:hidden block --> +<div class="columns" style="height: 40px; margin-top:70px"> +<div style="padding-top:2px; background:grey"> +<div class="grid" style="overflow:hidden"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></div></div> + +<!-- grid wrapped in FIELDSET block --> +<div class="columns" style="height: 40px; margin-top:70px"> +<div style="padding-top:2px; background:grey"> +<div style="border:none; padding:0; margin:0"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></div></div></div> + +<!-- grid wrapped in FIELDSET inline --> +<div class="columns" style="height: 40px; margin-left:200px"> +<div style="padding-top:2px; background:grey"> +<div style="display:inline-block; border:none; padding:0; margin:0"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></div></div></div> + +<!-- grid wrapped in FIELDSET overflow:hidden block --> +<div class="columns" style="height: 40px; margin-left:400px"> +<div style="padding-top:2px; background:grey"> +<div style="display:block; overflow:hidden; border:none; padding:0; margin:0; width:min-content"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></div></div></div> + +<!-- grid with orthogonal writing-mode to fragmentainer --> +<div class="columns" style="height: 40px; margin-top:70px"> +<div style="padding-top:2px; background:grey"> +<y> +<div class="grid" style="overflow:hidden; writing-mode:vertical-lr"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></y></div></div> + +<!-- vertical grid and fragmentainer with intermediary horizontal writing-mode inline --> +<!-- XXX bug 1242660: remove the visibility:hidden DIV when we know what the rendering should be --> +<div style="visibility:hidden"> +<div class="columns" style="width: 50px; writing-mode:vertical-lr; margin-top:70px"> +<div style="padding-top:2px; background:grey"> +<y style="writing-mode:horizontal-lr"> +<div class="grid" style="writing-mode:vertical-lr"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></y></div></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-015.html b/layout/reftests/css-grid/grid-fragmentation-015.html new file mode 100644 index 0000000000..64a97d6ea4 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-015.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>CSS Grid Test: Fragmentation edge cases</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-015-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + height: 90px; + grid-template-columns: 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.break-before { page-break-before:always; break-before:always; } +.break-after { page-break-after:always; break-after:always; } + +</style> +</head> +<body> + +<!-- grid wrapped in inline --> +<div class="columns" style="height: 40px"> +<div style="padding-top:2px; background:grey"> +<y> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></y></div></div> + +<!-- grid wrapped in inline with orthogonal writing-mode --> +<div class="columns" style="width: 40px; height:40px"> +<div style="padding-top:2px; background:grey"> +<y style="writing-mode:vertical-lr"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></y></div></div> + +<!-- grid wrapped in overflow:hidden block --> +<div class="columns" style="height: 40px; margin-top:70px"> +<div style="padding-top:2px; background:grey"> +<y style="display:block;overflow:hidden"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></y></div></div> + +<!-- grid wrapped in FIELDSET block --> +<div class="columns" style="height: 40px; margin-top:70px"> +<div style="padding-top:2px; background:grey"> +<fieldset style="display:block; border:none; padding:0; margin:0"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></fieldset></div></div> + +<!-- grid wrapped in FIELDSET inline --> +<div class="columns" style="height: 40px; margin-left:200px"> +<div style="padding-top:2px; background:grey"> +<fieldset style="display:inline; border:none; padding:0; margin:0"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></fieldset></div></div> + +<!-- grid wrapped in FIELDSET overflow:hidden block --> +<div class="columns" style="height: 40px; margin-left:400px"> +<div style="padding-top:2px; background:grey"> +<fieldset style="display:block; overflow:hidden; border:none; padding:0; margin:0"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></fieldset></div></div> + +<!-- grid with orthogonal writing-mode to fragmentainer --> +<div class="columns" style="height: 40px; margin-top:70px"> +<div style="padding-top:2px; background:grey"> +<y> +<div class="grid" style="writing-mode:vertical-lr"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></y></div></div> + +<!-- vertical grid and fragmentainer with intermediary horizontal writing-mode inline --> +<!-- XXX bug 1242660: remove the visibility:hidden DIV when we know what the rendering should be --> +<div style="visibility:hidden"> +<div class="columns" style="width: 50px; writing-mode:vertical-lr; margin-top:70px"> +<div style="padding-top:2px; background:grey"> +<y style="writing-mode:horizontal-lr"> +<div class="grid" style="writing-mode:vertical-lr"> +<span style="grid-row:span 2"><x></x></span> +<span><x></x></span> +<span><x></x></span> +</div></y></div></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-016-ref.html b/layout/reftests/css-grid/grid-fragmentation-016-ref.html new file mode 100644 index 0000000000..eec542e281 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-016-ref.html @@ -0,0 +1,165 @@ +<!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: Fragmentation of height:auto grid, not top-of-page, box-decoration-break:clone</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.block { + border:5px solid; +} +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 50px; + grid-gap: 12px; + border:5px solid; +} +span { background:lime; border:1px solid black; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +x { display:block; height:20px; } +br { page-break-before:always; break-before:always; } + +</style> +</head> +<body> + +<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<br> +<div class="grid"> +<span><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="block"> +</div></div></div> + +<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="block" style="height:1px; overflow:hidden"> +</div></div></div> + +<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="block" style="height:1px; overflow:hidden"></div> +<div class="block" style="height:1px; overflow:hidden"></div> +</div></div> + +<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<br> +<div class="grid"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-016.html b/layout/reftests/css-grid/grid-fragmentation-016.html new file mode 100644 index 0000000000..2a9bf9bb4b --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-016.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: Fragmentation of height:auto grid, not top-of-page, box-decoration-break:clone</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-016-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 50px; + grid-gap: 12px; + border:5px solid; + box-decoration-break: clone; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +</style> +</head> +<body> + +<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +</div></div></div> + +<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid" style="height:1px/*creates a Class C break opportunity at the end*/"> +</div></div></div> + +<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid" style="height:2px/*creates a Class C break opportunity at the end*/"> +</div></div></div> + +<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-017-ref.html b/layout/reftests/css-grid/grid-fragmentation-017-ref.html new file mode 100644 index 0000000000..61d97f0234 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-017-ref.html @@ -0,0 +1,137 @@ +<!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: Fragmentation height:auto grid with first grid row at top-of-page and box-decoration-break:clone</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.block { + border:5px solid; + border-top-width:0; + border-bottom-width:10px; +} +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 50px; + grid-gap: 12px; + border:5px solid; + border-top-width:0; + border-bottom-width:10px; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +.t { border-bottom-width:0; } +.b { border-top-width:0; } +br { page-break-before:always; break-before:always; } + +</style> +</head> +<body> + +<div class="columns" style="height: 120px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="grid"> +<span><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<br> +<div class="grid"> +<span><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 8px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="block"> +</div></div></div> + +<div class="columns" style="height: 10px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="block" style="height:1px;overflow:hidden"></div> +<div class="block" style="height:1px;overflow:hidden"></div> +</div></div> + +<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/"> +<div style="background:grey"> +<div class="grid"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<br> +<div class="grid"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */"> +<div style="background:grey"> +<div class="grid"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px"> +<div style="background:grey"> +<div class="grid"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px"> +<div style="background:grey"> +<div class="grid"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span style="background:cyan" class="t"><x></x></span> +</div> +<div class="grid"> +<span class="b"><x></x></span> +<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> +<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> +<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> +</div></div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-017.html b/layout/reftests/css-grid/grid-fragmentation-017.html new file mode 100644 index 0000000000..b2d2399709 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-017.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: Fragmentation height:auto grid with first grid row at top-of-page and box-decoration-break:clone</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-017-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 50px; + grid-gap: 12px; + border:5px solid; + border-top-width:0; + border-bottom-width:10px; + box-decoration-break: clone; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +</style> +</head> +<body> + +<div class="columns" style="height: 120px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 8px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="grid"> +</div></div></div> + +<div class="columns" style="height: 10px/*fragmentainer ends in the end border*/"> +<div style="background:grey"> +<div class="grid" style="height:2px/*creates a Class C break opportunity at the end*/"> +</div></div></div> + +<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px"> +<div style="background:grey"> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:60px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:60px"><x></x></span> +</div></div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-018-ref.html b/layout/reftests/css-grid/grid-fragmentation-018-ref.html new file mode 100644 index 0000000000..b622ccfc5d --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-018-ref.html @@ -0,0 +1,159 @@ +<!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: Fragmentation of definite height, not top-of-page, forced breaks, and box-decoration-break:clone</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-top-width:0; border-bottom-width:0; } + +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*two rows would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span><x></x></span> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div style="height:40px;"></div> +<div class="grid" style="height:60px"> +<span class="b"><x></x></span> +<span class="b" style="grid-area:1/3; height:6px; background:cyan"><x></x></span> +<span style="grid-area:1/3; align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height:30px"> +<div style="padding-top:10px; background:grey"> +<div style="height:90px;border:5px solid;box-decoration-break: clone;"></div> +</div></div> + +<div class="columns" style="height: 60px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div style="height:50px;"></div> +<div class="grid" style="padding-bottom:20px"> +<span><x></x></span> +</div> +<div style="height:40px; border:5px solid;"></div> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div style="height:40px;"></div> +<div class="grid" style="padding-bottom:30px"> +<span class="b" style="grid-area:1/1; height:6px"><x></x></span> +<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="height:6px; background:cyan"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div class="grid"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div style="height:40px;"></div> +<div class="grid" style="padding-bottom:30px"> +<span class="b" style="grid-area:1/1; height:6px"><x></x></span> +<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="height:6px; background:cyan"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div style="height:90px;"></div> +<div class="grid" style="padding-bottom:18px"> +<span style="height:35px"><x></x></span> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 97px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div style="height:87px;"></div> +<div class="grid" style="padding-bottom:15px"> +<span style="height:35px"><x></x></span> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span> +</div> +<div style="height:3px;border:5px solid;box-decoration-break: clone;"></div> +</div></div> + +<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div class="grid" style="padding-bottom:30px"> +<span class="b" style="grid-area:1/1; height:6px"><x></x></span> +<span class="b" style="background:cyan"><x></x></span> +<span style="grid-area:1/1; align-self:end; background:pink"><x></x></span> +</div></div> +<div style="height:10px"></div> +<div class="grid m" style="height:0; margin-top:1px"> +<span><x></x></span> +</div> +</div> + +<div class="columns" style="height: 160px/*everything would fit in 1st column*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span class="t" style="grid-row: span 2"><x></x></span> +<span style="grid-row: span 2"><x></x></span> +</div> +<div style="height:48px"></div> +<div style="height:18px; border:5px solid;"> +<span class="b" style="display:block;height:29px;width:28px"></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-018.html b/layout/reftests/css-grid/grid-fragmentation-018.html new file mode 100644 index 0000000000..016e59d3d4 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-018.html @@ -0,0 +1,143 @@ +<!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: Fragmentation of definite height grid, not top-of-page, forced breaks, and box-decoration-break:clone</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-018-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + height: 90px; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + box-decoration-break: clone; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +m { display:block; padding-top:10px; } +.break-before { page-break-before:always; break-before:always; } +.break-after { page-break-after:always; break-after:always; } + +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*two rows would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span><x></x></span> +<span class="break-before" style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height:30px"> +<div style="background:grey"><m></m> +<div class="grid break-before"> +</div></div></div> + +<div class="columns" style="height: 60px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span class="break-before"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span class="break-before" style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span class="break-after" style="height:35px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span class="break-before" style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span class="break-before" style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span style="grid-row:3"><x></x></span> +<span class="break-after" style="grid-row:span 2; background:cyan"><x></x></span> +<span class="break-before" style="grid-row:2; align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 160px/*everything would fit in 1st column*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span class="break-after" style="grid-row: span 3"><x></x></span> +<span class="break-after" style="grid-row: span 2"><x></x></span> +</div> +</div></div> + +<!-- TODO XXX bug 775628? (break-after on last row should propagate to container) +<div class="columns" style="height: 135px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span class="break-after" style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div> +<div style="height:20px;background:yellow"></div> +</div></div> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-019-ref.html b/layout/reftests/css-grid/grid-fragmentation-019-ref.html new file mode 100644 index 0000000000..a90510b777 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-019-ref.html @@ -0,0 +1,147 @@ +<!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: Fragmentation of height:auto grid, not top-of-page, forced break growing 'fr' row, and box-decoration-break:clone</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: space-evenly; + box-decoration-break: clone; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-top-width:0; border-bottom-width:0; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:89px"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid" style="grid-template-rows: 50px; grid-gap:0;"> +<span><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:89px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid" style="grid-template-rows: 50px; grid-gap:0;"> +<span class="b"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:89px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid" style="grid-template-rows: 80px; grid-gap:0;"> +<span class="m"><x></x></span> +</div> +<div class="grid" style="grid-template-rows: 30px; grid-gap:0;"> +<span class="b"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:89px"> +<span style="grid-row:2; height:50px"><x></x><i style="height:44px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span class="t" style="grid-row:1/span 2"><x></x></span> +</div> +<div class="grid" style="grid-template-rows: 50px; grid-row-gap:0; margin-bottom:40px;"> +<span class="m" style="height:16px; background:blue; margin: -5px 1px 0 1px; border-width:0"><x></x></span> +<span class="m" style="grid-column:3"><x></x></span> +</div> +<div class="grid" style="grid-template-rows: 72px; grid-row-gap:0;"> +<span class="b" style="grid-column:3"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:89px"> +<span class="t" style="grid-row:1/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:44px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div> +<div class="grid" style="grid-template-rows: 50px; grid-row-gap:0; margin-bottom:40px;"> +<span class="m"><x></x></span> +<span class="m" style="height:16px; color:blue; background:blue; margin: -5px 1px 0 1px; border-width:0"></span> +</div> +<div class="grid" style="grid-template-rows: 72px; grid-row-gap:0;"> +<span class="b"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 50px; grid-gap:0;"> +</div> +<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:90px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid" style="grid-template-rows: 50px; grid-gap:0;"> +<span class="b"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 61px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 50px; grid-gap:0;"> +</div> +<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:62px"> +<span style="height:60px"><x></x></span> +<span style="height:50px"><i style="height:54px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid" style="grid-template-rows: 0; grid-gap:0; border-width:0 5px"> +<span class=m style="grid-column:2; border-width:0 1px; height:0"><i style="height:6px;margin:0"></i></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-019.html b/layout/reftests/css-grid/grid-fragmentation-019.html new file mode 100644 index 0000000000..308a76645c --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-019.html @@ -0,0 +1,113 @@ +<!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: Fragmentation of height:auto grid, not top-of-page, forced break growing 'fr' row, and box-decoration-break:clone</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-019-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: space-evenly; + box-decoration-break: clone; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 4"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px 1fr 50px;"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span style="grid-row:1/span 5"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px 1fr 50px;"> +<span style="grid-row:1/span 5"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow row 2*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 50px 1fr 50px; grid-gap:0;"> +<span style="grid-row:2/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 61px/*trigger OVERFLOW_INCOMPLETE for the item*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 50px 1fr; grid-gap:0;"> +<span style="grid-row:2"><x></x></span> +<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-020-ref.html b/layout/reftests/css-grid/grid-fragmentation-020-ref.html new file mode 100644 index 0000000000..f167c5368a --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-020-ref.html @@ -0,0 +1,206 @@ +<!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: Fragmentation with forced break propagation</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} +.no-border { border-style:none; } + +.grid { + display: grid; + grid-template-columns: 30px; + grid-auto-rows: 10px; + grid-gap: 2px; + border:5px solid; + height: 20px; /* create Class C break opportunities at both ends */ + align-content: center; +} +.start { + align-content: start; +} + +span { background:lime; border:1px solid black; } +.bb { border-bottom-width:6px; } +x { display:block; height: 40px; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border:5px solid; border-top-width:0; border-bottom-width:0; } +.br1 { height:34px; border-width:5px; border-top-style:solid; } +.br2 { height:4px; } +.br3 { height:39px; } + +</style> +</head> +<body> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="grid"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="grid start"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="br1"></div> +<div class="grid b"> +<span class="avoid-break"><x></x></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="grid start"> +<span class="avoid-break"><x></x></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="padding-top:1px; background:grey"> +<div class="br3"></div> +<div class="grid"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="padding-top:1px; background:grey"> +<div class="br3"></div> +<div class="grid start"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="padding-top:1px; background:grey"> +<div class="br1"></div> +<div class="grid b"> +<span class="avoid-break"><x></x></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="padding-top:1px; background:grey"> +<div class="grid start"> +<span class="avoid-break"><x></x></span> +</div></div></div> + +<div class="columns" style="height:16px"> +<div style="background:grey"> +<div class="grid" style="height:10px"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:16px"> +<div style="padding-top:1px; background:grey"> +<div class="br2"></div> +<div class="grid" style="height:10px"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:10px"> +<div style="background:grey"> +<div class="grid" style="height:10px"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:10px"> +<div style="padding-top:1px; background:grey"> +<div class="br2"></div> +<div class="grid" style="height:10px"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:0px"> +<div style="background:grey"> +<div class="grid" style="height:10px"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:0px; margin-top:20px"> +<div style="background:grey"> +<div style="height:1px; overflow:hidden"></div> +<div class="grid" style="height:10px"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div style="height:1px; overflow:hidden"></div> +<div style="height:5px; overflow:hidden; background:black; "></div> +<div class="grid m" style="height:10px;grid-auto-rows: 0px; align-content:start;"> +<span class="bb"></span> +</div></div> + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div style=""> +<div style="height:1px; overflow:hidden"></div> +<div style="height:5px; overflow:hidden; background:black; "></div> +</div> +<div style="height:7px; width:30px; margin-left:5px; overflow:hidden; background:black;"></div> +<div class="grid m" style="height:10px;grid-auto-rows: 0px; align-content:start;"> +<span class="bb"></span> +</div></div> + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div style="height:1px; overflow:hidden; position:relative"></div> +<div style="border:5px solid; height:1px; overflow:hidden; "> +<div style="height:7px; width:30px; overflow:hidden; position:absolute; background:black;"></div> +</div> +</div> +</div> + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div style="padding-top:1px; "> +<div style="height:1px; overflow:hidden"></div> +<div class="grid" style="height:1px;grid-auto-rows: 1px;"> +<span class="break-before bb"></span> +<span class="break-before bb"></span> +</div></div></div> + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div style="padding-top:1px; "> +<div style="height:1px; overflow:hidden"></div> +<div class="grid" style="height:1px;grid-auto-rows: 11px;"> +<span class="break-before bb"></span> +<span class="break-before bb"></span> +</div></div></div> + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div style="padding-top:1px; "> +<div style="height:1px; overflow:hidden"></div> +<div class="grid" style="height:1px;grid-auto-rows: 11px;"> +<span class="break-before bb" style="grid-row:span 2"></span> +<span class="break-before bb"></span> +</div></div></div> + + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div style="padding-top:1px; "> +<div style="height:1px; overflow:hidden"></div> +<div class="grid" style="height:1px;grid-auto-rows: 11px;"> +<span class="break-before bb"></span> +<span class="break-before bb" style="grid-row:span 2"></span> +</div></div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-020.html b/layout/reftests/css-grid/grid-fragmentation-020.html new file mode 100644 index 0000000000..b0977b1f42 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-020.html @@ -0,0 +1,213 @@ +<!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: Fragmentation with forced break propagation</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-020-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} +.no-border { border-style:none; } + +.grid { + display: grid; + grid-template-columns: 30px; + grid-auto-rows: 10px; + grid-gap: 2px; + border:5px solid; + height: 20px; /* create Class C break opportunities at both ends */ + align-content: center; +} +.start { + align-content: start; +} + +span { background:lime; border:1px solid black; } +.bb { border-bottom-width:6px; } +x { display:block; height: 40px; } +m { display:block; padding-top:1px; } +.break-before { page-break-before:always; break-before:always; } +.break-after { page-break-after:always; break-after:always; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +</style> +</head> +<body> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="grid"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="grid start"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="grid"> +<span class="avoid-break"><x></x></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="grid start"> +<span class="avoid-break"><x></x></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"><m></m> +<div class="grid"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"><m></m> +<div class="grid start"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"><m></m> +<div class="grid"> +<span class="avoid-break"><x></x></span> +</div></div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"><m></m> +<div class="grid start"> +<span class="avoid-break"><x></x></span> +</div></div></div> + +<div class="columns" style="height:16px"> +<div style="background:grey"> +<div class="grid" style="height:10px"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:16px"> +<div style="background:grey"><m></m> +<div class="grid" style="height:10px"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:10px"> +<div style="background:grey"> +<div class="grid" style="height:10px"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:10px"> +<div style="background:grey"><m></m> +<div class="grid" style="height:10px"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:0px"> +<div style="background:grey"> +<div class="grid" style="height:10px"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns" style="height:0px; margin-top:20px"> +<div style="background:grey"><m></m> +<div class="grid" style="height:10px;"> +<span class="break-before"></span> +</div></div></div> + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div><m></m> +<div class="grid" style="height:10px;grid-auto-rows: 0px;"> +<span class="break-before bb"></span> +</div></div></div> + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div><m></m> +<div class="grid" style="height:10px;grid-auto-rows: 0px;"> +<span class="break-before bb"></span> +<span class="break-before bb"></span> +</div></div></div> + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div><m></m> +<div class="grid" style="height:1px;grid-auto-rows: 1px;"> +<span class="break-before bb"></span> +</div></div></div> + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div><m></m> +<div class="grid" style="height:1px;grid-auto-rows: 1px;"> +<span class="break-before bb"></span> +<span class="break-before bb"></span> +</div></div></div> + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div><m></m> +<div class="grid" style="height:1px;grid-auto-rows: 11px;"> +<span class="break-before bb"></span> +<span class="break-before bb"></span> +</div></div></div> + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div><m></m> +<div class="grid" style="height:1px;grid-auto-rows: 11px;"> +<span class="break-before bb" style="grid-row:span 2"></span> +<span class="break-before bb"></span> +</div></div></div> + + +<div class="columns no-border" style="height:0px; margin-top:20px"> +<div><m></m> +<div class="grid" style="height:1px;grid-auto-rows: 11px;"> +<span class="break-before bb"></span> +<span class="break-before bb" style="grid-row:span 2"></span> +</div></div></div> + +<!-- + +XXX TODO: propagation of break-after on the last row to the container doesn't work. +XXX TODO: I'm guessing the block frame code doesn't know how to deal with that b/c +XXX TODO: it expects the frame constructor to have created a nsPageBreakFrame... + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="grid"> +<span class="break-after"></span> +</div> +<div style="border-top:2px solid blue"></div> +</div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="grid"> +<img src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=" class="break-after"></button> +</div> +<div style="border-top:2px solid blue"></div> +</div></div> + +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-021-ref.html b/layout/reftests/css-grid/grid-fragmentation-021-ref.html new file mode 100644 index 0000000000..8a76c3e91f --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-021-ref.html @@ -0,0 +1,186 @@ +<!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: Fragmentation with ::before/::after items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 3; + -webkit-columns: 3; + columns: 3; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 1px; + height: 150px; +} +.no-border { border-style:none; } + +.grid { + display: grid; + grid-template-columns: 30px; + grid-auto-rows: 20px; + grid-gap: 2px; + border:5px solid; + counter-reset: item; +} +.start { + align-content: start; +} + +span { counter-increment:item; } +.br1.before { grid-row:1; } +.ar1.after { grid-row:1; } +.br2.before { grid-row:2; } +.ar2.after { grid-row:2; } +.br7.before { grid-row:7; } +.ar7.after { grid-row:7; } + +.span5 { grid-row-end: span 5; background:lime; } + +.span15 { grid-row: 1 / span 15; grid-column:1; background:lime; } +.span15.before { grid-row-end: span 15; grid-column:3; background:grey; } +.span15.after { grid-row: 2 / span 15; grid-column:2; background:lime; } + +.break-before { page-break-before:always; break-before:always; } +.break-after { page-break-after:always; break-after:always; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +</style> +</head> +<body> + +<div class="columns"> +<div class="grid"> +<span><c>5:before</c></span> +<span><c>2:after</c></span> +<span><c>1:before</c></span> +<span class="ar2"><c>1</c></span> +<span class="ar2"><c>1:after</c></span> +<span class="ar2"><c>2:before</c></span> +<span><c>2</c></span> +<span><c>3:before</c></span> +<span><c>3</c></span> +<span><c>3:after</c></span> +<span><c>4:before</c></span> +<span><c>4</c></span> +<span class="br1"><c>4:after</c></span> +<span class="br1"><c>5</c></span> +<span class="br1"><c>5:after</c></span> +</div></div> + +<div class="columns"> +<div class="grid"> +<span><c>5:after</c></span> +<span><c>4:after</c></span> +<span><c>1:before</c></span> +<span><c>1</c></span> +<span><c>1:after</c></span> +<span><c>2:before</c></span> +<span><c>2</c></span> +<span><c>2:after</c></span> +<span><c>3:before</c></span> +<span class="ar2"><c>3</c></span> +<span class="ar2"><c>3:after</c></span> +<span class="ar2"><c>4:before</c></span> +<span class="ar1"><c>4</c></span> +<span class="ar1"><c>5:before</c></span> +<span class="ar1"><c>5</c></span> +</div></div> + +<div class="columns"> +<div class="grid"> +<span><c>5:after</c></span> +<span><c>5:before</c></span> +<span><c>1:before</c></span> +<span><c>1</c></span> +<span><c>1:after</c></span> +<span><c>2:before</c></span> +<span><c>2</c></span> +<span><c>2:after</c></span> +<span><c>3:before</c></span> +<span><c>3</c></span> +<span><c>3:after</c></span> +<span><c>4:before</c></span> +<span class="ar1 br2"><c>4</c></span> +<span class="ar1 br2"><c>4:after</c></span> +<span class="ar1 br2"><c>5</c></span> +</div></div> + +<div class="columns"> +<div class="grid"> +<span><c>5:before</c></span> +<span><c>5:after</c></span> +<span><c>1:before</c></span> +<span><c>1</c></span> +<span><c>1:after</c></span> +<span><c>2:before</c></span> +<span><c>2</c></span> +<span><c>2:after</c></span> +<span><c>3:before</c></span> +<span><c>3</c></span> +<span><c>3:after</c></span> +<span><c>4:before</c></span> +<span class="ar2 br1"><c>4</c></span> +<span class="ar2 br1"><c>4:after</c></span> +<span class="ar2 br1"><c>5</c></span> +</div></div> + +<div class="columns"> +<div class="grid"> +<span><c>5:before</c></span> +<span><c>4:before</c></span> +<span><c>1:before</c></span> +<span><c>1</c></span> +<span><c>1:after</c></span> +<span><c>2:before</c></span> +<span><c>2</c></span> +<span><c>2:after</c></span> +<span><c>3:before</c></span> +<span class="br2"><c>3</c></span> +<span class="br2"><c>3:after</c></span> +<span class="br2"><c>4</c></span> +<span class="br1"><c>4:after</c></span> +<span class="br1"><c>5</c></span> +<span class="br1"><c>5:after</c></span> +</div></div> + +<div class="columns"> +<div class="grid"> +<span><c>1:before</c></span> +<span><c>5:before</c></span> +<span><c>1</c></span> +<span><c>1:after</c></span> +<span><c>2:before</c></span> +<span><c>2</c></span> +<span><c>4:before</c></span> +<span><c>2:after</c></span> +<span class="span5"><c>3:before</c></span> +<span class="span5"><c>3</c></span> +<span class="span5"><c></c></span> +<span class="br7"><c></c></span> +<span class="br2"><c></c></span> +<span class="br2"><c></c></span> +<span class="br2"><c></c></span> +</div></div> + +<div class="columns"> +<div class="grid" style="grid-template-columns: 30px 30px 30px"> +<span class="span15 before"><c>1:before</c></span> +<span class="span15"><c>1</c></span> +<span class="span15 after"><c>1:after</c></span> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-021.html b/layout/reftests/css-grid/grid-fragmentation-021.html new file mode 100644 index 0000000000..072d8ac24a --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-021.html @@ -0,0 +1,131 @@ +<!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: Fragmentation with ::before/::after items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-021-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 3; + -webkit-columns: 3; + columns: 3; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 1px; + height: 150px; +} +.no-border { border-style:none; } + +.grid { + display: grid; + grid-template-columns: 30px; + grid-auto-rows: 20px; + grid-gap: 2px; + border:5px solid; + counter-reset: item; +} +.start { + align-content: start; +} + +span { display:contents; } +span::before { counter-increment:item; content: counter(item) ":before"; } +span::after { content: counter(item) ":after"; } +c::before { content: counter(item); } +.br1::before { grid-row:1; } +.ar1::after { grid-row:1; } +.br2::before { grid-row:2; } +.ar2::after { grid-row:2; } +.br7::before { grid-row:7; } +.ar7::after { grid-row:7; } + +.span5 * { grid-row-end: span 5; background:lime; } +.span5::before { grid-row-end: span 5; background:lime; } +.span5::after { grid-row-end: span 5; background:lime; } + +.span15 * { grid-row: 1 / span 15; background:lime; } +.span15::before { grid-row-end: span 15; background:grey; } +.span15::after { grid-row: 2 / span 15; background:lime; } + +.break-before { page-break-before:always; break-before:always; } +.break-after { page-break-after:always; break-after:always; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +</style> +</head> +<body> + +<div class="columns"> +<div class="grid"> +<span><c></c></span> +<span class="ar2"><c></c></span> +<span><c></c></span> +<span><c></c></span> +<span class="br1"><c></c></span> +</div></div> + +<div class="columns"> +<div class="grid"> +<span><c></c></span> +<span><c></c></span> +<span><c></c></span> +<span class="ar2"><c></c></span> +<span class="ar1"><c></c></span> +</div></div> + +<div class="columns"> +<div class="grid"> +<span><c></c></span> +<span><c></c></span> +<span><c></c></span> +<span><c></c></span> +<span class="ar1 br2"><c></c></span> +</div></div> + +<div class="columns"> +<div class="grid"> +<span><c></c></span> +<span><c></c></span> +<span><c></c></span> +<span><c></c></span> +<span class="ar2 br1"><c></c></span> +</div></div> + +<div class="columns"> +<div class="grid"> +<span><c></c></span> +<span><c></c></span> +<span><c></c></span> +<span class="br2"><c></c></span> +<span class="br1"><c></c></span> +</div></div> + +<div class="columns"> +<div class="grid"> +<span><c></c></span> +<span><c></c></span> +<span class="span5"><c></c></span> +<span class="br7"><c></c></span> +<span class="br2"><c></c></span> +</div></div> + +<div class="columns"> +<div class="grid" style="grid-template-columns: 30px 30px 30px"> +<span class="span15"><c></c></span> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-022.html b/layout/reftests/css-grid/grid-fragmentation-022.html new file mode 100644 index 0000000000..2137778627 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-022.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>CSS Grid Test: Fragmentation of height:auto grid, forced break growing min-content row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-007-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: space-evenly; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 4"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px;"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span style="grid-row:1/span 5"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px;"> +<span style="grid-row:1/span 5"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow row 2*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;"> +<span style="grid-row:2/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-023-ref.html b/layout/reftests/css-grid/grid-fragmentation-023-ref.html new file mode 100644 index 0000000000..dbce5061cb --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-023-ref.html @@ -0,0 +1,136 @@ +<!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: Fragmentation of definite height grid, forced break growing min-content row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: space-evenly; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-top-width:0; border-bottom-width:0; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:86px"> +<span><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:86px"> +<span class="b"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 80px; grid-gap:0; padding-bottom:6px"> +<span class="m"><x></x></span> +</div></div> +<div style="height:9px"></div> +<div class="grid" style="align-content: start; grid-gap:0; height:1px; border-width:0; margin-left:5px"> +<span class="b"><x></x></span> +</div> +</div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span class="t" style="grid-row:1/span 2"><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 86px; grid-row-gap:0;"> +<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span> +<span class="m" style="grid-column:3; height:92px;"><x></x></span> +</div></div> +<div style="height:9px"></div> +<div class="grid" style="grid-template-rows: auto; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;"> +<span class="b" style="grid-column:3; height:29px"><x></x></span> +</div> +</div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px"> +<span class="t" style="grid-row:1/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div> +<div class="grid b" style="grid-template-rows: 86px; grid-row-gap:0;"> +<span class="m" style="height:92px"><x></x></span> +<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span> +</div></div> +<div style="height:9px"></div> +<div class="grid" style="grid-template-rows: 0; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;"> +<span class="b" style="height:29px"><x></x></span> +</div> +</div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 50px; grid-gap:0;"> +</div> +<div class="grid m" style="grid-template-rows: 1fr; grid-gap:0; height:100px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:30px;"> +<span class="b" style="height:49px"><x></x></span> +</div> +</div></div> + +</body> +</html> + diff --git a/layout/reftests/css-grid/grid-fragmentation-023.html b/layout/reftests/css-grid/grid-fragmentation-023.html new file mode 100644 index 0000000000..3a83dead16 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-023.html @@ -0,0 +1,103 @@ +<!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: Fragmentation of definite height grid, forced break growing min-content row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-023-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + height: 180px; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 4"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px;"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span style="grid-row:1/span 5"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px;"> +<span style="grid-row:1/span 5"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow row 2*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;"> +<span style="grid-row:2/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-024-ref.html b/layout/reftests/css-grid/grid-fragmentation-024-ref.html new file mode 100644 index 0000000000..497854309f --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-024-ref.html @@ -0,0 +1,170 @@ +<!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: Fragmentation of a height:auto definite max-height grid, forced break growing min-content row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-top-width:0; border-bottom-width:0; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:50px"> +<span><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:50px"> +<span class="b"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;"> +<span class="m"><x></x></span> +</div> +<div style="height:20px"></div> +<div class="grid b" style="grid-gap:0; height:6px"> +<span class="b"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span class="t" style="grid-row:1/span 2"><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 92px; grid-row-gap:0; height:86px"> +<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span> +<span class="m" style="grid-column:3"><x></x></span> +</div></div> +<div style="height:9px"></div> +<div class="grid" style="grid-template-rows: auto; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;"> +<span class="b" style="grid-column:3; height:29px"><x></x></span> +</div> +</div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px"> +<span class="t" style="grid-row:1/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div> +<div class="grid b" style="grid-template-rows: 92px; grid-row-gap:0; height:86px"> +<span class="m"><x></x></span> +<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span> +</div></div> +<div style="height:9px"></div> +<div class="grid" style="grid-template-rows: auto; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;"> +<span class="b" style="height:29px"><x></x></span> +</div> +</div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 50px; grid-gap:0;"> +</div> +<div class="grid m" style="grid-template-rows: 1fr; grid-gap:0; height:100px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:30px;"> +<span class="b" style="height:49px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;"> +<span class="m"><x></x></span> +</div> +<div style="height:20px"></div> +<div class="grid b" style="grid-gap:0; height:6px"> +<span class="b"><x></x></span> +<span><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span class="t" style="grid-row:1/span 2"><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 92px; grid-row-gap:0; height:86px"> +<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span> +<span class="m" style="grid-column:3"><x></x></span> +</div></div> +<div style="height:9px"></div> +<div class="grid m" style="border-style:none; margin-left:5px"> +<span><x></x></span> +<span class="b" style="grid-column:3; height:29px"><x></x></span> +</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-024.html b/layout/reftests/css-grid/grid-fragmentation-024.html new file mode 100644 index 0000000000..0966f18eac --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-024.html @@ -0,0 +1,124 @@ +<!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: Fragmentation of a height:auto definite max-height grid, forced break growing min-content row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-024-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + max-height: 180px; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 4"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px;"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span style="grid-row:1/span 5"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px;"> +<span style="grid-row:1/span 5"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow row 2*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;"> +<span style="grid-row:2/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 4"><x></x></span> +<span style="grid-row:4"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px;"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span style="grid-row:1/span 5"><x></x></span> +<span style="grid-row:5"><x></x></span> +</div> +</div></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-025-ref.html b/layout/reftests/css-grid/grid-fragmentation-025-ref.html new file mode 100644 index 0000000000..e075a94af7 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-025-ref.html @@ -0,0 +1,175 @@ +<!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: Fragmentation of a height:auto, small definite max-height grid, forced break growing min-content row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-top-width:0; border-bottom-width:0; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px; grid-gap:0; height:20px"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div></div> +<div style="height:69px"></div> +<div class="grid" style="grid-template-rows: 50px; border-style:none; margin-left:5px"> +<span><x></x></span> +</div> +</div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px; grid-gap:0; height:20px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div></div> +<div style="height:69px"></div> +<div class="grid" style="grid-template-rows: 50px; border-style:none; margin-left:5px"> +<span class="b"><x></x></span> +</div> +</div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px; grid-gap:0; height:20px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div></div> +<div class="grid m" style="grid-template-rows: 80px; border-style:none; margin-left:5px"> +<span class="m"><x></x></span> +</div> +<div style="height:20px"></div> +<div class="grid b" style="border-style:none; margin-left:5px"> +<span class="b"><x></x></span> +</div> +</div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 17px 77px; grid-row-gap:0; height:20px"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span class="t" style="grid-row:1/span 2"><x></x></span> +</div></div> +<div class="grid" style="grid-template-rows: 92px; grid-row-gap:0; height:86px; border-style:none; margin-left:5px"> +<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span> +<span class="m" style="grid-column:3"><x></x></span> +</div> +<div style="height:9px"></div> +<div class="grid" style="grid-template-rows: auto; border-style:none; margin-left:5px"> +<span class="b" style="grid-column:3; height:29px"><x></x></span> +</div> +</div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 17px 77px; grid-row-gap:0; height:20px"> +<span class="t" style="grid-row:1/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div></div> +<div class="grid" style="grid-template-rows: 92px; grid-row-gap:0; height:86px; border-style:none; margin-left:5px"> +<span class="m"><x></x></span> +<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span> +</div> +<div style="height:9px"></div> +<div class="grid" style="grid-template-rows: auto; border-style:none; margin-left:5px"> +<span class="b" style="height:29px"><x></x></span> +</div> +</div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 50px; grid-gap:0; height:20px"> +</div></div> +<div style="height:69px"></div> +<div class="grid" style="grid-template-rows: 100px; grid-gap:0; border-style:none; margin-left:5px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid" style="grid-template-rows: 50px; border-style:none; margin-left:5px"> +<span class="b" style="height:49px"><x></x></span> +</div> +</div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px; grid-gap:0; height:20px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div></div> +<div style="height:69px"></div> +<div class="grid" style="grid-template-rows: 80px; border-style:none; margin-left:5px"> +<span class="m"><x></x></span> +</div> +<div style="height:20px"></div> +<div class="grid" style="grid-gap:0; border-style:none; margin-left:5px"> +<span class="b"><x></x></span> +<span><x></x></span> +</div> +</div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 17px 77px; grid-row-gap:0; height:20px"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span class="t" style="grid-row:1/span 2"><x></x></span> +</div></div> +<div style="height:69px"></div> +<div class="grid" style="grid-template-rows: 92px; grid-row-gap:0; height:86px; border-style:none; margin-left:5px"> +<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span> +<span class="m" style="grid-column:3"><x></x></span> +</div> +<div style="height:9px"></div> +<div class="grid" style="border-style:none; margin-left:5px"> +<span><x></x></span> +<span class="b" style="grid-column:3; height:29px"><x></x></span> +</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-025.html b/layout/reftests/css-grid/grid-fragmentation-025.html new file mode 100644 index 0000000000..385f1f86f1 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-025.html @@ -0,0 +1,124 @@ +<!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: Fragmentation of a height:auto, small definite max-height grid, forced break growing min-content row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-025-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + max-height: 20px; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 4"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px;"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span style="grid-row:1/span 5"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px;"> +<span style="grid-row:1/span 5"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow row 2*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;"> +<span style="grid-row:2/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 4"><x></x></span> +<span style="grid-row:4"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px;"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span style="grid-row:1/span 5"><x></x></span> +<span style="grid-row:5"><x></x></span> +</div> +</div></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-026-ref.html b/layout/reftests/css-grid/grid-fragmentation-026-ref.html new file mode 100644 index 0000000000..d2de52a28d --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-026-ref.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>Reference: Fragmentation of definite height grid, forced row breaks, avoid-break grid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-top-width:0; border-bottom-width:0; } + +s { display:block; height:90px; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*two rows would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<s></s> +<div class="grid t"> +<span><x></x></span> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div style="height:40px;"></div> +<div class="grid b" style="height:60px"> +<span class="b"><x></x></span> +<span class="b" style="grid-area:1/3; height:6px; background:cyan"><x></x></span> +<span style="grid-area:1/3; align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height:30px"> +<div style="padding-top:10px; background:grey"> +<s style="height:20px;"></s> +<div style="height:90px;border:5px solid;"></div> +</div></div> + +<div class="columns" style="height: 60px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div style="height:50px;"></div> +<div class="grid t"> +<span><x></x></span> +</div> +<div style="height:60px; border:5px solid; border-top-width:0;"> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<s></s> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div style="height:40px;"></div> +<div class="grid b" style="padding-bottom:30px"> +<span class="b" style="grid-area:1/1; height:6px"><x></x></span> +<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="height:6px; background:cyan"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<s></s> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div style="height:40px;"></div> +<div class="grid b" style="padding-bottom:30px"> +<span class="b" style="grid-area:1/1; height:6px"><x></x></span> +<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span> +<span class="b"><x></x></span> +<span class="b" style="height:6px; background:cyan"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="padding-top:10px; background:grey"> +<div style="height:90px;"></div> +<div class="grid" style="padding-bottom:18px"> +<span style="height:35px"><x></x></span> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/"> +<div style="padding-top:10px; background:grey"> +<div style="height:87px;"></div> +<div class="grid t" style="padding-bottom:18px"> +<span style="height:35px"><x></x></span> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span> +</div> +<div class="grid b"></div> +</div></div> + +<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid t"> +<span class="t"><x></x></span> +<span class="t" style="background:cyan"><x></x></span> +</div> +<div class="grid m"> +<span class="b" style="grid-area:1/1; height:6px"><x></x></span> +<span class="b" style="background:cyan"><x></x></span> +<span style="grid-area:1/1; align-self:end; background:pink"><x></x></span> +</div> +<div style="height:50px"></div> +<div class="grid b"> +<span><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 160px/*everything would fit in 1st column*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid t"> +<span class="t" style="grid-row: span 2"><x></x></span> +<span style="grid-row: span 2"><x></x></span> +</div> +<div style="height:53px"></div> +<div style="height:18px; border:5px solid; border-top-width:0;"> +<span class="b" style="display:block;height:29px;width:28px"></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-026.html b/layout/reftests/css-grid/grid-fragmentation-026.html new file mode 100644 index 0000000000..940397eefe --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-026.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>CSS Grid Test: Fragmentation of definite height grid, forced row breaks, avoid-break grid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-026-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + height: 90px; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; + + page-break-inside:avoid; + break-inside:avoid; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +m { display:block; padding-top:10px; } +.break-before { page-break-before:always; break-before:always; } +.break-after { page-break-after:always; break-after:always; } + +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*two rows would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span><x></x></span> +<span class="break-before" style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1"><x></x></span> +<span><x></x></span> +</div></div></div> + +<div class="columns" style="height:30px"> +<div style="background:grey"><m></m> +<div class="grid break-before"> +</div></div></div> + +<div class="columns" style="height: 60px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span class="break-before"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span class="break-before" style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div></div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span class="break-after" style="height:35px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*everything would fit in 1st column*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span class="break-before" style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/"> +<div style="background:grey"><m></m> +<div class="grid"> +<span style="grid-row:span 2"><x></x></span> +<span style="height:35px; background:cyan"><x></x></span> +<span style="align-self:end; background:pink"><x></x></span> +<span class="break-before" style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span style="grid-row:3"><x></x></span> +<span class="break-after" style="grid-row:span 2; background:cyan"><x></x></span> +<span class="break-before" style="grid-row:2; align-self:end; background:pink"><x></x></span> +<span style="grid-row:1; height:35px"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 160px/*everything would fit in 1st column*/"> +<div style="padding-top:30px; background:grey"> +<div class="grid"> +<span class="break-after" style="grid-row: span 3"><x></x></span> +<span class="break-after" style="grid-row: span 2"><x></x></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-027.html b/layout/reftests/css-grid/grid-fragmentation-027.html new file mode 100644 index 0000000000..21c9e6a043 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-027.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: Fragmentation of a height:auto, small definite min/max-height grid, forced break growing min-content row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-025-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + max-height: 10px; + min-height: 20px; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 4"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px;"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span style="grid-row:1/span 5"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px;"> +<span style="grid-row:1/span 5"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow row 2*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;"> +<span style="grid-row:2/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 4"><x></x></span> +<span style="grid-row:4"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px;"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span style="grid-row:1/span 5"><x></x></span> +<span style="grid-row:5"><x></x></span> +</div> +</div></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-028-ref.html b/layout/reftests/css-grid/grid-fragmentation-028-ref.html new file mode 100644 index 0000000000..a03221df84 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-028-ref.html @@ -0,0 +1,172 @@ +<!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: Fragmentation of a height:auto, small definite min-height grid, forced break growing min-content row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: space-evenly; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-top-width:0; border-bottom-width:0; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;"> +<span><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid m" style="grid-template-rows: 50px; grid-gap:0; height:100px"> +<span class="b"><x></x></span> +</div> +<div class="grid m" style="grid-template-rows: 50px; grid-gap:0; height:100px"> +</div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:6px"> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;"> +<span class="m"><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 30px; grid-gap:0;"> +<span class="b"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span class="t" style="grid-row:1/span 2"><x></x></span> +</div> +<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;"> +<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span> +<span class="m" style="grid-column:3"><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;"> +<span class="b" style="grid-column:3"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px"> +<span class="t" style="grid-row:1/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div> +<div class="grid b" style="grid-template-rows: 92px; grid-row-gap:0; align-content:start; height:26px;"> +<span class="m"><x></x></span> +<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span> +</div></div> +<div style="height:69px"></div> +<div class="grid" style="grid-template-rows: 30px; grid-row-gap:0; align-content:start; height:1px; border-width:0; margin-left:5px;"> +<span class="b"><x></x></span> +</div> +</div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 50px; grid-gap:0;"> +</div> +<div class="grid m" style="grid-template-rows: 1fr; grid-gap:0; height:100px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;"> +<span class="b"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px"> +<span class="t"><x></x></span> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span style="height:60px"><i></i><i></i><i></i><x></x></span> +</div> +<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;"> +<span class="m"><x></x></span> +</div> +<div style="height:20px"></div> +<div class="grid b" style="grid-gap:0;"> +<span class="b"><x></x></span> +<span><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span class="t" style="grid-row:1/span 2"><x></x></span> +</div> +<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0; height:92px"> +<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span> +<span class="m" style="grid-column:3"><x></x></span> +</div> +<div style="height:8px"></div> +<div class="grid b" style=""> +<span><x></x></span> +<span class="b" style="grid-column:3; height:29px"><x></x></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-028.html b/layout/reftests/css-grid/grid-fragmentation-028.html new file mode 100644 index 0000000000..8305e84f76 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-028.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>CSS Grid Test: Fragmentation of a height:auto, small definite min-height grid, forced break growing min-content row</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-028-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + min-height: 20px; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0; min-height:300px"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 2"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0; min-height:120px"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 4"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px; min-height:120px"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span style="grid-row:1/span 5"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px; min-height:120px; max-height:100px"> +<span style="grid-row:1/span 5"><x></x></span> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow row 2*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0; min-height:120px"> +<span style="grid-row:2/span 2"><x></x></span> +<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;"> +<span style="height:50px"><i style="height:60px"></i><x></x></span> +<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span> +<span style="grid-row:1/span 4"><x></x></span> +<span style="grid-row:4"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 5px min-content 50px; min-height:200px"> +<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span> +<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span> +<span style="grid-row:1/span 5"><x></x></span> +<span style="grid-row:5"><x></x></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-029-ref.html b/layout/reftests/css-grid/grid-fragmentation-029-ref.html new file mode 100644 index 0000000000..87843205d5 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-029-ref.html @@ -0,0 +1,205 @@ +<!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: Fragmentation, various edge cases</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: block; + border:5px solid; + align-content: start; +} +span { display:block; height:20px; width:30px; } +i { display:block; height:10px; background:blue; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-bottom-width:0; border-top-width:0; } +</style> +</head> +<body> + +<div class="columns" style="height:30px"> +<div style="background:grey"> +<div class="grid t" style="height:25px"> +<span><i style="height:25px"></i></span> +</div> +<div class="grid m" style="height:25px"> +<span><i style="height:25px"></i></span> +</div> +<div class="grid m" style="height:25px"> +<span><i style="height:10px"></i></span> +</div> +<div class="grid b" style="height:25px"> +</div> +</div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="grid t" style="height:60px; overflow:hidden"> +<span><i style="overflow:hidden;height:60px"></i></span> +</div> +<div class="grid m" style="height:40px"> +<span><i style="height:20px"></i></span> +</div> +<div class="grid b" style="height:0px"> +</div> +</div></div> + +<div class="columns" style="height:30px; margin-left:40px"> +<div style="background:grey"> +<div class="grid t" style="height:25px"> +<span><i style="height:25px"></i></span> +</div> +<div class="grid m" style="height:25px"> +<span><i style="height:25px"></i></span> +</div> +<div class="grid m" style="height:25px"> +<span><i style="height:10px"></i></span> +</div> +<div class="grid b" style="height:25px"> +</div> +</div></div> + +<div class="columns" style="height:40px; margin-left:40px"> +<div style="background:grey"> +<div class="grid t" style="height:60px; overflow:hidden"> +<span><i style="overflow:hidden;height:60px"></i></span> +</div> +<div class="grid m" style="height:40px"> +<span><i style="height:20px"></i></span> +</div> +<div class="grid b" style="height:0px"> +</div> +</div></div> + +<div class="columns" style="height:40px; margin-left:80px"> +<div style="background:grey"> +<div class="grid" style="height:20px"> +<span><i style="overflow:hidden;height:60px"></i></span> +</div></div> +<div style="height:10px"></div> +<div style="margin-left:5px"> +<span><i style="height:20px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:70px; margin-left:120px"> +<div style="background:grey"> +<div class="grid t" style="height:30px"> +<span><i style="height:30px"></i></span> +</div> +<div style="height:35px"></div> +<div class="grid b" style="height:30px"> +<span><i style="height:50px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:70px"> +<div style="background:grey"> +<div class="grid t" style="height:30px"> +<span><i style="height:30px"></i></span> +</div> +<div style="height:35px"></div> +<div class="grid b" style="height:32px"> +<span><i style="height:50px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:70px"> +<div style="background:grey"> +<div class="grid t" style="height:45px"> +<span style="height:45px"><i style="height:45px"></i></span> +</div> +<div style="height:20px"></div> +<div class="grid b" style="height:16px"> +<span style="height:16px"><i style="height:35px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:70px"> +<div style="background:grey"> +<div class="grid t" style="height:65px"> +<span style="height:65px"><i style="height:65px"></i></span> +</div> +<div class="grid b" style="height:0px"> +<span><i style="height:15px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:70px"> +<div style="background:grey"> +<div class="grid t" style="height:60px"> +<span style="height:60px"><i style="height:60px"></i></span> +</div> +<div style="height:5px"></div> +<div class="grid b" style="height:1px"> +<span><i style="height:20px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:70px"> +<div style="background:grey"> +<div class="grid t" style="height:61px"> +<span style="height:62px"><i style="height:62px"></i></span> +</div> +<div style="height:4px"></div> +<div class="grid b" style="height:0px"> +<span><i style="height:18px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div style="overflow:hidden"> +<div class="grid" style="height:32px;"> +<span><i style="height:33px;"></i></span> +</div> +</div> +<div class="grid m" style="height:0px"> +<span><i style="height:40px"></i></span> +</div></div> +<div style="height:40px"></div> +<div class="grid m" style="height:0px"> +<span><i style="height:7px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div style="overflow:hidden"> +<div class="grid" style="height:32px;"> +<span><i style="height:33px;"></i></span> +</div> +</div> +<div class="grid m" style="height:0px"> +<span><i style="height:40px"></i></span> +</div></div> +<div style="height:40px"></div> +<div class="grid m" style="height:0px"> +<span><i style="height:7px"></i></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-029.html b/layout/reftests/css-grid/grid-fragmentation-029.html new file mode 100644 index 0000000000..bf3dafb72b --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-029.html @@ -0,0 +1,139 @@ +<!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: Fragmentation, various edge cases</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-029-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px 30px; + grid-auto-rows: 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; height:20px; } +x { display:block; height:20px;} +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +i { display:block; height:10px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height:30px"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 5px; min-height:100px"> +<span><i style="height:60px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 60px; min-height:100px"> +<span><i style="height:80px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:30px; margin-left:40px"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 5px; height:100px; min-height:100px"> +<span><i style="height:60px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:40px; margin-left:40px"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 60px; height:20px; min-height:100px"> +<span><i style="height:80px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:40px; margin-left:80px"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 60px; height:20px;"> +<span><i style="height:80px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:70px; margin-left:120px"> +<div style="background:grey"> +<div class="grid" style="grid-gap:2px; min-height:50px"> +<span style="grid-row:span 2"><i style="height:80px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:70px"> +<div style="background:grey"> +<div class="grid" style="grid-gap:2px; height:62px"> +<span style="grid-row:span 2"><i style="height:80px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:70px"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 30px 15px 16px; grid-gap:0; height:61px"> +<span style="grid-row:span 2; height:auto"><i style="height:80px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:70px"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 30px 35px 0px; grid-gap:0; height:61px"> +<span style="grid-row:span 2; height:auto"><i style="height:80px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:70px"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 30px 30px 1px; grid-gap:0; height:61px"> +<span style="grid-row:span 2; height:auto"><i style="height:80px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:70px"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 30px 30px 2px 10px; grid-gap:0; height:61px"> +<span style="grid-row:span 3; height:auto"><i style="height:80px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 33px 30px; max-height:32px;"> +<span><i style="height:80px"></i></span> +</div> +</div></div> + +<div class="columns" style="height:40px"> +<div style="background:grey"> +<div class="grid" style="grid-template-rows: 33px 30px; min-height:32px; max-height:0px;"> +<span><i style="height:80px"></i></span> +</div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-030-ref.html b/layout/reftests/css-grid/grid-fragmentation-030-ref.html new file mode 100644 index 0000000000..56a2e87a07 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-030-ref.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>Reference: Fragmentation of a height:auto, growing min-content row that makes the grid container break</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + max-height: 20px; + grid-template-columns: 30px 30px 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:90px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:89px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:94px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:95px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:200px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:none;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"></span> +</div> +</div></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-030.html b/layout/reftests/css-grid/grid-fragmentation-030.html new file mode 100644 index 0000000000..ddd5165ab1 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-030.html @@ -0,0 +1,112 @@ +<!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: Fragmentation of a height:auto, growing min-content row that makes the grid container break</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-030-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + max-height: 20px; + grid-template-columns: 30px 30px 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:90px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:89px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:94px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:95px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:200px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:none;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"></span> +</div> +</div></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-031-ref.html b/layout/reftests/css-grid/grid-fragmentation-031-ref.html new file mode 100644 index 0000000000..2de2e660be --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-031-ref.html @@ -0,0 +1,113 @@ +<!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: Fragmentation with specified grid height, growing min-content row that makes the grid container break</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + max-height: 20px; + grid-template-columns: 30px 30px 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.t { border-bottom-width:0; } +.b { border-top-width:0; } +.m { border-bottom-width:0; border-top-width:0; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 94px; grid-gap:0; height:90px; max-height:90px; "> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +</div> +<div style="height:4px"></div> +<div class="grid b" style="height:0px;grid-template-rows: 10px;"><span></span></div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:89px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 94px; grid-gap:0; height:94px; max-height:94px; "> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +</div> +<div class="grid b" style="height:0px;grid-template-rows: 10px;"><span></span></div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:95px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid t" style="grid-template-rows: 94px; grid-gap:0; height:90px; max-height:90px; "> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +</div> +<div style="height:4px"></div> +<div class="grid b" style="height:0px;grid-template-rows: 10px;"><span></span></div> +</div></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-031.html b/layout/reftests/css-grid/grid-fragmentation-031.html new file mode 100644 index 0000000000..d1c721edbd --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-031.html @@ -0,0 +1,112 @@ +<!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: Fragmentation with specified grid height, growing min-content row that makes the grid container break</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-031-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { overflow:hidden; } + +.columns { + position:relative; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px solid salmon; + margin-bottom: 5px; +} + +.grid { + display: grid; + height: 20px; + grid-template-columns: 30px 30px 30px; + grid-gap: 12px; + border:5px solid; + align-content: start; +} +span { background:lime; border:1px solid black; } +x { display:block; height:20px; } +.avoid-break { page-break-inside:avoid; break-inside:avoid; } + +i { display:block; height:10px; margin-top:7px; background:blue; } +</style> +</head> +<body> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; height:90px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; height:89px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; height:94px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; height:95px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:50px;"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"><x></x></span> +</div> +</div></div> + +<div class="columns" style="height: 100px/*trigger IsInlineBreakBefore() for the item: grow the row*/"> +<div style="padding-top:1px; background:grey"> +<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; min-height:90px"> +<span></span> +<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span> +<span style="grid-row:2;"></span> +</div> +</div></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-002.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-002.html new file mode 100644 index 0000000000..7019e147e0 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 002 dynamic remove/insert first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-002-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn1('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-002.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-006.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-006.html new file mode 100644 index 0000000000..66d8c3d7da --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-006.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 006 dynamic remove/insert first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-006-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn1('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-006.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-015.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-015.html new file mode 100644 index 0000000000..e5e10fb59d --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-015.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 015 dynamic remove/insert first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-015-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn1('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-015.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-016.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-016.html new file mode 100644 index 0000000000..73838b3591 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-016.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 016 dynamic remove/insert first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-016-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn1('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-016.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-019.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-019.html new file mode 100644 index 0000000000..81b2b963d9 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-019.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 019 dynamic remove/insert first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-019-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn1('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-019.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-020.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-020.html new file mode 100644 index 0000000000..7d8f610225 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-020.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 020 dynamic remove/insert first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-020-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn1('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-020.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-021.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-021.html new file mode 100644 index 0000000000..a7575468e7 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-021.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 021 dynamic remove/insert first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-021-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn1('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-021.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-023.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-023.html new file mode 100644 index 0000000000..b63495a37a --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-023.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 023 dynamic remove/insert first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-023-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn1('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-023.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-024.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-024.html new file mode 100644 index 0000000000..aed871c410 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-024.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 024 dynamic remove/insert first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-024-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn1('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-024.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-026.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-026.html new file mode 100644 index 0000000000..a375918ec4 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-026.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 026 dynamic remove/insert first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-026-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn1('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-026.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-027.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-027.html new file mode 100644 index 0000000000..7f29c3f94f --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-027.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 027 dynamic remove/insert first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-027-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn1('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-027.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-028.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-028.html new file mode 100644 index 0000000000..61a3631712 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-028.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 028 dynamic remove/insert first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-028-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn1('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-028.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn1-029.html b/layout/reftests/css-grid/grid-fragmentation-dyn1-029.html new file mode 100644 index 0000000000..9dcc1536bb --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-029.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 029 dynamic remove/insert first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-029-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn1('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-029.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-018.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-018.html new file mode 100644 index 0000000000..be7712a7cf --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-018.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 018 dynamic insert/remove dummy new first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-018-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn2('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-018.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-019.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-019.html new file mode 100644 index 0000000000..e747146f7f --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-019.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 019 dynamic insert/remove dummy new first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-019-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn2('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-019.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-020.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-020.html new file mode 100644 index 0000000000..47ab75baaa --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-020.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 020 dynamic insert/remove dummy new first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-020-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn2('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-020.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-021.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-021.html new file mode 100644 index 0000000000..cc920ed75e --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-021.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 021 dynamic insert/remove dummy new first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-021-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn2('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-021.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-022.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-022.html new file mode 100644 index 0000000000..c34c67c544 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-022.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 022 dynamic insert/remove dummy new first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-022-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn2('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-022.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-023.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-023.html new file mode 100644 index 0000000000..e6a7c710e5 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-023.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 023 dynamic insert/remove dummy new first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-023-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn2('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-023.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-025.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-025.html new file mode 100644 index 0000000000..0ab6a8a265 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-025.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 025 dynamic insert/remove dummy new first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-025-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn2('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-025.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-026.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-026.html new file mode 100644 index 0000000000..2603af3032 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-026.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 026 dynamic insert/remove dummy new first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-026-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn2('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-026.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-027.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-027.html new file mode 100644 index 0000000000..21094d0b1f --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-027.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 027 dynamic insert/remove dummy new first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-027-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn2('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-027.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-028.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-028.html new file mode 100644 index 0000000000..385ce94f24 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-028.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 028 dynamic insert/remove dummy new first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-028-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn2('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-028.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-029.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-029.html new file mode 100644 index 0000000000..42300f2c62 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-029.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 029 dynamic insert/remove dummy first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-029-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn2('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-029.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-030.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-030.html new file mode 100644 index 0000000000..1f23153343 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-030.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 030 dynamic insert/remove dummy new first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-030-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn2('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-030.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn2-031.html b/layout/reftests/css-grid/grid-fragmentation-dyn2-031.html new file mode 100644 index 0000000000..a46f653ff4 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn2-031.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 031 dynamic insert/remove dummy new first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-031-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn2('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-031.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-001.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-001.html new file mode 100644 index 0000000000..22ef7c028e --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 001 dynamic remove/insert second item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-001-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn3('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-001.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-002.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-002.html new file mode 100644 index 0000000000..f9439082ab --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 002 dynamic remove/insert second item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-002-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn3('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-002.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-003.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-003.html new file mode 100644 index 0000000000..c9b96cb959 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-003.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 001 dynamic remove/insert second item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-003-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn3('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-003.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-007.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-007.html new file mode 100644 index 0000000000..4cc3e81108 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-007.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 007 dynamic remove/insert second item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-007-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn3('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-007.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-009.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-009.html new file mode 100644 index 0000000000..c739cfa115 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-009.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 009 dynamic remove/insert second item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-009-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn3('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-009.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-017.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-017.html new file mode 100644 index 0000000000..04bbda573d --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-017.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 017 dynamic remove/insert second item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-017-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn3('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-017.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-019.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-019.html new file mode 100644 index 0000000000..f285b8a05b --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-019.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 019 dynamic remove/insert second item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-019-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn3('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-019.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-021.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-021.html new file mode 100644 index 0000000000..a72bf9f028 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-021.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 021 dynamic remove/insert second item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-021-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn3('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-021.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-023.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-023.html new file mode 100644 index 0000000000..aa39a5fc04 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-023.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 023 dynamic remove/insert second item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-023-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn3('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-023.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-026.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-026.html new file mode 100644 index 0000000000..23178492c4 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-026.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 026 dynamic remove/insert second item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-026-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn3('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-026.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-027.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-027.html new file mode 100644 index 0000000000..318b364cb4 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-027.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 027 dynamic remove/insert second item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-027-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn3('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-027.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn3-028.html b/layout/reftests/css-grid/grid-fragmentation-dyn3-028.html new file mode 100644 index 0000000000..a2965813d2 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn3-028.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 028 dynamic remove/insert second item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-028-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn3('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-028.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-001.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-001.html new file mode 100644 index 0000000000..ff008156f0 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 001 dynamic remove/insert second item, then insert/remove dummy first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-001-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn4('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-001.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-004.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-004.html new file mode 100644 index 0000000000..3543a7b6dc --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-004.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 004 dynamic remove/insert second item, then insert/remove dummy first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-004-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn4('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-004.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-005.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-005.html new file mode 100644 index 0000000000..ef2c7e630b --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-005.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 005 dynamic remove/insert second item, then insert/remove dummy first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-004-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn4('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-005.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-015.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-015.html new file mode 100644 index 0000000000..8dca11143c --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-015.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 015 dynamic remove/insert second item, then insert/remove dummy first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-015-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn4('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-015.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-019.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-019.html new file mode 100644 index 0000000000..a7cee1f084 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-019.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 019 dynamic remove/insert second item, then insert/remove dummy first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-019-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn4('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-019.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-021.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-021.html new file mode 100644 index 0000000000..2718ce19e3 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-021.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 021 dynamic remove/insert second item, then insert/remove dummy first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-021-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn4('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-021.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-023.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-023.html new file mode 100644 index 0000000000..9edfa68e7d --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-023.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 023 dynamic remove/insert second item, then insert/remove dummy first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-023-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn4('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-023.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-026.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-026.html new file mode 100644 index 0000000000..292ac216bf --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-026.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 026 dynamic remove/insert second item, then insert/remove dummy first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-026-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn4('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-026.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-027.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-027.html new file mode 100644 index 0000000000..91d2aab712 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-027.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 027 dynamic remove/insert second item, then insert/remove dummy first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-027-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn4('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-027.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn4-028.html b/layout/reftests/css-grid/grid-fragmentation-dyn4-028.html new file mode 100644 index 0000000000..b8cfc3dd72 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn4-028.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 028 dynamic remove/insert second item, then insert/remove dummy first item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-028-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn4('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-028.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-005.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-005.html new file mode 100644 index 0000000000..9dbcb006af --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-005.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 005 dynamic insert/remove 20 dummy items at the start</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-004-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn5('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-005.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-007.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-007.html new file mode 100644 index 0000000000..1d84d051d5 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-007.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 007 dynamic insert/remove 20 dummy items at the start</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-007-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn5('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-007.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-008.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-008.html new file mode 100644 index 0000000000..432e4ce49e --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-008.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 008 dynamic insert/remove 20 dummy items at the start</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-008-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn5('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-008.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-016.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-016.html new file mode 100644 index 0000000000..36731825b7 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-016.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 016 dynamic insert/remove 20 dummy items at the start</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-004-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn5('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-016.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-019.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-019.html new file mode 100644 index 0000000000..47b6c9aae5 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-019.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 019 dynamic insert/remove 20 dummy items at the start</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-019-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn5('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-019.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-021.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-021.html new file mode 100644 index 0000000000..655ab4ee12 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-021.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 021 dynamic insert/remove 20 dummy items at the start</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-021-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn5('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-021.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-023.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-023.html new file mode 100644 index 0000000000..ba38865939 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-023.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 023 dynamic insert/remove 20 dummy items at the start</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-023-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn5('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-023.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-026.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-026.html new file mode 100644 index 0000000000..59334df534 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-026.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 026 dynamic insert/remove 20 dummy items at the start</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-026-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn5('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-026.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-027.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-027.html new file mode 100644 index 0000000000..312a773cc4 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-027.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 027 dynamic insert/remove 20 dummy items at the start</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-027-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn5('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-027.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-fragmentation-dyn5-028.html b/layout/reftests/css-grid/grid-fragmentation-dyn5-028.html new file mode 100644 index 0000000000..4e449c72de --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-dyn5-028.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: test 028 dynamic insert/remove 20 dummy items at the start</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> + <link rel="match" href="grid-fragmentation-028-ref.html"> + +<script src="support/dyn.js"></script> +<script> +function runTest(text) { + document.body.innerHTML = text; + dyn5('.grid'); + document.documentElement.removeAttribute("class"); +} +</script> + +</head> +<body onload='dynamicTest("grid-fragmentation-028.html", runTest)'></body> +</html> diff --git a/layout/reftests/css-grid/grid-item-align-001-ref.html b/layout/reftests/css-grid/grid-item-align-001-ref.html new file mode 100644 index 0000000000..e1d9172304 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-align-001-ref.html @@ -0,0 +1,186 @@ +<!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 (part 1 of 2)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: block; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + inline-size: 36px; + block-size: 25px; + margin-right: 4px; +} + +span { + display: block; + position: relative; + z-index: 1; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + inset-inline-start: 1px; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: white; +} +abs1 { + border-block-start-width: 3px; + border-block-end-width: 2px; + border-inline-start-width: 1px; + border-inline-end-width: 3px; + border-style: solid; + border-color: lightgrey; +} +abs2 { display:none; } +abs3 { display:none; } +abs4 { display:none; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.astart,.aflexstart,.aleft,.aright,.astretch1,.astretch2,.astretch2,.astretch3, +.astretch4,.astretch5,.astretch6,.astretch7,.aauto { + inset-block-start: 3px; +} + +.aend,.aflexend { inset-block-start: 9px; } +.acenter { inset-block-start: 5px; margin-block-start:2px; } + +.hl .astretch2, .hr .astretch2 { height: 15px; } +.hl .astretch3, .hr .astretch3 { height: 15px; } + +.astretch2 { width:13px; height:auto; } +.astretch3 { height:auto; } +.astretch4 { width:0; } +.astretch5 { width:0; } +.astretch6 { height:9px; } +.astretch7 { width:0; height:9px; } + +.hl .hr {margin-left:4px;} +.hl .vl {inset-block-start: 1px; inset-inline-start:3px;} +.hl .vl.aend, .hl .vl.aflexend { margin-top: 7px; } +.hl .vl.acenter { margin-top:4px; } + +.hl .vr {margin-left:6px; margin-top:3px; } +.hl .vr.aend, .hl .vr.aflexend {margin-left:12px; margin-top:9px; } +.hl .vr.acenter {margin-left:8px; margin-top:6px; } + +.hl .vlr { margin-left:0px; margin-top:5px; } +.hl .vlr.aend, .hl .vlr.aflexend {margin-left:-6px; margin-top:11px; } +.hl .vlr.acenter {margin-left:-2px; margin-top:8px; } + +.hl .vrl { margin-left:6px; margin-top:3px; } +.hl .vrl.aend, .hl .vrl.aflexend {margin-left:12px; margin-top:9px; } +.hl .vrl.acenter {margin-left:8px; margin-top:6px; } + +.hr .hl {margin-right:3px} + +.hr .vl {margin-right:5px; margin-top:5px; } +.hr .vl.aend, .hr .vl.aflexend {margin-right:11px; margin-top:11px; } +.hr .vl.acenter {margin-right:7px; margin-top:8px; } + +.hr .vr {margin-top:5px; margin-right:-1px; } +.hr .vr.aend, .hr .vr.aflexend {margin-top:11px; margin-right:-7px; } +.hr .vr.acenter {margin-top:8px; margin-right:-3px; } +.hr .vr.astretch6, .hr .vr.astretch7 { margin-right:-1px; } + +.hr .vlr {margin-top:5px; margin-right:5px; } +.hr .vlr.aend, .hr .vlr.aflexend {margin-top:11px; margin-right:11px; } +.hr .vlr.acenter {margin-top:8px; margin-right:7px; } + +.hr .vrl {margin-top:3px; margin-right:-1px; } +.hr .vrl.aend, .hr .vrl.aflexend {margin-top:9px; margin-right:-7px; } +.hr .vrl.acenter {margin-top:6px; margin-right:-3px; } + +.vl span { inset-block-start: 1px; inset-inline-start: 3px; } +.vl .astretch4 { width:15px; } +.vl .astretch5 { width:13px; } + +.vl .hl.aend, .vl .hl.aflexend { margin-left:4px; } +.vl .hl.acenter { margin-left:3px; margin-top:1px; } +.vl .astretch6, .vl .astretch7 { height:0px; } +.vl .hr.astretch6, .vl .hr.astretch7 { height:0px; } + +.vl .hr { margin-left:8px; } +.vl .hr.aend, .vl .hr.aflexend { margin-left:10px; } +.vl .hr.acenter { margin-left:9px; margin-top:1px; } + +.vl .vl { margin-top:-1px; margin-left:4px; } +.vl .vl.aend, .vl .vl.aflexend { margin-left:6px; } +.vl .vl.acenter { margin-left:5px; margin-top:-1px; } +.vl .astretch7 { width:13px; } + +.vl .vl.astretch2, .vl .vl.astretch3, +.vl .vr.astretch2, .vl .vr.astretch3, +.vl .vlr.astretch2, .vl .vlr.astretch3, +.vl .vrl.astretch2, .vl .vrl.astretch3 { height:0px; } + +.vl .vr { margin-top:-1px; margin-left:6px; } +.vl .vr.aend, .vl .vr.aflexend { margin-left:8px; } +.vl .vr.acenter { margin-left:7px; margin-top:-1px; } + +.vl .vlr { margin-top:5px; margin-left:4px; } +.vl .vlr.aend, .vl .vlr.aflexend { margin-left:6px; } +.vl .vlr.acenter { margin-left:5px; } + +.vl .vrl { margin-top:-1px; margin-left:6px; } +.vl .vrl.aend, .vl .vrl.aflexend { margin-left:8px; } +.vl .vrl.acenter { margin-left:7px; } + + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // grid-item-align-002.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-align-001.html b/layout/reftests/css-grid/grid-item-align-001.html new file mode 100644 index 0000000000..249f7b3954 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-align-001.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>CSS Grid Test: align-self (part 1 of 2)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> + <link rel="match" href="grid-item-align-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 3px 20px 2px / 1px 32px 3px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + justify-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // grid-item-align-002.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-align-002-ref.html b/layout/reftests/css-grid/grid-item-align-002-ref.html new file mode 100644 index 0000000000..de59dea26d --- /dev/null +++ b/layout/reftests/css-grid/grid-item-align-002-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: align-self (part 2 of 2)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: block; + float: left; + position: relative; + border: 1px solid; + /* border-block-start: 2px solid blue; */ + border-block-start: 2px solid black; + inline-size: 36px; + block-size: 25px; + margin-right: 4px; + background: lightgrey; +} +wrap { + display: block; + position: relative; + inset-inline-start:1px; + background: white; + block-size:20px; + inline-size:32px; + border-block-start: 3px solid lightgrey; +} + +span { + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + justify-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey;display:none; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { margin-right:2px; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:0; } +.astretch3 { align-self:stretch; height:0; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:0; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:0; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +.vr .aend, .vr .aflexend { margin-right:3px; } +.vlr .aend, .vlr .aflexend { margin-left:4px; } +.vlr .acenter { margin-left:3px; } +.vrl .aend, .vrl .aflexend { margin-right:3px; } + +.astretch6 { width:13px; } +.astretch5 { width:14px; } +.astretch4, .astretch7 { width:15px; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-align-001.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var wrap = document.createElement("wrap"); + div.appendChild(wrap); + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + wrap.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-align-002.html b/layout/reftests/css-grid/grid-item-align-002.html new file mode 100644 index 0000000000..1d923678e0 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-align-002.html @@ -0,0 +1,108 @@ +<!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 (part 2 of 2)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> + <link rel="match" href="grid-item-align-002-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-block-start: 2px solid blue; */ + border-block-start: 2px solid black; + grid-template: 3px 20px 2px / 1px 32px 3px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + justify-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-align-001.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-align-003-ref.html b/layout/reftests/css-grid/grid-item-align-003-ref.html new file mode 100644 index 0000000000..a2f14f869e --- /dev/null +++ b/layout/reftests/css-grid/grid-item-align-003-ref.html @@ -0,0 +1,115 @@ +<!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 with overflow</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { margin:40px; } +separator { clear:both; display:block; height:6px; } + +.grid { + display: block; + float: left; + position: relative; + border: 1px solid; + /* border-block-start: 2px solid blue; */ + border-block-start: 2px solid black; + inline-size: 36px; + block-size: 25px; + margin-right: 20px; + margin-bottom: 20px; +} +wrap { + display: block; + position: relative; + inset-inline-start:1px; + background: white; + block-size:20px; + inline-size:32px; + border-block-start: 3px solid lightgrey; +} + +span { + display: block; + position: absolute; + width: 40px; + height: 30px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + justify-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { bottom: 22px; } +abs2 { top: 23px; } +abs3 { left: 33px; } +abs4 { right: 35px; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.unsafe.hl.aend, .unsafe.hl.aflexend { inset-block-start:-15px; } +.unsafe.vrl.aend, .unsafe.vrl.aflexend { inset-inline-start:-15px; } +.unsafe.hl.acenter { inset-block-start:-7px; } +.unsafe.vrl.acenter { inset-inline-start:-7px; } +.astretch2 { width:40px; height:15px; } +.astretch3 { height:15px; } +.astretch4 { width:0; } +.astretch5 { width:0; max-width:38px; } +.astretch6 { height:15px; max-height:30px; } +.astretch7 { width:0; height:15px; max-width:38px; max-height:30px; } + + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl" ]; +var wm = [ "hl unsafe", "vrl unsafe", "hl safe", "vrl safe" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var wrap = document.createElement("wrap"); + div.appendChild(wrap); + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + wrap.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-align-003.html b/layout/reftests/css-grid/grid-item-align-003.html new file mode 100644 index 0000000000..daeb8cc8e9 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-align-003.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>CSS Grid Test: align-self with overflow</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> + <link rel="match" href="grid-item-align-003-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +body { margin:40px; } +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-block-start: 2px solid blue; */ + border-block-start: 2px solid black; + grid-template: 3px 20px 2px / 1px 32px 3px; + margin-right: 20px; + margin-bottom: 20px; +} + +span { + grid-area: 2 / 2; /* the center grid area */ + display: block; + width: 40px; + height: 30px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + justify-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:unsafe start; } +.aend { align-self:unsafe end; } +.aflexstart { align-self:unsafe flex-start; } +.aflexend { align-self:unsafe flex-end; } +.aselfstart { align-self:unsafe self-start; } +.aselfend { align-self:unsafe self-end; } +.acenter { align-self:unsafe center; } +.aleft { align-self:unsafe left; } +.aright { align-self:unsafe right; } +.astretch1 { align-self:unsafe stretch; } +.astretch2 { align-self:unsafe stretch; width:40px; height:auto; } +.astretch3 { align-self:unsafe stretch; height:auto; } +.astretch4 { align-self:unsafe stretch; width:auto; } +.astretch5 { align-self:unsafe stretch; width:auto; max-width:38px; } +.astretch6 { align-self:unsafe stretch; height:auto; max-height:30px; } +.astretch7 { align-self:unsafe stretch; width:auto; height:auto; max-width:38px; max-height:30px; } +.aauto { align-self:auto; } + +.safe.astart { align-self:safe start; } +.safe.aend { align-self:safe end; } +.safe.aflexstart { align-self:safe flex-start; } +.safe.aflexend { align-self:safe flex-end; } +.safe.aselfstart { align-self:safe self-start; } +.safe.aselfend { align-self:safe self-end; } +.safe.acenter { align-self:safe center; } +.safe.aleft { align-self:safe left; } +.safe.aright { align-self:safe right; } +.safe.astretch1 { align-self:safe stretch; } +.safe.astretch2 { align-self:safe stretch; } +.safe.astretch3 { align-self:safe stretch; } +.safe.astretch4 { align-self:safe stretch; } +.safe.astretch5 { align-self:safe stretch; } +.safe.astretch6 { align-self:safe stretch; } +.safe.astretch7 { align-self:safe stretch; } + + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl" ]; +var wm = [ "hl", "vrl", "hl safe", "vrl safe" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-align-dynamic-pos-001-ref.html b/layout/reftests/css-grid/grid-item-align-dynamic-pos-001-ref.html new file mode 100644 index 0000000000..9c76a04314 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-align-dynamic-pos-001-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>Reference: dynamic change .left on abs.pos. item w. align-self:center</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + position: relative; + background: lightgrey; + grid: 50px 50px / 50px 50px; +} + +#item { + background: grey; + position: absolute; + align-self: center; + left: 20px; +} + + </style> +</head> +<body> + +<div class="grid"> + <div id="item">X</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-align-dynamic-pos-001.html b/layout/reftests/css-grid/grid-item-align-dynamic-pos-001.html new file mode 100644 index 0000000000..0ae5584435 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-align-dynamic-pos-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Grid Test: dynamic change .left on abs.pos. item w. align-self:center</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> + <link rel="match" href="grid-item-align-dynamic-pos-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + position: relative; + background: lightgrey; + grid: 50px 50px / 50px 50px; +} + +#item { + background: grey; + position: absolute; + align-self: center; + left: 10px; +} + + </style> +</head> +<body> + +<div class="grid"> + <div id="item">X</div> +</div> + +<script> + document.body.offsetLeft; + var items = Array.prototype.slice.call(document.querySelectorAll('#item')); + items.map(item => item.style.left = "20px"); + document.body.offsetLeft; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-align-dynamic-pos-002-ref.html b/layout/reftests/css-grid/grid-item-align-dynamic-pos-002-ref.html new file mode 100644 index 0000000000..3e5868d8b1 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-align-dynamic-pos-002-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>Reference: dynamic change .left on abs.pos. item w. align-self:end</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + position: relative; + background: lightgrey; + grid: 50px 50px / 50px 50px; +} + +#item { + background: grey; + position: absolute; + align-self: end; + left: 20px; +} + + </style> +</head> +<body> + +<div class="grid"> + <div id="item">X</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-align-dynamic-pos-002.html b/layout/reftests/css-grid/grid-item-align-dynamic-pos-002.html new file mode 100644 index 0000000000..8659dcd619 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-align-dynamic-pos-002.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Grid Test: dynamic change .left on abs.pos. item w. align-self:end</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> + <link rel="match" href="grid-item-align-dynamic-pos-002-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + background: lightgrey; + grid: 50px 50px / 50px 50px; +} + +#item { + background: grey; + position: absolute; + align-self: end; + left: 10px; +} + + </style> +</head> +<body> + +<div class="grid"> + <div id="item">X</div> +</div> + +<script> + document.body.offsetLeft; + var items = Array.prototype.slice.call(document.querySelectorAll('#item')); + items.map(item => item.style.left = "20px"); + document.body.offsetLeft; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-align-dynamic-pos-003-ref.html b/layout/reftests/css-grid/grid-item-align-dynamic-pos-003-ref.html new file mode 100644 index 0000000000..b25750147c --- /dev/null +++ b/layout/reftests/css-grid/grid-item-align-dynamic-pos-003-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>Reference: dynamic change .left on abs.pos. item w. align-self:start</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + position: relative; + background: lightgrey; + grid: 50px 50px / 50px 50px; +} + +#item { + background: grey; + position: absolute; + align-self: start; + left: 20px; +} + + </style> +</head> +<body> + +<div class="grid"> + <div style="align-self: start; font-size:32pt">X</div> + <div id="item" style="grid-area:2/2">X</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-align-dynamic-pos-003.html b/layout/reftests/css-grid/grid-item-align-dynamic-pos-003.html new file mode 100644 index 0000000000..1643494c9b --- /dev/null +++ b/layout/reftests/css-grid/grid-item-align-dynamic-pos-003.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Grid Test: dynamic change .left on abs.pos. item w. align-self:start</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> + <link rel="match" href="grid-item-align-dynamic-pos-003-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + position: relative; + background: lightgrey; + grid: 50px 50px / 50px 50px; +} + +#item { + background: grey; + position: absolute; + align-self: start; + left: 10px; +} + + </style> +</head> +<body> + +<div class="grid"> + <div style="align-self: start; font-size:32pt">X</div> + <div id="item" style="grid-area:2/2">X</div> +</div> + +<script> + document.body.offsetLeft; + var items = Array.prototype.slice.call(document.querySelectorAll('#item')); + items.map(item => item.style.left = "20px"); + document.body.offsetLeft; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001-ref.html new file mode 100644 index 0000000000..9429f008e9 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001-ref.html @@ -0,0 +1,197 @@ +<!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: Clamp 'automatic minimum size' to definite max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: repeat(2,minmax(auto, 15px)); + grid-template-rows: repeat(2,minmax(auto, 10px)); + grid-gap: 1px; + align-items: start; + justify-items: start; + float: left; + border: 1px dashed; + margin-right: 16px; + margin-bottom: 14px; +} +.sz { + width: 40px; + height: 40px; +} + +.definite { + grid-template-columns: repeat(2,15px); + grid-template-rows: repeat(2,10px); +} +.min { + grid-template-columns: repeat(2,minmax(max-content, 15px)); + grid-template-rows: repeat(2,minmax(max-content, 10px)); +} +.max { + grid-template-columns: repeat(2,minmax(min-content, 15px)); + grid-template-rows: repeat(2,minmax(min-content, 10px)); +} + +.larger .grid { + grid-template-columns: repeat(2,minmax(auto, 25px)); + grid-template-rows: repeat(2,minmax(auto, 28px)); +} +.larger .definite { + grid-template-columns: repeat(2,25px); + grid-template-rows: repeat(2,28px); +} +.larger .min { + grid-template-columns: repeat(2,minmax(min-content, 25px)); + grid-template-rows: repeat(2,minmax(min-content, 28px)); +} +.larger .max { + grid-template-columns: repeat(2,minmax(max-content, 25px)); + grid-template-rows: repeat(2,minmax(max-content, 28px)); +} + +.stretch .grid { + align-items: stretch; + justify-items: stretch; +} + +.a.grid { + width: 34px; +} +.a.grid.max { + width: 54px; +} +.larger .a.grid { + width: 51px; +} +.larger .a.grid.max { + width: 64px; +} +.a2.grid { + width: 31px; +} +.larger .a2.grid { + width: 51px; +} +.grid.sz.max { + width: 40px; +} +.larger .grid.max.a span { + width:20px; +} +.larger .grid.max.a2 span { + width:20px; +} + +span { + grid-area: 1 / 1; + font-size: 48px; + background: grey; + background-clip: content-box; + border: 1px solid; + padding: 1px 3px 5px 7px; + margin: 3px 5px 7px 1px; +} +.span2 { + grid-area: 1 / 1 / span 2 / span 2; +} +.grid.max span { + width:20px; +} +.larger .grid .span2 { + font-size: 32px; + width: 20px; + height: 32px; +} +.stretch.larger .grid .span2 { + width: 33px; + height: 39px; +} +.stretch.larger .grid.sz .span2 { + width: 22px; + height: 32px; +} +.stretch.larger .grid.definite .span2 { + width: 33px; + height: 39px; +} + +x { + grid-area: 1 / 1; + min-width: 0; + min-height: 0; + align-self: stretch; + justify-self: stretch; + background: cyan; +} +c { + display: block; + width: 20px; + height: 32px; +} + +br { + clear: both; +} + </style> +</head> +<body> + +<div id="tests"> +<div class="grid a"><x></x><span><c>X</c></span></div> +<div class="grid definite"><x></x><span><c>X</c></span></div> +<div class="grid a2"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div> + +<div class="grid sz"><x></x><span><c>X</c></span></div> +<div class="grid sz definite"><x></x><span><c>X</c></span></div> +<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div> + +<br> + +<div class="grid min"><x></x><span><c>X</c></span></div> +<div class="grid min"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz min"><x></x><span><c>X</c></span></div> +<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div> + +<div class="grid a max"><x></x><span><c>X</c></span></div> +<div class="grid max"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid a2 sz max"><x></x><span><c>X</c></span></div> +<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div> + +<br> + +</div> + +<script> +var tests = document.getElementById('tests'); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +</script> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001.html new file mode 100644 index 0000000000..1e4976bb1c --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-001.html @@ -0,0 +1,154 @@ +<!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: Clamp 'automatic minimum size' to definite max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-item-auto-min-size-clamp-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: repeat(2,minmax(auto, 15px)); + grid-template-rows: repeat(2,minmax(auto, 10px)); + grid-gap: 1px; + align-items: start; + justify-items: start; + float: left; + border: 1px dashed; + margin-right: 16px; + margin-bottom: 14px; +} +.sz { + width: 40px; + height: 40px; +} + +.definite { + grid-template-columns: repeat(2,15px); + grid-template-rows: repeat(2,10px); +} +.min { + grid-template-columns: repeat(2,minmax(min-content, 15px)); + grid-template-rows: repeat(2,minmax(min-content, 10px)); +} +.max { + grid-template-columns: repeat(2,minmax(max-content, 15px)); + grid-template-rows: repeat(2,minmax(max-content, 10px)); +} + +.larger .grid { + grid-template-columns: repeat(2,minmax(auto, 25px)); + grid-template-rows: repeat(2,minmax(auto, 28px)); +} +.larger .definite { + grid-template-columns: repeat(2,25px); + grid-template-rows: repeat(2,28px); +} +.larger .min { + grid-template-columns: repeat(2,minmax(min-content, 25px)); + grid-template-rows: repeat(2,minmax(min-content, 28px)); +} +.larger .max { + grid-template-columns: repeat(2,minmax(max-content, 25px)); + grid-template-rows: repeat(2,minmax(max-content, 28px)); +} + +.stretch .grid { + align-items: stretch; + justify-items: stretch; +} + +span { + grid-area: 1 / 1; + font-size: 48px; + background: grey; + background-clip: content-box; + border: 1px solid; + padding: 1px 3px 5px 7px; + margin: 3px 5px 7px 1px; +} +.span2 { + grid-area: 1 / 1 / span 2 / span 2; +} +.larger .grid .span2 { + font-size: 32px; +} + +x { + grid-area: 1 / 1; + min-width: 0; + min-height: 0; + align-self: stretch; + justify-self: stretch; + background: cyan; +} +c { + display: block; + width: 20px; + height: 32px; +} + +br { + clear: both; +} + </style> +</head> +<body> + +<div id="tests"> +<div class="grid"><x></x><span><c>X</c></span></div> +<div class="grid definite"><x></x><span><c>X</c></span></div> +<div class="grid"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div> + +<div class="grid sz"><x></x><span><c>X</c></span></div> +<div class="grid sz definite"><x></x><span><c>X</c></span></div> +<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div> + +<br> + +<div class="grid min"><x></x><span><c>X</c></span></div> +<div class="grid min"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz min"><x></x><span><c>X</c></span></div> +<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div> + +<div class="grid max"><x></x><span><c>X</c></span></div> +<div class="grid max"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz max"><x></x><span><c>X</c></span></div> +<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div> + +<br> + +</div> + +<script> +var tests = document.getElementById('tests'); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +</script> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002-ref.html new file mode 100644 index 0000000000..3af5182798 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002-ref.html @@ -0,0 +1,176 @@ +<!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: Clamp 'automatic minimum size' to definite max-sizing for orthogonal item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: repeat(2,minmax(auto, 15px)); + grid-template-rows: repeat(2,minmax(auto, 10px)); + grid-gap: 1px; + align-items: start; + justify-items: start; + float: left; + border: 1px dashed; + margin-left: 16px; + margin-bottom: 14px; +} +.sz { + width: 40px; + height: 40px; +} + +.definite { + grid-template-columns: repeat(2,15px); + grid-template-rows: repeat(2,10px); +} +.min { + grid-template-columns: repeat(2,minmax(max-content, 15px)); + grid-template-rows: repeat(2,minmax(max-content, 10px)); +} +.max { + grid-template-columns: repeat(2,minmax(min-content, 15px)); + grid-template-rows: repeat(2,minmax(min-content, 10px)); +} + +.larger .grid { + grid-template-columns: repeat(2,minmax(auto, 25px)); + grid-template-rows: repeat(2,minmax(auto, 28px)); +} +.larger .definite { + grid-template-columns: repeat(2,25px); + grid-template-rows: repeat(2,28px); +} +.larger .min { + grid-template-columns: repeat(2,minmax(max-content, 25px)); + grid-template-rows: repeat(2,minmax(max-content, 28px)); +} +.larger .max { + grid-template-columns: repeat(2,minmax(min-content, 25px)); + grid-template-rows: repeat(2,minmax(min-content, 28px)); +} + +.stretch .grid { + align-items: stretch; + justify-items: stretch; +} +.grid.a.max { + height:61px; +} +.larger .grid.a.max { + height:79px; +} + +span { + writing-mode: vertical-rl; + grid-area: 1 / 1; + font-size: 48px; + background: grey; + background-clip: content-box; + border: 1px solid; + padding: 1px 3px 5px 7px; + margin: 3px 5px 7px 1px; +} +.span2 { + grid-area: 1 / 1 / span 2 / span 2; +} +.larger .grid .span2 { + font-size: 32px; + width: 20px; + height: 32px; +} +.stretch.larger .grid .span2 { + width: 33px; + height: 39px; +} +.stretch.larger .grid.sz .span2 { + width: 22px; + height: 32px; +} +.stretch.larger .grid.definite .span2 { + width: 33px; + height: 39px; +} +.grid.max span { + height:32px; +} + +x { + grid-area: 1 / 1; + min-width: 0; + min-height: 0; + align-self: stretch; + justify-self: stretch; + background: cyan; +} +c { + display: block; + width: 20px; + height: 32px; +} + +br { + clear: both; +} + </style> +</head> +<body> + +<div id="tests"> +<div class="grid"><x></x><span><c>X</c></span></div> +<div class="grid definite"><x></x><span><c>X</c></span></div> +<div class="grid"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div> + +<div class="grid sz"><x></x><span><c>X</c></span></div> +<div class="grid sz definite"><x></x><span><c>X</c></span></div> +<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div> + +<br> + +<div class="grid min"><x></x><span><c>X</c></span></div> +<div class="grid min"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz min"><x></x><span><c>X</c></span></div> +<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div> + +<div class="grid a max"><x></x><span><c>X</c></span></div> +<div class="grid max"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz max"><x></x><span><c>X</c></span></div> +<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div> + +<br> + +</div> + +<script> +var tests = document.getElementById('tests'); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +</script> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002.html new file mode 100644 index 0000000000..ffdc0317df --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-002.html @@ -0,0 +1,155 @@ +<!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: Clamp 'automatic minimum size' to definite max-sizing for orthogonal item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-item-auto-min-size-clamp-002-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: repeat(2,minmax(auto, 15px)); + grid-template-rows: repeat(2,minmax(auto, 10px)); + grid-gap: 1px; + align-items: start; + justify-items: start; + float: left; + border: 1px dashed; + margin-left: 16px; + margin-bottom: 14px; +} +.sz { + width: 40px; + height: 40px; +} + +.definite { + grid-template-columns: repeat(2,15px); + grid-template-rows: repeat(2,10px); +} +.min { + grid-template-columns: repeat(2,minmax(min-content, 15px)); + grid-template-rows: repeat(2,minmax(min-content, 10px)); +} +.max { + grid-template-columns: repeat(2,minmax(max-content, 15px)); + grid-template-rows: repeat(2,minmax(max-content, 10px)); +} + +.larger .grid { + grid-template-columns: repeat(2,minmax(auto, 25px)); + grid-template-rows: repeat(2,minmax(auto, 28px)); +} +.larger .definite { + grid-template-columns: repeat(2,25px); + grid-template-rows: repeat(2,28px); +} +.larger .min { + grid-template-columns: repeat(2,minmax(min-content, 25px)); + grid-template-rows: repeat(2,minmax(min-content, 28px)); +} +.larger .max { + grid-template-columns: repeat(2,minmax(max-content, 25px)); + grid-template-rows: repeat(2,minmax(max-content, 28px)); +} + +.stretch .grid { + align-items: stretch; + justify-items: stretch; +} + +span { + writing-mode: vertical-rl; + grid-area: 1 / 1; + font-size: 48px; + background: grey; + background-clip: content-box; + border: 1px solid; + padding: 1px 3px 5px 7px; + margin: 3px 5px 7px 1px; +} +.span2 { + grid-area: 1 / 1 / span 2 / span 2; +} +.larger .grid .span2 { + font-size: 32px; +} + +x { + grid-area: 1 / 1; + min-width: 0; + min-height: 0; + align-self: stretch; + justify-self: stretch; + background: cyan; +} +c { + display: block; + width: 20px; + height: 32px; +} + +br { + clear: both; +} + </style> +</head> +<body> + +<div id="tests"> +<div class="grid"><x></x><span><c>X</c></span></div> +<div class="grid definite"><x></x><span><c>X</c></span></div> +<div class="grid"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div> + +<div class="grid sz"><x></x><span><c>X</c></span></div> +<div class="grid sz definite"><x></x><span><c>X</c></span></div> +<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div> + +<br> + +<div class="grid min"><x></x><span><c>X</c></span></div> +<div class="grid min"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz min"><x></x><span><c>X</c></span></div> +<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div> + +<div class="grid max"><x></x><span><c>X</c></span></div> +<div class="grid max"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz max"><x></x><span><c>X</c></span></div> +<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div> + +<br> + +</div> + +<script> +var tests = document.getElementById('tests'); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +</script> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003-ref.html new file mode 100644 index 0000000000..cdc26205bc --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003-ref.html @@ -0,0 +1,264 @@ +<!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: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-gap: 1px; + align-items: start; + justify-items: start; + float: left; + border: 1px dashed; + margin-right: 16px; + margin-bottom: 14px; +} +.sz { + width: 40px; + height: 40px; +} + +.stretch .grid { + align-items: stretch; + justify-items: stretch; +} + +img { + grid-area: 1 / 1; + border: 1px solid; + padding: 1px 3px 5px 7px; + margin: 3px 5px 7px 1px; + min-width: 0; + min-height: 0; +} +.span2 { + grid-area: 1 / 1 / span 2 / span 2; +} + +x { + grid-area: 1 / 1; + min-width: 0; + min-height: 0; + align-self: stretch; + justify-self: stretch; + background: cyan; +} + +br { + clear: both; +} + </style> +</head> +<body> + +<div id="tests"> +<div class="grid a"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid a2"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<br> + +<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<div class="grid x1 max"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid x1 sz max"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<br> + +</div> + +<script> +var tests = document.getElementById('tests'); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +</script> + + +<script> +var imgSizes = +[ + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['0px', '0px'], + ['0px', '0px'], + ['13px', '3px'], + ['13px', '3px'], + ['0px', '0px'], + ['0px', '0px'], + ['13px', '3px'], + ['13px', '3px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['20px', '32px'], + ['7px', '10px'], + ['7px', '10px'], + ['33px', '39px'], + ['33px', '39px'], + ['7px', '10px'], + ['7px', '10px'], + ['22px', '32px'], + ['33px', '39px'], + ['20px', '32px'], + ['33px', '39px'], + ['20px', '32px'], + ['22px', '32px'], + ['20px', '32px'], + ['33px', '39px'], + ['20px', '32px'], + ['22px', '32px'], +]; +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + imgs[i].style.width = imgSizes[i][0]; + imgs[i].style.height = imgSizes[i][1]; +} + + +var track_sizes = +[ + ['18px 10px / 18px 15px'], + ['10px 10px / 15px 15px'], + ['10px 10px / 15px 15px'], + ['10px 10px / 15px 15px'], + ['18px 10px / 18px 15px'], + ['10px 10px / 15px 15px'], + ['10px 10px / 15px 15px'], + ['10px 10px / 15px 15px'], + ['50px 10px / 38px 15px'], + ['24.5px 24.5px / 18.5px 18.5px'], + ['50px 0px / 38px 1px'], + ['24.5px 24.5px / 18.5px 18.5px'], + ['50px 10px / 38px 15px'], + ['24.5px 24.5px / 18.5px 18.5px'], + ['50px 0px / 38px 1px'], + ['24.5px 24.5px / 18.5px 18.5px'], + ['28px 28px / 25px 25px'], + ['28px 28px / 25px 25px'], + ['28px 28px / 25px 25px'], + ['28px 28px / 25px 25px'], + ['28px 11px / 25px 14px'], + ['28px 28px / 25px 25px'], + ['24.5px 24.5px / 19.5px 19.5px'], + ['28px 28px / 25px 25px'], + ['50px 28px / 38px 25px'], + ['28px 28px / 25px 25px'], + ['50px 0px / 38px 1px'], + ['24.5px 24.5px / 19.5px 19.5px'], + ['50px 28px / 38px 25px'], + ['28px 28px / 25px 25px'], + ['50px 0px / 38px 1px'], + ['24.5px 24.5px / 19.5px 19.5px'], + ['18px 10px / 18px 15px'], + ['10px 10px / 15px 15px'], + ['10px 10px / 15px 15px'], + ['10px 10px / 15px 15px'], + ['18px 10px / 18px 15px'], + ['10px 10px / 15px 15px'], + ['10px 10px / 15px 15px'], + ['10px 10px / 15px 15px'], + ['50px 10px / 38px 15px'], + ['24.5px 24.5px / 18.5px 18.5px'], + ['50px 0px / 38px 1px'], + ['24.5px 24.5px / 18.5px 18.5px'], + ['50px 10px / 38px 15px'], + ['24.5px 24.5px / 18.5px 18.5px'], + ['50px 0px / 38px 1px'], + ['24.5px 24.5px / 18.5px 18.5px'], + ['28px 28px / 25px 25px'], + ['28px 28px / 25px 25px'], + ['28px 28px / 25px 25px'], + ['28px 28px / 25px 25px'], + ['28px 11px / 25px 14px'], + ['28px 28px / 25px 25px'], + ['24.5px 24.5px / 19.5px 19.5px'], + ['28px 28px / 25px 25px'], + ['50px 28px / 38px 25px'], + ['28px 28px / 25px 25px'], + ['50px 0px / 38px 1px'], + ['24.5px 24.5px / 19.5px 19.5px'], + ['50px 28px / 38px 25px'], + ['28px 28px / 25px 25px'], + ['50px 0px / 38px 1px'], + ['24.5px 24.5px / 19.5px 19.5px'], +]; + +var grids = document.querySelectorAll('.grid'); +for (var i = 0; i < grids.length; ++i) { + grids[i].style.grid = track_sizes[i]; + grids[i].style.gridGap = "1px"; +} + + +</script> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html new file mode 100644 index 0000000000..b2d9b5a1c1 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-003.html @@ -0,0 +1,170 @@ +<!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: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-item-auto-min-size-clamp-003-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: repeat(2,minmax(auto, 15px)); + grid-template-rows: repeat(2,minmax(auto, 10px)); + grid-gap: 1px; + align-items: start; + justify-items: start; + float: left; + border: 1px dashed; + margin-right: 16px; + margin-bottom: 14px; +} +.sz { + width: 40px; + height: 40px; +} + +.definite { + grid-template-columns: repeat(2,15px); + grid-template-rows: repeat(2,10px); +} +.min { + grid-template-columns: repeat(2,minmax(max-content, 15px)); + grid-template-rows: repeat(2,minmax(max-content, 10px)); +} +.max { + grid-template-columns: repeat(2,minmax(min-content, 15px)); + grid-template-rows: repeat(2,minmax(min-content, 10px)); +} + +.larger .grid { + grid-template-columns: repeat(2,minmax(auto, 25px)); + grid-template-rows: repeat(2,minmax(auto, 28px)); +} +.larger .definite { + grid-template-columns: repeat(2,25px); + grid-template-rows: repeat(2,28px); +} +.larger .min { + grid-template-columns: repeat(2,minmax(max-content, 25px)); + grid-template-rows: repeat(2,minmax(max-content, 28px)); +} +.larger .max { + grid-template-columns: repeat(2,minmax(min-content, 25px)); + grid-template-rows: repeat(2,minmax(min-content, 28px)); +} + +.stretch .grid { + align-items: stretch; + justify-items: stretch; +} + +img { + grid-area: 1 / 1; + border: 1px solid; + padding: 1px 3px 5px 7px; + margin: 3px 5px 7px 1px; +} +.span2 { + grid-area: 1 / 1 / span 2 / span 2; +} +.larger .grid .span2 { + font-size: 32px; +} + +x { + grid-area: 1 / 1; + min-width: 0; + min-height: 0; + align-self: stretch; + justify-self: stretch; + background: cyan; +} + +br { + clear: both; +} + </style> +</head> +<body> + +<div id="tests"> +<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<br> + +<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<br> + +</div> + +<script> +var tests = document.getElementById('tests'); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +</script> + +<!-- +<script> +document.body.onload = function() { + document.body.clientHeight; + var imgs = document.querySelectorAll('img'); + var s = ' [\n'; + for (var i = 0; i < imgs.length; ++i) { + s += " ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n"; + } + s += ']'; + console.log(s) + + var grids = document.querySelectorAll('.grid'); + var s = ' [\n'; + for (var i = 0; i < grids.length; ++i) { + let cs = window.getComputedStyle(grids[i]); + s += " ['"+ cs.gridTemplateRows + " / " + cs.gridTemplateColumns + "'],\n"; + } + s += ']'; + console.log(s) +} +</script> +--> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-004-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-004-ref.html new file mode 100644 index 0000000000..a0bde8fd78 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-004-ref.html @@ -0,0 +1,246 @@ +<!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: Clamp 'automatic minimum size' to definite max-sizing for orthogonal intrinsic ratio item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: repeat(2,minmax(auto, 15px)); + grid-template-rows: repeat(2,minmax(auto, 10px)); + grid-gap: 1px; + align-items: start; + justify-items: start; + float: left; + border: 1px dashed; + margin-left: 16px; + margin-bottom: 14px; +} +.sz { + width: 40px; + height: 40px; +} + +.definite { + grid-template-columns: repeat(2,15px); + grid-template-rows: repeat(2,10px); +} +.min { + grid-template-columns: repeat(2,minmax(min-content, 15px)); + grid-template-rows: repeat(2,minmax(min-content, 10px)); +} +.max { + grid-template-columns: repeat(2,minmax(max-content, 15px)); + grid-template-rows: repeat(2,minmax(max-content, 10px)); +} + +.larger .grid { + grid-template-columns: repeat(2,minmax(auto, 25px)); + grid-template-rows: repeat(2,minmax(auto, 28px)); +} +.larger .definite { + grid-template-columns: repeat(2,25px); + grid-template-rows: repeat(2,28px); +} +.larger .min { + grid-template-columns: repeat(2,minmax(min-content, 25px)); + grid-template-rows: repeat(2,minmax(min-content, 28px)); +} +.larger .max { + grid-template-columns: repeat(2,minmax(max-content, 25px)); + grid-template-rows: repeat(2,minmax(max-content, 28px)); +} + +.stretch .grid { + align-items: stretch; + justify-items: stretch; +} +.grid.a { + width:54px; +} +.grid.a2 { + width:38px; +} +.larger .grid.a { + width:64px; +} +.larger .grid.a2 { + width:51px; +} +.grid.x1 { + grid-template-columns:38px 15px; +} +.larger .grid.x1 { + grid-template-columns:38px 25px; +} +.grid.x2, .grid.x3 { + grid-template-columns:18.5px 18.5px; +} +.larger .grid.x2 { + grid-template-columns:25px 25px; +} +.larger .grid.x3 { + grid-template-columns:19.5px 19.5px; +} + +img { + writing-mode: vertical-rl; + grid-area: 1 / 1; + border: 1px solid; + padding: 1px 3px 5px 7px; + margin: 3px 5px 7px 1px; + width: 0; + height: 0; +} +.span2 { + grid-area: 1 / 1 / span 2 / span 2; +} + +x { + grid-area: 1 / 1; + min-width: 0; + min-height: 0; + align-self: stretch; + justify-self: stretch; + background: cyan; +} + +br { + clear: both; +} + </style> +</head> +<body> + +<div id="tests"> +<div class="grid a"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid a2"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<br> + +<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<div class="grid x1 max"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid x2 max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid x1 sz max"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid x3 sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<br> + +</div> + +<script> +var tests = document.getElementById('tests'); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +</script> + +<script> +var imgSizes = +[ + ['0px', '0px'], + ['0px', '0px'], + ['2px', '3px'], + ['2px', '3px'], + ['0px', '0px'], + ['0px', '0px'], + ['2px', '3px'], + ['2px', '3px'], + ['0px', '0px'], + ['2px', '3px'], + ['0px', '0px'], + ['2px', '3px'], + ['13px', '20px'], + ['13px', '20px'], + ['13px', '20px'], + ['13px', '20px'], + ['6px', '10px'], + ['6px', '10px'], + ['20px', '32px'], + ['20px', '32px'], + ['6px', '10px'], + ['6px', '10px'], + ['14px', '22px'], + ['20px', '32px'], + ['6px', '10px'], + ['20px', '32px'], + ['6px', '10px'], + ['14px', '22px'], + ['13px', '20px'], + ['20px', '32px'], + ['13px', '20px'], + ['14px', '22px'], + ['0px', '0px'], + ['0px', '0px'], + ['13px', '3px'], + ['13px', '3px'], + ['0px', '0px'], + ['0px', '0px'], + ['13px', '3px'], + ['13px', '3px'], + ['0px', '0px'], + ['13px', '3px'], + ['0px', '0px'], + ['13px', '3px'], + ['20px', '20px'], + ['20px', '20px'], + ['20px', '20px'], + ['20px', '20px'], + ['7px', '10px'], + ['7px', '10px'], + ['33px', '39px'], + ['33px', '39px'], + ['7px', '10px'], + ['7px', '10px'], + ['22px', '22px'], + ['33px', '39px'], + ['7px', '10px'], + ['33px', '39px'], + ['7px', '10px'], + ['22px', '22px'], + ['20px', '20px'], + ['33px', '39px'], + ['20px', '20px'], + ['22px', '22px'], +]; +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + imgs[i].style.width = imgSizes[i][0]; + imgs[i].style.height = imgSizes[i][1]; +} +</script> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-004.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-004.html new file mode 100644 index 0000000000..6ab004cb65 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-004.html @@ -0,0 +1,160 @@ +<!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: Clamp 'automatic minimum size' to definite max-sizing for orthogonal intrinsic ratio item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-item-auto-min-size-clamp-004-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: repeat(2,minmax(auto, 15px)); + grid-template-rows: repeat(2,minmax(auto, 10px)); + grid-gap: 1px; + align-items: start; + justify-items: start; + float: left; + border: 1px dashed; + margin-left: 16px; + margin-bottom: 14px; +} +.sz { + width: 40px; + height: 40px; +} + +.definite { + grid-template-columns: repeat(2,15px); + grid-template-rows: repeat(2,10px); +} +.min { + grid-template-columns: repeat(2,minmax(min-content, 15px)); + grid-template-rows: repeat(2,minmax(min-content, 10px)); +} +.max { + grid-template-columns: repeat(2,minmax(max-content, 15px)); + grid-template-rows: repeat(2,minmax(max-content, 10px)); +} + +.larger .grid { + grid-template-columns: repeat(2,minmax(auto, 25px)); + grid-template-rows: repeat(2,minmax(auto, 28px)); +} +.larger .definite { + grid-template-columns: repeat(2,25px); + grid-template-rows: repeat(2,28px); +} +.larger .min { + grid-template-columns: repeat(2,minmax(min-content, 25px)); + grid-template-rows: repeat(2,minmax(min-content, 28px)); +} +.larger .max { + grid-template-columns: repeat(2,minmax(max-content, 25px)); + grid-template-rows: repeat(2,minmax(max-content, 28px)); +} + +.stretch .grid { + align-items: stretch; + justify-items: stretch; +} + +img { + writing-mode: vertical-rl; + grid-area: 1 / 1; + border: 1px solid; + padding: 1px 3px 5px 7px; + margin: 3px 5px 7px 1px; +} +.span2 { + grid-area: 1 / 1 / span 2 / span 2; +} +.larger .grid .span2 { + font-size: 32px; +} + +x { + grid-area: 1 / 1; + min-width: 0; + min-height: 0; + align-self: stretch; + justify-self: stretch; + background: cyan; +} + +br { + clear: both; +} + </style> +</head> +<body> + +<div id="tests"> +<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<br> + +<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<br> + +</div> + +<script> +var tests = document.getElementById('tests'); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +</script> + +<!-- For generating image size results in -ref file +<script> +document.body.clientHeight; +var imgs = document.querySelectorAll('img'); +var s = ' [\n'; +for (var i = 0; i < imgs.length; ++i) { + s += " ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n"; +} +s += ']'; +console.log(s) +</script> +--> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005-ref.html new file mode 100644 index 0000000000..6d3e907f54 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005-ref.html @@ -0,0 +1,165 @@ +<!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: Clamp 'automatic minimum size' to definite max-sizing of block item with margin:auto</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: repeat(2,minmax(auto, 15px)); + grid-template-rows: repeat(2,minmax(auto, 10px)); + grid-gap: 1px; + align-items: start; + justify-items: start; + float: left; + border: 1px dashed; + margin-right: 16px; + margin-bottom: 14px; +} +.sz { + width: 40px; + height: 40px; +} + +.definite { + grid-template-columns: repeat(2,15px); + grid-template-rows: repeat(2,10px); +} +.min { + grid-template-columns: repeat(2,minmax(min-content, 15px)); + grid-template-rows: repeat(2,minmax(min-content, 10px)); +} +.max { + grid-template-columns: repeat(2,minmax(max-content, 15px)); + grid-template-rows: repeat(2,minmax(max-content, 10px)); +} + +.larger .grid { + grid-template-columns: repeat(2,minmax(auto, 25px)); + grid-template-rows: repeat(2,minmax(auto, 28px)); +} +.larger .definite { + grid-template-columns: repeat(2,25px); + grid-template-rows: repeat(2,28px); +} +.larger .min { + grid-template-columns: repeat(2,minmax(min-content, 25px)); + grid-template-rows: repeat(2,minmax(min-content, 28px)); +} +.larger .max { + grid-template-columns: repeat(2,minmax(max-content, 25px)); + grid-template-rows: repeat(2,minmax(max-content, 28px)); +} + +.stretch .grid { + align-items: stretch; + justify-items: stretch; +} + +span { + grid-area: 1 / 1; + font-size: 48px; + background: grey; + background-clip: content-box; + border: 1px solid; + padding: 1px 3px 5px 7px; + margin: 0; +} +.span2 { + grid-area: 1 / 1 / span 2 / span 2; +} + +.larger .grid .span2 { + font-size: 16px; + width: 20px; + height: 32px; +} + +x { + grid-area: 1 / 1; + min-width: 0; + min-height: 0; + align-self: stretch; + justify-self: stretch; + background: cyan; +} +c { + display: block; + width: 20px; + height: 32px; +} + +br { + clear: both; +} + +.larger .center > span { + justify-self: center; + align-self: center; +} +.larger .ml4 > span { + margin-left: 4px; +} + </style> +</head> +<body> + +<div id="tests"> +<div class="grid"><x></x><span><c>X</c></span></div> +<div class="grid definite"><x></x><span><c>X</c></span></div> +<div class="grid center"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid center definite"><x></x><span class="span2"><c>X</c></span></div> + +<div class="grid sz"><x></x><span><c>X</c></span></div> +<div class="grid sz definite"><x></x><span><c>X</c></span></div> +<div class="grid ml4 sz"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid center sz definite"><x></x><span class="span2"><c>X</c></span></div> + +<br> + +<div class="grid min"><x></x><span><c>X</c></span></div> +<div class="grid center min"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz min"><x></x><span><c>X</c></span></div> +<div class="grid ml4 sz min"><x></x><span class="span2"><c>X</c></span></div> + +<div class="grid max"><x></x><span><c>X</c></span></div> +<div class="grid center max"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz max"><x></x><span><c>X</c></span></div> +<div class="grid ml4 sz max"><x></x><span class="span2"><c>X</c></span></div> + +<br> + +</div> + +<script> +var tests = document.getElementById('tests'); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +/* TODO: sort out https://bugs.chromium.org/p/chromium/issues/detail?id=789927 first +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); +*/ + +</script> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005.html new file mode 100644 index 0000000000..878e7c17c6 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-005.html @@ -0,0 +1,156 @@ +<!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: Clamp 'automatic minimum size' to definite max-sizing of block item with margin:auto</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-item-auto-min-size-clamp-005-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: repeat(2,minmax(auto, 15px)); + grid-template-rows: repeat(2,minmax(auto, 10px)); + grid-gap: 1px; + align-items: start; + justify-items: start; + float: left; + border: 1px dashed; + margin-right: 16px; + margin-bottom: 14px; +} +.sz { + width: 40px; + height: 40px; +} + +.definite { + grid-template-columns: repeat(2,15px); + grid-template-rows: repeat(2,10px); +} +.min { + grid-template-columns: repeat(2,minmax(min-content, 15px)); + grid-template-rows: repeat(2,minmax(min-content, 10px)); +} +.max { + grid-template-columns: repeat(2,minmax(max-content, 15px)); + grid-template-rows: repeat(2,minmax(max-content, 10px)); +} + +.larger .grid { + grid-template-columns: repeat(2,minmax(auto, 25px)); + grid-template-rows: repeat(2,minmax(auto, 28px)); +} +.larger .definite { + grid-template-columns: repeat(2,25px); + grid-template-rows: repeat(2,28px); +} +.larger .min { + grid-template-columns: repeat(2,minmax(min-content, 25px)); + grid-template-rows: repeat(2,minmax(min-content, 28px)); +} +.larger .max { + grid-template-columns: repeat(2,minmax(max-content, 25px)); + grid-template-rows: repeat(2,minmax(max-content, 28px)); +} + +.stretch .grid { + align-items: stretch; + justify-items: stretch; +} + +span { + grid-area: 1 / 1; + font-size: 48px; + background: grey; + background-clip: content-box; + border: 1px solid; + padding: 1px 3px 5px 7px; + margin: auto; +} +.span2 { + grid-area: 1 / 1 / span 2 / span 2; +} +.larger .grid .span2 { + font-size: 16px; +} + +x { + grid-area: 1 / 1; + min-width: 0; + min-height: 0; + align-self: stretch; + justify-self: stretch; + background: cyan; +} +c { + display: block; + width: 20px; + height: 32px; +} + +br { + clear: both; +} + </style> +</head> +<body> + +<div id="tests"> +<div class="grid"><x></x><span><c>X</c></span></div> +<div class="grid definite"><x></x><span><c>X</c></span></div> +<div class="grid"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid definite"><x></x><span class="span2"><c>X</c></span></div> + +<div class="grid sz"><x></x><span><c>X</c></span></div> +<div class="grid sz definite"><x></x><span><c>X</c></span></div> +<div class="grid sz"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div> + +<br> + +<div class="grid min"><x></x><span><c>X</c></span></div> +<div class="grid min"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz min"><x></x><span><c>X</c></span></div> +<div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div> + +<div class="grid max"><x></x><span><c>X</c></span></div> +<div class="grid max"><x></x><span class="span2"><c>X</c></span></div> +<div class="grid sz max"><x></x><span><c>X</c></span></div> +<div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div> + +<br> + +</div> + +<script> +var tests = document.getElementById('tests'); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +/* TODO: sort out https://bugs.chromium.org/p/chromium/issues/detail?id=789927 first +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); +*/ + +</script> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006-ref.html new file mode 100644 index 0000000000..4ba01832c9 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006-ref.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>Reference: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item with margin:auto</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: repeat(2,minmax(auto, 15px)); + grid-template-rows: repeat(2,minmax(auto, 10px)); + grid-gap: 1px; + align-items: start; + justify-items: start; + float: left; + border: 1px dashed; + margin-right: 16px; + margin-bottom: 14px; +} +.sz { + width: 40px; + height: 40px; +} + +.definite { + grid-template-columns: repeat(2,15px); + grid-template-rows: repeat(2,10px); +} +.min { + grid-template-columns: repeat(2,minmax(min-content, 15px)); + grid-template-rows: repeat(2,minmax(min-content, 10px)); +} +.max { + grid-template-columns: repeat(2,minmax(max-content, 15px)); + grid-template-rows: repeat(2,minmax(max-content, 10px)); +} + +.larger .grid { + grid-template-columns: repeat(2,minmax(auto, 25px)); + grid-template-rows: repeat(2,minmax(auto, 28px)); +} +.larger .definite { + grid-template-columns: repeat(2,25px); + grid-template-rows: repeat(2,28px); +} +.larger .min { + grid-template-columns: repeat(2,minmax(min-content, 25px)); + grid-template-rows: repeat(2,minmax(min-content, 28px)); +} +.larger .max { + grid-template-columns: repeat(2,minmax(max-content, 25px)); + grid-template-rows: repeat(2,minmax(max-content, 28px)); +} + +.stretch .grid { + align-items: stretch; + justify-items: stretch; +} + +img { + grid-area: 1 / 1; + border: 1px solid; + padding: 1px 3px 5px 7px; + margin: 0; + align-self:center; + justify-self:center; +} +.span2 { + grid-area: 1 / 1 / span 2 / span 2; +} +.larger .grid .span2 { + font-size: 32px; +} +.larger .grid .span2 { + width: 20px; + height: 32px; +} + +x { + grid-area: 1 / 1; + min-width: 0; + min-height: 0; + align-self: stretch; + justify-self: stretch; + background: cyan; +} + +br { + clear: both; +} + </style> +</head> +<body> + +<div id="tests"> +<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<br> + +<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<br> + +</div> + +<script> +var tests = document.getElementById('tests'); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +</script> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006.html new file mode 100644 index 0000000000..6f67c518bb --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-006.html @@ -0,0 +1,146 @@ +<!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: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item with margin:auto</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-item-auto-min-size-clamp-006-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: repeat(2,minmax(auto, 15px)); + grid-template-rows: repeat(2,minmax(auto, 10px)); + grid-gap: 1px; + align-items: start; + justify-items: start; + float: left; + border: 1px dashed; + margin-right: 16px; + margin-bottom: 14px; +} +.sz { + width: 40px; + height: 40px; +} + +.definite { + grid-template-columns: repeat(2,15px); + grid-template-rows: repeat(2,10px); +} +.min { + grid-template-columns: repeat(2,minmax(min-content, 15px)); + grid-template-rows: repeat(2,minmax(min-content, 10px)); +} +.max { + grid-template-columns: repeat(2,minmax(max-content, 15px)); + grid-template-rows: repeat(2,minmax(max-content, 10px)); +} + +.larger .grid { + grid-template-columns: repeat(2,minmax(auto, 25px)); + grid-template-rows: repeat(2,minmax(auto, 28px)); +} +.larger .definite { + grid-template-columns: repeat(2,25px); + grid-template-rows: repeat(2,28px); +} +.larger .min { + grid-template-columns: repeat(2,minmax(min-content, 25px)); + grid-template-rows: repeat(2,minmax(min-content, 28px)); +} +.larger .max { + grid-template-columns: repeat(2,minmax(max-content, 25px)); + grid-template-rows: repeat(2,minmax(max-content, 28px)); +} + +.stretch .grid { + align-items: stretch; + justify-items: stretch; +} + +img { + grid-area: 1 / 1; + border: 1px solid; + padding: 1px 3px 5px 7px; + margin: auto; +} +.span2 { + grid-area: 1 / 1 / span 2 / span 2; +} +.larger .grid .span2 { + font-size: 32px; +} + +x { + grid-area: 1 / 1; + min-width: 0; + min-height: 0; + align-self: stretch; + justify-self: stretch; + background: cyan; +} + +br { + clear: both; +} + </style> +</head> +<body> + +<div id="tests"> +<div class="grid"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<br> + +<div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> +<div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div> +<div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> + +<br> + +</div> + +<script> +var tests = document.getElementById('tests'); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +var n = tests.cloneNode(true); +var wrap = document.createElement('div'); +wrap.className = 'stretch larger'; +wrap.appendChild(n); +document.body.appendChild(wrap); + +</script> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007-ref.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007-ref.html new file mode 100644 index 0000000000..fc1821a4ef --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007-ref.html @@ -0,0 +1,155 @@ +<!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: Clamp 'automatic minimum size' to definite max-sizing for items with specified intrinsic 'width'/'height'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + position: relative; + grid-template-columns: repeat(2,20px); + grid-template-rows: repeat(2,20px); + align-items: start; + justify-items: start; + border: 1px dashed; + margin-right: 16px; + margin-bottom: 14px; +} +.c-auto { grid-template-columns: 15px; width: 15px; } +.c-30 { grid-template-columns: 30px; width: 30px; } +.r-auto { grid-template-rows: 15px; height: 15px; } +.r-min { grid-template-rows: 40px; height: 40px; } +.r-max { grid-template-rows: 40px; height: 40px; } +span { + grid-area: 1 / 1; + font-size: 48px; + background: grey; +} +y { + position: absolute; + grid-area: 2 / 1 / 3 / 2; + top:0;left:0;right:0; + height: 10px; + background: lightgrey; +} +.r y { + grid-area: 1 / 2 / 2 / 3; + top:0;bottom:0;left:0; + width: 10px; + height: auto; +} +br { clear: both; } + +x { display:block; width:30px; height:40px; } +span { width:15px; } +.r span { width:20px; } +.grid.c-30 span, .r.grid.c-30 span { width:30px; } +.grid.r-auto span { height:40px; } +.r span { height:15px; } +.r.r-min span, .r.r-max span { height:40px; } + </style> +</head> +<body> + +<div class="grid c-auto"><y></y><span style="width:30px"><x>X</x></span></div> +<div class="grid c-30"><y></y><span><x>X</x></span></div> +<div class="grid c-30"><y></y><span><x>X</x></span></div> +<div class="grid c-30"><y></y><span><x>X</x></span></div> +<div class="grid c-30"><y></y><span><x>X</x></span></div> + +<br> + +<div class="grid c-30"><y></y><span><x>X</x></span></div> +<div class="grid c-30"><y></y><span><x>X</x></span></div> +<div class="grid c-30"><y></y><span><x>X</x></span></div> +<div class="grid c-30"><y></y><span><x>X</x></span></div> +<div class="grid c-30"><y></y><span><x>X</x></span></div> + +<br> + +<div class="grid c-30"><y></y><span><x>X</x></span></div> +<div class="grid c-30"><y></y><span><x>X</x></span></div> +<div class="grid c-30"><y></y><span><x>X</x></span></div> +<div class="grid c-30"><y></y><span><x>X</x></span></div> +<div class="grid c-30"><y></y><span><x>X</x></span></div> + +<br> + +<div class="grid r r-auto"><y></y><span style="width:30px"><x>X</x></span></div> +<div class="grid r r-auto"><y></y><span style="width:30px"><x>X</x></span></div> +<div class="grid r r-auto"><y></y><span style="width:30px"><x>X</x></span></div> +<div class="grid r r-auto"><y></y><span style="width:30px"><x>X</x></span></div> +<div class="grid r r-auto"><y></y><span style="width:20px"><x>X</x></span></div> + +<br> + +<div class="grid r r-min"><y></y><span><x>X</x></span></div> +<div class="grid r r-min"><y></y><span><x>X</x></span></div> +<div class="grid r r-min"><y></y><span><x>X</x></span></div> +<div class="grid r r-min"><y></y><span><x>X</x></span></div> +<div class="grid r r-min"><y></y><span><x>X</x></span></div> + +<br> + +<div class="grid r r-max"><y></y><span><x>X</x></span></div> +<div class="grid r r-max"><y></y><span><x>X</x></span></div> +<div class="grid r r-max"><y></y><span><x>X</x></span></div> +<div class="grid r r-max"><y></y><span><x>X</x></span></div> +<div class="grid r r-max"><y></y><span><x>X</x></span></div> + +<br> + +<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> + +<br> + +<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> + +<br> + +<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> + +<br> + +<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-auto"><y></y><span><x>X</x></span></div> + +<br> + +<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-min"><y></y><span><x>X</x></span></div> + +<br> + +<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> +<div class="grid r c-30 r-max"><y></y><span><x>X</x></span></div> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007.html b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007.html new file mode 100644 index 0000000000..3e24a894de --- /dev/null +++ b/layout/reftests/css-grid/grid-item-auto-min-size-clamp-007.html @@ -0,0 +1,190 @@ +<!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: Clamp 'automatic minimum size' to definite max-sizing for items with specified intrinsic 'width'/'height'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-item-auto-min-size-clamp-007-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + position: relative; + grid-template-columns: repeat(2,20px); + grid-template-rows: repeat(2,20px); + align-items: start; + justify-items: start; + border: 1px dashed; + margin-right: 16px; + margin-bottom: 14px; +} +.c-auto { grid-template-columns: minmax(auto, 15px); } +.c-min { grid-template-columns: minmax(min-content, 15px); } +.c-max { grid-template-columns: minmax(max-content, 15px); } +.r-auto { grid-template-rows: minmax(auto, 15px); } +.r-min { grid-template-rows: minmax(min-content, 15px); } +.r-max { grid-template-rows: minmax(max-content, 15px); } +span { + grid-area: 1 / 1; + font-size: 48px; + background: grey; +} +y { + position: absolute; + grid-area: 2 / 1 / 3 / 2; + top:0;left:0;right:0; + height: 10px; + background: lightgrey; +} + +.min-content { + width: -webkit-min-content; + width: min-content; +} +.max-content { + width: -webkit-max-content; + width: max-content; +} +.fit-content { + width: -moz-fit-content; + width: -webkit-fit-content; + width: fit-content; +} +.fill { + width: -moz-available; + width: -webkit-fill-available; + width: fill; +} + +.r .min-content { + height: -webkit-min-content; + height: min-content; +} +.r .max-content { + height: -webkit-max-content; + height: max-content; +} +.r .fit-content { + height: -moz-fit-content; + height: -webkit-fit-content; + height: fit-content; +} +.r .fill { + height: -moz-available; + height: -webkit-fill-available; + height: fill; +} +.r y { + grid-area: 1 / 2 / 2 / 3; + top:0;bottom:0;left:0; + width: 10px; + height: auto; +} +br { clear: both; } + +x { display:block; width:30px; height:40px; } + </style> +</head> +<body> + +<div class="grid c-auto"><y></y><span><x>X</x></span></div> +<div class="grid c-auto"><y></y><span class="min-content"><x>X</x></span></div> +<div class="grid c-auto"><y></y><span class="max-content"><x>X</x></span></div> +<div class="grid c-auto"><y></y><span class="fit-content"><x>X</x></span></div> +<div class="grid c-auto"><y></y><span class="fill"><x>X</x></span></div> + +<br> + +<div class="grid c-min"><y></y><span><x>X</x></span></div> +<div class="grid c-min"><y></y><span class="min-content"><x>X</x></span></div> +<div class="grid c-min"><y></y><span class="max-content"><x>X</x></span></div> +<div class="grid c-min"><y></y><span class="fit-content"><x>X</x></span></div> +<div class="grid c-min"><y></y><span class="fill"><x>X</x></span></div> + +<br> + +<div class="grid c-max"><y></y><span><x>X</x></span></div> +<div class="grid c-max"><y></y><span class="min-content"><x>X</x></span></div> +<div class="grid c-max"><y></y><span class="max-content"><x>X</x></span></div> +<div class="grid c-max"><y></y><span class="fit-content"><x>X</x></span></div> +<div class="grid c-max"><y></y><span class="fill"><x>X</x></span></div> + +<br> + +<div class="grid r r-auto"><y></y><span><x>X</x></span></div> +<div class="grid r r-auto"><y></y><span class="min-content"><x>X</x></span></div> +<div class="grid r r-auto"><y></y><span class="max-content"><x>X</x></span></div> +<div class="grid r r-auto"><y></y><span class="fit-content"><x>X</x></span></div> +<div class="grid r r-auto"><y></y><span class="fill"><x>X</x></span></div> + +<br> + +<div class="grid r r-min"><y></y><span><x>X</x></span></div> +<div class="grid r r-min"><y></y><span class="min-content"><x>X</x></span></div> +<div class="grid r r-min"><y></y><span class="max-content"><x>X</x></span></div> +<div class="grid r r-min"><y></y><span class="fit-content"><x>X</x></span></div> +<div class="grid r r-min"><y></y><span class="fill"><x>X</x></span></div> + +<br> + +<div class="grid r r-max"><y></y><span><x>X</x></span></div> +<div class="grid r r-max"><y></y><span class="min-content"><x>X</x></span></div> +<div class="grid r r-max"><y></y><span class="max-content"><x>X</x></span></div> +<div class="grid r r-max"><y></y><span class="fit-content"><x>X</x></span></div> +<div class="grid r r-max"><y></y><span class="fill"><x>X</x></span></div> + +<br> + +<div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div> +<div class="grid r c-min r-auto"><y></y><span class="min-content"><x>X</x></span></div> +<div class="grid r c-min r-auto"><y></y><span class="max-content"><x>X</x></span></div> +<div class="grid r c-min r-auto"><y></y><span class="fit-content"><x>X</x></span></div> +<div class="grid r c-min r-auto"><y></y><span class="fill"><x>X</x></span></div> + +<br> + +<div class="grid r c-min r-min"><y></y><span><x>X</x></span></div> +<div class="grid r c-min r-min"><y></y><span class="min-content"><x>X</x></span></div> +<div class="grid r c-min r-min"><y></y><span class="max-content"><x>X</x></span></div> +<div class="grid r c-min r-min"><y></y><span class="fit-content"><x>X</x></span></div> +<div class="grid r c-min r-min"><y></y><span class="fill"><x>X</x></span></div> + +<br> + +<div class="grid r c-min r-max"><y></y><span><x>X</x></span></div> +<div class="grid r c-min r-max"><y></y><span class="min-content"><x>X</x></span></div> +<div class="grid r c-min r-max"><y></y><span class="max-content"><x>X</x></span></div> +<div class="grid r c-min r-max"><y></y><span class="fit-content"><x>X</x></span></div> +<div class="grid r c-min r-max"><y></y><span class="fill"><x>X</x></span></div> + +<br> + +<div class="grid r c-max r-auto"><y></y><span><x>X</x></span></div> +<div class="grid r c-max r-auto"><y></y><span class="min-content"><x>X</x></span></div> +<div class="grid r c-max r-auto"><y></y><span class="max-content"><x>X</x></span></div> +<div class="grid r c-max r-auto"><y></y><span class="fit-content"><x>X</x></span></div> +<div class="grid r c-max r-auto"><y></y><span class="fill"><x>X</x></span></div> + +<br> + +<div class="grid r c-max r-min"><y></y><span><x>X</x></span></div> +<div class="grid r c-max r-min"><y></y><span class="min-content"><x>X</x></span></div> +<div class="grid r c-max r-min"><y></y><span class="max-content"><x>X</x></span></div> +<div class="grid r c-max r-min"><y></y><span class="fit-content"><x>X</x></span></div> +<div class="grid r c-max r-min"><y></y><span class="fill"><x>X</x></span></div> + +<br> + +<div class="grid r c-max r-max"><y></y><span><x>X</x></span></div> +<div class="grid r c-max r-max"><y></y><span class="min-content"><x>X</x></span></div> +<div class="grid r c-max r-max"><y></y><span class="max-content"><x>X</x></span></div> +<div class="grid r c-max r-max"><y></y><span class="fit-content"><x>X</x></span></div> +<div class="grid r c-max r-max"><y></y><span class="fill"><x>X</x></span></div> + +</body></html> diff --git a/layout/reftests/css-grid/grid-item-blockifying-001-ref.html b/layout/reftests/css-grid/grid-item-blockifying-001-ref.html new file mode 100644 index 0000000000..19bfa8a431 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-blockifying-001-ref.html @@ -0,0 +1,312 @@ +<!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 item blockifying</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1185140"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-columns: 100px; + grid-auto-rows: 2px; + justify-content: start; + border: 1px solid blue; +} + +x { + grid-column: span 2; + border:1px solid; +} + +.itable { display:inline-table; } +.table { display:table; } +.caption { display: block; } +.cell { display: block; } +.row { display: block; } +.rowg { display: block; } +.head { display: block; } +.foot { display: block; } +.col { display: block; } +.colg { display: block; } + +.flex { display:flex; } +.iflex { display:flex; } + +.bgrid { display:grid; } +.igrid { display:grid; } + +.list { display:list-item; } + +.r { display: block; } +.rb { display: block; } +.rt { display: block; } +.rbc { display: block; } +.rtc { display: block; } + +</style> +</head> +<body> + +<!-- These should produce two display:block grid items --> + +<div class="grid"> +<x class="cell"></x> +<x class="cell"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="cell"></x> +<x class="cell"></x> +</div> +</div> + +<div class="grid"> +<x class="cell"></x> +<x class="row"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="row"></x> +<x class="row"></x> +</div> +</div> + +<div class="grid"> +<x class="row"></x> +<x class="row"></x> +</div> + +<div class="grid"> +<x class="rowg"></x> +<x class="rowg"></x> +</div> + +<div class="grid"> +<x class="head"></x> +<x class="rowg"></x> +</div> + +<div class="grid"> +<x class="col"></x> +<x class="col"></x> +</div> + +<div class="grid"> +<x class="col"></x> +<x class="colg"></x> +</div> + +<div class="grid"> +<x class="colg"></x> +<x class="colg"></x> +</div> + +<div class="grid"> +<x class="cell"></x> +<x class="col"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="caption"></x> +<x class="caption"></x> +</div> +</div> + +<div class="grid"> +<x class="caption"></x> +<x class="caption"></x> +</div> + +<div class="grid"> +<x class="caption"></x> +<x class="cell"></x> +</div> + +<div class="grid"> +<x></x> +<x></x> +</div> + +<!-- These should produce two display:table grid items --> + +<div class="grid"> +<x class="table"></x> +<x class="table"></x> +</div> + +<div class="grid"> +<x class="itable"></x> +<x class="itable"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="table"></x> +<x class="itable"></x> +</div> +</div> + +<!-- These should produce one display:table grid item and one display:block grid item --> + +<div class="grid"> +<x class="table"></x> +<x class="cell"></x> +</div> + +<div class="grid"> +<x class="cell"></x> +<x class="table"></x> +</div> + +<div class="grid"> +<x class="itable"></x> +<x class="cell"></x> +</div> + +<div class="grid"> +<x class="table"></x> +<x class="rowg"></x> +</div> + +<div class="grid"> +<x class="itable"></x> +<x class="rowg"></x> +</div> + +<div class="grid"> +<x class="rowg"></x> +<x class="itable"></x> +</div> + +<!-- These should produce two display:flex grid items --> + +<div class="grid"> +<x class="flex"></x> +<x class="iflex"></x> +</div> + +<div class="grid"> +<x class="iflex"></x> +<x class="iflex"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="flex"></x> +<x class="flex"></x> +</div> +</div> + +<!-- This should produce one display:flex grid item and one display:block --> + +<div class="grid"> +<x class="iflex"></x> +<x class="cell"></x> +</div> + +<!-- These should produce two display:grid grid items --> + +<div class="grid"> +<x class="bgrid"></x> +<x class="igrid"></x> +</div> + +<div class="grid"> +<x class="igrid"></x> +<x class="igrid"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="bgrid"></x> +<x class="bgrid"></x> +</div> +</div> + +<!-- This should produce one display:grid grid item and one display:block --> + +<div class="grid"> +<x class="igrid"></x> +<x class="cell"></x> +</div> + +<!-- This should produce one display:list-item grid item and one display:block --> +<div class="grid"> +<x class="list"></x> +<x></x> +</div> + +<!-- Various Ruby tests --> + +<div class="grid"> +<x class="r"></x> +<x class="r"></x> +</div> + +<div class="grid"> +<x class="rb"></x> +<x class="rb"></x> +</div> + +<div class="grid"> +<x class="rt"></x> +<x class="rt"></x> +</div> + +<div class="grid"> +<x class="rbc"></x> +<x class="rbc"></x> +</div> + +<div class="grid"> +<x class="rtc"></x> +<x class="rtc"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="r"></x> +<x class="r"></x> +</div> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="rb"></x> +<x class="rb"></x> +</div> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="rt"></x> +<x class="rt"></x> +</div> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="rbc"></x> +<x class="rbc"></x> +</div> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="rtc"></x> +<x class="rtc"></x> +</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-blockifying-001.html b/layout/reftests/css-grid/grid-item-blockifying-001.html new file mode 100644 index 0000000000..f1cfb1e6e6 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-blockifying-001.html @@ -0,0 +1,409 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Grid item blockifying</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1185140"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items"> + <link rel="match" href="grid-item-blockifying-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-columns: 100px; + grid-auto-rows: 2px; + justify-content: start; + border: 1px solid blue; +} + +x { + grid-column: span 2; + border:1px solid; +} + +.itable { display:inline-table; } +.table { display:table; } +.caption { display:table-caption; } +.cell { display:table-cell; } +.row { display:table-row; } +.rowg { display:table-row-group; } +.head { display:table-header-group; } +.foot { display:table-footer-group; } +.col { display:table-column; } +.colg { display:table-column-group; } + +.flex { display:flex; } +.iflex { display:inline-flex; } + +.bgrid { display:grid; } +.igrid { display:inline-grid; } + +.list { display:list-item; } + +.r { display: ruby; } +.rb { display: ruby-base; } +.rt { display: ruby-text; } +.rbc { display: ruby-base-container; } +.rtc { display: ruby-text-container; } + +</style> +</head> +<body> + +<!-- These should produce two display:block grid items --> + +<div class="grid"> +<x class="cell"></x> +<x class="cell"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="cell"></x> +<x class="cell"></x> +</div> +</div> + +<div class="grid"> +<x class="cell"></x> +<x class="row"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="row"></x> +<x class="row"></x> +</div> +</div> + +<div class="grid"> +<x class="row"></x> +<x class="row"></x> +</div> + +<div class="grid"> +<x class="rowg"></x> +<x class="rowg"></x> +</div> + +<div class="grid"> +<x class="head"></x> +<x class="rowg"></x> +</div> + +<div class="grid"> +<x class="col"></x> +<x class="col"></x> +</div> + +<div class="grid"> +<x class="col"></x> +<x class="colg"></x> +</div> + +<div class="grid"> +<x class="colg"></x> +<x class="colg"></x> +</div> + +<div class="grid"> +<x class="cell"></x> +<x class="col"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="caption"></x> +<x class="caption"></x> +</div> +</div> + +<div class="grid"> +<x class="caption"></x> +<x class="caption"></x> +</div> + +<div class="grid"> +<x class="caption"></x> +<x class="cell"></x> +</div> + +<div class="grid"> +<x></x> +<x></x> +</div> + +<!-- These should produce two display:table grid items --> + +<div class="grid"> +<x class="table"></x> +<x class="table"></x> +</div> + +<div class="grid"> +<x class="itable"></x> +<x class="itable"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="table"></x> +<x class="itable"></x> +</div> +</div> + +<!-- These should produce one display:table grid item and one display:block grid item --> + +<div class="grid"> +<x class="table"></x> +<x class="cell"></x> +</div> + +<div class="grid"> +<x class="cell"></x> +<x class="table"></x> +</div> + +<div class="grid"> +<x class="itable"></x> +<x class="cell"></x> +</div> + +<div class="grid"> +<x class="table"></x> +<x class="rowg"></x> +</div> + +<div class="grid"> +<x class="itable"></x> +<x class="rowg"></x> +</div> + +<div class="grid"> +<x class="rowg"></x> +<x class="itable"></x> +</div> + +<!-- These should produce two display:flex grid items --> + +<div class="grid"> +<x class="flex"></x> +<x class="iflex"></x> +</div> + +<div class="grid"> +<x class="iflex"></x> +<x class="iflex"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="flex"></x> +<x class="flex"></x> +</div> +</div> + +<!-- This should produce one display:flex grid item and one display:block --> + +<div class="grid"> +<x class="iflex"></x> +<x class="cell"></x> +</div> + +<!-- These should produce two display:grid grid items --> + +<div class="grid"> +<x class="bgrid"></x> +<x class="igrid"></x> +</div> + +<div class="grid"> +<x class="igrid"></x> +<x class="igrid"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="bgrid"></x> +<x class="bgrid"></x> +</div> +</div> + +<!-- This should produce one display:grid grid item and one display:block --> + +<div class="grid"> +<x class="igrid"></x> +<x class="cell"></x> +</div> + +<!-- This should produce one display:list-item grid item and one display:block --> +<div class="grid"> +<x class="list"></x> +<x></x> +</div> + +<!-- Various Ruby tests --> + +<div class="grid"> +<x class="r"></x> +<x class="r"></x> +</div> + +<div class="grid"> +<x class="rb"></x> +<x class="rb"></x> +</div> + +<div class="grid"> +<x class="rt"></x> +<x class="rt"></x> +</div> + +<div class="grid"> +<x class="rbc"></x> +<x class="rbc"></x> +</div> + +<div class="grid"> +<x class="rtc"></x> +<x class="rtc"></x> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="r"></x> +<x class="r"></x> +</div> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="rb"></x> +<x class="rb"></x> +</div> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="rt"></x> +<x class="rt"></x> +</div> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="rbc"></x> +<x class="rbc"></x> +</div> +</div> + +<div class="grid"> +<div style="display:contents"> +<x class="rtc"></x> +<x class="rtc"></x> +</div> +</div> + +<script> +var expected = [ + "block block", + "contents", + "block block", + "contents", + "block block", + "block block", + "block block", + "block block", + "block block", + "block block", + "block block", + "contents", + "block block", + "block block", + "block block", + "table table", + "table table", + "contents", + "table block", + "block table", + "table block", + "table block", + "table block", + "block table", + "flex flex", + "flex flex", + "contents", + "flex block", + "grid grid", + "grid grid", + "contents", + "grid block", + "list-item block", + "block ruby block ruby", + "block block", + "block block", + "block block", + "block block", + "contents", + "contents", + "contents", + "contents", + "contents", +]; +var expected2 = [ /* results for display:contents children */ + "block block", + "block block", + "block block", + "table table", + "flex flex", + "grid grid", + "block ruby block ruby", + "block block", + "block block", + "block block", + "block block", +]; + +function is(elem, got, expected) { + if (got != expected) { + var err = elem.innerHTML + '\n' + + 'got: ' + got + '\n' + + 'expected: ' + expected; + document.body.appendChild(document.createTextNode(err)); + } +} +function checkDisplayTypes() { + var grids = Array.prototype.slice.call(document.querySelectorAll('.grid')) + var i2 = 0; + for (var i = 0; i < grids.length; ++i) { + var items = Array.prototype.slice.call(grids[i].children) + var s = items.map((e) => getComputedStyle(e).display).join(' '); + is(grids[i], s, expected[i]); + items.map(function(e) { + if (getComputedStyle(e).display == "contents") { + items = Array.prototype.slice.call(e.children) + s = items.map((e) => getComputedStyle(e).display).join(' '); + is(grids[i], s, expected2[i2]); + i2++; + } + }); + } +} + +function runTests() { + checkDisplayTypes(); + document.documentElement.removeAttribute("class"); +} + +runTests(); + +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-button-001-ref.html b/layout/reftests/css-grid/grid-item-button-001-ref.html new file mode 100644 index 0000000000..9057d5d7e0 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-button-001-ref.html @@ -0,0 +1,106 @@ +<!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: stretching/clamping button item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1314206"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } +* { font:16px/1 monospace; } + +.grid2 { + display: grid; + float: left; + grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto; + grid-gap: 5px; + margin-bottom:20px; + margin-right:20px; + border:1px solid; +} +.grid { + display: block; + float: left; + margin-bottom:20px; + margin-right:20px; + border:1px solid; + line-height: 0; +} +button { + border: 1px solid; + padding: 0; + margin: 0; + vertical-align: top; + box-sizing: border-box; + min-width: 0; +} +button:nth-child(1n) { background: blue; } +button:nth-child(2n) { background: grey; } +button:nth-child(3n) { background: tan; } +button:nth-child(4n) { background: silver; } +.sz > button { + width:20px; height:10px; +} +.mw > button { + min-width:15px; +} +.mw40 > button { + min-width:40px; +} +.sz.t2 > button { + width:10px; height:20px; +} +a30 { + display: inline-block; + height: 0; + width: 30px; + direction: rtl; +} +a10 { + display: inline-block; + height: 0; + width: 10px; + direction: rtl; +} +.rel > button { + position:absolute; +} + </style> +</head> +<body> + +<div class="grid sz"> +<button> </button><button style="margin-left:-5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:15px"> </button><button style="margin-left:5px"> </button><button style="margin-left:-5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:15px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button></div> + +<div class="grid sz t2"> +<button> </button><button style="margin-left:5px"> </button><button style="margin-left:25px"> </button><button style="margin-left:25px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:25px"> </button><button style="margin-left:25px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button></div> + +<div class="grid2" style="width:215px"> +<button style="width:10px"> </button><button style="width:30px"> </button><a10><button style="background:tan"> </button></a10><a30><button style="background:silver"> </button></a30><button style="width:10px"> </button><button style="width:30px"> </button><a10><button> </button></a10><a30><button style="background:silver;"> </button></a30></div> + +<div class="grid"> +<button> </button><button> </button><br><button style="background:tan"> </button><button style="background:silver"> </button></div> + +<div class="grid rel" style="width:100px; height:100px; position:relative"> +<button style="top:0;width:50px;height:50px"> </button><button style="top:0;right:0;height:50px"> </button><button style="bottom:0;width:50px;"> </button><button style="bottom:0;right:0"> </button></div> + +<div class="grid rel" style="height:40px; position:relative"> +<button style="left:0;top:0;height:20px"> </button><button style="top:0;right:0;height:20px"> </button><button style="left:0;bottom:0;"> </button><button style="bottom:0;right:0"> </button><button style="position:static;visibility:hidden"> </button><button style="position:static;visibility:hidden"> </button> +</div> + +<div class="grid sz t2 mw"> +<button> </button><button> </button><button style="margin-left:15px"> </button><button style="margin-left:20px"> </button><button style="margin-left:5px"> </button><button> </button><button style="margin-left:15px"> </button><button style="margin-left:20px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:5px"> </button></div> + +<div class="grid mw40" style="width:215px"> +<button> </button><button style="margin-left:-25px"> </button><button style="margin-left:-35px"> </button><button style="margin-left:-5px"> </button><button style="margin-left:5px"> </button><button style="margin-left:-25px"> </button><button style="margin-left:-35px"> </button><button style="margin-left:-5px"> </button></div> + +<div class="grid rel" style="width:100px; height:100px; position:relative"> +<button style="top:0;width:40px;height:40px"> </button><button style="top:0;right:0;height:40px"> </button><button style="bottom:0;width:40px;"> </button><button style="bottom:0;right:0"> </button></div> + +<div class="grid rel" style="width:100px; height:100px; position:relative"> +<button style="top:0;width:40px;height:40px"> </button><button style="top:0;right:0;height:40px"> </button><button style="bottom:0;width:40px;"> </button><button style="bottom:0;right:0"> </button></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-button-001.html b/layout/reftests/css-grid/grid-item-button-001.html new file mode 100644 index 0000000000..4bc65264ea --- /dev/null +++ b/layout/reftests/css-grid/grid-item-button-001.html @@ -0,0 +1,161 @@ +<!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: stretching/clamping button item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1314206"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch"> + <link rel="match" href="grid-item-button-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } +* { font:16px/1 monospace; } + +.grid { + display: grid; + float: left; + grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto; + grid-gap: 5px; + margin-bottom:20px; + margin-right:20px; + border:1px solid; +} +button { + border: 1px solid; + padding: 0; + margin: 0; +} +button:nth-child(1n) { background: blue; } +button:nth-child(2n) { background: grey; } +button:nth-child(3n) { background: tan; } +button:nth-child(4n) { background: silver; } +.sz > button { + width:20px; height:10px; +} +.mw > button { + min-width:15px; +} +.mw40 > button { + min-width:40px; +} +.max40 > button { + max-width:40px; + max-height:40px; +} +.sz.t2 > button { + width:10px; height:20px; +} + +.jend { justify-self: end; } +.aend { align-self: end; } +.end { justify-self: end; align-self: end; } + </style> +</head> +<body> + +<div class="grid sz"> +<button> </button> +<button> </button> +<button class="jend"> </button> +<button class="jend"> </button> +<button class="aend"> </button> +<button class="aend"> </button> +<button class="end"> </button> +<button class="end"> </button> +<button> </button> +<button class="jend"> </button> +<button class="aend"> </button> +<button class="end"> </button> +</div> + +<div class="grid sz t2"> +<button> </button> +<button> </button> +<button class="jend"> </button> +<button class="jend"> </button> +<button class="aend"> </button> +<button class="aend"> </button> +<button class="end"> </button> +<button class="end"> </button> +<button> </button> +<button class="jend"> </button> +<button class="aend"> </button> +<button class="end"> </button> +</div> + +<div class="grid"> +<button> </button> +<button> </button> +<button class="jend"> </button> +<button class="jend"> </button> +<button class="aend"> </button> +<button class="aend"> </button> +<button class="end"> </button> +<button class="end"> </button> +</div> + +<div class="grid" style="grid: auto/auto auto; grid-gap: 0;"> +<button> </button> +<button class="jend"> </button> +<button class="aend"> </button> +<button class="end"> </button> +</div> + +<div class="grid" style="grid: 50px 50px/50px 50px; grid-gap: 0;"> +<button> </button> +<button class="jend"> </button> +<button class="aend"> </button> +<button class="end"> </button> +</div> + +<div class="grid" style="grid: minmax(auto,20px) 20px/auto auto; grid-gap: 0;"> +<button> </button> +<button class="jend"> </button> +<button class="aend"> </button> +<button class="end"> </button> +</div> + +<div class="grid sz t2 mw"> +<button> </button> +<button> </button> +<button class="jend"> </button> +<button class="jend"> </button> +<button class="aend"> </button> +<button class="aend"> </button> +<button class="end"> </button> +<button class="end"> </button> +<button> </button> +<button class="jend"> </button> +<button class="aend"> </button> +<button class="end"> </button> +</div> + +<div class="grid mw40"> +<button> </button> +<button> </button> +<button class="jend"> </button> +<button class="jend"> </button> +<button class="aend"> </button> +<button class="aend"> </button> +<button class="end"> </button> +<button class="end"> </button> +</div> + +<div class="grid max40" style="grid:50px 50px/50px 50px; grid-gap: 0;"> +<button> </button> +<button class="jend"> </button> +<button class="aend"> </button> +<button class="end"> </button> +</div> + +<div class="grid max40" style="grid:50px 50px/50px 50px; place-items:stretch; grid-gap: 0;"> +<button> </button> +<button class="jend"> </button> +<button class="aend"> </button> +<button class="end"> </button> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-canvas-001-ref.html b/layout/reftests/css-grid/grid-item-canvas-001-ref.html new file mode 100644 index 0000000000..9d51582c2b --- /dev/null +++ b/layout/reftests/css-grid/grid-item-canvas-001-ref.html @@ -0,0 +1,57 @@ +<!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: stretching canvas item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.block { + float: left; + border:1px solid; + line-height:0; +} +canvas:nth-child(1n) { background: blue; } +canvas:nth-child(2n) { background: grey; } +canvas:nth-child(3n) { background: tan; } +canvas:nth-child(4n) { background: black; } +.sz > canvas { + width:20px; height:10px; +} +.sz.t2 > canvas { + width:10px; height:20px; +} +canvas { + vertical-align:top; +} + </style> +</head> +<body> + +<div class="block sz"> +<canvas></canvas><canvas style="margin-left:-5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:15px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:-5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:15px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas></div> + +<div class="block sz t2"> +<canvas></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas></div> + +<br clear=all> +<br clear=all> + +<div class="block" style="height:150px; width:215px; white-space:pre"> +<canvas style="width:195px; height:150px; background:black"></canvas><canvas style="width:220px; height:150px; background:tan"></canvas></div> + + +<div class="block" style="height:300px; width:600px"><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas></div> + +<br clear=all> +<br clear=all> + +<div class="block" style="height:60px; width:600px; white-space:pre"> +<span style="display:inline-block; height:60px; margin-top:-90px"><canvas style="background:tan; vertical-align:bottom"></canvas><canvas style="background:black; vertical-align:bottom"></canvas></span></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-canvas-001.html b/layout/reftests/css-grid/grid-item-canvas-001.html new file mode 100644 index 0000000000..3ea39ee482 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-canvas-001.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>CSS Grid Test: stretching canvas item</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch"> + <link rel="match" href="grid-item-canvas-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto; + grid-gap: 5px; + border:1px solid; +} +canvas:nth-child(1n) { background: blue; } +canvas:nth-child(2n) { background: grey; } +canvas:nth-child(3n) { background: tan; } +canvas:nth-child(4n) { background: black; } +.sz > canvas { + width:20px; height:10px; +} +.sz.t2 > canvas { + width:10px; height:20px; +} + +.jend { justify-self: end; } +.aend { align-self: end; } +.end { justify-self: end; align-self: end; } + </style> +</head> +<body> + +<div class="grid sz"> +<canvas></canvas> +<canvas></canvas> +<canvas class="jend"></canvas> +<canvas class="jend"></canvas> +<canvas class="aend"></canvas> +<canvas class="aend"></canvas> +<canvas class="end"></canvas> +<canvas class="end"></canvas> +<canvas></canvas> +<canvas class="jend"></canvas> +<canvas class="aend"></canvas> +<canvas class="end"></canvas> +</div> + +<div class="grid sz t2"> +<canvas></canvas> +<canvas></canvas> +<canvas class="jend"></canvas> +<canvas class="jend"></canvas> +<canvas class="aend"></canvas> +<canvas class="aend"></canvas> +<canvas class="end"></canvas> +<canvas class="end"></canvas> +<canvas></canvas> +<canvas class="jend"></canvas> +<canvas class="aend"></canvas> +<canvas class="end"></canvas> +</div> + +<br clear=all> +<br clear=all> + +<div class="grid"> +<canvas></canvas> +<canvas></canvas> +<canvas class="jend"></canvas> +<canvas class="jend"></canvas> +<canvas class="aend"></canvas> +<canvas class="aend"></canvas> +<canvas class="end"></canvas> +<canvas class="end"></canvas> +</div> + +<div class="grid" style="grid: auto/auto auto; grid-gap: 0;"> +<canvas></canvas> +<canvas class="jend"></canvas> +<canvas class="aend"></canvas> +<canvas class="end"></canvas> +</div> + +<br clear=all> +<br clear=all> + +<div class="grid" style="grid: minmax(auto,30px) 30px/auto auto; grid-gap: 0"> +<canvas></canvas> +<canvas class="jend"></canvas> +<canvas class="aend"></canvas> +<canvas class="end"></canvas> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-dir-001-ref.html b/layout/reftests/css-grid/grid-item-dir-001-ref.html new file mode 100644 index 0000000000..d26bb6c212 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-dir-001-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<style type="text/css"> +.grid { + border: 1px solid gray; + font-size: 0; +} +.grid > div { + display: inline-block; + margin: 2px; +} +#a { background: #006; height: 46px; width: 96px; } +#b { background: #009; height: 46px; width: 146px; } +#c { background: #00c; height: 46px; width: 46px; } +#d { background: #00f; height: 46px; width: 16px; } +#e { background: #060; height: 96px; width: 96px; } +#f { background: #090; height: 96px; width: 146px; } +#g { background: #0c0; height: 96px; width: 46px; } +#h { background: #0f0; height: 96px; width: 16px; } +#i { background: #600; height: 16px; width: 96px; } +#j { background: #900; height: 16px; width: 146px; } +#k { background: #c00; height: 16px; width: 46px; } +#l { background: #f00; height: 16px; width: 16px; } +</style> +</head> + +<body> +<div class=grid> + <div id=a></div> + <div id=b></div> + <div id=c></div> + <div id=d></div><br> + <div id=e></div> + <div id=f></div> + <div id=g></div> + <div id=h></div><br> + <div id=i></div> + <div id=j></div> + <div id=k></div> + <div id=l></div> +</div> +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-dir-001.html b/layout/reftests/css-grid/grid-item-dir-001.html new file mode 100644 index 0000000000..1b6b9d202f --- /dev/null +++ b/layout/reftests/css-grid/grid-item-dir-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<style type="text/css"> +.grid { + display: grid; + border: 1px solid gray; + grid-template-columns: 100px 150px 50px 20px; + grid-template-rows: 50px 100px 20px; +} +.grid > div { + margin: 2px; +} +#a { background: #006; } +#b { background: #009; } +#c { background: #00c; } +#d { background: #00f; } +#e { background: #060; } +#f { background: #090; } +#g { background: #0c0; } +#h { background: #0f0; } +#i { background: #600; } +#j { background: #900; } +#k { background: #c00; } +#l { background: #f00; } +</style> +</head> + +<body> +<div class=grid> + <div id=a></div> + <div id=b></div> + <div id=c></div> + <div id=d></div> + <div id=e dir=rtl></div> + <div id=f dir=rtl></div> + <div id=g dir=rtl></div> + <div id=h dir=rtl></div> + <div id=i></div> + <div id=j dir=rtl></div> + <div id=k></div> + <div id=l dir=rtl></div> +</div> +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-fieldset-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-fieldset-stretch-001-ref.html new file mode 100644 index 0000000000..d3cc594a04 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-fieldset-stretch-001-ref.html @@ -0,0 +1,63 @@ +<!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: stretching fieldset items with auto-margins and/or orthogonal writing-mode</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051"> + <style type="text/css"> +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 60px / 100px; + padding: 10px 4px 3px 6px; +} + +fieldset { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; +} +legend { border: 1px dashed blue;} +x { display:block; width:16px; height:16px; } +t { display:block; width:20px; height:20px; } +i { display:block; background:grey; } + +.m { margin: 7px 3px 1px 5px; } +.p { padding: 3px 1px 5px 7px; } +.hma10 { margin: 7px 3px 1px 0; } +.hmaa { margin: 7px 0 1px 0; } +.vma10 { margin: 0 7px 3px 1px; } +.vmaa { margin: 0 7px 0 1px; } + +.js { justify-self: start; } +.je { justify-self: end; } +.jc { justify-self: center; } +.as { align-self: start; } +.ae { align-self: end; } +.ac { align-self: center; } + +.vr { writing-mode: vertical-rl; } + </style> +</head> +<body> + +<div class="grid"><fieldset class="m" style="width:90px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="hma10 je" style="width:22px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="hmaa jc" style="width:22px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr hma10 je" style="width:37px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr hmaa jc" style="width:37px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr" style="height:58px; width:98px"><legend><x></x></legend><i><t></t></i></fieldset></div> + +<div class="grid"><fieldset class="vma10 ae" style="width:90px; height:37px;"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vmaa ac" style="width:90px; height:37px;"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr vma10 ae" style="width:90px; height:22px;"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr vmaa ac" style="width:90px; height:22px;"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr p vma10 ae" style="width:82px; height:22px;"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr p vmaa ac" style="width:82px; height:22px;"><legend><x></x></legend><i><t></t></i></fieldset></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-fieldset-stretch-001.html b/layout/reftests/css-grid/grid-item-fieldset-stretch-001.html new file mode 100644 index 0000000000..2367e7e735 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-fieldset-stretch-001.html @@ -0,0 +1,58 @@ +<!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: stretching fieldset items with auto-margins and/or orthogonal writing-mode</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> + <link rel="match" href="grid-item-table-stretch-004-ref.html"> + <style type="text/css"> +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 10px 60px 3px / 6px 100px 4px; +} + +fieldset { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; + grid-area:2/2; +} +legend { border: 1px dashed blue;} +x { display:block; width:16px; height:16px; } +t { display:block; width:20px; height:20px; } +i { display:block; background:grey; } + +.m { margin: 7px 3px 1px 5px; } +.p { padding: 3px 1px 5px 7px; } +.hma10 { margin: 7px 3px 1px auto; } +.hmaa { margin: 7px auto 1px auto; } +.vma10 { margin: auto 7px 3px 1px; } +.vmaa { margin: auto 7px auto 1px; } + +.vr { writing-mode: vertical-rl; } + </style> +</head> +<body> + +<div class="grid"><fieldset class="m"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="hma10"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="hmaa"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr hma10"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr hmaa"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr"><legend><x></x></legend><i><t></t></i></fieldset></div> + +<div class="grid"><fieldset class="vma10"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vmaa"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr vma10"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr vmaa"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr p vma10"><legend><x></x></legend><i><t></t></i></fieldset></div> +<div class="grid"><fieldset class="vr p vmaa"><legend><x></x></legend><i><t></t></i></fieldset></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-input-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-input-stretch-001-ref.html new file mode 100644 index 0000000000..e683411617 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-input-stretch-001-ref.html @@ -0,0 +1,81 @@ +<!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: stretching input items with auto-margins and/or orthogonal writing-mode</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1317168"> + <style type="text/css"> +* { color:black; background-color:white; font:10px/1.5 monospace; padding:0; margin:0; } +* { vertical-align: top; } +.grid { + display: inline-grid; + border: 1px solid; + grid: 30px / 200px; + padding: 2px 4px 3px 6px; + align-items: start; + justify-items: start; +} + +input { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; +} + +.js { justify-self: start; } +.je { justify-self: end; } +.jc { justify-self: center; } +.as { align-self: start; } +.ae { align-self: end; } +.ac { align-self: center; } + +.m { margin: 7px 3px 1px 5px; } +.p { padding: 3px 1px 5px 7px; } +.hma10 { margin: 7px 3px 1px 0; } +.hmaa { margin: 7px 0 1px 0; } +.vma10 { margin: 0 7px 3px 1px; } +.vmaa { margin: 0 7px 0 1px; } +.mxw { width: 32px; } +.mxh { height: 16px; } + +.vr { writing-mode: vertical-rl; } + </style> +</head> +<body> + +<div class="grid"><div><input></div></div> +<div class="grid"><input class="m" style="width:190px; height:20px"></div> +<div class="grid"><input class="hma10 je" style="height:20px"></div> +<div class="grid"><input class="hmaa jc" style="height:20px"></div> +<div class="grid"><input class="vr hma10 je" style="height:20px"></div> +<div class="grid"><input class="vr hmaa jc" style="height:20px"></div> +<div class="grid"><input class="vr je" style="width:198px; height:28px"></div> + +<div class="grid"><input class="vma10 ae" style="width:190px"></div> +<div class="grid"><input class="vmaa ac" style="width:190px"></div> +<div class="grid"><input class="vr vma10" style="width:190px;"></div> +<div class="grid"><input class="vr vmaa" style="width:190px;"></div> +<div class="grid"><input class="vr p vma10" style="width:182px;"></div> +<div class="grid"><input class="vr p vmaa" style="width:182px;"></div> + +<div class="grid"><input class="mxw m" style="height:20px"></div> +<div class="grid"><input class="mxw hma10 je" style="height:20px"></div> +<div class="grid"><input class="mxw hmaa jc" style="height:20px"></div> +<div class="grid"><input class="mxw vr hma10 je" style="width:15px; height:20px"></div> +<div class="grid"><input class="mxw vr" style="height:28px"></div> + +<div class="grid"><input class="mxh m je" style="width:190px"></div> +<div class="grid"><input class="mxh hma10 je"></div> +<div class="grid"><input class="mxh hmaa jc"></div> +<div class="grid"><input class="mxh vr hmaa jc" style="width:15px"></div> +<div class="grid"><input class="mxh vr" style="width:198px"></div> + +<div class="grid" style="grid:auto/auto; padding:0;"><input></div> +<div class="grid" style="grid:auto/auto; padding:0;"><input></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-input-stretch-001.html b/layout/reftests/css-grid/grid-item-input-stretch-001.html new file mode 100644 index 0000000000..12c20dd9f3 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-input-stretch-001.html @@ -0,0 +1,75 @@ +<!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: stretching input items with auto-margins and/or orthogonal writing-mode</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1317168"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> + <link rel="match" href="grid-item-input-stretch-001-ref.html"> + <style type="text/css"> +* { color:black; background-color:white; font:10px/1.5 monospace; padding:0; margin:0; } +* { vertical-align: top; } +.grid { + display: inline-grid; + border: 1px solid; + grid: 2px 30px 3px / 6px 200px 4px; + place-items: stretch; +} + +input { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; + grid-area: 2/2; +} + +.m { margin: 7px 3px 1px 5px; } +.p { padding: 3px 1px 5px 7px; } +.hma10 { margin: 7px 3px 1px auto; } +.hmaa { margin: 7px auto 1px auto; } +.vma10 { margin: auto 7px 3px 1px; } +.vmaa { margin: auto 7px auto 1px; } +.mxw { max-width: 32px; } +.mxh { max-height: 16px; } + +.vr { writing-mode: vertical-rl; } + </style> +</head> +<body> + +<div class="grid" style="place-items:start"><input></div> +<div class="grid"><input class="m"></div> +<div class="grid"><input class="hma10"></div> +<div class="grid"><input class="hmaa"></div> +<div class="grid"><input class="vr hma10"></div> +<div class="grid"><input class="vr hmaa"></div> +<div class="grid"><input class="vr"></div> + +<div class="grid"><input class="vma10"></div> +<div class="grid"><input class="vmaa"></div> +<div class="grid"><input class="vr vma10"></div> +<div class="grid"><input class="vr vmaa"></div> +<div class="grid"><input class="vr p vma10"></div> +<div class="grid"><input class="vr p vmaa"></div> + +<div class="grid"><input class="mxw m"></div> +<div class="grid"><input class="mxw hma10"></div> +<div class="grid"><input class="mxw hmaa"></div> +<div class="grid"><input class="mxw vr hma10"></div> +<div class="grid"><input class="mxw vr"></div> + +<div class="grid"><input class="mxh m"></div> +<div class="grid"><input class="mxh hma10"></div> +<div class="grid"><input class="mxh hmaa"></div> +<div class="grid"><input class="mxh vr hmaa"></div> +<div class="grid"><input class="mxh vr"></div> + +<div class="grid" style="grid:minmax(min-content,0) / minmax(min-content,0)"><input style="grid-area:1/1"></div> +<div class="grid" style="grid:minmax(min-content,0) / minmax(min-content,0); align-items:start; justify-items:start"><input style="grid-area:1/1"></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001-ref.html new file mode 100644 index 0000000000..51c605a662 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001-ref.html @@ -0,0 +1,202 @@ +<!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: stretching intrinsic ratio item with 'normal' and/or 'stretch', with no Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315383"> + <style type="text/css"> +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; + grid-template-columns: repeat(7, min-content); + grid-auto-rows: min-content; + grid-column-gap: 10px; + align-items: start; + justify-items: start; +} + +img { min-width:0; min-height:0; } + +x { width:32px; height:2px; background:cyan; } +.w24 > x { width:24px; } +.w8 > x { width:8px; } +.w4 > x { width:4px; } + + </style> +</head> +<body> + +<div class="grid" style="grid:24px 10px 24px / repeat(7, 32px); grid-column-gap: 10px;"> +<div style="height:24px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:24px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w24" style="grid:32px 10px 32px / repeat(7, 24px); grid-column-gap: 10px;"> +<div style="height:32px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:32px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w4" style="grid:8px 10px 8px / repeat(7, 4px); grid-column-gap:32px; "> +<div style="height:8px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:8px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w4" style="grid:32px 10px 32px / repeat(7, 4px); grid-column-gap:32px; "> +<div style="height:32px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:32px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w8" style="grid:repeat(3, 4px) / repeat(7, 8px); grid-gap:8px; "> +<div style="height:4px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:4px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid" style="grid:repeat(3, 8px) / repeat(7, 32px); grid-gap:16px; "> +<div style="height:4px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:4px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<script> +var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D"; +var grids = document.querySelectorAll('.grid'); +var js = [ "normal", "start", "center", "stretch" ]; +var as = [ "normal", "start", "center", "stretch" ]; +var imgSizes = +[ + ['16px', '16px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '24px'], + ['16px', '16px'], + ['16px', '24px'], + ['16px', '16px'], + ['16px', '24px'], + ['32px', '16px'], + ['32px', '16px'], + ['32px', '16px'], + ['32px', '24px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '32px'], + ['16px', '16px'], + ['16px', '32px'], + ['16px', '16px'], + ['16px', '32px'], + ['24px', '16px'], + ['24px', '16px'], + ['24px', '16px'], + ['24px', '32px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '8px'], + ['16px', '16px'], + ['16px', '8px'], + ['16px', '16px'], + ['16px', '8px'], + ['4px', '16px'], + ['4px', '16px'], + ['4px', '16px'], + ['4px', '8px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '32px'], + ['16px', '16px'], + ['16px', '32px'], + ['16px', '16px'], + ['16px', '32px'], + ['4px', '16px'], + ['4px', '16px'], + ['4px', '16px'], + ['4px', '32px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '4px'], + ['16px', '16px'], + ['16px', '4px'], + ['16px', '16px'], + ['16px', '4px'], + ['8px', '16px'], + ['8px', '16px'], + ['8px', '16px'], + ['8px', '4px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '8px'], + ['16px', '16px'], + ['16px', '8px'], + ['16px', '16px'], + ['16px', '8px'], + ['32px', '16px'], + ['32px', '16px'], + ['32px', '16px'], + ['32px', '8px'], +]; +var index = 0; // imgSizes index +for (var i = 0; i < grids.length; ++i) { + for (var j = 0; j < js.length; j++) { + for (var a = 0; a < as.length; a++) { + if (as[a] != "normal" && as[a] != "stretch" && + js[j] != "normal" && js[j] != "stretch") { + continue; + } + var img = document.createElement('img'); + img.style.width = imgSizes[index][0]; + img.style.height = imgSizes[index][1]; + if (as[a] != "normal" && as[a] != "stretch") + img.style.alignSelf = as[a]; + if (js[j] != "normal" && js[j] != "stretch") + img.style.justifySelf = js[j]; + img.src = url; + img.setAttribute('title', as[a] + ' / ' + js[j]); + grids[i].appendChild(img); + index++; + } + } + for (var j = 0; j < js.length; j++) { + for (var a = 0; a < as.length; a++) { + if (as[a] != "normal" && as[a] != "stretch" && + js[j] != "normal" && js[j] != "stretch") { + continue; + } + var x = document.createElement('x'); + grids[i].appendChild(x); + } + } +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001.html new file mode 100644 index 0000000000..712ee06ac2 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-001.html @@ -0,0 +1,134 @@ +<!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: stretching intrinsic ratio item with 'normal' and/or 'stretch', with no Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315383"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch"> + <link rel="match" href="grid-item-intrinsic-ratio-normal-001-ref.html"> + <style type="text/css"> +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; + grid-template-columns: repeat(7, min-content); + grid-auto-rows: min-content; + grid-column-gap: 10px; +} + +img { min-width:0; min-height:0; } + +x { width:32px; height:2px; background:cyan; } +.w24 > x { width:24px; } +.w8 > x { width:8px; } +.w4 > x { width:4px; } + + </style> +</head> +<body> + +<div class="grid"> +<div style="height:24px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:24px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w24"> +<div style="height:32px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:32px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w4" style="grid:8px 10px 8px / repeat(7, 4px); grid-column-gap:32px; "> +<div style="height:8px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:8px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w4" style="grid-template-columns:repeat(7, 4px); grid-column-gap:32px; "> +<div style="height:32px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:32px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w8" style="grid:repeat(3, 4px) / repeat(7, 8px); grid-gap:8px; "> +<div style="height:4px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:4px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid" style="grid-template-rows:repeat(3, 8px); grid-gap:16px; "> +<div style="height:4px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:4px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<script> +var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D"; +var grids = document.querySelectorAll('.grid'); +var js = [ "normal", "start", "center", "stretch" ]; +var as = [ "normal", "start", "center", "stretch" ]; +for (var i = 0; i < grids.length; ++i) { + for (var j = 0; j < js.length; j++) { + for (var a = 0; a < as.length; a++) { + if (as[a] != "normal" && as[a] != "stretch" && + js[j] != "normal" && js[j] != "stretch") { + continue; + } + var img = document.createElement('img'); + img.style.alignSelf = as[a]; + img.style.justifySelf = js[j]; + img.src = url; + img.setAttribute('title', as[a] + ' / ' + js[j]); + grids[i].appendChild(img); + } + } + for (var j = 0; j < js.length; j++) { + for (var a = 0; a < as.length; a++) { + if (as[a] != "normal" && as[a] != "stretch" && + js[j] != "normal" && js[j] != "stretch") { + continue; + } + var x = document.createElement('x'); + grids[i].appendChild(x); + } + } +} +</script> + +<!-- For generating image size results in -ref file +<script> +document.body.clientHeight; +var imgs = document.querySelectorAll('img'); +var s = ' [\n'; +for (var i = 0; i < imgs.length; ++i) { + s += " ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n"; +} +s += ']'; +console.log(s) +</script> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002-ref.html new file mode 100644 index 0000000000..b7e471010e --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002-ref.html @@ -0,0 +1,199 @@ +<!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: stretching intrinsic ratio item with 'normal' and/or 'stretch', with Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315383"> + <style type="text/css"> +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; + grid-column-gap: 10px; + align-items: start; + justify-items: start; +} + +x { width:32px; height:2px; background:cyan; } +.w24 > x { width:24px; } +.w8 > x { width:8px; } +.w4 > x { width:4px; } + + </style> +</head> +<body> + +<div class="grid" style="grid:24px 10px 24px / repeat(7, 32px); grid-column-gap: 10px;"> +<div style="height:24px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:24px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w24" style="grid:32px 10px 32px / repeat(7, 24px); grid-column-gap: 10px;"> +<div style="height:32px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:32px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w4" style="grid:8px 10px 8px / repeat(7, 4px); grid-column-gap:32px; width:220px"> +<div style="height:8px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:8px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w4" style="grid:32px 10px 32px / repeat(7, 4px); grid-column-gap:32px; width:220px"> +<div style="height:32px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:32px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w8" style="grid:4px 10px 4px 2px 2px / repeat(7, 8px); grid-gap:8px; width:104px"> +<div style="height:4px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:4px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid" style="grid:8px 10px 8px 2px 2px / repeat(7, 32px); grid-gap:16px; "> +<div style="height:4px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:4px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<script> +var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D"; +var grids = document.querySelectorAll('.grid'); +var js = [ "normal", "start", "center", "stretch" ]; +var as = [ "normal", "start", "center", "stretch" ]; +var imgSizes = +[ + ['16px', '16px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '24px'], + ['16px', '16px'], + ['16px', '24px'], + ['16px', '16px'], + ['16px', '24px'], + ['32px', '16px'], + ['32px', '16px'], + ['32px', '16px'], + ['32px', '24px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '32px'], + ['16px', '16px'], + ['16px', '32px'], + ['16px', '16px'], + ['16px', '32px'], + ['24px', '16px'], + ['24px', '16px'], + ['24px', '16px'], + ['24px', '32px'], + ['4px', '4px'], + ['4px', '4px'], + ['4px', '4px'], + ['4px', '8px'], + ['8px', '8px'], + ['16px', '8px'], + ['8px', '8px'], + ['16px', '8px'], + ['4px', '8px'], + ['4px', '16px'], + ['4px', '16px'], + ['4px', '8px'], + ['4px', '4px'], + ['4px', '4px'], + ['4px', '4px'], + ['4px', '32px'], + ['16px', '16px'], + ['16px', '32px'], + ['16px', '16px'], + ['16px', '32px'], + ['4px', '16px'], + ['4px', '16px'], + ['4px', '16px'], + ['4px', '32px'], + ['4px', '4px'], + ['8px', '8px'], + ['8px', '8px'], + ['8px', '4px'], + ['4px', '4px'], + ['16px', '4px'], + ['4px', '4px'], + ['16px', '4px'], + ['8px', '4px'], + ['8px', '16px'], + ['8px', '16px'], + ['8px', '4px'], + ['8px', '8px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '8px'], + ['8px', '8px'], + ['16px', '8px'], + ['8px', '8px'], + ['16px', '8px'], + ['32px', '8px'], + ['32px', '16px'], + ['32px', '16px'], + ['32px', '8px'], +]; + +var index = 0; // imgSizes index +for (var i = 0; i < grids.length; ++i) { + for (var j = 0; j < js.length; j++) { + for (var a = 0; a < as.length; a++) { + if (as[a] != "normal" && as[a] != "stretch" && + js[j] != "normal" && js[j] != "stretch") { + continue; + } + var img = document.createElement('img'); + img.style.width = imgSizes[index][0]; + img.style.height = imgSizes[index][1]; + if (as[a] != "normal" && as[a] != "stretch") + img.style.alignSelf = as[a]; + if (js[j] != "normal" && js[j] != "stretch") + img.style.justifySelf = js[j]; + img.src = url; + img.setAttribute('title', as[a] + ' / ' + js[j]); + grids[i].appendChild(img); + index++; + } + } + for (var j = 0; j < js.length; j++) { + for (var a = 0; a < as.length; a++) { + if (as[a] != "normal" && as[a] != "stretch" && + js[j] != "normal" && js[j] != "stretch") { + continue; + } + var x = document.createElement('x'); + grids[i].appendChild(x); + } + } +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002.html new file mode 100644 index 0000000000..8bd5d49860 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-002.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: stretching intrinsic ratio item with 'normal' and/or 'stretch', with Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315383"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch"> + <link rel="match" href="grid-item-intrinsic-ratio-normal-001-ref.html"> + <style type="text/css"> +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; +} + +x { width:32px; height:2px; background:cyan; } +.w24 > x { width:24px; } +.w8 > x { width:8px; } +.w4 > x { width:4px; } + + </style> +</head> +<body> + +<div class="grid" style="grid: minmax(auto, 24px) minmax(auto, 10px) minmax(auto, 24px) / repeat(7, minmax(auto, 32px)); grid-column-gap: 10px;"> +<div style="height:24px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:24px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w24" style="grid: minmax(auto, 32px) minmax(auto, 10px) minmax(auto, 32px) / repeat(7, minmax(auto, 24px)); grid-column-gap: 10px;"> +<div style="height:32px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:32px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w4" style="grid: minmax(auto, 8px) minmax(auto, 10px) minmax(auto, 8px) / repeat(7, minmax(auto, 4px)); grid-column-gap:32px; "> +<div style="height:8px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:8px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w4" style="grid: minmax(auto, 32px) minmax(auto, 10px) minmax(auto, 32px) / repeat(7, minmax(auto, 4px)); grid-column-gap:32px; "> +<div style="height:32px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:32px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid w8" style="grid: repeat(3, minmax(auto, 4px)) / repeat(7, minmax(auto, 8px)); grid-gap:8px; "> +<div style="height:4px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:4px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<div class="grid" style="grid: repeat(3, minmax(auto, 8px)) / repeat(7, minmax(auto, 32px)); grid-gap:16px; "> +<div style="height:4px; width:2px; background:cyan; grid-row:1"></div> +<div style="height:10px; grid-row:2; grid-column: span 7"></div> +<div style="height:4px; grid-row:3"></div> +<x style="grid-row:4"></x> +</div> + +<br> + +<script> +var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D"; +var grids = document.querySelectorAll('.grid'); +var js = [ "normal", "start", "center", "stretch" ]; +var as = [ "normal", "start", "center", "stretch" ]; +for (var i = 0; i < grids.length; ++i) { + for (var j = 0; j < js.length; j++) { + for (var a = 0; a < as.length; a++) { + if (as[a] != "normal" && as[a] != "stretch" && + js[j] != "normal" && js[j] != "stretch") { + continue; + } + var img = document.createElement('img'); + img.style.alignSelf = as[a]; + img.style.justifySelf = js[j]; + img.src = url; + img.setAttribute('title', as[a] + ' / ' + js[j]); + grids[i].appendChild(img); + } + } + for (var j = 0; j < js.length; j++) { + for (var a = 0; a < as.length; a++) { + if (as[a] != "normal" && as[a] != "stretch" && + js[j] != "normal" && js[j] != "stretch") { + continue; + } + var x = document.createElement('x'); + grids[i].appendChild(x); + } + } +} +</script> + +<!-- For generating image size results in -ref file +<script> +document.body.clientHeight; +var imgs = document.querySelectorAll('img'); +var s = ' [\n'; +for (var i = 0; i < imgs.length; ++i) { + s += " ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n"; +} +s += ']'; +console.log(s) +</script> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003-ref.html new file mode 100644 index 0000000000..363a5bc2d5 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003-ref.html @@ -0,0 +1,236 @@ +<!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: stretching intrinsic ratio items with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> + <style type="text/css"> +* { vertical-align: bottom; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 32px / 4px; + margin-right:20px; +} +.r { grid: 4px / 32px; } + +.start {align-self:start; justify-self:start} +.na {align-self:start; justify-self:start} +.sa {align-self:start; justify-self:start} +.an {align-self:start; justify-self:start} +.as {align-self:start; justify-self:start} +.w20 { width: 20px; min-width: 0px; } +.w16 { width: 16px; } +.w10 { width: 10px; } +.w4 { width: 4px; } +.mw20 { min-width: 20px } +.mw0 { min-width: 0px } + +.h20 { height: 20px; min-height: 0px; } +.mh20 { min-height: 20px } +.mh0 { min-height: 0px } + + </style> +</head> +<body> + +<div class="grid r"><img></div> +<div class="grid r"><img class="start"></div> +<div class="grid r"><img class="sa"></div> +<div class="grid r"><img class="sa mxw10"></div> +<div class="grid r"><img class="na"></div> +<div class="grid r"><img class="na mxw2"></div> + +<pre><!--min-height:20px--></pre> +<div class="grid r mh20"><img class="mh20"></div> +<div class="grid r mh20"><img class="mh20 mxw10"></div> +<div class="grid r mh20"><img class="start mh20"></div> +<div class="grid r mh20"><img class="start mh20 mxw10"></div> +<div class="grid r mh20"><img class="sa mh20"></div> +<div class="grid r mh20"><img class="sa mh20 mxw10"></div> +<div class="grid r mh20"><img class="na mh20"></div> +<div class="grid r mh20"><img class="na mh20 mxw10"></div> + +<pre><!--min-height:0--></pre> +<div class="grid r"><img class="mh0"></div> +<div class="grid r"><img class="mh0 mxw10"></div> +<div class="grid r"><img class="start mh0"></div> +<div class="grid r"><img class="start mh0 mxw10"></div> +<div class="grid r"><img class="sa mh0"></div> +<div class="grid r"><img class="sa mh0 mxw10"></div> +<div class="grid r"><img class="na mh0"></div> +<div class="grid r"><img class="na mh0 mxw2"></div> + +<pre><!----></pre> + +<div class="grid w4"><img></div> +<div class="grid w4"><img class="mxw2"></div> +<div class="grid w4"><img class="start"></div> +<div class="grid w4"><img class="start mxw2"></div> +<div class="grid w4"><img class="sa"></div> +<div class="grid w4"><img class="sa mxw2"></div> +<div class="grid w4"><img class="na"></div> +<div class="grid w4"><img class="na mxw2"></div> + +<pre><!--min-width:20px--></pre> +<div class="grid mw20"><img class="mw20"></div> +<div class="grid mw20"><img class="mw20 mxh10"></div> +<div class="grid mw20"><img class="start mw20"></div> +<div class="grid mw20"><img class="start mw20 mxh10"></div> +<div class="grid mw20"><img class="sa mw20"></div> +<div class="grid mw20"><img class="sa mw20 mxh10"></div> +<div class="grid mw20"><img class="na mw20"></div> +<div class="grid mw20"><img class="na mw20 mxh10"></div> + +<pre><!--min-width:0--></pre> +<div class="grid w4"><img class="mw0"></div> +<div class="grid w4"><img class="mw0 mxh10"></div> +<div class="grid w4"><img class="start mw0"></div> +<div class="grid w4"><img class="start mw0 mxh10"></div> +<div class="grid w4"><img class="sa mw0"></div> +<div class="grid w4"><img class="sa mw0 mxh10"></div> +<div class="grid w4"><img class="na mw0"></div> +<div class="grid w4"><img class="na mw0 mxh10"></div> + +<pre><!--width:20px--></pre> + +<div class="grid r"><img class="w20"></div> +<div class="grid r"><img class="w20 mxh10"></div> +<div class="grid r"><img class="start w20"></div> +<div class="grid r"><img class="start w20 mxh10"></div> +<div class="grid r"><img class="sa w20"></div> +<div class="grid r"><img class="sa w20 mxh2"></div> +<div class="grid r"><img class="na w20"></div> +<div class="grid r"><img class="na w20 mxh2"></div> + +<pre><!--width:20px--></pre> + +<div class="grid mw20"><img class="start w20"></div> +<div class="grid mw20"><img class="start w20 mxh10"></div> +<div class="grid mw20"><img class="start w20"></div> +<div class="grid mw20"><img class="start w20 mxh10"></div> +<div class="grid mw20"><img class="sa w20"></div> +<div class="grid mw20"><img class="sa w20 mxh10"></div> +<div class="grid mw20"><img class="na w20"></div> +<div class="grid mw20"><img class="na w20 mxh10"></div> + +<pre><!--height:20px--></pre> + +<div class="grid r mh20"><img class="h20"></div> +<div class="grid r mh20"><img class="h20 mxw10"></div> +<div class="grid r mh20"><img class="start h20"></div> +<div class="grid r mh20"><img class="start h20 mxw10"></div> +<div class="grid r mh20"><img class="as h20"></div> +<div class="grid r mh20"><img class="as h20 mxw10"></div> +<div class="grid r mh20"><img class="an h20"></div> +<div class="grid r mh20"><img class="an h20 mxw10"></div> + +<pre><!--height:20px--></pre> + +<div class="grid w4"><img class="h20"></div> +<div class="grid w4"><img class="h20 mxw2"></div> +<div class="grid w4"><img class="start h20"></div> +<div class="grid w4"><img class="start h20 mxw10"></div> +<div class="grid w4"><img class="as h20"></div> +<div class="grid w4"><img class="as h20 mxw2"></div> +<div class="grid w4"><img class="an h20"></div> +<div class="grid w4"><img class="an h20 mxw10"></div> + +<script> +var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D"; +var imgs = document.querySelectorAll('img'); +var imgSizes = +[ + ['4px', '4px'], + ['16px', '16px'], + ['16px', '4px'], + ['10px', '4px'], + ['4px', '4px'], + ['2px', '2px'], + ['20px', '20px'], + ['10px', '20px'], + ['20px', '20px'], + ['10px', '20px'], + ['16px', '20px'], + ['10px', '20px'], + ['20px', '20px'], + ['10px', '20px'], + ['16px', '16px'], + ['10px', '10px'], + ['16px', '16px'], + ['10px', '10px'], + ['16px', '4px'], + ['10px', '4px'], + ['16px', '16px'], + ['2px', '2px'], + ['4px', '4px'], + ['2px', '2px'], + ['16px', '16px'], + ['2px', '2px'], + ['16px', '32px'], + ['2px', '32px'], + ['16px', '16px'], + ['2px', '2px'], + ['20px', '20px'], + ['20px', '10px'], + ['20px', '20px'], + ['20px', '10px'], + ['20px', '32px'], + ['20px', '10px'], + ['20px', '20px'], + ['20px', '10px'], + ['16px', '16px'], + ['10px', '10px'], + ['16px', '16px'], + ['10px', '10px'], + ['16px', '32px'], + ['16px', '10px'], + ['16px', '16px'], + ['10px', '10px'], + ['20px', '20px'], + ['20px', '10px'], + ['20px', '20px'], + ['20px', '10px'], + ['20px', '4px'], + ['20px', '2px'], + ['20px', '20px'], + ['20px', '2px'], + ['20px', '20px'], + ['20px', '10px'], + ['20px', '20px'], + ['20px', '10px'], + ['20px', '32px'], + ['20px', '10px'], + ['20px', '20px'], + ['20px', '10px'], + ['20px', '20px'], + ['10px', '20px'], + ['20px', '20px'], + ['10px', '20px'], + ['32px', '20px'], + ['10px', '20px'], + ['20px', '20px'], + ['10px', '20px'], + ['20px', '20px'], + ['2px', '20px'], + ['20px', '20px'], + ['10px', '20px'], + ['4px', '20px'], + ['2px', '20px'], + ['20px', '20px'], + ['10px', '20px'], +]; +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; + img.style.width = imgSizes[i][0]; + img.style.height = imgSizes[i][1]; +} + +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003.html new file mode 100644 index 0000000000..1b500781d8 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-003.html @@ -0,0 +1,174 @@ +<!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: stretching intrinsic size items with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> + <link rel="match" href="grid-item-intrinsic-ratio-normal-003-ref.html"> + <style type="text/css"> +* { vertical-align: bottom; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: minmax(auto, 32px) / minmax(auto, 4px); + margin-right:20px; +} +.r { grid: minmax(auto, 4px) / minmax(auto, 32px); } + +button { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; +} + +.start {align-self:start; justify-self:start} +.na {align-self:normal; justify-self:start} +.sa {align-self:stretch; justify-self:start} +.an {align-self:start; justify-self:normal} +.as {align-self:start; justify-self:stretch} +.w20 { width: 20px } +.mw20 { min-width: 20px } +.mxw10 { max-width: 10px } +.mxw2 { max-width: 2px } +.mw0 { min-width: 0px } + +.h20 { height: 20px } +.mh20 { min-height: 20px } +.mxh10 { max-height: 10px } +.mxh2 { max-height: 2px } +.mh0 { min-height: 0px } + + </style> +</head> +<body> + +<div class="grid r"><img></div> +<div class="grid r"><img class="start"></div> +<div class="grid r"><img class="sa"></div> +<div class="grid r"><img class="sa mxw10"></div> +<div class="grid r"><img class="na"></div> +<div class="grid r"><img class="na mxw2"></div> + +<pre><!--min-height:20px--></pre> +<div class="grid r"><img class="mh20"></div> +<div class="grid r"><img class="mh20 mxw10"></div> +<div class="grid r"><img class="start mh20"></div> +<div class="grid r"><img class="start mh20 mxw10"></div> +<div class="grid r"><img class="sa mh20"></div> +<div class="grid r"><img class="sa mh20 mxw10"></div> +<div class="grid r"><img class="na mh20"></div> +<div class="grid r"><img class="na mh20 mxw10"></div> + +<pre><!--min-height:0--></pre> +<div class="grid r"><img class="mh0"></div> +<div class="grid r"><img class="mh0 mxw10"></div> +<div class="grid r"><img class="start mh0"></div> +<div class="grid r"><img class="start mh0 mxw10"></div> +<div class="grid r"><img class="sa mh0"></div> +<div class="grid r"><img class="sa mh0 mxw10"></div> +<div class="grid r"><img class="na mh0"></div> +<div class="grid r"><img class="na mh0 mxw2"></div> + +<pre><!----></pre> + +<div class="grid"><img></div> +<div class="grid"><img class="mxw2"></div> +<div class="grid"><img class="start"></div> +<div class="grid"><img class="start mxw2"></div> +<div class="grid"><img class="sa"></div> +<div class="grid"><img class="sa mxw2"></div> +<div class="grid"><img class="na"></div> +<div class="grid"><img class="na mxw2"></div> + +<pre><!--min-width:20px--></pre> +<div class="grid"><img class="mw20"></div> +<div class="grid"><img class="mw20 mxh10"></div> +<div class="grid"><img class="start mw20"></div> +<div class="grid"><img class="start mw20 mxh10"></div> +<div class="grid"><img class="sa mw20"></div> +<div class="grid"><img class="sa mw20 mxh10"></div> +<div class="grid"><img class="na mw20"></div> +<div class="grid"><img class="na mw20 mxh10"></div> + +<pre><!--min-width:0--></pre> +<div class="grid"><img class="mw0"></div> +<div class="grid"><img class="mw0 mxh10"></div> +<div class="grid"><img class="start mw0"></div> +<div class="grid"><img class="start mw0 mxh10"></div> +<div class="grid"><img class="sa mw0"></div> +<div class="grid"><img class="sa mw0 mxh10"></div> +<div class="grid"><img class="na mw0"></div> +<div class="grid"><img class="na mw0 mxh10"></div> + +<pre><!--width:20px--></pre> + +<div class="grid r"><img class="w20"></div> +<div class="grid r"><img class="w20 mxh10"></div> +<div class="grid r"><img class="start w20"></div> +<div class="grid r"><img class="start w20 mxh10"></div> +<div class="grid r"><img class="sa w20"></div> +<div class="grid r"><img class="sa w20 mxh2"></div> +<div class="grid r"><img class="na w20"></div> +<div class="grid r"><img class="na w20 mxh2"></div> + +<pre><!--width:20px--></pre> + +<div class="grid"><img class="start w20"></div> +<div class="grid"><img class="start w20 mxh10"></div> +<div class="grid"><img class="start w20"></div> +<div class="grid"><img class="start w20 mxh10"></div> +<div class="grid"><img class="sa w20"></div> +<div class="grid"><img class="sa w20 mxh10"></div> +<div class="grid"><img class="na w20"></div> +<div class="grid"><img class="na w20 mxh10"></div> + +<pre><!--height:20px--></pre> + +<div class="grid r"><img class="h20"></div> +<div class="grid r"><img class="h20 mxw10"></div> +<div class="grid r"><img class="start h20"></div> +<div class="grid r"><img class="start h20 mxw10"></div> +<div class="grid r"><img class="as h20"></div> +<div class="grid r"><img class="as h20 mxw10"></div> +<div class="grid r"><img class="an h20"></div> +<div class="grid r"><img class="an h20 mxw10"></div> + +<pre><!--height:20px--></pre> + +<div class="grid"><img class="h20"></div> +<div class="grid"><img class="h20 mxw2"></div> +<div class="grid"><img class="start h20"></div> +<div class="grid"><img class="start h20 mxw10"></div> +<div class="grid"><img class="as h20"></div> +<div class="grid"><img class="as h20 mxw2"></div> +<div class="grid"><img class="an h20"></div> +<div class="grid"><img class="an h20 mxw10"></div> + +<script> +var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D"; +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + imgs[i].src = url; +} +</script> + +<!-- For generating button size results in -ref file +<script> +document.body.clientHeight; +var imgs = document.querySelectorAll('img'); +var s = ' [\n'; +for (var i = 0; i < imgs.length; ++i) { + s += " ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n"; +} +s += ']'; +console.log(s) +</script> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004-ref.html new file mode 100644 index 0000000000..eea7f756cb --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004-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: ratio-preserving 'normal' stretch of image with zero ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto; + grid-gap: 5px; + border:1px solid; +} +img:nth-child(1n) { background: blue; } +img:nth-child(2n) { background: grey; } +img:nth-child(3n) { background: tan; } +img:nth-child(4n) { background: black; } +img { + height: 20px; + border: 1px solid; +} +.jend { justify-self: end; } +.aend { align-self: end; } +.end { justify-self: end; align-self: end; } + </style> +</head> +<body> + +<div class="grid sz"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid sz t2"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +</div> + +<div class="grid" style="grid:auto/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>' +var imgSizes = +[ + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], +]; +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.style.width = imgSizes[i][0]; + img.style.height = imgSizes[i][1]; + img.src = url; +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004.html new file mode 100644 index 0000000000..649ed1ef9c --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-004.html @@ -0,0 +1,115 @@ +<!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: ratio-preserving 'normal' stretch of image with zero ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> + <link rel="match" href="grid-item-intrinsic-ratio-normal-004-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto; + grid-gap: 5px; + border:1px solid; +} +img:nth-child(1n) { background: blue; } +img:nth-child(2n) { background: grey; } +img:nth-child(3n) { background: tan; } +img:nth-child(4n) { background: black; } +img { + height: 20px; + border: 1px solid; +} +.jend { justify-self: end; } +.aend { align-self: end; } +.end { justify-self: end; align-self: end; } + </style> +</head> +<body> + +<div class="grid sz"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid sz t2"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +</div> + +<div class="grid" style="grid:auto/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> + +<!-- For generating image size results in -ref file (try reloading a few times if you see all zeros) +<script> +document.body.clientHeight; +var imgs = document.querySelectorAll('img'); +var s = ' [\n'; +for (var i = 0; i < imgs.length; ++i) { + s += " ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n"; +} +s += ']'; +console.log(s) +</script> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005-ref.html new file mode 100644 index 0000000000..d7a9b28044 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005-ref.html @@ -0,0 +1,146 @@ +<!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: ratio-preserving 'normal' stretch of image with zero ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + grid: auto-flow 10px / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto; + grid-gap: 5px; + border:1px solid; +} +img:nth-child(1n) { background: blue; } +img:nth-child(2n) { background: grey; } +img:nth-child(3n) { background: tan; } +img:nth-child(4n) { background: black; } +img { + width: 20px; + border: 1px solid; +} +.jend { justify-self: end; } +.aend { align-self: end; } +.end { justify-self: end; align-self: end; } + </style> +</head> +<body> + +<div class="grid sz"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid sz t2"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +</div> + +<div class="grid" style="grid:auto/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="16px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>' +var imgSizes = +[ + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], +]; +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.style.width = imgSizes[i][0]; + img.style.height = imgSizes[i][1]; + img.src = url; +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005.html new file mode 100644 index 0000000000..9344f97d1f --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-005.html @@ -0,0 +1,115 @@ +<!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: ratio-preserving 'normal' stretch of image with zero ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> + <link rel="match" href="grid-item-intrinsic-ratio-normal-005-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + grid: auto-flow 10px / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto; + grid-gap: 5px; + border:1px solid; +} +img:nth-child(1n) { background: blue; } +img:nth-child(2n) { background: grey; } +img:nth-child(3n) { background: tan; } +img:nth-child(4n) { background: black; } +img { + width: 20px; + border: 1px solid; +} +.jend { justify-self: end; } +.aend { align-self: end; } +.end { justify-self: end; align-self: end; } + </style> +</head> +<body> + +<div class="grid sz"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid sz t2"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +</div> + +<div class="grid" style="grid:auto/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="16px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> + +<!-- For generating image size results in -ref file (try reloading a few times if you see all zeros) +<script> +document.body.clientHeight; +var imgs = document.querySelectorAll('img'); +var s = ' [\n'; +for (var i = 0; i < imgs.length; ++i) { + s += " ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n"; +} +s += ']'; +console.log(s) +</script> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001-ref.html new file mode 100644 index 0000000000..0b886d55c4 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001-ref.html @@ -0,0 +1,143 @@ +<!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: stretching intrinsic ratio item with min-size:0</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; + align-items: start; + justify-items: start; +} +.vertical-tests div { vertical-align:bottom } + </style> +</head> +<body> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="height:96px; width:20px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="height:96px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="width:20px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="width:100px; height:8px"> +</div> + +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:unsafe start; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:safe start; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:unsafe end; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:safe end; height:24px; width:10px"> +</div> + +<div class="grid" style="grid: 4px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe start; width:24px; height:4px"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 40px"> +<img src="support/lime-24x2.png" style="justify-self:safe start; width:24px; height:4px"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 40px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe end; width:24px; height:4px; margin-right:-14px"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 80px"> +<img src="support/lime-24x2.png" style="justify-self:safe end; width:24px; height:4px; margin-left:-38px"> +</div> + +<br> + +<div class="vertical-tests"> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="height:96px; width:20px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="height:96px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="width:20px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="width:100px; height:8px"> +</div> + +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:unsafe start; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:safe start; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:unsafe end; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:safe end; height:24px; width:10px"> +</div> + +<div class="grid" style="grid: 4px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe start; width:24px; height:4px"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 40px"> +<img src="support/lime-24x2.png" style="justify-self:safe start; width:24px; height:4px"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 40px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe start; width:24px; height:4px; margin-right:-14px"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 80px"> +<img src="support/lime-24x2.png" style="justify-self:safe end; width:24px; height:4px; margin-left:-38px"> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001.html new file mode 100644 index 0000000000..f5a4c18b7c --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-001.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: stretching intrinsic ratio item with min-size:0</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch"> + <link rel="match" href="grid-item-intrinsic-ratio-stretch-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; + place-items: stretch; +} +.grid > * { + min-width: 0; + min-height: 0; +} +.vertical-tests img { writing-mode: vertical-rl; } +.vertical-tests div { vertical-align:bottom } + </style> +</head> +<body> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png"> +</div> + +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:start"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:safe start;"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:unsafe start;"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:safe end;"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:unsafe end;"> +</div> + +<div class="grid" style="grid: 4px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:safe start"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 40px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe start"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 40px"> +<img src="support/lime-24x2.png" style="justify-self:safe end"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 80px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe end"> +</div> + +<br> + +<div class="vertical-tests"> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png"> +</div> + +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:start"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:safe start;"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:unsafe start;"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:safe end;"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:unsafe end;"> +</div> + +<div class="grid" style="grid: 4px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:safe start"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 40px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe start"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 40px"> +<img src="support/lime-24x2.png" style="justify-self:safe end"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 80px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe end"> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html new file mode 100644 index 0000000000..ff997c4172 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002-ref.html @@ -0,0 +1,147 @@ +<!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: stretching intrinsic ratio item with definite min/max-size</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; + place-items: start start; +} +.vertical-tests div { vertical-align:bottom } + </style> +</head> +<body> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="width:4px; height:96px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="height:12px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="height:8px; width:12px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="height:6px; width:100px"> +</div> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:20px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="width:20px; height:96px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="width:6px; height:96px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="width:20px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="width:100px; height:10px"> +</div> + +<div class="grid" style="grid: 48px / 6px"> +<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))"> +</div> +<div class="grid" style="grid: 4px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px"> +</div> + +<br> + +<div class="vertical-tests"> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="width:4px; height:96px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="height:12px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="height:8px; width:12px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="height:6px; width:100px"> +</div> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:20px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="width:20px; height:96px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="width:6px; height:96px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="width:20px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="width:100px; height:10px"> +</div> + +<div class="grid" style="grid: 48px / 6px"> +<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))"> +</div> +<div class="grid" style="grid: 4px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px"> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002.html new file mode 100644 index 0000000000..ecaafaf675 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002.html @@ -0,0 +1,154 @@ +<!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: stretching intrinsic ratio item with definite min/max-size</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch"> + <link rel="match" href="grid-item-intrinsic-ratio-stretch-002-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; + place-items: stretch; +} +.grid > * { + min-width: 0; + min-height: 0; +} +.vertical-tests img { writing-mode: vertical-rl; } +.vertical-tests div { vertical-align:bottom } + </style> +</head> +<body> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="max-width:4px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="max-height:12px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="max-width:12px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="max-height:6px"> +</div> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="align-self:start; max-height:48px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; max-height:12px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="min-width:10px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="min-width:6px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="min-height:2px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="min-height:10px"> +</div> + +<div class="grid" style="grid: 48px / 6px"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:80px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:72px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px"> +</div> +<div class="grid" style="grid: 4px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:72px"> +</div> + +<br> + +<div class="vertical-tests"> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="max-width:4px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="max-height:12px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="max-width:12px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="max-height:6px"> +</div> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="align-self:start; max-height:48px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; max-height:12px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="min-width:10px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="min-width:6px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="min-height:2px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="min-height:10px"> +</div> + +<div class="grid" style="grid: 48px / 6px"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:80px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:72px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px"> +</div> +<div class="grid" style="grid: 4px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:72px"> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003-ref.html new file mode 100644 index 0000000000..a8bfd0897a --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003-ref.html @@ -0,0 +1,148 @@ +<!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: stretching intrinsic ratio item with min/max-size</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; + align-items: start; + justify-items: start; +} +.vertical-tests div { vertical-align:bottom } + </style> +</head> +<body> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="width:4px; height:48px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="width:1px; height:12px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="width:12px; height:1px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="width:72px; height:6px"> +</div> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:48px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; width:1px; height:12px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="width:10px; height:48px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="width:6px; height:36px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="height:2px; width:12px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="height:10px; width:48px"> +</div> + +<div class="grid" style="grid: 48px / 6px"> +<img src="support/lime-2x24.png" style="align-self:start; height:80px; width:4px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; height:50px; width:1px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:3px"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:2px"> +</div> + +<br> + +<div class="vertical-tests"> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="width:4px; height:48px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="width:1px; height:12px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="width:12px; height:1px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="width:72px; height:6px"> +</div> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:48px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; width:1px; height:12px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:4px"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="width:10px; height:48px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="width:6px; height:36px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="height:2px; width:12px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="height:10px; width:48px"> +</div> + +<div class="grid" style="grid: 48px / 6px"> +<img src="support/lime-2x24.png" style="align-self:start; height:80px; width:4px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; height:50px; width:1px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:3px"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:2px"> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003.html new file mode 100644 index 0000000000..7491e15068 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-003.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: stretching intrinsic ratio item with min/max-size</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch"> + <link rel="match" href="grid-item-intrinsic-ratio-stretch-003-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; +} +.vertical-tests img { writing-mode: vertical-rl; } +.vertical-tests div { vertical-align:bottom } + </style> +</head> +<body> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="min-width:4px; max-width:0"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="min-height:12px; max-height:0"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="min-width:12px; max-width:0"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="min-height:6px; max-height:0"> +</div> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:48px; max-height:0"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:12px; max-height:0"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-width:0"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-width:0"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="min-width:10px; max-height:48px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="min-width:6px; max-height:36px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="min-height:2px; max-width:12px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="min-height:10px; max-width:48px"> +</div> + +<div class="grid" style="grid: 48px / 6px"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:80px; max-width:4px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:50px; max-width:1px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px; max-height:3px"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-height:2px"> +</div> + +<br> + +<div class="vertical-tests"> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="min-width:4px; max-width:0"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="min-height:12px; max-height:0"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="min-width:12px; max-width:0"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="min-height:6px; max-height:0"> +</div> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:48px; max-height:0"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:12px; max-height:0"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-width:0"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-width:0"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="min-width:10px; max-height:48px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="min-width:6px; max-height:36px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="min-height:2px; max-width:12px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="min-height:10px; max-width:48px"> +</div> + +<div class="grid" style="grid: 48px / 6px"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:80px; max-width:4px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:50px; max-width:1px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:98px; max-height:3px"> +</div> +<div class="grid" style="grid: 8px / 10px"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:48px; max-height:2px"> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004-ref.html new file mode 100644 index 0000000000..2667fd4620 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004-ref.html @@ -0,0 +1,143 @@ +<!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: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; + align-items: start; + justify-items: start; +} +.vertical-tests div { vertical-align:bottom } + </style> +</head> +<body> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="height:96px; width:20px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="height:96px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 20px; width:20px"> +<img src="support/lime-24x2.png" style="width:20px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="width:100px; height:8px"> +</div> + +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 10px; width:10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:unsafe start; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:safe start; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:unsafe end; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:safe end; height:24px; width:10px"> +</div> + +<div class="grid" style="grid: 4px / 10px; width:10px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe start; width:24px; height:4px"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:10px"> +<img src="support/lime-24x2.png" style="justify-self:safe start; width:24px; height:4px"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:10px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe start; width:24px; height:4px"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 80px; width:10px"> +<img src="support/lime-24x2.png" style="position:relative; left:-14px; width:24px; height:4px"> +</div> + +<br> + +<div class="vertical-tests"> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="height:96px; width:20px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="height:96px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 20px; width:20px"> +<img src="support/lime-24x2.png" style="width:20px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="width:100px; height:8px"> +</div> + +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 10px; width:10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:unsafe start; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:safe start; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:unsafe end; height:24px; width:10px"> +</div> +<div class="grid" style="grid: 96px / 10px"> +<img src="support/lime-2x24.png" style="align-self:safe end; height:24px; width:10px"> +</div> + +<div class="grid" style="grid: 4px / 10px; width:10px"> +<img src="support/lime-24x2.png" style="justify-self:start unsafe; width:24px; height:4px"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:10px"> +<img src="support/lime-24x2.png" style="justify-self:safe start; width:24px; height:4px"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 40px; width:10px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe start; width:24px; height:4px"> +</div> +<div class="grid" style="grid: 4px / 10px; margin-left: 80px; width:10px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe end; width:24px; height:4px"> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004.html new file mode 100644 index 0000000000..c452772afe --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-004.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>CSS Grid Test: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-item-intrinsic-ratio-stretch-004-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; + place-items: stretch stretch; +} +.vertical-tests img { writing-mode: vertical-rl; } +.vertical-tests div { vertical-align:bottom } + </style> +</head> +<body> + +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)"> +<img src="support/lime-2x24.png"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> +<img src="support/lime-2x24.png"> +</div> + +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)"> +<img src="support/lime-24x2.png"> +</div> +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> +<img src="support/lime-24x2.png"> +</div> + +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> +<img src="support/lime-2x24.png" style="align-self:start"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> +<img src="support/lime-2x24.png" style="align-self:start"> +</div> + +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> +<img src="support/lime-24x2.png" style="justify-self:start"> +</div> +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 10px)"> +<img src="support/lime-24x2.png" style="justify-self:start"> +</div> + +<br> + +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> +<img src="support/lime-2x24.png" style="align-self:safe start;"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> +<img src="support/lime-2x24.png" style="align-self:unsafe start;"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> +<img src="support/lime-2x24.png" style="align-self:safe end;"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> +<img src="support/lime-2x24.png" style="align-self:unsafe end;"> +</div> + +<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px)"> +<img src="support/lime-24x2.png" style="justify-self:safe start"> +</div> +<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 40px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe start"> +</div> +<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 40px"> +<img src="support/lime-24x2.png" style="justify-self:safe end"> +</div> +<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 80px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe end"> +</div> + +<br> + +<div class="vertical-tests"> + +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)"> +<img src="support/lime-2x24.png"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> +<img src="support/lime-2x24.png"> +</div> + +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)"> +<img src="support/lime-24x2.png"> +</div> +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> +<img src="support/lime-24x2.png"> +</div> + +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> +<img src="support/lime-2x24.png" style="align-self:start"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> +<img src="support/lime-2x24.png" style="align-self:start"> +</div> + +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> +<img src="support/lime-24x2.png" style="justify-self:start"> +</div> +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 10px)"> +<img src="support/lime-24x2.png" style="justify-self:start"> +</div> + +<br> + +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> +<img src="support/lime-2x24.png" style="align-self:safe start;"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> +<img src="support/lime-2x24.png" style="align-self:unsafe start;"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> +<img src="support/lime-2x24.png" style="align-self:safe end;"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> +<img src="support/lime-2x24.png" style="align-self:unsafe end;"> +</div> + +<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px)"> +<img src="support/lime-24x2.png" style="justify-self:safe start"> +</div> +<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 40px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe start"> +</div> +<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 40px"> +<img src="support/lime-24x2.png" style="justify-self:safe end"> +</div> +<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 80px"> +<img src="support/lime-24x2.png" style="justify-self:unsafe end"> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005-ref.html new file mode 100644 index 0000000000..bc2354dd4e --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005-ref.html @@ -0,0 +1,156 @@ +<!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: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; + align-items: start; + justify-items: start; +} +img { + min-width: 0; + min-height: 0; +} +.vertical-tests div { vertical-align:bottom } + </style> +</head> +<body> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="width:4px; height:96px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="height:12px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="height:8px; width:12px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="height:6px; width:100px"> +</div> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:20px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 10px; width:10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="width:20px; height:96px"> +</div> +<div class="grid" style="grid: 96px / 4px; width:6px"> +<img src="support/lime-2x24.png" style="width:6px; height:96px"> +</div> + +<div class="grid" style="grid: 8px / 20px; width:20px"> +<img src="support/lime-24x2.png" style="width:20px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 100px; width:100px; height:10px"> +<img src="support/lime-24x2.png" style="width:100px; height:10px"> +</div> + +<div class="grid" style="grid: 48px / 6px; width:6px; height:80px"> +<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px"> +</div> +<!-- +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 6px)"> +<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px"> +</div> + +<div class="grid" style="grid: 4px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px"> +</div> +--> +<div class="grid" style="grid: 4px / 10px; width:72px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px"> +</div> + +<br> + +<div class="vertical-tests"> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="width:4px; height:96px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="height:12px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 20px"> +<img src="support/lime-24x2.png" style="height:8px; width:12px"> +</div> +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="height:6px; width:100px"> +</div> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="align-self:start; height:24px; width:20px"> +</div> +<div class="grid" style="grid: 96px / 4px"> +<img src="support/lime-2x24.png" style="align-self:start; height:12px; width:4px"> +</div> + +<div class="grid" style="grid: 8px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 10px; width:10px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:24px; height:8px"> +</div> + +<br> + +<div class="grid" style="grid: 96px / 20px"> +<img src="support/lime-2x24.png" style="width:20px; height:96px"> +</div> +<div class="grid" style="grid: 96px / 4px; width:6px"> +<img src="support/lime-2x24.png" style="width:6px; height:96px"> +</div> + +<div class="grid" style="grid: 8px / 20px; width:20px"> +<img src="support/lime-24x2.png" style="width:20px; height:8px"> +</div> +<div class="grid" style="grid: 8px / 100px; width:100px; height:10px"> +<img src="support/lime-24x2.png" style="width:100px; height:10px"> +</div> + +<div class="grid" style="grid: 48px / 6px; width:6px; height:80px"> +<img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px"> +</div> +<!-- +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 6px)"> +<img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px"> +</div> + +<div class="grid" style="grid: 4px / 100px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px"> +</div> +--> +<div class="grid" style="grid: 4px / 10px; width:72px"> +<img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px"> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005.html new file mode 100644 index 0000000000..3845e217dd --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005.html @@ -0,0 +1,154 @@ +<!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: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-item-intrinsic-ratio-stretch-005-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + border: 1px solid; + margin: 5px; + place-items: stretch; +} +.vertical-tests img { writing-mode: vertical-rl; } +.vertical-tests div { vertical-align:bottom } + </style> +</head> +<body> + +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)"> +<img src="support/lime-2x24.png" style="max-width:4px"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> +<img src="support/lime-2x24.png" style="max-height:12px"> +</div> + +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)"> +<img src="support/lime-24x2.png" style="max-width:12px"> +</div> +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> +<img src="support/lime-24x2.png" style="max-height:6px"> +</div> + +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)"> +<img src="support/lime-2x24.png" style="align-self:start; max-height:48px"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> +<img src="support/lime-2x24.png" style="align-self:start; max-height:12px"> +</div> + +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> +<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px"> +</div> +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 10px)"> +<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px"> +</div> + +<br> + +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)"> +<img src="support/lime-2x24.png" style="min-width:10px"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> +<img src="support/lime-2x24.png" style="min-width:6px"> +</div> + +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)"> +<img src="support/lime-24x2.png" style="min-height:2px"> +</div> +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> +<img src="support/lime-24x2.png" style="min-height:10px"> +</div> + +<div class="grid" style="grid: minmax(auto, 48px) / minmax(auto, 6px)"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:80px"> +</div> +<!-- +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:72px"> +</div> + +<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 100px)"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:72px"> +</div> +--> +<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px)"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:72px"> +</div> + +<br> + +<div class="vertical-tests"> + +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)"> +<img src="support/lime-2x24.png" style="max-width:4px"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> +<img src="support/lime-2x24.png" style="max-height:12px"> +</div> + +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)"> +<img src="support/lime-24x2.png" style="max-width:12px"> +</div> +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> +<img src="support/lime-24x2.png" style="max-height:6px"> +</div> + +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)"> +<img src="support/lime-2x24.png" style="align-self:start; max-height:48px"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> +<img src="support/lime-2x24.png" style="align-self:start; max-height:12px"> +</div> + +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> +<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px"> +</div> +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 10px)"> +<img src="support/lime-24x2.png" style="justify-self:start; max-width:48px"> +</div> + +<br> + +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)"> +<img src="support/lime-2x24.png" style="min-width:10px"> +</div> +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> +<img src="support/lime-2x24.png" style="min-width:6px"> +</div> + +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)"> +<img src="support/lime-24x2.png" style="min-height:2px"> +</div> +<div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> +<img src="support/lime-24x2.png" style="min-height:10px"> +</div> + +<div class="grid" style="grid: minmax(auto, 48px) / minmax(auto, 6px)"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:80px"> +</div> +<!-- +<div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> +<img src="support/lime-2x24.png" style="align-self:start; min-height:72px"> +</div> + +<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 100px)"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:72px"> +</div> +--> +<div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px)"> +<img src="support/lime-24x2.png" style="justify-self:start; min-width:72px"> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006-ref.html new file mode 100644 index 0000000000..ba256368f3 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006-ref.html @@ -0,0 +1,147 @@ +<!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: 'stretch' of image with zero ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px 18px 18px 18px 18px; + grid-gap: 5px; + border:1px solid; + align-items: stretch; + justify-items: stretch; +} +img:nth-child(1n) { background: blue; } +img:nth-child(2n) { background: grey; } +img:nth-child(3n) { background: tan; } +img:nth-child(4n) { background: black; } +img { + height: 20px; + border: 1px solid; +} +.jend { justify-self: end; } +.aend { align-self: end; } +.end { justify-self: end; align-self: end; } + </style> +</head> +<body> + +<div class="grid sz"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid sz t2"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid" style="grid-template-columns: 10px 30px 10px 30px 10px 30px 10px 30px 0px 0px 0px 0px;"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +</div> + +<div class="grid" style="grid:auto/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>' +var imgSizes = +[ + ['8px', '20px'], + ['28px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['8px', '20px'], + ['28px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['8px', '20px'], + ['28px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['8px', '20px'], + ['28px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['8px', '20px'], + ['28px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['8px', '20px'], + ['28px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], + ['16px', '20px'], +]; +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.style.width = imgSizes[i][0]; + img.style.height = imgSizes[i][1]; + img.src = url; +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006.html new file mode 100644 index 0000000000..ad7c65c690 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-006.html @@ -0,0 +1,117 @@ +<!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: 'stretch' of image with zero ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch"> + <link rel="match" href="grid-item-intrinsic-ratio-stretch-006-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + grid: auto-flow auto / minmax(auto, 10px) minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) auto auto auto auto; + grid-gap: 5px; + border:1px solid; + align-items: stretch; + justify-items: stretch; +} +img:nth-child(1n) { background: blue; } +img:nth-child(2n) { background: grey; } +img:nth-child(3n) { background: tan; } +img:nth-child(4n) { background: black; } +img { + height: 20px; + border: 1px solid; +} +.jend { justify-self: end; } +.aend { align-self: end; } +.end { justify-self: end; align-self: end; } + </style> +</head> +<body> + +<div class="grid sz"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid sz t2"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +</div> + +<div class="grid" style="grid:auto/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> + +<!-- For generating image size results in -ref file (try reloading a few times if you see all zeros) +<script> +document.body.clientHeight; +var imgs = document.querySelectorAll('img'); +var s = ' [\n'; +for (var i = 0; i < imgs.length; ++i) { + s += " ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n"; +} +s += ']'; +console.log(s) +</script> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007-ref.html new file mode 100644 index 0000000000..dffb7a30d7 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-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: 'stretch' of image with zero ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + grid: auto-flow 18px / 22px 30px 22px 30px 22px 30px 22px 30px 22px 22px 22px 22px; + grid-gap: 5px; + border:1px solid; +} +img:nth-child(1n) { background: blue; } +img:nth-child(2n) { background: grey; } +img:nth-child(3n) { background: tan; } +img:nth-child(4n) { background: black; } +img { + width: 20px; + border: 1px solid; +} +.jend { justify-self: end; } +.aend { align-self: end; } +.end { justify-self: end; align-self: end; } + </style> +</head> +<body> + +<div class="grid sz"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid sz t2"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid" style="grid-template-columns: 22px 30px 22px 30px 22px 30px 22px 30px 15px"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +</div> + +<div class="grid" style="grid:auto/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="16px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>' +var imgSizes = +[ + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], + ['20px', '16px'], +]; +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.style.width = imgSizes[i][0]; + img.style.height = imgSizes[i][1]; + img.src = url; +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007.html b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007.html new file mode 100644 index 0000000000..fb7793fba0 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-007.html @@ -0,0 +1,115 @@ +<!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: 'stretch' of image with zero ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch"> + <link rel="match" href="grid-item-intrinsic-ratio-stretch-007-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + grid: auto-flow auto / minmax(auto, 10px) minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) auto auto auto auto; + grid-gap: 5px; + border:1px solid; +} +img:nth-child(1n) { background: blue; } +img:nth-child(2n) { background: grey; } +img:nth-child(3n) { background: tan; } +img:nth-child(4n) { background: black; } +img { + width: 20px; + border: 1px solid; +} +.jend { justify-self: end; } +.aend { align-self: end; } +.end { justify-self: end; align-self: end; } + </style> +</head> +<body> + +<div class="grid sz"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid sz t2"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid"> +<img> +<img> +<img class="jend"> +<img class="jend"> +<img class="aend"> +<img class="aend"> +<img class="end"> +<img class="end"> +</div> + +<div class="grid" style="grid:auto/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<div class="grid" style="grid:minmax(auto,30px) 30px/auto auto"> +<img> +<img class="jend"> +<img class="aend"> +<img class="end"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="16px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> + +<!-- For generating image size results in -ref file (try reloading a few times if you see all zeros) +<script> +document.body.clientHeight; +var imgs = document.querySelectorAll('img'); +var s = ' [\n'; +for (var i = 0; i < imgs.length; ++i) { + s += " ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n"; +} +s += ']'; +console.log(s) +</script> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html new file mode 100644 index 0000000000..6e4ecc9471 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html @@ -0,0 +1,237 @@ +<!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: stretching intrinsic size items with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> + <style type="text/css"> +* { vertical-align: bottom; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 32px / 4px; + margin-right:20px; +} +.r { grid: 4px / 32px; } + +button { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; +} + +.start {align-self:start; justify-self:start} +.na {align-self:start; justify-self:start} +.sa {align-self:start; justify-self:start} +.an {align-self:start; justify-self:start} +.as {align-self:start; justify-self:start} +.w20 { width: 20px min-width: 0px; } +.mw20 { min-width: 20px } +.mw0 { min-width: 0px } + +.h20 { height: 20px; min-height: 0px; } +.mh20 { min-height: 20px } +.mh0 { min-height: 0px } + + </style> +</head> +<body> + +<div class="grid r"><button></button></div> +<div class="grid r"><button class="start"></button></div> +<div class="grid r"><button class="sa"></button></div> +<div class="grid r"><button class="sa mxw10"></button></div> +<div class="grid r"><button class="na"></button></div> +<div class="grid r"><button class="na mxw2"></button></div> + +<pre><!--min-height:20px--></pre> +<div class="grid r"><button class="mh20"></button></div> +<div class="grid r"><button class="mh20 mxw10"></button></div> +<div class="grid r"><button class="start mh20"></button></div> +<div class="grid r"><button class="start mh20 mxw10"></button></div> +<div class="grid r"><button class="sa mh20"></button></div> +<div class="grid r"><button class="sa mh20 mxw10"></button></div> +<div class="grid r"><button class="na mh20"></button></div> +<div class="grid r"><button class="na mh20 mxw10"></button></div> + +<pre><!--min-height:0--></pre> +<div class="grid r"><button class="mh0"></button></div> +<div class="grid r"><button class="mh0 mxw10"></button></div> +<div class="grid r"><button class="start mh0"></button></div> +<div class="grid r"><button class="start mh0 mxw10"></button></div> +<div class="grid r"><button class="sa mh0"></button></div> +<div class="grid r"><button class="sa mh0 mxw10"></button></div> +<div class="grid r"><button class="na mh0"></button></div> +<div class="grid r"><button class="na mh0 mxw2"></button></div> + +<pre><!----></pre> + +<div class="grid"><button></button></div> +<div class="grid"><button class="mxw2"></button></div> +<div class="grid"><button class="start"></button></div> +<div class="grid"><button class="start mxw2"></button></div> +<div class="grid"><button class="sa"></button></div> +<div class="grid"><button class="sa mxw2"></button></div> +<div class="grid"><button class="na"></button></div> +<div class="grid"><button class="na mxw2"></button></div> + +<pre><!--min-width:20px--></pre> +<div class="grid"><button class="mw20"></button></div> +<div class="grid"><button class="mw20 mxh10"></button></div> +<div class="grid"><button class="start mw20"></button></div> +<div class="grid"><button class="start mw20 mxh10"></button></div> +<div class="grid"><button class="sa mw20"></button></div> +<div class="grid"><button class="sa mw20 mxh10"></button></div> +<div class="grid"><button class="na mw20"></button></div> +<div class="grid"><button class="na mw20 mxh10"></button></div> + +<pre><!--min-width:0--></pre> +<div class="grid"><button class="mw0"></button></div> +<div class="grid"><button class="mw0 mxh10"></button></div> +<div class="grid"><button class="start mw0"></button></div> +<div class="grid"><button class="start mw0 mxh10"></button></div> +<div class="grid"><button class="sa mw0"></button></div> +<div class="grid"><button class="sa mw0 mxh10"></button></div> +<div class="grid"><button class="na mw0"></button></div> +<div class="grid"><button class="na mw0 mxh10"></button></div> + +<pre><!--width:20px--></pre> + +<div class="grid r"><button class="w20"></button></div> +<div class="grid r"><button class="w20 mxh10"></button></div> +<div class="grid r"><button class="start w20"></button></div> +<div class="grid r"><button class="start w20 mxh10"></button></div> +<div class="grid r"><button class="sa w20"></button></div> +<div class="grid r"><button class="sa w20 mxh2"></button></div> +<div class="grid r"><button class="na w20"></button></div> +<div class="grid r"><button class="na w20 mxh2"></button></div> + +<pre><!--width:20px--></pre> + +<div class="grid"><button class="start w20"></button></div> +<div class="grid"><button class="start w20 mxh10"></button></div> +<div class="grid"><button class="start w20"></button></div> +<div class="grid"><button class="start w20 mxh10"></button></div> +<div class="grid"><button class="sa w20"></button></div> +<div class="grid"><button class="sa w20 mxh10"></button></div> +<div class="grid"><button class="na w20"></button></div> +<div class="grid"><button class="na w20 mxh10"></button></div> + +<pre><!--height:20px--></pre> + +<div class="grid r"><button class="h20"></button></div> +<div class="grid r"><button class="h20 mxw10"></button></div> +<div class="grid r"><button class="start h20"></button></div> +<div class="grid r"><button class="start h20 mxw10"></button></div> +<div class="grid r"><button class="as h20"></button></div> +<div class="grid r"><button class="as h20 mxw10"></button></div> +<div class="grid r"><button class="an h20"></button></div> +<div class="grid r"><button class="an h20 mxw10"></button></div> + +<pre><!--height:20px--></pre> + +<div class="grid"><button class="h20"></button></div> +<div class="grid"><button class="h20 mxw2"></button></div> +<div class="grid"><button class="start h20"></button></div> +<div class="grid"><button class="start h20 mxw10"></button></div> +<div class="grid"><button class="as h20"></button></div> +<div class="grid"><button class="as h20 mxw2"></button></div> +<div class="grid"><button class="an h20"></button></div> +<div class="grid"><button class="an h20 mxw10"></button></div> + +<script> +var buttonSizes = +[ + ['32px', '4px'], + ['2px', '2px'], + ['2px', '4px'], + ['2px', '4px'], + ['2px', '4px'], + ['2px', '4px'], + ['32px', '20px'], + ['10px', '20px'], + ['2px', '20px'], + ['2px', '20px'], + ['2px', '20px'], + ['2px', '20px'], + ['2px', '20px'], + ['2px', '20px'], + ['32px', '4px'], + ['10px', '4px'], + ['2px', '2px'], + ['2px', '2px'], + ['2px', '4px'], + ['2px', '4px'], + ['2px', '4px'], + ['2px', '4px'], + ['4px', '32px'], + ['2px', '32px'], + ['2px', '2px'], + ['2px', '2px'], + ['2px', '32px'], + ['2px', '32px'], + ['2px', '32px'], + ['2px', '32px'], + ['20px', '32px'], + ['20px', '10px'], + ['20px', '2px'], + ['20px', '2px'], + ['20px', '32px'], + ['20px', '10px'], + ['20px', '32px'], + ['20px', '10px'], + ['4px', '32px'], + ['4px', '10px'], + ['2px', '2px'], + ['2px', '2px'], + ['2px', '32px'], + ['2px', '10px'], + ['2px', '32px'], + ['2px', '10px'], + ['20px', '4px'], + ['20px', '4px'], + ['20px', '2px'], + ['20px', '2px'], + ['20px', '4px'], + ['20px', '2px'], + ['20px', '4px'], + ['20px', '2px'], + ['20px', '2px'], + ['20px', '2px'], + ['20px', '2px'], + ['20px', '2px'], + ['20px', '32px'], + ['20px', '10px'], + ['20px', '32px'], + ['20px', '10px'], + ['32px', '20px'], + ['10px', '20px'], + ['2px', '20px'], + ['2px', '20px'], + ['32px', '20px'], + ['10px', '20px'], + ['32px', '20px'], + ['10px', '20px'], + ['4px', '20px'], + ['2px', '20px'], + ['2px', '20px'], + ['2px', '20px'], + ['4px', '20px'], + ['2px', '20px'], + ['4px', '20px'], + ['4px', '20px'], +]; +var buttons = document.querySelectorAll('button'); +for (var i = 0; i < buttons.length; ++i) { + var button = buttons[i]; + button.style.width = buttonSizes[i][0]; + button.style.height = buttonSizes[i][1]; +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001.html b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001.html new file mode 100644 index 0000000000..1ef9fe1fed --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001.html @@ -0,0 +1,168 @@ +<!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: stretching intrinsic size items with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> + <link rel="match" href="grid-item-intrinsic-ratio-normal-003-ref.html"> + <style type="text/css"> +* { vertical-align: bottom; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 32px / 4px; + margin-right:20px; +} +.r { grid: 4px / 32px; } + +button { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; +} + +.start {align-self:start; justify-self:start} +.na {align-self:normal; justify-self:start} +.sa {align-self:stretch; justify-self:start} +.an {align-self:start; justify-self:normal} +.as {align-self:start; justify-self:stretch} +.w20 { width: 20px } +.mw20 { min-width: 20px } +.mxw10 { max-width: 10px } +.mxw2 { max-width: 2px } +.mw0 { min-width: 0px } + +.h20 { height: 20px } +.mh20 { min-height: 20px } +.mxh10 { max-height: 10px } +.mxh2 { max-height: 2px } +.mh0 { min-height: 0px } + + </style> +</head> +<body> + +<div class="grid r"><button></button></div> +<div class="grid r"><button class="start"></button></div> +<div class="grid r"><button class="sa"></button></div> +<div class="grid r"><button class="sa mxw10"></button></div> +<div class="grid r"><button class="na"></button></div> +<div class="grid r"><button class="na mxw2"></button></div> + +<pre><!--min-height:20px--></pre> +<div class="grid r"><button class="mh20"></button></div> +<div class="grid r"><button class="mh20 mxw10"></button></div> +<div class="grid r"><button class="start mh20"></button></div> +<div class="grid r"><button class="start mh20 mxw10"></button></div> +<div class="grid r"><button class="sa mh20"></button></div> +<div class="grid r"><button class="sa mh20 mxw10"></button></div> +<div class="grid r"><button class="na mh20"></button></div> +<div class="grid r"><button class="na mh20 mxw10"></button></div> + +<pre><!--min-height:0--></pre> +<div class="grid r"><button class="mh0"></button></div> +<div class="grid r"><button class="mh0 mxw10"></button></div> +<div class="grid r"><button class="start mh0"></button></div> +<div class="grid r"><button class="start mh0 mxw10"></button></div> +<div class="grid r"><button class="sa mh0"></button></div> +<div class="grid r"><button class="sa mh0 mxw10"></button></div> +<div class="grid r"><button class="na mh0"></button></div> +<div class="grid r"><button class="na mh0 mxw2"></button></div> + +<pre><!----></pre> + +<div class="grid"><button></button></div> +<div class="grid"><button class="mxw2"></button></div> +<div class="grid"><button class="start"></button></div> +<div class="grid"><button class="start mxw2"></button></div> +<div class="grid"><button class="sa"></button></div> +<div class="grid"><button class="sa mxw2"></button></div> +<div class="grid"><button class="na"></button></div> +<div class="grid"><button class="na mxw2"></button></div> + +<pre><!--min-width:20px--></pre> +<div class="grid"><button class="mw20"></button></div> +<div class="grid"><button class="mw20 mxh10"></button></div> +<div class="grid"><button class="start mw20"></button></div> +<div class="grid"><button class="start mw20 mxh10"></button></div> +<div class="grid"><button class="sa mw20"></button></div> +<div class="grid"><button class="sa mw20 mxh10"></button></div> +<div class="grid"><button class="na mw20"></button></div> +<div class="grid"><button class="na mw20 mxh10"></button></div> + +<pre><!--min-width:0--></pre> +<div class="grid"><button class="mw0"></button></div> +<div class="grid"><button class="mw0 mxh10"></button></div> +<div class="grid"><button class="start mw0"></button></div> +<div class="grid"><button class="start mw0 mxh10"></button></div> +<div class="grid"><button class="sa mw0"></button></div> +<div class="grid"><button class="sa mw0 mxh10"></button></div> +<div class="grid"><button class="na mw0"></button></div> +<div class="grid"><button class="na mw0 mxh10"></button></div> + +<pre><!--width:20px--></pre> + +<div class="grid r"><button class="w20"></button></div> +<div class="grid r"><button class="w20 mxh10"></button></div> +<div class="grid r"><button class="start w20"></button></div> +<div class="grid r"><button class="start w20 mxh10"></button></div> +<div class="grid r"><button class="sa w20"></button></div> +<div class="grid r"><button class="sa w20 mxh2"></button></div> +<div class="grid r"><button class="na w20"></button></div> +<div class="grid r"><button class="na w20 mxh2"></button></div> + +<pre><!--width:20px--></pre> + +<div class="grid"><button class="start w20"></button></div> +<div class="grid"><button class="start w20 mxh10"></button></div> +<div class="grid"><button class="start w20"></button></div> +<div class="grid"><button class="start w20 mxh10"></button></div> +<div class="grid"><button class="sa w20"></button></div> +<div class="grid"><button class="sa w20 mxh10"></button></div> +<div class="grid"><button class="na w20"></button></div> +<div class="grid"><button class="na w20 mxh10"></button></div> + +<pre><!--height:20px--></pre> + +<div class="grid r"><button class="h20"></button></div> +<div class="grid r"><button class="h20 mxw10"></button></div> +<div class="grid r"><button class="start h20"></button></div> +<div class="grid r"><button class="start h20 mxw10"></button></div> +<div class="grid r"><button class="as h20"></button></div> +<div class="grid r"><button class="as h20 mxw10"></button></div> +<div class="grid r"><button class="an h20"></button></div> +<div class="grid r"><button class="an h20 mxw10"></button></div> + +<pre><!--height:20px--></pre> + +<div class="grid"><button class="h20"></button></div> +<div class="grid"><button class="h20 mxw2"></button></div> +<div class="grid"><button class="start h20"></button></div> +<div class="grid"><button class="start h20 mxw10"></button></div> +<div class="grid"><button class="as h20"></button></div> +<div class="grid"><button class="as h20 mxw2"></button></div> +<div class="grid"><button class="an h20"></button></div> +<div class="grid"><button class="an h20 mxw10"></button></div> + + +<!-- For generating button size results in -ref file +<script> +document.body.clientHeight; +var buttons = document.querySelectorAll('button'); +var s = ' [\n'; +for (var i = 0; i < buttons.length; ++i) { + var cs = window.getComputedStyle(buttons[i]); + s += " ['"+ cs['width'] + "', '" + cs['height'] + "'],\n"; +} +s += ']'; +console.log(s) +</script> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002-ref.html new file mode 100644 index 0000000000..cf7402b658 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002-ref.html @@ -0,0 +1,240 @@ +<!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: stretching intrinsic size items with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> + <style type="text/css"> +* { vertical-align: top; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 32px / 4px; + margin-right:20px; + align-items: start; + justify-items: start; +} +.r { grid: 4px / 32px; } + +iframe { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; +} + +.w20 { width: 20px; min-width: 0px; } +.w22 { width: 22px; } +.mw20 { min-width: 20px } +.mw0 { min-width: 0px } +.wi { width:32px } +.w4 { width:4px } +.w300 { width:302px } + +.h20 { height: 20px; min-height: 0px; } +.h22 { height: 22px; min-height: 0px; } +.h32 { height: 32px; min-height: 0px; } +.mh20 { min-height: 20px } +.mh0 { min-height: 0px } + + </style> +</head> +<body> + +<div class="grid r wi"><iframe></iframe></div> +<div class="grid r wi"><iframe class="start"></iframe></div> +<div class="grid r wi"><iframe class="sa"></iframe></div> +<div class="grid r"><iframe class="sa mxw10"></iframe></div> +<div class="grid r wi"><iframe class="na"></iframe></div> +<div class="grid r"><iframe class="na mxw2"></iframe></div> + +<pre><!--min-height:20px--></pre> +<div class="grid h22 r wi" style="margin-right:0"><iframe class="h20"></iframe></div> +<div class="grid h22 r"><iframe class="mh20 mxw10"></iframe></div> +<div class="grid h22 r wi"><iframe class="start mh20"></iframe></div> +<div class="grid h22 r"><iframe class="start mh20 mxw10"></iframe></div> +<div class="grid h22 r wi"><iframe class="sa mh20"></iframe></div> +<div class="grid h22 r"><iframe class="sa mh20 mxw10"></iframe></div> +<div class="grid h22 r wi"><iframe class="na mh20"></iframe></div> +<div class="grid h22 r"><iframe class="na mh20 mxw10"></iframe></div> + +<pre><!--min-height:0--></pre> +<div class="grid r wi"><iframe class="mh0"></iframe></div> +<div class="grid r"><iframe class="mh0 mxw10"></iframe></div> +<div class="grid r wi"><iframe class="start mh0"></iframe></div> +<div class="grid r"><iframe class="start mh0 mxw10"></iframe></div> +<div class="grid r wi"><iframe class="sa mh0"></iframe></div> +<div class="grid r"><iframe class="sa mh0 mxw10"></iframe></div> +<div class="grid r wi"><iframe class="na mh0"></iframe></div> +<div class="grid r"><iframe class="na mh0 mxw2"></iframe></div> + +<pre><!----></pre> + +<div class="grid w4"><iframe></iframe></div> +<div class="grid w4"><iframe class="mxw2"></iframe></div> +<div class="grid w4"><iframe class="start"></iframe></div> +<div class="grid w4"><iframe class="start mxw2"></iframe></div> +<div class="grid w4"><iframe class="sa"></iframe></div> +<div class="grid w4"><iframe class="sa mxw2"></iframe></div> +<div class="grid w4"><iframe class="na"></iframe></div> +<div class="grid w4"><iframe class="na mxw2"></iframe></div> + +<pre><!--min-width:20px--></pre> +<div class="grid w22"><iframe class="mw20"></iframe></div> +<div class="grid w22"><iframe class="mw20 mxh10"></iframe></div> +<div class="grid w22"><iframe class="start mw20"></iframe></div> +<div class="grid w22" style="margin-top:5px"><iframe class="start mw20 mxh10"></iframe></div> +<div class="grid w22" style="margin-top:10px"><iframe class="sa mw20"></iframe></div> +<div class="grid w22" style="margin-top:25px"><iframe class="sa mw20 mxh10"></iframe></div> +<div class="grid w22"><iframe class="na mw20"></iframe></div> +<div class="grid w22" style="margin-top:5px"><iframe class="na mw20 mxh10 mxw10"></iframe></div> + +<pre><!--min-width:0--></pre> +<div class="grid w4"><iframe class="mw0"></iframe></div> +<div class="grid w4"><iframe class="mw0 mxh10"></iframe></div> +<div class="grid w4"><iframe class="start mw0"></iframe></div> +<div class="grid w4" style="margin-top:5px"><iframe class="start mw0 mxh10"></iframe></div> +<div class="grid w4" style="margin-top:10px"><iframe class="sa mw0"></iframe></div> +<div class="grid w4" style="margin-top:25px"><iframe class="sa mw0 mxh10 mxw10"></iframe></div> +<div class="grid w4"><iframe class="na mw0 mxw10"></iframe></div> +<div class="grid w4" style="margin-top:5px"><iframe class="na mw0 mxh10"></iframe></div> + +<pre><!--width:20px--></pre> + +<div class="grid r"><iframe class="w20"></iframe></div> +<div class="grid r"><iframe class="w20 mxh10"></iframe></div> +<div class="grid r"><iframe class="start w20"></iframe></div> +<div class="grid r"><iframe class="start w20 mxh10"></iframe></div> +<div class="grid r"><iframe class="sa w20"></iframe></div> +<div class="grid r"><iframe class="sa w20 mxh2"></iframe></div> +<div class="grid r"><iframe class="na w20"></iframe></div> +<div class="grid r"><iframe class="na w20 mxh2"></iframe></div> + +<pre><!--width:20px--></pre> + +<div class="grid w22"><iframe class="start w20"></iframe></div> +<div class="grid w22"><iframe class="start w20 mxh10"></iframe></div> +<div class="grid w22"><iframe class="start w20"></iframe></div> +<div class="grid w22"><iframe class="start w20 mxh10"></iframe></div> +<div class="grid w22"><iframe class="sa w20"></iframe></div> +<div class="grid w22"><iframe class="sa w20 mxh10"></iframe></div> +<div class="grid w22"><iframe class="na w20"></iframe></div> +<div class="grid w22"><iframe class="na w20 mxh10"></iframe></div> + +<pre><!--height:20px--></pre> + +<div class="grid h22 r wi"><iframe class="h20"></iframe></div> +<div class="grid h22 r"><iframe class="h20 mxw10"></iframe></div> +<div class="grid h22 r wi"><iframe class="start h20"></iframe></div> +<div class="grid h22 r"><iframe class="start h20 mxw10"></iframe></div> +<div class="grid h22 r wi"><iframe class="as h20"></iframe></div> +<div class="grid h22 r"><iframe class="as h20 mxw10"></iframe></div> +<div class="grid h22 r wi"><iframe class="an h20"></iframe></div> +<div class="grid h22 r"><iframe class="an h20 mxw10"></iframe></div> + +<pre><!--height:20px--></pre> + +<div class="grid h32 w4"><iframe class="h20"></iframe></div> +<div class="grid h32 w4"><iframe class="h20 mxw2"></iframe></div> +<div class="grid h32 w4"><iframe class="start h20"></iframe></div> +<div class="grid h32 w4"><iframe class="start h20 mxw10"></iframe></div> +<div class="grid h32 w4"><iframe class="as h20"></iframe></div> +<div class="grid h32 w4"><iframe class="as h20 mxw2"></iframe></div> +<div class="grid h32 w4"><iframe class="an h20"></iframe></div> +<div class="grid h32 w4"><iframe class="an h20 mxw10"></iframe></div> + +<script> +var iframeSizes = [ + ['300px', '150px'], + ['300px', '150px'], + ['300px', '2px'], + ['10px', '2px'], + ['300px', '150px'], + ['2px', '150px'], + ['300px', '150px'], + ['10px', '150px'], + ['300px', '150px'], + ['10px', '150px'], + ['300px', '20px'], + ['10px', '20px'], + ['300px', '150px'], + ['10px', '150px'], + ['300px', '150px'], + ['10px', '150px'], + ['300px', '150px'], + ['10px', '150px'], + ['300px', '2px'], + ['10px', '2px'], + ['300px', '150px'], + ['2px', '150px'], + ['300px', '150px'], + ['2px', '150px'], + ['300px', '150px'], + ['2px', '150px'], + ['300px', '30px'], + ['2px', '30px'], + ['300px', '150px'], + ['2px', '150px'], + ['300px', '150px'], + ['300px', '10px'], + ['300px', '150px'], + ['300px', '10px'], + ['300px', '30px'], + ['300px', '10px'], + ['300px', '150px'], + ['20px', '10px'], + ['300px', '150px'], + ['300px', '10px'], + ['300px', '150px'], + ['300px', '10px'], + ['300px', '30px'], + ['10px', '10px'], + ['10px', '150px'], + ['300px', '10px'], + ['20px', '2px'], + ['20px', '2px'], + ['20px', '150px'], + ['20px', '10px'], + ['20px', '2px'], + ['20px', '2px'], + ['20px', '2px'], + ['20px', '2px'], + ['20px', '150px'], + ['20px', '10px'], + ['20px', '150px'], + ['20px', '10px'], + ['20px', '30px'], + ['20px', '10px'], + ['20px', '30px'], + ['20px', '10px'], + ['30px', '20px'], + ['10px', '20px'], + ['300px', '20px'], + ['10px', '20px'], + ['30px', '20px'], + ['10px', '20px'], + ['30px', '20px'], + ['10px', '20px'], + ['2px', '20px'], + ['2px', '20px'], + ['300px', '20px'], + ['10px', '20px'], + ['2px', '20px'], + ['2px', '20px'], + ['2px', '20px'], + ['2px', '20px'], +]; + +var iframes = document.querySelectorAll('iframe'); +for (var i = 0; i < iframes.length; ++i) { + var iframe = iframes[i]; + iframe.style.width = iframeSizes[i][0]; + iframe.style.height = iframeSizes[i][1]; +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002.html b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002.html new file mode 100644 index 0000000000..212b702170 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-002.html @@ -0,0 +1,168 @@ +<!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: stretching intrinsic size items with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> + <link rel="match" href="grid-item-intrinsic-ratio-normal-003-ref.html"> + <style type="text/css"> +* { vertical-align: top; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: minmax(auto, 32px) / minmax(auto, 4px); + margin-right:20px; +} +.r { grid: minmax(auto, 4px) / minmax(auto, 32px); } + +iframe { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; +} + +.start {align-self:start; justify-self:start} +.na {align-self:normal; justify-self:start} +.sa {align-self:stretch; justify-self:start} +.an {align-self:start; justify-self:normal} +.as {align-self:start; justify-self:stretch} +.w20 { width: 20px } +.mw20 { min-width: 20px } +.mxw10 { max-width: 10px } +.mxw2 { max-width: 2px } +.mw0 { min-width: 0px } + +.h20 { height: 20px } +.mh20 { min-height: 20px } +.mxh10 { max-height: 10px } +.mxh2 { max-height: 2px } +.mh0 { min-height: 0px } + + </style> +</head> +<body> + +<div class="grid r"><iframe></iframe></div> +<div class="grid r"><iframe class="start"></iframe></div> +<div class="grid r"><iframe class="sa"></iframe></div> +<div class="grid r"><iframe class="sa mxw10"></iframe></div> +<div class="grid r"><iframe class="na"></iframe></div> +<div class="grid r"><iframe class="na mxw2"></iframe></div> + +<pre><!--min-height:20px--></pre> +<div class="grid r" style="margin-right:0"><iframe class="mh20"></iframe></div> +<div class="grid r"><iframe class="mh20 mxw10"></iframe></div> +<div class="grid r"><iframe class="start mh20"></iframe></div> +<div class="grid r"><iframe class="start mh20 mxw10"></iframe></div> +<div class="grid r"><iframe class="sa mh20"></iframe></div> +<div class="grid r"><iframe class="sa mh20 mxw10"></iframe></div> +<div class="grid r"><iframe class="na mh20"></iframe></div> +<div class="grid r"><iframe class="na mh20 mxw10"></iframe></div> + +<pre><!--min-height:0--></pre> +<div class="grid r"><iframe class="mh0"></iframe></div> +<div class="grid r"><iframe class="mh0 mxw10"></iframe></div> +<div class="grid r"><iframe class="start mh0"></iframe></div> +<div class="grid r"><iframe class="start mh0 mxw10"></iframe></div> +<div class="grid r"><iframe class="sa mh0"></iframe></div> +<div class="grid r"><iframe class="sa mh0 mxw10"></iframe></div> +<div class="grid r"><iframe class="na mh0"></iframe></div> +<div class="grid r"><iframe class="na mh0 mxw2"></iframe></div> + +<pre><!----></pre> + +<div class="grid"><iframe></iframe></div> +<div class="grid"><iframe class="mxw2"></iframe></div> +<div class="grid"><iframe class="start"></iframe></div> +<div class="grid"><iframe class="start mxw2"></iframe></div> +<div class="grid"><iframe class="sa"></iframe></div> +<div class="grid"><iframe class="sa mxw2"></iframe></div> +<div class="grid"><iframe class="na"></iframe></div> +<div class="grid"><iframe class="na mxw2"></iframe></div> + +<pre><!--min-width:20px--></pre> +<div class="grid"><iframe class="mw20"></iframe></div> +<div class="grid"><iframe class="mw20 mxh10"></iframe></div> +<div class="grid"><iframe class="start mw20"></iframe></div> +<div class="grid" style="margin-top:5px"><iframe class="start mw20 mxh10"></iframe></div> +<div class="grid" style="margin-top:10px"><iframe class="sa mw20"></iframe></div> +<div class="grid" style="margin-top:25px"><iframe class="sa mw20 mxh10"></iframe></div> +<div class="grid"><iframe class="na mw20"></iframe></div> +<div class="grid" style="margin-top:5px"><iframe class="na mw20 mxh10 mxw10"></iframe></div> + +<pre><!--min-width:0--></pre> +<div class="grid"><iframe class="mw0"></iframe></div> +<div class="grid"><iframe class="mw0 mxh10"></iframe></div> +<div class="grid"><iframe class="start mw0"></iframe></div> +<div class="grid" style="margin-top:5px"><iframe class="start mw0 mxh10"></iframe></div> +<div class="grid" style="margin-top:10px"><iframe class="sa mw0"></iframe></div> +<div class="grid" style="margin-top:25px"><iframe class="sa mw0 mxh10 mxw10"></iframe></div> +<div class="grid"><iframe class="na mw0 mxw10"></iframe></div> +<div class="grid" style="margin-top:5px"><iframe class="na mw0 mxh10"></iframe></div> + +<pre><!--width:20px--></pre> + +<div class="grid r"><iframe class="w20"></iframe></div> +<div class="grid r"><iframe class="w20 mxh10"></iframe></div> +<div class="grid r"><iframe class="start w20"></iframe></div> +<div class="grid r"><iframe class="start w20 mxh10"></iframe></div> +<div class="grid r"><iframe class="sa w20"></iframe></div> +<div class="grid r"><iframe class="sa w20 mxh2"></iframe></div> +<div class="grid r"><iframe class="na w20"></iframe></div> +<div class="grid r"><iframe class="na w20 mxh2"></iframe></div> + +<pre><!--width:20px--></pre> + +<div class="grid"><iframe class="start w20"></iframe></div> +<div class="grid"><iframe class="start w20 mxh10"></iframe></div> +<div class="grid"><iframe class="start w20"></iframe></div> +<div class="grid"><iframe class="start w20 mxh10"></iframe></div> +<div class="grid"><iframe class="sa w20"></iframe></div> +<div class="grid"><iframe class="sa w20 mxh10"></iframe></div> +<div class="grid"><iframe class="na w20"></iframe></div> +<div class="grid"><iframe class="na w20 mxh10"></iframe></div> + +<pre><!--height:20px--></pre> + +<div class="grid r"><iframe class="h20"></iframe></div> +<div class="grid r"><iframe class="h20 mxw10"></iframe></div> +<div class="grid r"><iframe class="start h20"></iframe></div> +<div class="grid r"><iframe class="start h20 mxw10"></iframe></div> +<div class="grid r"><iframe class="as h20"></iframe></div> +<div class="grid r"><iframe class="as h20 mxw10"></iframe></div> +<div class="grid r"><iframe class="an h20"></iframe></div> +<div class="grid r"><iframe class="an h20 mxw10"></iframe></div> + +<pre><!--height:20px--></pre> + +<div class="grid"><iframe class="h20"></iframe></div> +<div class="grid"><iframe class="h20 mxw2"></iframe></div> +<div class="grid"><iframe class="start h20"></iframe></div> +<div class="grid"><iframe class="start h20 mxw10"></iframe></div> +<div class="grid"><iframe class="as h20"></iframe></div> +<div class="grid"><iframe class="as h20 mxw2"></iframe></div> +<div class="grid"><iframe class="an h20"></iframe></div> +<div class="grid"><iframe class="an h20 mxw10"></iframe></div> + + +<!-- For generating the item sizes used in the -ref file. +<script> +document.body.clientHeight; +var iframes = document.querySelectorAll('iframe'); +var s = ' [\n'; +for (var i = 0; i < iframes.length; ++i) { + var cs = window.getComputedStyle(iframes[i]); + s += " ['"+ cs['width'] + "', '" + cs['height'] + "'],\n"; +} +s += ']'; +console.log(s) +</script> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-justify-001-ref.html b/layout/reftests/css-grid/grid-item-justify-001-ref.html new file mode 100644 index 0000000000..cfe1095546 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-justify-001-ref.html @@ -0,0 +1,121 @@ +<!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: justify-self (part 1 of 2)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: block; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + inline-size: 36px; + block-size: 25px; + margin-right: 4px; + background: lightgrey; +} + +wrap { + display: block; + position: relative; + inset-inline-start: 1px; + background: white; + block-size: 20px; + inline-size: 32px; + border-block-start: 3px solid lightgrey; +} + +span { + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + align-self: start; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +.hl .jend, .hl .jflexend, .hl .jright { margin-left: 16px; } +.hr .jend, .hr .jflexend { margin-right: 15px; } +.hl .jcenter { margin-left: 9px; } +.vl .jend, .vl .jflexend { margin-right:3px; } +.hr .jcenter { margin-right: 8px; } +.hr .jleft { margin-right: 15px; } + +.hl .jstretch5, .hl .jstretch7, .hr .jstretch5, .hr .jstretch7 { width:14px; } + +.jstretch4 { width:27px; } +.vl .jstretch4 { width:0px; } + +.vl .jstretch2, .vl .jstretch3 { height:27px; } +.vl .jstretch6, .vl .jstretch7 { height:9px; } +.vl .jend, .vl .jflexend, .vl .jright { margin-top: 19px; } +.vl .jcenter { margin-top: 10px; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // grid-item-justify-002.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var wrap = document.createElement("wrap"); + div.appendChild(wrap); + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + wrap.appendChild(span); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-justify-001.html b/layout/reftests/css-grid/grid-item-justify-001.html new file mode 100644 index 0000000000..52ba438e35 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-justify-001.html @@ -0,0 +1,108 @@ +<!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: justify-self (part 1 of 2)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> + <link rel="match" href="grid-item-justify-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 3px 20px 2px / 1px 32px 3px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */ + align-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // grid-item-justify-002.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-justify-002-ref.html b/layout/reftests/css-grid/grid-item-justify-002-ref.html new file mode 100644 index 0000000000..c723bc3915 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-justify-002-ref.html @@ -0,0 +1,120 @@ +<!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: justify-self (part 2 of 2)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: block; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + inline-size: 36px; + block-size: 25px; + margin-right: 4px; + background: lightgrey; +} + +wrap { + display: block; + position: relative; + inset-inline-start: 1px; + background: white; + block-size: 20px; + inline-size: 32px; + border-block-start: 3px solid lightgrey; +} + +span { + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + align-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:27px; } +.jstretch3 { justify-self:stretch; height:27px; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:9px; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:9px; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +.vr .jend, .vr .jflexend, .vr .jright, +.vrl .jend, .vrl .jflexend, .vrl .jright { margin-top: 19px; } +.vlr .jend, .vlr .jflexend, .vlr .jleft { margin-bottom: 20px;} +.vr .jcenter, .vrl .jcenter { margin-top: 10px; } +.vlr .jcenter { margin-bottom: 11px; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-justify-001.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var wrap = document.createElement("wrap"); + div.appendChild(wrap); + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + wrap.appendChild(span); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-justify-002.html b/layout/reftests/css-grid/grid-item-justify-002.html new file mode 100644 index 0000000000..f72c3f0bad --- /dev/null +++ b/layout/reftests/css-grid/grid-item-justify-002.html @@ -0,0 +1,108 @@ +<!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: justify-self (part 2 of 2)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> + <link rel="match" href="grid-item-justify-002-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 3px 20px 2px / 1px 32px 3px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + align-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-justify-001.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-001-ref.html b/layout/reftests/css-grid/grid-item-margin-left-auto-001-ref.html new file mode 100644 index 0000000000..a7892746df --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-auto-001-ref.html @@ -0,0 +1,117 @@ +<!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: margin-left:auto + justify-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */ + align-self: start; +} + +.hl span { justify-self: right!important; } +.hr span { justify-self: right!important; } +.vl span { align-self: end!important; } + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-001.html b/layout/reftests/css-grid/grid-item-margin-left-auto-001.html new file mode 100644 index 0000000000..663f0ddec7 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-auto-001.html @@ -0,0 +1,116 @@ +<!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: margin-left:auto + justify-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> + <link rel="match" href="grid-item-margin-left-auto-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */ + margin-left: auto; + align-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-002-ref.html b/layout/reftests/css-grid/grid-item-margin-left-auto-002-ref.html new file mode 100644 index 0000000000..6319ef310b --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-auto-002-ref.html @@ -0,0 +1,115 @@ +<!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: margin-left:auto + justify-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 0px; + align-self: start; +} + +.vlr span { align-self: end!important; } + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-002.html b/layout/reftests/css-grid/grid-item-margin-left-auto-002.html new file mode 100644 index 0000000000..e68ede0132 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-auto-002.html @@ -0,0 +1,116 @@ +<!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: margin-left:auto + justify-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> + <link rel="match" href="grid-item-margin-left-auto-002-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + margin-left: auto; + align-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-003-ref.html b/layout/reftests/css-grid/grid-item-margin-left-auto-003-ref.html new file mode 100644 index 0000000000..c7f1979279 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-auto-003-ref.html @@ -0,0 +1,116 @@ +<!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: margin-left:auto + align-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 0px; + justify-self: start; +} + +.hl span { justify-self:end!important; } +.hr span { justify-self:start!important; } +.vl span { align-self:end!important; } + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-003.html b/layout/reftests/css-grid/grid-item-margin-left-auto-003.html new file mode 100644 index 0000000000..353f8f02e0 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-auto-003.html @@ -0,0 +1,115 @@ +<!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: margin-left:auto + align-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> + <link rel="match" href="grid-item-margin-left-auto-003-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + margin-left: auto; + justify-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-004-ref.html b/layout/reftests/css-grid/grid-item-margin-left-auto-004-ref.html new file mode 100644 index 0000000000..4501f52fbc --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-auto-004-ref.html @@ -0,0 +1,117 @@ +<!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: margin-left:auto + align-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-block-start: 2px solid blue; */ + border-block-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 0px; + justify-self: start; +} + +.vr span { align-self:start!important; } +.vlr span { align-self:end!important; } +.vrl span { align-self:start!important; } + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-auto-004.html b/layout/reftests/css-grid/grid-item-margin-left-auto-004.html new file mode 100644 index 0000000000..3eef662a43 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-auto-004.html @@ -0,0 +1,116 @@ +<!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: margin-left:auto + align-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> + <link rel="match" href="grid-item-margin-left-auto-004-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-block-start: 2px solid blue; */ + border-block-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + margin-left: auto; + justify-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-001-ref.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-001-ref.html new file mode 100644 index 0000000000..b48f2e7156 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-001-ref.html @@ -0,0 +1,117 @@ +<!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: margin-left/right:auto + justify-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 0px 2px 0px; /* overconstrained - we'll fix that below */ + align-self: start; +} + +.hl span { justify-self: center!important; } +.hr span { justify-self: center!important; } +.vl span { align-self: center!important; } + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-001.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-001.html new file mode 100644 index 0000000000..fb198f796f --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-001.html @@ -0,0 +1,117 @@ +<!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: margin-left/right:auto + justify-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> + <link rel="match" href="grid-item-margin-left-right-auto-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */ + margin-left: auto; + margin-right: auto; + align-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-002-ref.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-002-ref.html new file mode 100644 index 0000000000..dd2006d96c --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-002-ref.html @@ -0,0 +1,115 @@ +<!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: margin-left/right:auto + justify-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 0px 2px 0px; + align-self: start; +} + +span { align-self: center!important; } + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-002.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-002.html new file mode 100644 index 0000000000..3dc049dbe9 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-002.html @@ -0,0 +1,117 @@ +<!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: margin-left/right:auto + justify-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> + <link rel="match" href="grid-item-margin-left-right-auto-002-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + margin-left: auto; + margin-right: auto; + align-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-003-ref.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-003-ref.html new file mode 100644 index 0000000000..7391f9e0fc --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-003-ref.html @@ -0,0 +1,116 @@ +<!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: margin-left/right:auto + align-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 0px 2px 0px; + justify-self: start; +} + +.hl span { justify-self:center!important; } +.hr span { justify-self:center!important; } +.vl span { align-self:center!important; } + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-003.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-003.html new file mode 100644 index 0000000000..4de40bbcc5 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-003.html @@ -0,0 +1,116 @@ +<!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: margin-left/right:auto + align-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> + <link rel="match" href="grid-item-margin-left-right-auto-003-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + margin-left: auto; + margin-right: auto; + justify-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-004-ref.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-004-ref.html new file mode 100644 index 0000000000..7463065f83 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-004-ref.html @@ -0,0 +1,115 @@ +<!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: margin-left/right:auto + align-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-block-start: 2px solid blue; */ + border-block-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 0px 2px 0px; + justify-self: start; +} + +span { align-self: center!important; } + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-left-right-auto-004.html b/layout/reftests/css-grid/grid-item-margin-left-right-auto-004.html new file mode 100644 index 0000000000..b4799ab2fc --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-left-right-auto-004.html @@ -0,0 +1,117 @@ +<!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: margin-left/right:auto + align-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> + <link rel="match" href="grid-item-margin-left-right-auto-004-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-block-start: 2px solid blue; */ + border-block-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + margin-left: auto; + margin-right: auto; + justify-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-001-ref.html b/layout/reftests/css-grid/grid-item-margin-right-auto-001-ref.html new file mode 100644 index 0000000000..bfdb07aba0 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-right-auto-001-ref.html @@ -0,0 +1,117 @@ +<!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: margin-right:auto + justify-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */ + align-self: start; +} + +.hl span { justify-self: left!important; } +.hr span { justify-self: left!important; } +.vl span { align-self: start!important; } + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-001.html b/layout/reftests/css-grid/grid-item-margin-right-auto-001.html new file mode 100644 index 0000000000..6803478ba7 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-right-auto-001.html @@ -0,0 +1,116 @@ +<!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: margin-right:auto + justify-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> + <link rel="match" href="grid-item-margin-right-auto-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */ + margin-right: auto; + align-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-002-ref.html b/layout/reftests/css-grid/grid-item-margin-right-auto-002-ref.html new file mode 100644 index 0000000000..4b2bd9788b --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-right-auto-002-ref.html @@ -0,0 +1,118 @@ +<!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: margin-right:auto + justify-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> + <link rel="match" href="grid-item-margin-right-auto-002-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 0px 2px 2px; + align-self: start; +} + +.vr span { align-self: end!important; } +.vrl span { align-self: end!important; } + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-002.html b/layout/reftests/css-grid/grid-item-margin-right-auto-002.html new file mode 100644 index 0000000000..839ffd8399 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-right-auto-002.html @@ -0,0 +1,116 @@ +<!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: margin-right:auto + justify-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> + <link rel="match" href="grid-item-margin-right-auto-002-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-inline-start: 2px solid lime; */ + border-inline-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + margin-right: auto; + align-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-self:start; } +.jend { justify-self:end; } +.jflexstart { justify-self:flex-start; } +.jflexend { justify-self:flex-end; } +.jselfstart { justify-self:self-start; } +.jselfend { justify-self:self-end; } +.jcenter { justify-self:center; } +.jleft { justify-self:left; } +.jright { justify-self:right; } +.jstretch1 { justify-self:stretch; } +.jstretch2 { justify-self:stretch; width:13px; height:auto; } +.jstretch3 { justify-self:stretch; height:auto; } +.jstretch4 { justify-self:stretch; width:auto; } +.jstretch5 { justify-self:stretch; width:auto; max-width:13px; } +.jstretch6 { justify-self:stretch; height:auto; max-height:9px; } +.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.jauto { justify-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " j" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-003-ref.html b/layout/reftests/css-grid/grid-item-margin-right-auto-003-ref.html new file mode 100644 index 0000000000..08a01afca4 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-right-auto-003-ref.html @@ -0,0 +1,116 @@ +<!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: margin-right:auto + align-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 0px 2px 2px; + justify-self: start; +} + +.hl span { justify-self:start!important; } +.hr span { justify-self:end!important; } +.vl span { align-self:start!important; } + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-003.html b/layout/reftests/css-grid/grid-item-margin-right-auto-003.html new file mode 100644 index 0000000000..ccec8f7dab --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-right-auto-003.html @@ -0,0 +1,115 @@ +<!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: margin-right:auto + align-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> + <link rel="match" href="grid-item-margin-right-auto-003-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + margin-right: auto; + justify-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-004-ref.html b/layout/reftests/css-grid/grid-item-margin-right-auto-004-ref.html new file mode 100644 index 0000000000..d8efb6a018 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-right-auto-004-ref.html @@ -0,0 +1,117 @@ +<!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: margin-right:auto + align-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-block-start: 2px solid blue; */ + border-block-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 0px 2px 2px; + justify-self: start; +} + +.vr span { align-self:end!important; } +.vlr span { align-self:start!important; } +.vrl span { align-self:end!important; } + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-margin-right-auto-004.html b/layout/reftests/css-grid/grid-item-margin-right-auto-004.html new file mode 100644 index 0000000000..fc3a2973b5 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-margin-right-auto-004.html @@ -0,0 +1,116 @@ +<!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: margin-right:auto + align-self</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> + <link rel="match" href="grid-item-margin-right-auto-004-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + /* border-block-start: 2px solid blue; */ + border-block-start: 2px solid black; + grid-template: 1px 32px 3px / 3px 20px 2px; + margin-right: 4px; +} + +span { + grid-area: 2 / 2; /* the center 32 x 20 pixel area */ + display: block; + width: 13px; + height: 9px; + background: grey; + border-block-start: 2px solid blue; + border-inline-start: 2px solid lime; + margin: 1px 1px 2px 2px; + margin-right: auto; + justify-self: start; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + background: lightgrey; +} +abs1 { grid-area: 1 / 1 / 2 / 4; } +abs2 { grid-area: 1 / 1 / 4 / 2; } +abs3 { grid-area: 1 / 3 / 4 / 4; } +abs4 { grid-area: 3 / 1 / 4 / 4; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; } +.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; } +.vl { -webkit-writing-mode: vertical-lr; } +.vr { -webkit-writing-mode: vertical-rl; } +.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; } +.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; } + +.astart { align-self:start; } +.aend { align-self:end; } +.aflexstart { align-self:flex-start; } +.aflexend { align-self:flex-end; } +.aselfstart { align-self:self-start; } +.aselfend { align-self:self-end; } +.acenter { align-self:center; } +.aleft { align-self:left; } +.aright { align-self:right; } +.astretch1 { align-self:stretch; } +.astretch2 { align-self:stretch; width:13px; height:auto; } +.astretch3 { align-self:stretch; height:auto; } +.astretch4 { align-self:stretch; width:auto; } +.astretch5 { align-self:stretch; width:auto; max-width:13px; } +.astretch6 { align-self:stretch; height:auto; max-height:9px; } +.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; } +.aauto { align-self:auto; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7", "auto" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " a" + test[k]; + div.appendChild(span); + div.appendChild(document.createElement("abs1")); + div.appendChild(document.createElement("abs2")); + div.appendChild(document.createElement("abs3")); + div.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-overflow-stretch-001-ref.html new file mode 100644 index 0000000000..463bbb4e6e --- /dev/null +++ b/layout/reftests/css-grid/grid-item-overflow-stretch-001-ref.html @@ -0,0 +1,78 @@ +<!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 Reference: stretching overflow!=visible items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + width: 100px; + height: 50px; + grid: 7px 30px 3px / 7px 80px 3px; + grid-gap: 5px; + border:1px solid; +} + +.grid > * { + grid-area: 2/2; + border:1px solid; + min-width:0; + min-height:0; + box-sizing: border-box; +} + +.oa, .os, .oh { width:80px; height:30px; } +.m.oa, .m.os, .m.oh { width:70px; height:24px; } +.oa { overflow: auto; } +.os { overflow: scroll; } +.oh { overflow: hidden; } +.m { margin: 1px 3px 5px 7px; } + +x { display:block; width:110px; height:5px; background:grey; } +.h .grid x { width:5px; height:110px; } + +br { clear:both; } + </style> +</head> +<body> + +<div class="grid"><span class="oa"><x></x></span></div> +<div class="grid"><span class="os"><x></x></span></div> +<div class="grid"><span class="oh"><x></x></span></div> +<div class="grid"><span class=" " style="width:112px"><x></x></span></div> + +<br> + +<div class="grid"><span class="m oa"><x></x></span></div> +<div class="grid"><span class="m os"><x></x></span></div> +<div class="grid"><span class="m oh"><x></x></span></div> +<div class="grid"><span class="m " style="width:112px"><x></x></span></div> + +<br> + +<div class="h"> + +<div class="grid"><span class="oa"><x></x></span></div> +<div class="grid"><span class="os"><x></x></span></div> +<div class="grid"><span class="oh"><x></x></span></div> +<div class="grid"><span class=" " style="height:112px"><x></x></span></div> + +<br> + +<div class="grid"><span class="m oa"><x></x></span></div> +<div class="grid"><span class="m os"><x></x></span></div> +<div class="grid"><span class="m oh"><x></x></span></div> +<div class="grid"><span class="m " style="height:112px"><x></x></span></div> + +<br> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-001.html b/layout/reftests/css-grid/grid-item-overflow-stretch-001.html new file mode 100644 index 0000000000..4f6259abeb --- /dev/null +++ b/layout/reftests/css-grid/grid-item-overflow-stretch-001.html @@ -0,0 +1,74 @@ +<!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: stretching overflow!=visible items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> + <link rel="match" href="grid-item-overflow-stretch-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + width: 100px; + height: 50px; + grid: 7px auto 3px / 7px auto 3px; + grid-gap: 5px; + border:1px solid; +} + +.grid > * { + grid-area: 2/2; + border:1px solid; +} + +.oa { overflow: auto; } +.os { overflow: scroll; } +.oh { overflow: hidden; } +.m { margin: 1px 3px 5px 7px; } + +x { display:block; width:110px; height:5px; background:grey; } +.h .grid x { width:5px; height:110px; } + +br { clear:both; } + </style> +</head> +<body> + +<div class="grid"><span class="oa"><x></x></span></div> +<div class="grid"><span class="os"><x></x></span></div> +<div class="grid"><span class="oh"><x></x></span></div> +<div class="grid"><span class=" "><x></x></span></div> + +<br> + +<div class="grid"><span class="m oa"><x></x></span></div> +<div class="grid"><span class="m os"><x></x></span></div> +<div class="grid"><span class="m oh"><x></x></span></div> +<div class="grid"><span class="m "><x></x></span></div> + +<br> + +<div class="h"> + +<div class="grid"><span class="oa"><x></x></span></div> +<div class="grid"><span class="os"><x></x></span></div> +<div class="grid"><span class="oh"><x></x></span></div> +<div class="grid"><span class=" "><x></x></span></div> + +<br> + +<div class="grid"><span class="m oa"><x></x></span></div> +<div class="grid"><span class="m os"><x></x></span></div> +<div class="grid"><span class="m oh"><x></x></span></div> +<div class="grid"><span class="m "><x></x></span></div> + +<br> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-002-ref.html b/layout/reftests/css-grid/grid-item-overflow-stretch-002-ref.html new file mode 100644 index 0000000000..a9690a54e5 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-overflow-stretch-002-ref.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 Reference: stretching overflow!=visible vertical-rl items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + width: 100px; + height: 50px; + grid: 7px 30px 3px / 7px 80px 3px; + grid-gap: 5px; + border:1px solid; +} + +.grid > * { + grid-area: 2/2; + border:1px solid; + writing-mode: vertical-rl; + min-width:0; + min-height:0; + box-sizing: border-box; +} + +.oa, .os, .oh { width:80px; height:30px; } +.m.oa, .m.os, .m.oh { width:70px; height:24px; } +.oa { overflow: auto; } +.os { overflow: scroll; } +.oh { overflow: hidden; } +.m { margin: 1px 3px 5px 7px; } + +x { display:block; width:110px; height:5px; background:grey; } +.h .grid x { width:5px; height:110px; } + +br { clear:both; } + </style> +</head> +<body> + +<div class="grid"><span class="oa"><x></x></span></div> +<div class="grid"><span class="os"><x></x></span></div> +<div class="grid"><span class="oh"><x></x></span></div> +<div class="grid"><span class=" " style="width:112px"><x></x></span></div> + +<br> + +<div class="grid"><span class="m oa"><x></x></span></div> +<div class="grid"><span class="m os"><x></x></span></div> +<div class="grid"><span class="m oh"><x></x></span></div> +<div class="grid"><span class="m " style="width:112px"><x></x></span></div> + +<br> + +<div class="h"> + +<div class="grid"><span class="oa"><x></x></span></div> +<div class="grid"><span class="os"><x></x></span></div> +<div class="grid"><span class="oh"><x></x></span></div> +<div class="grid"><span class=" " style="height:112px"><x></x></span></div> + +<br> + +<div class="grid"><span class="m oa"><x></x></span></div> +<div class="grid"><span class="m os"><x></x></span></div> +<div class="grid"><span class="m oh"><x></x></span></div> +<div class="grid"><span class="m " style="height:112px"><x></x></span></div> + +<br> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-002.html b/layout/reftests/css-grid/grid-item-overflow-stretch-002.html new file mode 100644 index 0000000000..520eed911a --- /dev/null +++ b/layout/reftests/css-grid/grid-item-overflow-stretch-002.html @@ -0,0 +1,75 @@ +<!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: stretching overflow!=visible vertical-rl items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> + <link rel="match" href="grid-item-overflow-stretch-002-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + width: 100px; + height: 50px; + grid: 7px auto 3px / 7px auto 3px; + grid-gap: 5px; + border:1px solid; +} + +.grid > * { + grid-area: 2/2; + border:1px solid; + writing-mode: vertical-rl; +} + +.oa { overflow: auto; } +.os { overflow: scroll; } +.oh { overflow: hidden; } +.m { margin: 1px 3px 5px 7px; } + +x { display:block; width:110px; height:5px; background:grey; } +.h .grid x { width:5px; height:110px; } + +br { clear:both; } + </style> +</head> +<body> + +<div class="grid"><span class="oa"><x></x></span></div> +<div class="grid"><span class="os"><x></x></span></div> +<div class="grid"><span class="oh"><x></x></span></div> +<div class="grid"><span class=" "><x></x></span></div> + +<br> + +<div class="grid"><span class="m oa"><x></x></span></div> +<div class="grid"><span class="m os"><x></x></span></div> +<div class="grid"><span class="m oh"><x></x></span></div> +<div class="grid"><span class="m "><x></x></span></div> + +<br> + +<div class="h"> + +<div class="grid"><span class="oa"><x></x></span></div> +<div class="grid"><span class="os"><x></x></span></div> +<div class="grid"><span class="oh"><x></x></span></div> +<div class="grid"><span class=" "><x></x></span></div> + +<br> + +<div class="grid"><span class="m oa"><x></x></span></div> +<div class="grid"><span class="m os"><x></x></span></div> +<div class="grid"><span class="m oh"><x></x></span></div> +<div class="grid"><span class="m "><x></x></span></div> + +<br> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-003-ref.html b/layout/reftests/css-grid/grid-item-overflow-stretch-003-ref.html new file mode 100644 index 0000000000..5c259c7ccd --- /dev/null +++ b/layout/reftests/css-grid/grid-item-overflow-stretch-003-ref.html @@ -0,0 +1,84 @@ +<!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 Reference: margin:auto stretch items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + width: 100px; + height: 50px; + grid: 7px 30px 3px / 7px 112px 3px; + grid-gap: 5px; + border:1px solid; +} +.c2 { grid-template-columns: 7px 122px 3px; } +.h > .grid { grid: 7px 112px 3px / 7px 80px 3px; grid-gap: 0; } + +.grid > * { + grid-area: 2/2; + border:1px solid; + margin: 0 auto; + justify-self:start; + align-self:start; + height:28px; +} +.c2 > * { height:22px; } +.h .grid > * { + margin: 10px 0 0 10px; + justify-self:center; + align-self:center; + width:5px; + height:110px; +} + +.m { margin: 1px 3px 5px 7px; } + +x { display:block; width:110px; height:5px; background:grey; } +.h .grid x { width:5px; height:110px; } + +br { clear:both; } + </style> +</head> +<body> + +<div class="grid"><span class="oa"><x></x></span></div> +<div class="grid"><span class="os"><x></x></span></div> +<div class="grid"><span class="oh"><x></x></span></div> +<div class="grid"><span class=" "><x></x></span></div> + +<br> + +<div class="grid c2"><span class="m oa"><x></x></span></div> +<div class="grid c2"><span class="m os"><x></x></span></div> +<div class="grid c2"><span class="m oh"><x></x></span></div> +<div class="grid c2"><span class="m "><x></x></span></div> + +<br> + +<div class="h"> + +<div class="grid"><span class="oa"><x></x></span></div> +<div class="grid"><span class="os"><x></x></span></div> +<div class="grid"><span class="oh"><x></x></span></div> +<div class="grid"><span class=" "><x></x></span></div> + +<br> + +<div class="grid"><span class="m oa"><x></x></span></div> +<div class="grid"><span class="m os"><x></x></span></div> +<div class="grid"><span class="m oh"><x></x></span></div> +<div class="grid"><span class="m "><x></x></span></div> + +<br> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-003.html b/layout/reftests/css-grid/grid-item-overflow-stretch-003.html new file mode 100644 index 0000000000..8bcd79d9be --- /dev/null +++ b/layout/reftests/css-grid/grid-item-overflow-stretch-003.html @@ -0,0 +1,75 @@ +<!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: margin:auto stretch items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> + <link rel="match" href="grid-item-overflow-stretch-003-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + width: 100px; + height: 50px; + grid: 7px auto 3px / 7px auto 3px; + grid-gap: 5px; + border:1px solid; +} + +.grid > * { + grid-area: 2/2; + border:1px solid; + margin: 0 auto; +} +.h .grid > * { + margin: auto; +} + +.m { margin: 1px 3px 5px 7px; } + +x { display:block; width:110px; height:5px; background:grey; } +.h .grid x { width:5px; height:110px; } + +br { clear:both; } + </style> +</head> +<body> + +<div class="grid"><span class="oa"><x></x></span></div> +<div class="grid"><span class="os"><x></x></span></div> +<div class="grid"><span class="oh"><x></x></span></div> +<div class="grid"><span class=" "><x></x></span></div> + +<br> + +<div class="grid"><span class="m oa"><x></x></span></div> +<div class="grid"><span class="m os"><x></x></span></div> +<div class="grid"><span class="m oh"><x></x></span></div> +<div class="grid"><span class="m "><x></x></span></div> + +<br> + +<div class="h"> + +<div class="grid"><span class="oa"><x></x></span></div> +<div class="grid"><span class="os"><x></x></span></div> +<div class="grid"><span class="oh"><x></x></span></div> +<div class="grid"><span class=" "><x></x></span></div> + +<br> + +<div class="grid"><span class="m oa"><x></x></span></div> +<div class="grid"><span class="m os"><x></x></span></div> +<div class="grid"><span class="m oh"><x></x></span></div> +<div class="grid"><span class="m "><x></x></span></div> + +<br> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-004-ref.html b/layout/reftests/css-grid/grid-item-overflow-stretch-004-ref.html new file mode 100644 index 0000000000..9e652f9eb8 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-overflow-stretch-004-ref.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 Reference: stretching items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + width: 90px; + height: 50px; + grid: 7px 30px 3px / 7px 102px 3px; + grid-gap: 5px; + border:1px solid; +} +.c2 { grid: 7px 30px 3px / 7px 112px 3px; grid-gap: 5px;} +.c3 { grid: 7px 30px 3px / 7px 70px 3px; grid-gap: 5px;} + +.grid > * { + grid-area: 2/2; + border:1px solid; + min-width: 0; + max-width: 100px; +} +.h .grid > * { + min-height: 0; + max-height: 100px; + justify-self: safe center; + align-self: safe center; +} +.h > .grid { grid: 7px 30px 3px / 7px 70px 3px; grid-gap: 5px; } + +.oa { overflow: auto; } +.p { width: 100%; } +.h .grid > .p { height: 100%; } +.x { width:5px; } +.h .grid > .x { max-height:5px; } +.m { margin: 1px 3px 5px 7px; } + +x { display:block; width:110px; height:5px; background:grey; } +.h .grid x { width:5px; height:110px; } + +br { clear:both; } + </style> +</head> +<body> + +<div class="grid c3"><span class="p oa"><x></x></span></div> +<div class="grid c3"><span class="p "><x></x></span></div> +<div class="grid c2"><span class="p x" style="height:5px; margin-left:31.5px; margin-top:11.5px"><x></x></span></div> +<div class="grid c2"><span class=" " style="width:68px"><x></x></span></div> + +<br> + +<div class="grid c3"><span class="p m oa"><x></x></span></div> +<div class="grid c3"><span class="p m"><x></x></span></div> +<div class="grid c2"><span class="m p x"><x></x></span></div> +<div class="grid c2"><span class="m " style="width:58px"><x></x></span></div> + +<br> + +<div class="h"> + +<div class="grid"><span class="p oa"><x></x></span></div> +<div class="grid"><span class="p "><x></x></span></div> +<div class="grid"><span class="p x" style=""><x></x></span></div> +<div class="grid"><span class=" " style="height:28px; width:68px;"><x></x></span></div> + +<br> + +<div class="grid"><span class="m p oa"><x></x></span></div> +<div class="grid"><span class="m p"><x></x></span></div> +<div class="grid"><span class="m p x" style="justify-self:start;align-self:start"><x></x></span></div> +<div class="grid"><span class="m " style="height:22px; width:58px"><x></x></span></div> + +<br> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-004.html b/layout/reftests/css-grid/grid-item-overflow-stretch-004.html new file mode 100644 index 0000000000..b983b5184b --- /dev/null +++ b/layout/reftests/css-grid/grid-item-overflow-stretch-004.html @@ -0,0 +1,82 @@ +<!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: stretching items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> + <link rel="match" href="grid-item-overflow-stretch-004-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + width: 90px; + height: 50px; + grid: 7px auto 3px / 7px auto 3px; + grid-gap: 5px; + border:1px solid; +} + +.grid > * { + grid-area: 2/2; + border:1px solid; + min-width: 0; + max-width: 100px; +} +.h .grid > * { + min-height: 0; + max-height: 100px; +} + +.oa { overflow: auto; } +.p { width: 100%; } +.h .grid > .p { height: 100%; } +.x { max-width:5px; margin:auto; } +.h .grid > .x { max-height:5px; } +.m { margin: 1px 3px 5px 7px; } + +x { display:block; width:110px; height:5px; background:grey; } +.h .grid x { width:5px; height:110px; } + +br { clear:both; } + </style> +</head> +<body> + +<div class="grid"><span class="p oa"><x></x></span></div> +<div class="grid"><span class="p "><x></x></span></div> +<div class="grid"><span class="p x"><x></x></span></div> +<div class="grid"><span class=" "><x></x></span></div> + +<br> + +<div class="grid"><span class="p m oa"><x></x></span></div> +<div class="grid"><span class="p m"><x></x></span></div> +<div class="grid"><span class="m p x"><x></x></span></div> +<div class="grid"><span class="m "><x></x></span></div> + +<br> + +<div class="h"> + +<div class="grid"><span class="p oa"><x></x></span></div> +<div class="grid"><span class="p "><x></x></span></div> +<div class="grid"><span class="p x"><x></x></span></div> +<div class="grid"><span class=" "><x></x></span></div> + +<br> + +<div class="grid"><span class="m p oa"><x></x></span></div> +<div class="grid"><span class="m p"><x></x></span></div> +<div class="grid"><span class="m p x"><x></x></span></div> +<div class="grid"><span class="m "><x></x></span></div> + +<br> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-005-ref.html b/layout/reftests/css-grid/grid-item-overflow-stretch-005-ref.html new file mode 100644 index 0000000000..e7d353c8b8 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-overflow-stretch-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>CSS Grid Reference: stretching overflow!=visible items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + width: 100px; + height: 50px; + grid: 7px auto 3px / 7px auto 3px; + grid-gap: 5px; + border:1px solid; +} + +.grid > * { + grid-area: 2/2; + border:1px solid; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + min-width:0; + min-height:0; + box-sizing: border-box; +} + +.oa, .os, .oh { width:80px; height:30px; } +.m.oa, .m.os, .m.oh { width:70px; height:8px; } +.oa { overflow: auto; } +.os { overflow: scroll; } +.oh { overflow: hidden; } +.ov { justify-self: start; } +.m.ov { align-self: start; } +.m { margin: 17px 3px 5px 7px; } + +x { display:block; width:110px; height:5px; background:grey; } +.h .grid x { width:5px; height:110px; } + +br { clear:both; } + </style> +</head> +<body> + +<div class="grid"><input class="oa"></div> +<div class="grid"><input class="os"></div> +<div class="grid"><input class="oh"></div> +<div class="grid"><input class="ov"></div> + +<br> + +<div class="grid"><input class="m oa"></div> +<div class="grid"><input class="m os"></div> +<div class="grid"><input class="m oh"></div> +<div class="grid"><input class="m ov"></div> + +<br> + +<div class="h"> + +<div class="grid"><input class="oa"></div> +<div class="grid"><input class="os"></div> +<div class="grid"><input class="oh"></div> +<div class="grid"><input class="ov"></div> + +<br> + +<div class="grid"><input class="m oa"></div> +<div class="grid"><input class="m os"></div> +<div class="grid"><input class="m oh"></div> +<div class="grid"><input class="m ov"></div> + +<br> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-005.html b/layout/reftests/css-grid/grid-item-overflow-stretch-005.html new file mode 100644 index 0000000000..33fe468d74 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-overflow-stretch-005.html @@ -0,0 +1,77 @@ +<!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: stretching overflow!=visible items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> + <link rel="match" href="grid-item-overflow-stretch-005-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + width: 100px; + height: 50px; + grid: 7px auto 3px / 7px auto 3px; + grid-gap: 5px; + border:1px solid; +} + +.grid > * { + grid-area: 2/2; + border:1px solid; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; +} + +.oa { overflow: auto; } +.os { overflow: scroll; } +.oh { overflow: hidden; } +.m { margin: 17px 3px 5px 7px; } + +x { display:block; width:110px; height:5px; background:grey; } +.h .grid x { width:5px; height:110px; } + +br { clear:both; } + </style> +</head> +<body> + +<div class="grid"><input class="oa"></div> +<div class="grid"><input class="os"></div> +<div class="grid"><input class="oh"></div> +<div class="grid"><input class=" "></div> + +<br> + +<div class="grid"><input class="m oa"></div> +<div class="grid"><input class="m os"></div> +<div class="grid"><input class="m oh"></div> +<div class="grid"><input class="m "></div> + +<br> + +<div class="h"> + +<div class="grid"><input class="oa"></div> +<div class="grid"><input class="os"></div> +<div class="grid"><input class="oh"></div> +<div class="grid"><input class=" "></div> + +<br> + +<div class="grid"><input class="m oa"></div> +<div class="grid"><input class="m os"></div> +<div class="grid"><input class="m oh"></div> +<div class="grid"><input class="m "></div> + +<br> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-006-ref.html b/layout/reftests/css-grid/grid-item-overflow-stretch-006-ref.html new file mode 100644 index 0000000000..8c892d71e1 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-overflow-stretch-006-ref.html @@ -0,0 +1,54 @@ +<!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 Reference: stretching overflow visible items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-flex; + width: 90px; + height: 40px; + padding: 7px 3px 3px 7px; + border: 1px solid; +} + +.grid > * { + border: 1px solid; + margin: 5px; +} + +.m { margin: 6px 8px 10px 12px; } +.ma { margin: auto; } + +x { display:block; width:110px; height:5px; background:grey; } +.h .grid x { width:5px; height:110px; } + +br { clear:both; } + </style> +</head> +<body> + +<div class="grid"><span class="" style="width:78px"><x></x></span></div> +<div class="grid"><span class="m" style="width:68px"><x></x></span></div> +<div class="grid"><span class="ma" style="margin-left:5px"><x></x></span></div> + +<br> + +<div class="h"> + +<div class="grid"><span class="" style="flex:1"><x></x></span></div> +<div class="grid"><span class="m" style="flex:1"><x></x></span></div> +<div class="grid"><span class="ma" style="margin-top:5px"><x></x></span></div> + +<br> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-overflow-stretch-006.html b/layout/reftests/css-grid/grid-item-overflow-stretch-006.html new file mode 100644 index 0000000000..015c50fccd --- /dev/null +++ b/layout/reftests/css-grid/grid-item-overflow-stretch-006.html @@ -0,0 +1,56 @@ +<!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: stretching overflow visible items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> + <link rel="match" href="grid-item-overflow-stretch-006-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } + +.grid { + display: inline-grid; + width: 100px; + height: 50px; + grid: 7px minmax(20px, auto) 3px / 7px minmax(20px, auto) 3px; + grid-gap: 5px; + border: 1px solid; +} + +.grid > * { + grid-area: 2/2; + border: 1px solid; +} + +.m { margin: 1px 3px 5px 7px; } +.ma { margin: auto; } + +x { display:block; width:110px; height:5px; background:grey; } +.h .grid x { width:5px; height:110px; } + +br { clear:both; } + </style> +</head> +<body> + +<div class="grid"><span class=""><x></x></span></div> +<div class="grid"><span class="m"><x></x></span></div> +<div class="grid"><span class="ma"><x></x></span></div> + +<br> + +<div class="h"> + +<div class="grid"><span class=""><x></x></span></div> +<div class="grid"><span class="m"><x></x></span></div> +<div class="grid"><span class="ma"><x></x></span></div> + +<br> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-001-ref.html b/layout/reftests/css-grid/grid-item-sizing-percent-001-ref.html new file mode 100644 index 0000000000..4996f8b9c1 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-sizing-percent-001-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>Reference 001</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1163435"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + position:relative; + background-color: grey; + width: 173px; + height: 53px; +} + +.item { + position: absolute; + background: lime; + background-clip: content-box; +} +#abs > div div { + position: absolute; +} +.pbox { + box-sizing: border-box; +} +.p { padding:2px 3px; } +.m { margin:2px 3px; } +.c1.p,.c2.p { padding:6px 9px; } +.c1.m,.c2.m { margin:6px 9px; } +.b { border:solid black; } + +#t1 { width:50px; height: 20px; } +#t2 { width:50px; height: 20px; } +#t0 { width:60px; height: 30px; } +#t3 { width:60px; height: 30px; } +#t4 { width:150px; height: 50px; } +#t5 { width:50px; height: 20px; } +#t6 { width:50px; height: 20px; } +#t7 { width:60px; height: 30px; } +#t8 { width:150px; height: 50px; } +#t9 { width:50px; height: 20px; } +#tA { width:60px; height: 30px; } +#tB { width:150px; height: 50px; } +#tC { width:50px; height: 20px; } +#tD { width:50px; height: 20px; } +#tE { width:150px; height: 50px; } + +</style> +</head> +<body> + +<div style="float:left"> +<div class="grid"><div id="t1" class="item"></div></div> +<div class="grid"><div id="t2" class="item pbox p"></div></div> +<div class="grid"><div id="t0" class="item c1 p"></div></div> +<div class="grid"><div id="t3" class="item c1 pbox p"></div></div> +<div class="grid"><div id="t4" class="item c2 pbox p"></div></div> +<div class="grid"><div id="t5" class="item pbox b"></div></div> +<div class="grid"><div id="t6" class="item pbox p b"></div></div> +<div class="grid"><div id="t7" class="item c1 pbox p b"></div></div> +<div class="grid"><div id="t8" class="item c2 pbox p b"></div></div> +<div class="grid"><div id="t9" class="item pbox m"></div></div> +<div class="grid"><div id="tA" class="item c1 pbox m"></div></div> +<div class="grid"><div id="tB" class="item c2 pbox m"></div></div> +<div class="grid"><div id="tC" class="item pbox p m"></div></div> +<div class="grid"><div id="tD" class="item pbox p b m"></div></div> +<div class="grid"><div id="tE" class="item c2 pbox p b m"></div></div> +</div> + +<div id="abs" style="float:left"> +<div class="grid"><div id="t1" class="item"></div></div> +<div class="grid"><div id="t2" class="item pbox p"></div></div> +<div class="grid"><div id="t0" class="item c1 p"></div></div> +<div class="grid"><div id="t3" class="item c1 pbox p"></div></div> +<div class="grid"><div id="t4" class="item c2 pbox p"></div></div> +<div class="grid"><div id="t5" class="item pbox b"></div></div> +<div class="grid"><div id="t6" class="item pbox p b"></div></div> +<div class="grid"><div id="t7" class="item c1 pbox p b"></div></div> +<div class="grid"><div id="t8" class="item c2 pbox p b"></div></div> +<div class="grid"><div id="t9" class="item pbox m"></div></div> +<div class="grid"><div id="tA" class="item c1 pbox m"></div></div> +<div class="grid"><div id="tB" class="item c2 pbox m"></div></div> +<div class="grid"><div id="tC" class="item pbox p m"></div></div> +<div class="grid"><div id="tD" class="item pbox p b m"></div></div> +<div class="grid"><div id="tE" class="item c2 pbox p b m"></div></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-001.html b/layout/reftests/css-grid/grid-item-sizing-percent-001.html new file mode 100644 index 0000000000..960247592f --- /dev/null +++ b/layout/reftests/css-grid/grid-item-sizing-percent-001.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Test: Testing grid item percent sizes</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1163435"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/"> + <link rel="match" href="grid-item-sizing-percent-001-ref.html"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + position:relative; + background-color: grey; + grid-template-columns: 50px 100px; + grid-template-rows: 20px 30px; + width: 173px; + height: 53px; + justify-items: start; + align-items: start; +} + +.item { + width: 100%; + height: 100%; + background: lime; + grid-area: 1 / 1 / 2 / 2; + background-clip: content-box; + min-width: 0; + min-height: 0; +} +.c1 { + width: 40%; + height: 60%; + grid-area: 1 / 1 / 3 / 3; +} +.c2 { + grid-area: 1 / 1 / 3 / 3; +} +#abs > div div { + position: absolute; +} +.pbox { + box-sizing: border-box; +} + +.p { padding:4% 6%; } +.m { margin:4% 6%; } +.b { border:solid black; } + +</style> +</head> +<body> + +<div style="float:left"> +<div class="grid"><div class="item"></div></div> +<div class="grid"><div class="item pbox p"></div></div> +<div class="grid"><div class="item c1 p"></div></div> +<div class="grid"><div class="item c1 pbox p"></div></div> +<div class="grid"><div class="item c2 pbox p"></div></div> +<div class="grid"><div class="item pbox b"></div></div> +<div class="grid"><div class="item pbox p b"></div></div> +<div class="grid"><div class="item c1 pbox p b"></div></div> +<div class="grid"><div class="item c2 pbox p b"></div></div> +<div class="grid"><div class="item pbox m"></div></div> +<div class="grid"><div class="item c1 pbox m"></div></div> +<div class="grid"><div class="item c2 pbox m"></div></div> +<div class="grid"><div class="item pbox p m"></div></div> +<div class="grid"><div class="item pbox p b m"></div></div> +<div class="grid"><div class="item c2 pbox p b m"></div></div> +</div> + +<div id="abs" style="float:left"> +<div class="grid"><div class="item"></div></div> +<div class="grid"><div class="item pbox p"></div></div> +<div class="grid"><div class="item c1 p"></div></div> +<div class="grid"><div class="item c1 pbox p"></div></div> +<div class="grid"><div class="item c2 pbox p"></div></div> +<div class="grid"><div class="item pbox b"></div></div> +<div class="grid"><div class="item pbox p b"></div></div> +<div class="grid"><div class="item c1 pbox p b"></div></div> +<div class="grid"><div class="item c2 pbox p b"></div></div> +<div class="grid"><div class="item pbox m"></div></div> +<div class="grid"><div class="item c1 pbox m"></div></div> +<div class="grid"><div class="item c2 pbox m"></div></div> +<div class="grid"><div class="item pbox p m"></div></div> +<div class="grid"><div class="item pbox p b m"></div></div> +<div class="grid"><div class="item c2 pbox p b m"></div></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-002-ref.html b/layout/reftests/css-grid/grid-item-sizing-percent-002-ref.html new file mode 100644 index 0000000000..11faf4f6c0 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-sizing-percent-002-ref.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>Reference: Testing grid item percent sizes</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } +* { vertical-align:top; line-height:4px; } + +.grid { + display: grid; + position: relative; + float: left; + background-color: grey; + grid-template-columns: 50px 100px; + justify-items: start; + align-items: start; + clear: both; +} + +.item { + background: pink; + grid-area: 1 / 1 / 2 / 2; + background-clip: content-box; + min-width: 0; + min-height: 0; + z-index: 1; +} +.c1 { + width: 60px; + height: 60%; + grid-area: 1 / 1 / 3 / 3; +} +.c2 { + grid-area: 1 / 1 / 3 / 3; +} +.pbox { + box-sizing: border-box; +} + +.maxw .item { max-width: 25px; } +.minw .item { min-width: 25px; } +.maxw .c1.item { max-width: 75px; } +.minw .c1.item { min-width: 75px; } +.maxw .c2.item { max-width: 75px; } +.minw .c2.item { min-width: 75px; } + +.p { padding:3px 5px 10% 10px; } +.c1.p, .c2.p { padding:3px 5px 10% 30px; } +.m { margin:3px 5px 10% 5px; } +.c1.m, .c2.m { margin:3px 5px 10% 15px; } +.b { border:solid black; } + +x { display:inline-block; width:10px; height:4px; background: silver; } + +a { + grid-area: 1 / 1 / 2 / 2; + width:100%; height:100%; + background: blue; +} +</style> +</head> +<body> + +<div style="float:left"> +<div class="grid" style="grid-template-rows:calc(4px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(11px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(10px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(17px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="maxw"> +<div class="grid" style="grid-template-rows:calc(8px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(11px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="minw"> +<div class="grid" style="grid-template-rows:calc(4px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(10px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(17px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(13px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left"> +<div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(17.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(20px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +<br clear="all"> + +<div style="float:left" class="maxw"> +<div class="grid" style="grid-template-rows:calc(11px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(20px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="minw"> +<div class="grid" style="grid-template-rows:calc(7px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(7px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(17.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 calc(20px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-002.html b/layout/reftests/css-grid/grid-item-sizing-percent-002.html new file mode 100644 index 0000000000..10687dbcf5 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-sizing-percent-002.html @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Test: Testing grid item percent sizes</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/"> + <link rel="match" href="grid-item-sizing-percent-002-ref.html"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } +* { vertical-align:top; line-height:4px; } + +.grid { + display: grid; + position: relative; + float: left; + background-color: grey; + grid-template-columns: 50px 100px; + justify-items: start; + align-items: start; + clear: both; +} + +.item { + background: pink; + grid-area: 1 / 1 / 2 / 2; + background-clip: content-box; + min-width: 0; + min-height: 0; + z-index: 1; +} +.c1 { + width: 40%; + height: 60%; + grid-area: 1 / 1 / 3 / 3; +} +.c2 { + grid-area: 1 / 1 / 3 / 3; +} +.pbox { + box-sizing: border-box; +} + +.maxw .item { max-width: 50%; } +.minw .item { min-width: 50%; } + +.p { padding:3px 5px 10% 20%; } +.m { margin:3px 5px 10% 10%; } +.b { border:solid black; } + +x { display:inline-block; width:10px; height:4px; background: silver; } + +a { + grid-area: 1 / 1 / 2 / 2; + width:100%; height:100%; + background: blue; +} +</style> +</head> +<body> + +<div style="float:left"> +<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="maxw"> +<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="minw"> +<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left"> +<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +<br clear="all"> + +<div style="float:left" class="maxw"> +<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="minw"> +<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html b/layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html new file mode 100644 index 0000000000..a55dcc989e --- /dev/null +++ b/layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html @@ -0,0 +1,137 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>Reference: Testing grid item percent sizes</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } +* { vertical-align:top; line-height:4px; } + +.grid { + display: grid; + position: relative; + float: left; + background-color: grey; + grid-template-columns: 50px 100px; + justify-items: start; + align-items: start; + clear: both; +} + +.item { + background: pink; + grid-area: 1 / 1 / 2 / 2; + background-clip: content-box; + min-width: 0; + min-height: 0; + z-index: 1; + writing-mode: vertical-rl; +} +.c1 { + width: 40%; + height: 60%; + grid-area: 1 / 1 / 3 / 3; +} +.c2 { + grid-area: 1 / 1 / 3 / 3; +} +.pbox { + box-sizing: border-box; +} + +.maxw .item { max-width: 25px; } +.minw .item { min-width: 25px; } +.maxw .c1.item { max-width: 75px; } +.minw .c1.item { min-width: 75px; } +.maxw .c2.item { max-width: 75px; } +.minw .c2.item { min-width: 75px; } + +.p { padding:3px 5px 10% 10px; } +.c1.p, .c2.p { padding:3px 5px 10% 30px; } +.m { margin:3px 5px 10% 5px; } +.c1.m, .c2.m { margin:3px 5px 10% 15px; } +.b { border:solid black; } + +x { display:inline-block; width:10px; height:4px; background: silver; } + +a { + grid-area: 1 / 1 / 2 / 2; + width:100%; height:100%; + background: blue; +} +</style> +</head> +<body> + +<div style="float:left"> +<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="maxw"> +<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="minw"> +<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left"> +<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 54px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +<br clear="all"> + +<div style="float:left" class="maxw"> +<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 54px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="minw"> +<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 54px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-003.html b/layout/reftests/css-grid/grid-item-sizing-percent-003.html new file mode 100644 index 0000000000..f3f71d2cc4 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-sizing-percent-003.html @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Test: Testing grid item percent sizes</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/"> + <link rel="match" href="grid-item-sizing-percent-003-ref.html"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } +* { vertical-align:top; line-height:4px; } + +.grid { + display: grid; + position: relative; + float: left; + background-color: grey; + grid-template-columns: 50px 100px; + justify-items: start; + align-items: start; + clear: both; +} + +.item { + background: pink; + grid-area: 1 / 1 / 2 / 2; + background-clip: content-box; + min-width: 0; + min-height: 0; + z-index: 1; + writing-mode: vertical-rl; +} +.c1 { + width: 40%; + height: 60%; + grid-area: 1 / 1 / 3 / 3; +} +.c2 { + grid-area: 1 / 1 / 3 / 3; +} +.pbox { + box-sizing: border-box; +} + +.maxw .item { max-width: 50%; } +.minw .item { min-width: 50%; } + +.p { padding:3px 5px 10% 20%; } +.m { margin:3px 5px 10% 10%; } +.b { border:solid black; } + +x { display:inline-block; width:10px; height:4px; background: silver; } + +a { + grid-area: 1 / 1 / 2 / 2; + width:100%; height:100%; + background: blue; +} +</style> +</head> +<body> + +<div style="float:left"> +<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="maxw"> +<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="minw"> +<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left"> +<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +<br clear="all"> + +<div style="float:left" class="maxw"> +<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="minw"> +<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html b/layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html new file mode 100644 index 0000000000..96365b468a --- /dev/null +++ b/layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html @@ -0,0 +1,134 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>Reference: Testing grid item percent sizes</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } +* { vertical-align:top; line-height:4px; } + +.grid { + display: inline-grid; + position: relative; + background-color: grey; + grid-template-rows: 50px 100px; + justify-items: start; + align-items: start; + clear: both; +} + +.item { + background: pink; + grid-area: 1 / 1 / 2 / 2; + background-clip: content-box; + min-width: 0; + min-height: 0; + z-index: 1; + writing-mode: vertical-rl; +} +.c1 { + width: 40%; + height: 90px; + grid-area: 1 / 1 / 3 / 3; +} +.c2 { + grid-area: 1 / 1 / 3 / 3; +} +.pbox { + box-sizing: border-box; +} + +.maxw .item { max-height: 50%; } +.minw .item { min-height: 50%; } + +.p { padding:3px 5px 10% 20%; } +.m { margin:3px 5px 10% 10%; } +.b { border:solid black; } + +x { display:inline-block; width:10px; height:4px; background: silver; } + +a { + grid-area: 1 / 1 / 2 / 2; + width:100%; height:100%; + background: blue; +} +</style> +</head> +<body> + +<div style="float:left"> +<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:15px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:21px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 41px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 21px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<br clear="all"> + +<div style="float:left" class="maxw"> +<div class="grid" style="grid-template-columns:calc(30px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:35px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:calc(36px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:41px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 41px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 41px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<br clear="all"> + +<div style="float:left" class="minw"> +<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:15px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:21px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 41px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 21px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left"> +<div class="grid" style="grid-template-columns:15px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:20px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:26px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 26px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +<br clear="all"> + +<div style="float:left" class="maxw"> +<div class="grid" style="grid-template-columns:35px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:40px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:46px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 46px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="minw"> +<div class="grid" style="grid-template-columns:15px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:20px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:26px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 26px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-004.html b/layout/reftests/css-grid/grid-item-sizing-percent-004.html new file mode 100644 index 0000000000..ce2666980d --- /dev/null +++ b/layout/reftests/css-grid/grid-item-sizing-percent-004.html @@ -0,0 +1,135 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Test: Testing grid item percent sizes</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/"> + <link rel="match" href="grid-item-sizing-percent-004-ref.html"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } +* { vertical-align:top; line-height:4px; } + +.grid { + display: inline-grid; + position: relative; + background-color: grey; + grid-template-rows: 50px 100px; + justify-items: start; + align-items: start; + clear: both; +} + +.item { + background: pink; + grid-area: 1 / 1 / 2 / 2; + background-clip: content-box; + min-width: 0; + min-height: 0; + z-index: 1; + writing-mode: vertical-rl; +} +.c1 { + width: 40%; + height: 60%; + grid-area: 1 / 1 / 3 / 3; +} +.c2 { + grid-area: 1 / 1 / 3 / 3; +} +.pbox { + box-sizing: border-box; +} + +.maxw .item { max-height: 50%; } +.minw .item { min-height: 50%; } + +.p { padding:3px 5px 10% 20%; } +.m { margin:3px 5px 10% 10%; } +.b { border:solid black; } + +x { display:inline-block; width:10px; height:4px; background: silver; } + +a { + grid-area: 1 / 1 / 2 / 2; + width:100%; height:100%; + background: blue; +} +</style> +</head> +<body> + +<div style="float:left"> +<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<br clear="all"> + +<div style="float:left" class="maxw"> +<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<br clear="all"> + +<div style="float:left" class="minw"> +<div class="grid"><div class="item"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left"> +<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +<br clear="all"> + +<div style="float:left" class="maxw"> +<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +<div style="float:left" class="minw"> +<div class="grid"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-sizing-px-001.html b/layout/reftests/css-grid/grid-item-sizing-px-001.html new file mode 100644 index 0000000000..7e58d831d3 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-sizing-px-001.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Test: Testing grid item 'px' sizes</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1163435"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/"> + <link rel="match" href="grid-item-sizing-percent-001-ref.html"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + position:relative; + background-color: grey; + grid-template-columns: 50px 100px; + grid-template-rows: 20px 30px; + width: 173px; + height: 53px; +} + +.item { + width: 100%; + height: 100%; + background: lime; + grid-area: 1 / 1 / 2 / 2; + background-clip: content-box; +} +.c1 { + width: 40%; + height: 60%; + grid-area: 1 / 1 / 3 / 3; +} +.c2 { + grid-area: 1 / 1 / 3 / 3; +} +#abs > div div { + position: absolute; +} +.pbox { + box-sizing: border-box; +} + +.p { padding:2px 3px; } +.m { margin:2px 3px; } +.c1.p,.c2.p { padding:6px 9px; } +.c1.m,.c2.m { margin:6px 9px; } +.b { border:solid black; } + +</style> +</head> +<body> + +<div style="float:left"> +<div class="grid"><div class="item"></div></div> +<div class="grid"><div class="item pbox p"></div></div> +<div class="grid"><div class="item c1 p"></div></div> +<div class="grid"><div class="item c1 pbox p"></div></div> +<div class="grid"><div class="item c2 pbox p"></div></div> +<div class="grid"><div class="item pbox b"></div></div> +<div class="grid"><div class="item pbox p b"></div></div> +<div class="grid"><div class="item c1 pbox p b"></div></div> +<div class="grid"><div class="item c2 pbox p b"></div></div> +<div class="grid"><div class="item pbox m"></div></div> +<div class="grid"><div class="item c1 pbox m"></div></div> +<div class="grid"><div class="item c2 pbox m"></div></div> +<div class="grid"><div class="item pbox p m"></div></div> +<div class="grid"><div class="item pbox p b m"></div></div> +<div class="grid"><div class="item c2 pbox p b m"></div></div> +</div> + +<div id="abs" style="float:left"> +<div class="grid"><div class="item"></div></div> +<div class="grid"><div class="item pbox p"></div></div> +<div class="grid"><div class="item c1 p"></div></div> +<div class="grid"><div class="item c1 pbox p"></div></div> +<div class="grid"><div class="item c2 pbox p"></div></div> +<div class="grid"><div class="item pbox b"></div></div> +<div class="grid"><div class="item pbox p b"></div></div> +<div class="grid"><div class="item c1 pbox p b"></div></div> +<div class="grid"><div class="item c2 pbox p b"></div></div> +<div class="grid"><div class="item pbox m"></div></div> +<div class="grid"><div class="item c1 pbox m"></div></div> +<div class="grid"><div class="item c2 pbox m"></div></div> +<div class="grid"><div class="item pbox p m"></div></div> +<div class="grid"><div class="item pbox p b m"></div></div> +<div class="grid"><div class="item c2 pbox p b m"></div></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-stretch-001-ref.html new file mode 100644 index 0000000000..3f53b119d8 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-stretch-001-ref.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>Reference: align-items:stretch / justify-items:stretch </title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + position: relative; + float: left; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 1px 25px 5px / 3px 21px 1px; + padding: 1px 1px 3px 2px; + margin-right: 2px; + width: 40px; + height: 40px; + align-items: start; + justify-items: start; +} + +span { + position: absolute; + top:0;left:0;bottom:0;right:0; + grid-area: 2 / 2 / 3 / 3; /* the center area */ + display: block; + width: 17px; + height: 13px; + background: lightgrey; + /* good for manual debugging but causes anti-aliasing diff: */ + /* border-block-start: 2px solid blue; */ + /* border-inline-start: 2px solid lime; */ + border-block-start: 2px solid black; + border-inline-start: 2px solid black; + margin: 1px 1px 2px 2px; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + width:2px; height:2px; + background: black; +} +abs1 { top:auto; left:auto; } +abs2 { top:auto; right:auto; } +abs3 { bottom:auto; left:auto; } +abs4 { bottom:auto; right:auto; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.stretch1 { } +.stretch2 { height:auto; } +.stretch3 { height:auto; max-height:13px; } +.stretch4 { width:auto; } +.stretch5 { width:auto; max-width:17px; } +.stretch6 { width:auto; height:auto; max-width:17px; max-height:13px; } +.stretch7 { width:auto; height:auto; } + + </style> +</head> +<body> +<pre> +There should be no red areas. +All grey areas should have a black dot in each corner. +</pre> + + +<script> +var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " " + test[k]; + div.appendChild(span); + span.appendChild(document.createElement("abs1")); + span.appendChild(document.createElement("abs2")); + span.appendChild(document.createElement("abs3")); + span.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + if (j % 2 == 1) document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-stretch-001.html b/layout/reftests/css-grid/grid-item-stretch-001.html new file mode 100644 index 0000000000..cf5cc0fd20 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-stretch-001.html @@ -0,0 +1,117 @@ +<!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-items:stretch / justify-items:stretch </title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-items-property"> + <link rel="match" href="grid-align-content-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 1px 25px 5px / 3px 21px 1px; + padding: 1px 1px 3px 2px; + margin-right: 2px; + width: 40px; + height: 40px; + align-items: stretch; + justify-items: stretch; +} + +span { + position: relative; + grid-area: 2 / 2 / 3 / 3; /* the center area */ + display: block; + width: 17px; + height: 13px; + background: red; + /* good for manual debugging but causes anti-aliasing diff: */ + /* border-block-start: 2px solid blue; */ + /* border-inline-start: 2px solid lime; */ + border-block-start: 2px solid black; + border-inline-start: 2px solid black; + margin: 1px 1px 2px 2px; +} + +abs1,abs2,abs3,abs4 { + position: absolute; + top:0;left:0;bottom:0;right:0; + width:2px; height:2px; + background: black; +} +abs1 { top:auto; left:auto; } +abs2 { top:auto; right:auto; } +abs3 { bottom:auto; left:auto; } +abs4 { bottom:auto; right:auto; } +fill { + display: block; + width: 100%; + height: 100%; + background: lightgrey; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.stretch1 { } +.stretch2 { height:auto; } +.stretch3 { height:auto; max-height:13px; } +.stretch4 { width:auto; } +.stretch5 { width:auto; max-width:17px; } +.stretch6 { width:auto; height:auto; max-width:17px; max-height:13px; } +.stretch7 { width:auto; height:auto; } + + </style> +</head> +<body> +<pre> +There should be no red areas. +All grey areas should have a black dot in each corner. +</pre> + + +<script> +var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", + "stretch6", "stretch7" ]; +for (var i = 0; i < gridwm.length; ++i) { + for (var j = 0; j < wm.length; ++j) { + for (var k = 0; k < test.length; ++k) { + var div = document.createElement("div"); + div.className = "grid " + gridwm[i]; + var span = document.createElement("span"); + span.className = wm[j] + " " + test[k]; + div.appendChild(span); + span.appendChild(document.createElement("fill")); + span.appendChild(document.createElement("abs1")); + span.appendChild(document.createElement("abs2")); + span.appendChild(document.createElement("abs3")); + span.appendChild(document.createElement("abs4")); + + document.body.appendChild(div) + } + if (j % 2 == 1) document.body.appendChild(document.createElement("separator")); + } +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-table-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-table-stretch-001-ref.html new file mode 100644 index 0000000000..d0741801f4 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-table-stretch-001-ref.html @@ -0,0 +1,176 @@ +<!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: stretching table items with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> + <style type="text/css"> +* { vertical-align: bottom; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 32px / 4px; + margin-right:20px; + align-items: start; + justify-items: start; +} +.r { grid: 4px / 32px; } + +table { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; + min-width: 0; + min-height: 0px; +} +x { display:block; width:16px; height:16px; } + +.w20 { width: 20px } +.wfill { width:32px } +.mxw2 { width: 2px } +.mxw10 { width: 10px } +.mw20 { width: 20px } + +.h20 { height: 20px } +.hfill { height:32px } +.mxh10 { height: 10px } +.mxh2 { height: 2px } +.mh20 { height: 20px } +.h16 { height: 16px } /* XXX to workaround bug 307866 */ + + </style> +</head> +<body> + +<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as wfill"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an wfill"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><td><x></x></td></table></div> + +<pre><!--min-height:20px--></pre> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 wfill"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh20 wfill"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh20 wfill"><td><x></x></td></table></div> + +<pre><!--min-height:0--></pre> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 wfill"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh0 wfill"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh0 wfill"><td><x></x></td></table></div> + +<pre><!----></pre> + +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><td><x></x></td></table></div> + +<pre><!--min-width:20px--></pre> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20 mxh10"><td><x></x></td></table></div> + +<pre><!--min-width:0--></pre> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mw0"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw0"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw0 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa mw0"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na mw0"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0 mxh10"><td><x></x></td></table></div> + +<pre><!--width:20px--></pre> + +<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><td><x></x></td></table></div> + +<pre><!--width:20px--></pre> + +<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill sa w20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill na w20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20 mxh10"><td><x></x></td></table></div> + +<pre><!--height:20px--></pre> + +<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill h20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="start h20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="start h20 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as h20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an h20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><td><x></x></td></table></div> + +<pre><!--height:20px--></pre> + +<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start h20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start h20 mxw10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20 mxw10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><td><x></x></td></table></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-table-stretch-001.html b/layout/reftests/css-grid/grid-item-table-stretch-001.html new file mode 100644 index 0000000000..35f542fb57 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-table-stretch-001.html @@ -0,0 +1,178 @@ +<!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: stretching table items with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> + <link rel="match" href="grid-item-table-stretch-001-ref.html"> + <style type="text/css"> +* { vertical-align: bottom; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 32px / 4px; + margin-right:20px; +} +.r { grid: 4px / 32px; } + +table { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; +} +x { display:block; width:16px; height:16px; } + +.start {align-self:start; justify-self:start} +.na {align-self:normal; justify-self:start} +.sa {align-self:stretch; justify-self:start} +.an {align-self:start; justify-self:normal} +.as {align-self:start; justify-self:stretch} +.w20 { width: 20px } +.mw20 { min-width: 20px } +.mxw10 { max-width: 10px } +.mxw2 { max-width: 2px } +.mw0 { min-width: 0px } + +.h20 { height: 20px } +.mh20 { min-height: 20px } +.mxh10 { max-height: 10px } +.mxh2 { max-height: 2px } +.mh0 { min-height: 0px } + + </style> +</head> +<body> + +<div class="grid r"><table cellpadding=0 cellspacing=0><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><td><x></x></td></table></div> + +<pre><!--min-height:20px--></pre> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="start mh20 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh20"><td><x></x></td></table></div> + +<pre><!--min-height:0--></pre> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh0"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh0"><td><x></x></td></table></div> + +<pre><!----></pre> + +<div class="grid"><table cellpadding=0 cellspacing=0><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><td><x></x></td></table></div> + +<pre><!--min-width:20px--></pre> +<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20 mxh10"><td><x></x></td></table></div> + +<pre><!--min-width:0--></pre> +<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw0"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start mw0 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0 mxh10"><td><x></x></td></table></div> + +<pre><!--width:20px--></pre> + +<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><td><x></x></td></table></div> + +<pre><!--width:20px--></pre> + +<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start w20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20 mxh10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20 mxh10"><td><x></x></td></table></div> + +<pre><!--height:20px--></pre> + +<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="start h20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="start h20 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20"><td><x></x></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><td><x></x></td></table></div> + +<pre><!--height:20px--></pre> + +<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start h20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="start h20 mxw10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20 mxw10"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><td><x></x></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><td><x></x></td></table></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-table-stretch-002-ref.html b/layout/reftests/css-grid/grid-item-table-stretch-002-ref.html new file mode 100644 index 0000000000..9bb60d5d84 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-table-stretch-002-ref.html @@ -0,0 +1,199 @@ +<!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: stretching table items that has a caption with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051"> + <style type="text/css"> +* { vertical-align: bottom; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 32px / 4px; + margin-right:20px; + align-items: start; + justify-items: start; + width: 4px; +} +.r { grid: 4px / 32px; width: 32px;} +.r2 { grid: 38px / 32px; width: 32px;} +.r26 { grid-template-rows:26px; } +.r32 { grid:32px/20px; width: 20px; } +.c18 { grid:32px/18px; width: 18px; } +.r38 { grid: 38px / 4px; } + +table { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; +} +caption { border: 1px dashed blue; } +caption { justify-self: stretch; } /* XXX: Workaround bug 1350037. */ +x { display:block; width:16px; height:16px; } +t { display:block; width:6px; height:6px; } + +.w20 { width: 20px } +.mxw2 { width: 2px } +.mxw10 { width: 10px } +.mw20 { width: 20px } +.wfill { width:32px } +.w6 { width: 6px } + +.h20 { height: 20px } +.mxh10 { height: 10px } +.mxh2 { height: 2px } +.mh20 { height: 20px } +.h16 { height: 16px } /* XXX to workaround bug 307866 */ +.h8 { height: 8px } /* XXX to workaround bug 307866 */ +.w8 { width: 8px } /* XXX to workaround bug 307866 */ +.hfill { height:14px } + +.as, .an, .end { margin-top:6px; } +.sa, .na, .end { margin-left:-4px; } +.sa.mw20, .na.mw20, .end.mw20 { margin-left:-16px; } +.sa.w20, .na.w20, .end.w20 { margin-left:-16px; } +.sa caption, .na caption, .end caption { width:6px; } +.sa.mw20 caption, .na.mw20 caption, .end.mw20 caption { width:18px; } +.sa.w20 caption, .na.w20 caption, .end.w20 caption { width:18px; } +.r .as, .r .an, .r .end { margin-top:-22px; } +.as.h20, .an.h20, .end.h20 { margin-top:-6px; } +.r .as.h20, .r .an.h20, .r .end.h20 { margin-top:-34px; } +.r .sa, .r .na, .r .end { margin-left:14px; } +.r .sa.w20, .r .na.w20, .r .end.w20 { margin-left:12px; } +.r .sa caption, .r .na caption, .r .end caption { width:auto; } + </style> +</head> +<body> + +<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w8"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--min-height:20px--></pre> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill mh20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="end mh20 w8" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="sa mh20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="sa mh20 w8"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="na mh20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="na mh20 w8"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill mh20" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill mh20" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--min-height:0--></pre> +<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill mh0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="sa mh0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="sa w8 mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="na mh0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill as mh0" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill an mh0" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!----></pre> + +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill"><caption class="w6"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="" style="margin-left:-14px; margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="" style="margin-left:-14px; margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hfill" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><caption class="w6"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><caption class="w6"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div> + +<pre><!--min-width:20px--></pre> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill mw20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="mw20" style="margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="h8 mw20 mxh10" style="margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill sa mw20" style="margin-left:0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10" style="margin-left:0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill na mw20" style="margin-left:0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10" style="margin-left:0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="as mw20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="as h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an mw20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--min-width:0--></pre> +<div class="grid c18"><table cellpadding=0 cellspacing=0 class="hfill mw0"><caption><x></x></caption><td class="w20"><t></t></td></table></div> +<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><caption><x></x></caption><td class="w20"><t></t></td></table></div> +<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid c18"><table cellpadding=0 cellspacing=0 class="hfill mw0" style="margin-top:0px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:0px"><caption><x></x></caption><td class="h8"><t></t></td></table></div> +<div class="grid c18"><table cellpadding=0 cellspacing=0 class="hfill mw0" style="margin-top:0px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:0px"><caption><x></x></caption><td class="h8"><t></t></td></table></div> +<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td class="w20"><t></t></td></table></div> +<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td class="w20"><t></t></td></table></div> +<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td class="w20"><t></t></td></table></div> +<div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td class="w20"><t></t></td></table></div> + +<pre><!--width:20px--></pre> + +<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="h8 w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--width:20px--></pre> + +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="h8 as w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r32"><table cellpadding=0 cellspacing=0 class="h8 an w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--height:20px--></pre> + +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill h20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:14px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:14px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill h20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill h20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--height:20px--></pre> + +<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20"><caption class="w6"><x></x></caption><td><t></t></td></table></div> +<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div> +<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20"><caption class="w6"><x></x></caption><td><t></t></td></table></div> +<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div> +<div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20"><caption class="w6"><x></x></caption><td><t></t></td></table></div> +<div class="grid r38"><table cellpadding=0 cellspacing=0 class="w8 h20 mxw10"><caption class="w6"><x></x></caption><td><t></t></td></table></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-table-stretch-002.html b/layout/reftests/css-grid/grid-item-table-stretch-002.html new file mode 100644 index 0000000000..792091b3fd --- /dev/null +++ b/layout/reftests/css-grid/grid-item-table-stretch-002.html @@ -0,0 +1,180 @@ +<!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: stretching table items that has a caption with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> + <link rel="match" href="grid-item-table-stretch-002-ref.html"> + <style type="text/css"> +* { vertical-align: bottom; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: minmax(auto,32px) / minmax(auto,4px); + margin-right:20px; +} +.r { grid: minmax(auto,4px) / minmax(auto,32px); } + +table { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; +} +caption { border: 1px dashed blue; } +x { display:block; width:16px; height:16px; } +t { display:block; width:6px; height:6px; } + +.end {align-self:end; justify-self:end} +.na { justify-self:end} +.sa {align-self:stretch; justify-self:end} +.an {align-self:end; } +.as {align-self:end; justify-self:stretch} +.w20 { width: 20px } +.mw20 { min-width: 20px } +.mxw10 { max-width: 10px } +.mxw2 { max-width: 2px } +.mw0 { min-width: 0px } + +.h20 { height: 20px } +.mh20 { min-height: 20px } +.mxh10 { max-height: 10px } +.mxh2 { max-height: 2px } +.mh0 { min-height: 0px } + + </style> +</head> +<body> + +<div class="grid r"><table cellpadding=0 cellspacing=0><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--min-height:20px--></pre> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="end mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh20"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--min-height:0--></pre> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as mh0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an mh0"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!----></pre> + +<div class="grid"><table cellpadding=0 cellspacing=0><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="mxw2"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="end"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="end mxw2"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mxw2"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--min-width:20px--></pre> +<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--min-width:0--></pre> +<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="end mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an mw0 mxh10"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--width:20px--></pre> + +<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--width:20px--></pre> + +<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--height:20px--></pre> + +<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="as h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid r"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> + +<pre><!--height:20px--></pre> + +<div class="grid"><table cellpadding=0 cellspacing=0 class="h20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="end h20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="end h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="sa h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="na h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="as h20 mxw2"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="an h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-table-stretch-004-ref.html b/layout/reftests/css-grid/grid-item-table-stretch-004-ref.html new file mode 100644 index 0000000000..970cae2f06 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-table-stretch-004-ref.html @@ -0,0 +1,67 @@ +<!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: stretching table items with auto-margins and/or orthogonal writing-mode</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051"> + <style type="text/css"> +* { vertical-align: top; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 60px / 100px; + padding: 10px 4px 3px 6px; +} + +table { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; +} +caption { border: 1px dashed blue;} +x { display:block; width:16px; height:16px; } +t { display:block; width:20px; height:20px; } + +.hma10 { margin: 7px 3px 1px 0; } +.hmaa { margin: 7px 0 1px 0; } +.vma10 { margin: 0 7px 3px 1px; } +.vmaa { margin: 0 7px 0 1px; } + +.js { justify-self: start; } +.je { justify-self: end; } +.jc { justify-self: center; } +.as { align-self: start; } +.ae { align-self: end; } +.ac { align-self: center; } + +.vr { writing-mode: vertical-rl; } + </style> +</head> +<body> + +<div class="grid"><table cellpadding=0 cellspacing=0 class="hma10 je"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hmaa jc"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr hma10 je"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr hmaa jc"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:82px"><caption><x></x></caption><td><t></t></td></table></div> + +<div class="grid"><table cellpadding=0 cellspacing=0 class="vma10 ae"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vmaa ac"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr vma10 ae"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr vmaa ac"><caption><x></x></caption><td><t></t></td></table></div> + +<div class="grid"><table cellpadding=0 cellspacing=0 style="height:34px; width:100px"><caption class="hma10 js"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 style="height:34px; width:100px"><caption class="hmaa js"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 style="height:39px; width:100px"><caption class="vma10"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 style="height:42px; width:100px"><caption class="vmaa"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:79px"><caption class="hma10"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:82px"><caption class="hmaa"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:74px"><caption class="vma10 js"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr" style="height:60px; width:74px"><caption class="vmaa js"><x></x></caption><td><t></t></td></table></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-table-stretch-004.html b/layout/reftests/css-grid/grid-item-table-stretch-004.html new file mode 100644 index 0000000000..e6e8a96bb2 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-table-stretch-004.html @@ -0,0 +1,62 @@ +<!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: stretching table items with auto-margins and/or orthogonal writing-mode</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> + <link rel="match" href="grid-item-table-stretch-004-ref.html"> + <style type="text/css"> +* { vertical-align: top; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 10px 60px 3px / 6px 100px 4px; +} + +table { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; + grid-area:2/2; +} +caption { border: 1px dashed blue;} +x { display:block; width:16px; height:16px; } +t { display:block; width:20px; height:20px; } + +.hma10 { margin: 7px 3px 1px auto; } +.hmaa { margin: 7px auto 1px auto; } +.vma10 { margin: auto 7px 3px 1px; } +.vmaa { margin: auto 7px auto 1px; } + +.vr { writing-mode: vertical-rl; } + </style> +</head> +<body> + +<div class="grid"><table cellpadding=0 cellspacing=0 class="hma10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="hmaa"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr hma10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr hmaa"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption><x></x></caption><td><t></t></td></table></div> + +<div class="grid"><table cellpadding=0 cellspacing=0 class="vma10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vmaa"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr vma10"><caption><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr vmaa"><caption><x></x></caption><td><t></t></td></table></div> + +<div class="grid"><table cellpadding=0 cellspacing=0><caption class="hma10"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0><caption class="hmaa"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0><caption class="vma10"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0><caption class="vmaa"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption class="hma10"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption class="hmaa"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption class="vma10"><x></x></caption><td><t></t></td></table></div> +<div class="grid"><table cellpadding=0 cellspacing=0 class="vr"><caption class="vmaa"><x></x></caption><td><t></t></td></table></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-video-stretch-001-ref.html b/layout/reftests/css-grid/grid-item-video-stretch-001-ref.html new file mode 100644 index 0000000000..419fcab61a --- /dev/null +++ b/layout/reftests/css-grid/grid-item-video-stretch-001-ref.html @@ -0,0 +1,77 @@ +<!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: video items with auto-margins and/or orthogonal writing-mode</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051"> + <style type="text/css"> +* { vertical-align: top; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 50px / 100px; + padding: 10px 4px 3px 6px; +} + +video { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; + width: 16px; + height: 8px; +} + +.m { margin: 7px 3px 1px 5px; } +.p { padding: 3px 1px 5px 7px; } +.hma10 { margin: 7px 3px 1px 0; } +.hmaa { margin: 7px 0 1px 0; } +.vma10 { margin: 0 7px 3px 1px; } +.vmaa { margin: 0 7px 0 1px; } + +.js { justify-self: start; } +.je { justify-self: end; } +.jc { justify-self: center; } +.as { align-self: start; } +.ae { align-self: end; } +.ac { align-self: center; } + +.vr { writing-mode: vertical-rl; } + </style> +</head> +<body> + +<div class="grid"><video class="m" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="hma10 je" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="hmaa jc" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr hma10 je" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr hmaa jc" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr" src="support/colors-16x8.webm"></div> + +<div class="grid"><video class="vma10 ae" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vmaa ac" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr vma10 ae" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr vmaa ac" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr p vma10 ae" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr p vmaa ac" src="support/colors-16x8.webm"></div> + +<div class="grid"><video class="mxw m" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw hma10 je" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw hmaa jc" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw vr hma10 je" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw vr hmaa jc" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw vr" src="support/colors-16x8.webm"></div> + +<div class="grid"><video class="mxh m" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh hma10 je" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh hmaa jc" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh vr hma10 je" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh vr hmaa jc" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh vr" src="support/colors-16x8.webm"></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-video-stretch-001.html b/layout/reftests/css-grid/grid-item-video-stretch-001.html new file mode 100644 index 0000000000..f5416da26e --- /dev/null +++ b/layout/reftests/css-grid/grid-item-video-stretch-001.html @@ -0,0 +1,71 @@ +<!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: video items with auto-margins and/or orthogonal writing-mode</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> + <link rel="match" href="grid-item-video-stretch-001-ref.html"> + <style type="text/css"> +* { vertical-align: top; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 10px 50px 3px / 6px 100px 4px; +} + +video { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; + grid-area: 2/2; +} + +.m { margin: 7px 3px 1px 5px; } +.p { padding: 3px 1px 5px 7px; } +.hma10 { margin: 7px 3px 1px auto; } +.hmaa { margin: 7px auto 1px auto; } +.vma10 { margin: auto 7px 3px 1px; } +.vmaa { margin: auto 7px auto 1px; } +.mxw { max-width: 32px; } +.mxh { max-height: 16px; } + +.vr { writing-mode: vertical-rl; } + </style> +</head> +<body> + +<div class="grid"><video class="m" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="hma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="hmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr hma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr hmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr" src="support/colors-16x8.webm"></div> + +<div class="grid"><video class="vma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr vma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr vmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr p vma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr p vmaa" src="support/colors-16x8.webm"></div> + +<div class="grid"><video class="mxw m" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw hma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw hmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw vr hma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw vr hmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw vr" src="support/colors-16x8.webm"></div> + +<div class="grid"><video class="mxh m" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh hma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh hmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh vr hma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh vr hmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh vr" src="support/colors-16x8.webm"></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-video-stretch-002-ref.html b/layout/reftests/css-grid/grid-item-video-stretch-002-ref.html new file mode 100644 index 0000000000..6e6070e98d --- /dev/null +++ b/layout/reftests/css-grid/grid-item-video-stretch-002-ref.html @@ -0,0 +1,113 @@ +<!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: stretching video items with auto-margins and/or orthogonal writing-mode</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051"> + <style type="text/css"> +* { vertical-align: top; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 50px / 100px; + padding: 10px 4px 3px 6px; +} + +video { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; + width: 16px; + height: 8px; +} + +.m { margin: 7px 3px 1px 5px; } +.p { padding: 3px 1px 5px 7px; } +.hma10 { margin: 7px 3px 1px 0; } +.hmaa { margin: 7px 0 1px 0; } +.vma10 { margin: 0 7px 3px 1px; } +.vmaa { margin: 0 7px 0 1px; } + +.js { justify-self: start; } +.je { justify-self: end; } +.jc { justify-self: center; } +.as { align-self: start; } +.ae { align-self: end; } +.ac { align-self: center; } + +.vr { writing-mode: vertical-rl; } + </style> +</head> +<body> + +<div class="grid"><video class="m" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="hma10 je" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="hmaa jc" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr hma10 je" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr hmaa jc" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr" src="support/colors-16x8.webm"></div> + +<div class="grid"><video class="vma10 ae" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vmaa ac" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr vma10 ae" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr vmaa ac" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr p vma10 ae" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr p vmaa ac" src="support/colors-16x8.webm"></div> + +<div class="grid"><video class="mxw m" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw hma10 je" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw hmaa jc" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw vr hma10 je" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw vr hmaa jc" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw vr" src="support/colors-16x8.webm"></div> + +<div class="grid"><video class="mxh m" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh hma10 je" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh hmaa jc" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh vr hma10 je" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh vr hmaa jc" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh vr" src="support/colors-16x8.webm"></div> + +<script> +var sizes = +[ + ['90px', '40px'], + ['16px', '40px'], + ['16px', '40px'], + ['16px', '40px'], + ['16px', '40px'], + ['98px', '48px'], + ['90px', '8px'], + ['90px', '8px'], + ['90px', '8px'], + ['90px', '8px'], + ['82px', '8px'], + ['82px', '8px'], + ['32px', '40px'], + ['16px', '40px'], + ['16px', '40px'], + ['16px', '40px'], + ['16px', '40px'], + ['32px', '48px'], + ['90px', '16px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '16px'], + ['16px', '16px'], + ['98px', '16px'], +]; +var items = document.querySelectorAll('video') +for (var i = 0; i < items.length; ++i) { + let item = items[i]; + item.style.width = sizes[i][0]; + item.style.height = sizes[i][1]; +} + +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-item-video-stretch-002.html b/layout/reftests/css-grid/grid-item-video-stretch-002.html new file mode 100644 index 0000000000..e8a628b323 --- /dev/null +++ b/layout/reftests/css-grid/grid-item-video-stretch-002.html @@ -0,0 +1,91 @@ +<!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: stretching video items with auto-margins and/or orthogonal writing-mode</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> + <link rel="match" href="grid-item-video-stretch-002-ref.html"> + <style type="text/css"> +* { vertical-align: top; } +.grid { + display: inline-grid; + border: 3px solid grey; + grid: 10px 50px 3px / 6px 100px 4px; + align-items: stretch; + justify-items: stretch; +} + +video { + border: 1px solid; + padding: 0; + margin: 0; + background: lightgrey; + grid-area: 2/2; +} + +.m { margin: 7px 3px 1px 5px; } +.p { padding: 3px 1px 5px 7px; } +.hma10 { margin: 7px 3px 1px auto; } +.hmaa { margin: 7px auto 1px auto; } +.vma10 { margin: auto 7px 3px 1px; } +.vmaa { margin: auto 7px auto 1px; } +.mxw { max-width: 32px; } +.mxh { max-height: 16px; } + +.vr { writing-mode: vertical-rl; } + </style> +</head> +<body> + +<div class="grid"><video class="m" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="hma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="hmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr hma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr hmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr" src="support/colors-16x8.webm"></div> + +<div class="grid"><video class="vma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr vma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr vmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr p vma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="vr p vmaa" src="support/colors-16x8.webm"></div> + +<div class="grid"><video class="mxw m" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw hma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw hmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw vr hma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw vr hmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxw vr" src="support/colors-16x8.webm"></div> + +<div class="grid"><video class="mxh m" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh hma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh hmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh vr hma10" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh vr hmaa" src="support/colors-16x8.webm"></div> +<div class="grid"><video class="mxh vr" src="support/colors-16x8.webm"></div> + +<!-- +<script> +function test() { +document.body.clientHeight; +var videos = document.querySelectorAll('video'); +var s = ' [\n'; +for (var i = 0; i < videos.length; ++i) { + let cs = window.getComputedStyle(videos[i]) + s += " ['"+ cs.width + "', '" + cs.height + "'],\n"; +} +s += ']'; +console.log(s) +} + +setTimeout(test,2000) +</script> +--> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-justify-content-001-ref.html b/layout/reftests/css-grid/grid-justify-content-001-ref.html new file mode 100644 index 0000000000..5e43a86bb4 --- /dev/null +++ b/layout/reftests/css-grid/grid-justify-content-001-ref.html @@ -0,0 +1,92 @@ +<!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: justify-content</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 3px 5px 7px / 11px 7px 5px; + padding: 1px 1px 3px 2px; + margin-right: 4px; + width: 40px; + height: 40px; +} + +item1,item2,item3 { + display: block; + position: relative; + background: grey; + align-self: stretch; + justify-self: stretch; +} + +item1 { grid-area: 1 / 1; } +item2 { grid-area: 2 / 2; } +item3 { grid-area: 3 / 3; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.jend * , .jflexend * { inset-inline-start:17px; } +.jcenter * { inset-inline-start:8.5px; } +.hr.jleft * , .vlr.jleft * { inset-inline-start:17px; } +.hl.jright * , .vrl.jright * , .vl.jright * , .vr.jright * { inset-inline-start:17px; } + +.jspace-between item2 { inset-inline-start:8.5px; } +.jspace-between item3 { inset-inline-start:17px; } + +.jspace-around item1 { inset-inline-start:2.85px; } +.jspace-around item2 { inset-inline-start:8.5px; } +.jspace-around item3 { inset-inline-start:14.16px; } + +.jspace-evenly item1 { inset-inline-start:4.25px; } +.jspace-evenly item2 { inset-inline-start:8.5px; } +.jspace-evenly item3 { inset-inline-start:12.75px; } + +.jstretch2 { grid-template-columns:1fr 7px 5px; } +.jstretch3 { grid-template-columns:19.5px 15.5px 5px; } +.jstretch4 { grid-template-columns:16.66666px 12.66666px 10.66666px; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "space-between", "space-around", "space-evenly", + "stretch1", "stretch2", "stretch3", "stretch4" ]; +for (var k = 0; k < test.length; ++k) { + for (var i = 0; i < gridwm.length; ++i) { + var div = document.createElement("div"); + div.className = "grid j" + test[k] + " " + gridwm[i]; + div.appendChild(document.createElement("item1")); + div.appendChild(document.createElement("item2")); + div.appendChild(document.createElement("item3")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-justify-content-001.html b/layout/reftests/css-grid/grid-justify-content-001.html new file mode 100644 index 0000000000..b86dadb13e --- /dev/null +++ b/layout/reftests/css-grid/grid-justify-content-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: justify-content</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> + <link rel="match" href="grid-justify-content-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 3px 5px 7px / 11px 7px 5px; + padding: 1px 1px 3px 2px; + margin-right: 4px; + width: 40px; + height: 40px; +} + +item1,item2,item3 { + display: block; + background: grey; + align-self: stretch; + justify-self: stretch; +} + +item1 { grid-area: 1 / 1; } +item2 { grid-area: 2 / 2; } +item3 { grid-area: 3 / 3; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.jstart { justify-content:start; } +.jend { justify-content:end; } +.jflexstart { justify-content:flex-start; } +.jflexend { justify-content:flex-end; } +.jcenter { justify-content:center; } +.jleft { justify-content:left; } +.jright { justify-content:right; } + +.jspace-between{ justify-content:space-between; } +.jspace-around { justify-content:space-around; } +.jspace-evenly { justify-content:space-evenly; } + +.jstretch1, .jstretch2, .jstretch3, .jstretch4 { justify-content:stretch; } +.jstretch2 { grid-template-columns: minmax(11px,auto) 7px 5px; } +.jstretch3 { grid-template-columns: minmax(11px,auto) minmax(7px,auto) 5px; } +.jstretch4 { grid-template-columns: minmax(11px,auto) minmax(7px,auto) minmax(5px,auto); } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "space-between", "space-around", "space-evenly", + "stretch1", "stretch2", "stretch3", "stretch4" ]; +for (var k = 0; k < test.length; ++k) { + for (var i = 0; i < gridwm.length; ++i) { + var div = document.createElement("div"); + div.className = "grid j" + test[k] + " " + gridwm[i]; + div.appendChild(document.createElement("item1")); + div.appendChild(document.createElement("item2")); + div.appendChild(document.createElement("item3")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-justify-content-002-ref.html b/layout/reftests/css-grid/grid-justify-content-002-ref.html new file mode 100644 index 0000000000..996ef2a9d8 --- /dev/null +++ b/layout/reftests/css-grid/grid-justify-content-002-ref.html @@ -0,0 +1,62 @@ +<!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: Testing track distribution rounding errors</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-rows: 7px; + border: 1px solid blue; + background: black; +} + +x { background: lime; height:7px; } + + </style> +</head> +<body> + +<script> +var justify = [ "" ]; +var cols = [ "151", "1" ]; +var widths = [ "151", "152", "153", "154", "155", "156", "157", "158", "159", + "160", "161", "301", "302", "303", "304", "305", "306", "307", + "308", "309", "310", "311" ]; +for (var c = 0; c < cols.length; ++c) { + var chunk = document.createElement('div'); + chunk.setAttribute("style", "float:left; margin:1px;"); + for (var j = 0; j < justify.length; ++j) { + for (var w = 0; w < widths.length; ++w) { + var grid = document.createElement('div'); + grid.style.width = widths[w]+"px"; + if (widths[w] > 300) { + grid.style.gridTemplateColumns = "2px " + (widths[w]-4) + "px 2px"; + } else { + grid.style.gridTemplateColumns = "1px " + (widths[w]-2) + "px 1px"; + } + grid.className = "grid " + justify[j]; + if (cols[c] > 1) { + var x = document.createElement('x'); + x.style.gridColumn = "2 / 3"; + x.setAttribute('col', cols[c]) + grid.appendChild(x); + } + chunk.appendChild(grid); + } + } + document.body.appendChild(chunk); +} +document.body.style.display = ""; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-justify-content-002.html b/layout/reftests/css-grid/grid-justify-content-002.html new file mode 100644 index 0000000000..73220d041c --- /dev/null +++ b/layout/reftests/css-grid/grid-justify-content-002.html @@ -0,0 +1,67 @@ +<!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: Testing track distribution rounding errors</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> + <link rel="match" href="grid-justify-content-002-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-columns: minmax(1px,auto); + grid-template-rows: 0px 7px; + border: 1px solid blue; +} +.stretch { justify-content: stretch; } +/* I don't know how to make a reference for these so they are only included to + trigger possible assertions: */ +.space-between { justify-content: space-between; visibility:hidden; } +.space-around { justify-content: space-around; visibility:hidden; } +.space-evenly { justify-content: space-evenly; visibility:hidden; } + +.grid :last-child, .grid :nth-child(2) { background:black; } + +x { background: lime; height:7px; } + + </style> +</head> +<body> + +<script> +var justify = [ "stretch", "space-between", "space-around", "space-evenly" ]; +var cols = [ "151", "1" ]; +var widths = [ "151", "152", "153", "154", "155", "156", "157", "158", "159", + "160", "161", "301", "302", "303", "304", "305", "306", "307", + "308", "309", "310", "311" ]; +for (var c = 0; c < cols.length; ++c) { + var chunk = document.createElement('div'); + chunk.setAttribute("style", "float:left; margin:1px"); + for (var j = 0; j < justify.length; ++j) { + for (var w = 0; w < widths.length; ++w) { + var grid = document.createElement('div'); + grid.style.width = widths[w]+"px"; + grid.className = "grid " + justify[j]; + var span = document.createElement('span'); + span.style.gridColumn = "1 / span " + cols[c]; + grid.appendChild(span); + for (var x = 0; x < cols[c]; ++x) { + grid.appendChild(document.createElement('x')); + } + chunk.appendChild(grid); + } + } + document.body.appendChild(chunk); +} +document.body.style.display = ""; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-justify-content-003-ref.html b/layout/reftests/css-grid/grid-justify-content-003-ref.html new file mode 100644 index 0000000000..466fa5cded --- /dev/null +++ b/layout/reftests/css-grid/grid-justify-content-003-ref.html @@ -0,0 +1,119 @@ +<!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: Testing track fallback values</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-columns: minmax(1px,auto); + grid-template-rows: 0px 7px; + border: 2px solid black; + float: left; + margin-right: 20px; +} + +.grid :last-child { background:grey; } +.grid :nth-child(2) { background:pink; } + +x { background: lime; height:7px; } + + </style> +</head> +<body> + +<script> +document.body.style.display = "none"; +var justify = [ + "start", + // "end", + // "center", + // "start", + // "end", + "start", + "start", + "start", + "start", + "end", + "center", + "start", + // "end", + // "start", + // "end safe", + // "end", + "center", + // "center", + // "end", + // "end safe", + // "start", + "center", + // "end", + // "end safe", + // "left", + // "end", +]; +var cols = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9" ]; +var widths = [ "0", "1", "2", "3", "4", "5", "6" ]; +for (var j = 0; j < justify.length; ++j) { + // document.body.appendChild(document.createTextNode(justify[j])); // for debugging + var chunk = document.createElement('div'); + chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden"); + for (var c = 0; c < cols.length; ++c) { + for (var w = 0; w < widths.length; ++w) { + // set this to true if you want to see all tests + var run_test = widths[w] < cols[c] || cols[c] == 0 || cols[c] == 1; + if (run_test) { + var grid = document.createElement('div'); + grid.style.width = widths[w]+"px"; + grid.className = "grid"; + grid.style.justifyContent = justify[j]; + var span = document.createElement('span'); + span.style.gridColumn = "1 / span " + cols[c]; + grid.appendChild(span); + for (var x = 0; x < cols[c]; ++x) { + grid.appendChild(document.createElement('x')); + } + // if (j < 5) { // The stretch tests. + if (j < 1) { // The stretch test. + if (c == 1) + grid.style.background = 'pink' + } + // if (j == 6 && cols[c] == 1) { // The 'safe end' tests. + if (j == 2 && cols[c] == 1) { // The 'safe end' tests. + if (widths[w] != 0) grid.style.justifyContent = 'end'; + } + // if (j == 7 && cols[c] == 1) { // The 'safe center' tests. + if (j == 3 && cols[c] == 1) { // The 'safe center' tests. + if (widths[w] != 0) grid.style.justifyContent = 'center'; + } + // if (j > 15) { // The space-around and space-evenly tests. + if (j > 7) { // The space-around and space-evenly tests. + if (cols[c] == 1) { + if (widths[w] == 0) { + if (grid.style.justifyContent != 'end') { + grid.style.justifyContent = 'start'; + } + } else { + grid.style.justifyContent = 'center'; + } + } + } + chunk.appendChild(grid); + } + } + } + document.body.appendChild(chunk); +} +document.body.style.display = ""; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-justify-content-003.html b/layout/reftests/css-grid/grid-justify-content-003.html new file mode 100644 index 0000000000..a2a7b445da --- /dev/null +++ b/layout/reftests/css-grid/grid-justify-content-003.html @@ -0,0 +1,100 @@ +<!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: Testing 'justify-content' fallback values</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> + <link rel="match" href="grid-justify-content-003-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-columns: minmax(1px,auto); + grid-template-rows: 0px 7px; + border: 2px solid black; + float: left; + margin-right: 20px; +} + +.grid :last-child { background:grey; } +.grid :nth-child(2) { background:pink; } + +x { background: lime; height:7px; } + + </style> +</head> +<body> + +<script> +document.body.style.display = "none"; +var justify = [ + "stretch", + // FIXME: When https://github.com/w3c/csswg-drafts/issues/1002 is implemented. + // "stretch end", + // "stretch center", + // "stretch safe end", + // "stretch unsafe end", + "safe start", + "safe end", + "safe center", + "unsafe start", + "unsafe end", + "unsafe center", + "space-between", + // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 + // "space-between end", + // "space-between start", + // "space-between safe end", + // "space-between unsafe end", + "space-around", + // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 + // "space-around center", + // "space-around right", + // "space-around safe right", + // "space-around left", + "space-evenly", + // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 + // "space-evenly flex-end", + // "space-evenly safe flex-end", + // "space-evenly unsafe flex-start", + // "space-evenly right", +]; +var cols = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9" ]; +var widths = [ "0", "1", "2", "3", "4", "5", "6" ]; +for (var j = 0; j < justify.length; ++j) { + // document.body.appendChild(document.createTextNode(justify[j])); // for debugging + var chunk = document.createElement('div'); + chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden"); + for (var c = 0; c < cols.length; ++c) { + for (var w = 0; w < widths.length; ++w) { + // set this to true if you want to see all tests + var run_test = widths[w] < cols[c] || cols[c] == 0 || cols[c] == 1; + if (run_test) { + var grid = document.createElement('div'); + grid.style.width = widths[w]+"px"; + grid.className = "grid"; + grid.style.justifyContent = justify[j]; + var span = document.createElement('span'); + span.style.gridColumn = "1 / span " + cols[c]; + grid.appendChild(span); + for (var x = 0; x < cols[c]; ++x) { + grid.appendChild(document.createElement('x')); + } + chunk.appendChild(grid); + } + } + } + document.body.appendChild(chunk); +} +document.body.style.display = ""; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-001-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-001-ref.html new file mode 100644 index 0000000000..57332222e2 --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-001-ref.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: Testing track flex max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: block; + border: dashed blue; + float: left; + clear: left; +} + +.c1 { grid-column: 1 / span 2; min-width:40px; } +.r1 { grid-column: 2 / span 3; min-width:70px; margin-left:38px; } +.c3 { grid-column: 3 / span 1; min-width:0; margin-left:138px; } + +span { + display: block; + float: left; + clear: left; + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 1px 5px; + justify-self: flex-start; +} + +x { display:inline-block; width:10px; height:18px; } + </style> +</head> +<body> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1" style="width:73px"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:46px"><x></x></span> +<span class="r1" style="margin-left:41px; width:82px"><x></x></span> +<span class="c3" style="margin-left:77px; "><x></x></span> +</div> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1" style="width:73px"><x></x></span> +<span class="r1" style="width:73px"><x></x></span> +<span class="r1" style="width:73px"><x></x></span> +</div> +<div class="grid" style=""> +<span class="c1" style="width:410px"><x></x></span> +<span class="r1" style="margin-left:41px; width:446px"><x></x></span> +<span class="c3" style="margin-left:441px;"><x></x></span> +</div> + +<div class="grid" style="width:500px;"> +<span class="c1" style="width:224px"><x></x></span> +<span class="r1" style="margin-left:130px; width:349px"><x></x></span> +<span class="r1" style="margin-left:130px; width:349px"><x></x></span> +<span class="r1" style="margin-left:130px; width:349px"><x></x></span> +</div> + +<div class="grid" style=""> +<span class="c1" style="width:510px"><x></x></span> +<span class="r1" style="margin-left:41px; width:546px"><x></x></span> +<span class="c3" style="margin-left:541px;"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px"><x></x></span> +<span class="r1" style="margin-left:114px; width:300px"><x></x></span> +<span class="c3" style="margin-left:222px; width:83px"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span> +<span class="r1" style="margin-left:114px; width:300px; border-sizing:border-box"><x></x></span> +<span class="c3" style="margin-left:222px; width:83px"><x></x></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-001.html b/layout/reftests/css-grid/grid-max-sizing-flex-001.html new file mode 100644 index 0000000000..56adb9e681 --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-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: Testing track flex max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks"> + <link rel="match" href="grid-max-sizing-flex-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + grid-auto-columns: minmax(0,1fr); + border: dashed blue; + float: left; + clear: left; + justify-items: stretch; +} + +.c1 { grid-column: 1 / span 2; min-width:40px; } +.r1 { grid-column: 2 / span 3; min-width:70px; } +.c3 { grid-column: 3 / span 1; min-width:0; } + +span { + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 1px 5px; +} + +x { display:inline-block; width:10px; height:18px; } + </style> +</head> +<body> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +</div> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="r1"><x></x></span> +<span class="r1"><x></x></span> +</div> +<div class="grid" style="grid-template-columns: minmax(0,1fr) 400px;"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid" style="width:500px;"> +<span class="c1" style="min-width:20px"><x></x></span> +<span class="r1" style="min-width:10px"><x></x></span> +<span class="r1" style="min-width:30px"><x></x></span> +<span class="r1" style="min-width:10px"><x></x></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,500px);"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px"><x></x></span> +<span class="r1" style="width:300px"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span> +<span class="r1" style="width:300px; border-sizing:border-box"><x></x></span> +<span class="c3"><x></x></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-002-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-002-ref.html new file mode 100644 index 0000000000..cc2e665f1d --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-002-ref.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: Testing track flex max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +body { width: 800px; } +.grid { + display: block; + border: dashed blue; + clear: left; +} + +.c1 { grid-column: 1 / span 2; min-width:40px; margin-top:1px; } +.r1 { grid-column: 2 / span 3; min-width:70px; margin-left:38px; } +.c3 { grid-column: 3 / span 1; min-width:0; margin-left:138px; } + +span { + display: block; + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 2px 5px 1px 5px; + justify-self: flex-start; +} + +x { display:inline-block; width:10px; height:18px; } + </style> +</head> +<body> + +<div class="grid"> +<span class="c1" style="width:371px"><x></x></span> +<span class="r1" style="margin-left:204px;"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:371px"><x></x></span> +<span class="r1" style="margin-left:204px;"><x></x></span> +<span class="c3" style="margin-left:402px; width:173px"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:371px"><x></x></span> +<span class="r1" style="margin-left:204px;"><x></x></span> +<span class="r1" style="margin-left:204px;"><x></x></span> +<span class="r1" style="margin-left:204px;"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:505px"><x></x></span> +<span class="r1" style="margin-left:136px;"><x></x></span> +<span class="c3" style="margin-left:536px; width:106px"><x></x></span> +</div> + +<div class="grid" style="width:500px;"> +<span class="c1" style="width:224px"><x></x></span> +<span class="r1" style="margin-left:130px; width:349px"><x></x></span> +<span class="r1" style="margin-left:130px; width:349px"><x></x></span> +<span class="r1" style="margin-left:130px; width:349px"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:572px"><x></x></span> +<span class="r1" style="margin-left:103px;"><x></x></span> +<span class="c3" style="margin-left:603px; width:72px"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px"><x></x></span> +<span class="r1" style="margin-left:204px; width:300px"><x></x></span> +<span class="c3" style="margin-left:402px; width:173px"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px"><x></x></span> +<span class="r1" style="margin-left:204px; width:300px"><x></x></span> +<span class="c3" style="margin-left:402px; width:173px"><x></x></span> +</div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-002.html b/layout/reftests/css-grid/grid-max-sizing-flex-002.html new file mode 100644 index 0000000000..d86498207a --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-002.html @@ -0,0 +1,89 @@ +<!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: Testing track flex max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks"> + <link rel="match" href="grid-max-sizing-flex-002-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +body { width: 800px; } +.grid { + display: grid; + grid-auto-columns: minmax(0,1fr); + border: dashed blue; + justify-items: stretch; +} + +.c1 { grid-column: 1 / span 2; min-width:40px; } +.r1 { grid-column: 2 / span 3; min-width:70px; } +.c3 { grid-column: 3 / span 1; min-width:0; } + +span { + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 1px 5px; +} + +x { display:inline-block; width:10px; height:18px; } + </style> +</head> +<body> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +</div> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="r1"><x></x></span> +<span class="r1"><x></x></span> +</div> +<div class="grid" style="grid-template-columns: minmax(0,1fr) 400px;"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid" style="width:500px;"> +<span class="c1" style="min-width:20px"><x></x></span> +<span class="r1" style="min-width:10px"><x></x></span> +<span class="r1" style="min-width:30px"><x></x></span> +<span class="r1" style="min-width:10px"><x></x></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,500px);"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px"><x></x></span> +<span class="r1" style="width:300px"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span> +<span class="r1" style="width:300px; border-sizing:border-box"><x></x></span> +<span class="c3"><x></x></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-003-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-003-ref.html new file mode 100644 index 0000000000..bb6c3390c8 --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-003-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>CSS Grid Test: Testing track flex max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } + +body { width: 800px; } +.grid { + display: block; + border: 3px dashed blue; + width: 794px; +} + +.c1 { min-height:40px; margin-top:1px; } +.r1 { min-height:70px; margin-top:38px; } +.c3 { min-height:0; margin-top:138px; } + +.gc1 { grid-row: 1 / span 2; min-height:40px; } +.gr1 { grid-row: 2 / span 3; min-height:70px; } +.gc3 { grid-row: 3 / span 1; min-height:0; } + +span { + display: block; + background: gray; + border-style: solid; + border-height: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 1px 5px; + justify-self: flex-start; +} + +td { + vertical-align:top; +} +x { display:inline-block; height:10px; width:18px; } + </style> +</head> +<body> + +<div class="grid"> +<table cellpadding="0" cellspacing="0"><tr> +<td><span class="c1" style="height:43px"><x> </x></span> +<td><span class="r1" style="margin-top:28px;margin-left:5px"><x> </x></span> +</tr></table> +</div> + +<div class="grid"> +<table cellpadding="0" cellspacing="0"><tr> +<td><span class="c1" style="display:inline-block; margin-left:5px; height:43px"><x> </x></span> +<td rowspan="2"><span class="r1" style="margin-left:5px; margin-top:27px;"><x> </x></span> +<tr><td><span class="c3" style="margin-left:5px; margin-top:-52px; height:17px"><x> </x></span> +</tr></table> +</div> + +<div class="grid"> +<table cellpadding="0" cellspacing="0"><tr> +<td><span class="c1" style="height:44px"><x> </x></span> +<td><span class="r1" style="margin-top:28px;"><x> </x></span> +<td><span class="r1" style="margin-top:28px;"><x> </x></span> +<td><span class="r1" style="margin-top:28px;"><x> </x></span> +</tr></table> +</div> + +<div class="grid" style="height:100px;"> +<table cellpadding="0" cellspacing="0"><tr> +<td><span class="c1" style="height:40px"><x> </x></span> +<td><span class="r1" style="margin-top:26px; min-height:65px;"><x> </x></span> +<td><span class="r1" style="margin-top:26px; min-height:65px"><x> </x></span> +<td><span class="r1" style="margin-top:26px; min-height:65px"><x> </x></span> +</tr></table> +</div> + +<div class="grid"> +<table cellpadding="0" cellspacing="0"><tr> +<td><span class="c1" style="display:inline-block; margin-left:5px; height:40px"><x> </x></span> +<td rowspan="2"><span class="r1" style="margin-left:5px; margin-top:28px;"><x> </x></span> +<tr><td><span class="c3" style="margin-left:5px; margin-top:-53px; height:17px"><x> </x></span> +</tr></table> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-003.html b/layout/reftests/css-grid/grid-max-sizing-flex-003.html new file mode 100644 index 0000000000..83244c85ae --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-003.html @@ -0,0 +1,74 @@ +<!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: Testing track flex max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks"> + <link rel="match" href="grid-max-sizing-flex-003-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } + +body { width: 800px; } +.grid { + display: grid; + grid-auto-rows: minmax(0,1fr); + border: 3px dashed blue; + justify-items: stretch; + justify-content: start; + align-content: start; +} + +.c1 { grid-row: 1 / span 2; min-height:40px; } +.r1 { grid-row: 2 / span 3; min-height:70px; } +.c3 { grid-row: 3 / span 1; min-height:0; } + +span { + background: gray; + border-style: solid; + border-height: 1px 3px 5px 7px; + padding: 1px 3px; + margin: 1px 5px; +} + +x { display:inline-block; height:10px; width:18px; } + </style> +</head> +<body> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +</div> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="c3"><x></x></span> +</div> + +<div class="grid"> +<span class="c1"><x></x></span> +<span class="r1"><x></x></span> +<span class="r1"><x></x></span> +<span class="r1"><x></x></span> +</div> + +<div class="grid" style="height:100px;"> +<span class="c1" style="min-height:20px"><x></x></span> +<span class="r1" style="min-height:10px"><x></x></span> +<span class="r1" style="min-height:30px"><x></x></span> +<span class="r1" style="min-height:10px"><x></x></span> +</div> + +<div class="grid"> +<span class="c1" style="height:30px; border-sizing:border-box"><x></x></span> +<span class="r1" style="height:40px; border-sizing:border-box"><x></x></span> +<span class="c3"><x></x></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html new file mode 100644 index 0000000000..b0ac02bf5e --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html @@ -0,0 +1,120 @@ +<!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: Testing track sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } + +body { width: 800px; } +.grid { + display: block; + border: 3px dashed blue; + margin-bottom:20px; + float: left; + clear: left; + position:relative; +} + +.c1 { min-height:20px; min-width:10px; } +.c2 { min-height:20px; min-width:10px; } +.c3 { min-height:0; min-width:20px; } +.r1 { min-height:10px; } +.x1 { min-height:10px; min-width:0px; border-style:none; } + +span { + display: block; + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; + justify-self: flex-start; +} + +x { display:inline-block; height:10px; width:18px; } + </style> +</head> +<body> + +<div class="grid flex" style="width:0;height:0;"></div> +<div class="grid flex" style="width:1px;height:1px;"></div> +<div class="grid mm" style="width:0;height:0;"></div> +<div class="grid mm" style="width:1px;height:1px;"></div> +<div class="grid zero" style="width:0;height:0;"></div> +<div class="grid zero" style="width:1px;height:1px;"></div> +<!-- TODO: fails due to broken align:stretch +<div class="grid flex" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2" style="position:relative;top:0px;width:0;min-height:0;height:1px;min-width:0;border-width:0 0 0 10px;z-index:1;"><x></x></span></div> + +<div class="grid flex" style="width:1px;height:1px;"><span class="c1" style="margin-top:1px"><x></x></span></div> +--> + +<div class="grid mm" style="width:0;height:0;"><span class="c1" style="min-width:18px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div> +<div class="grid mm" style="width:1px;height:1px;"><span class="c1" style="min-width:18px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div> +<!-- TODO: fails due to broken align:stretch +<div class="grid zero" style="width:0;height:0;"><span class="c1"><x></x></span></div> +<div class="grid zero" style="width:1px;height:1px;"><span class="c1"><x></x></span></div> +--> + +<div class="grid flex"> +<span class="c1 r1"><x></x></span> +</div> + +<div class="grid flex10"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:0.010px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:0.020px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:0.040px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:0.15px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:0.18px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:0.19px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:1px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:2px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:3px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:4px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:5px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:6px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:7px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:8px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:9px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:10px; clear:none;"> +<span class="x1"></span></div> + +<div class="grid flex10" style="width:11px; clear:none;"> +<span class="x1"></span></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-004.html b/layout/reftests/css-grid/grid-max-sizing-flex-004.html new file mode 100644 index 0000000000..dd3813b516 --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-004.html @@ -0,0 +1,173 @@ +<!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: Testing track sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-track-sizing"> + <link rel="match" href="grid-max-sizing-flex-004-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } + +body { width: 800px; } +.grid { + display: grid; + border: 3px dashed blue; + margin-bottom:20px; + float: left; + clear: left; +} +.flex { + grid-auto-rows: minmax(0,1fr); + grid-auto-columns: minmax(0,1fr); +} +.flex10 { + grid-auto-rows: minmax(0,1fr); + grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) + minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) + minmax(0,1fr) minmax(0,1fr); +} +.mm { + grid-auto-rows: minmax(min-content,max-content); + grid-auto-columns: minmax(min-content,max-content); +} +.zero { + grid-auto-rows: minmax(0,0); + grid-auto-columns: minmax(0,0); +} + +.c1 { grid-column: 1 / span 2; min-height:10px; min-width:0px; } +.c2 { grid-column: 2 / span 3; min-height:20px; min-width:10px; } +.c3 { grid-column: 3 / span 1; min-height:0; min-width:20px; } +.r1 { grid-row: 1; } +.x1 { grid-row: 1; min-height:10px; min-width:0px; border-style:none; } + +span { + background: gray; + border-style: solid; + border-width: 1px 3px 5px 7px; +} + +x { display:inline-block; height:10px; width:18px; } + </style> +</head> +<body> + +<div class="grid flex" style="width:0;height:0;"></div> +<div class="grid flex" style="width:1px;height:1px;"></div> +<div class="grid mm" style="width:0;height:0;"></div> +<div class="grid mm" style="width:1px;height:1px;"></div> +<div class="grid zero" style="width:0;height:0;"></div> +<div class="grid zero" style="width:1px;height:1px;"></div> + +<!-- TODO: fails due to broken align:stretch +<div class="grid flex" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div> +<div class="grid flex" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div> +--> +<div class="grid mm" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div> +<div class="grid mm" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div> +<!-- TODO: fails due to broken align:stretch +<div class="grid zero" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div> +<div class="grid zero" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div> +--> + +<div class="grid flex"> +<span class="c1 r1"><x></x></span><span class="c1 r1"><x></x></span> +<span class="c1 r1"><x></x></span><span class="c1 r1"><x></x></span> +</div> + +<div class="grid flex10"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:0.010px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:0.020px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:0.040px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:0.15px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:0.18px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:0.19px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:1px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:2px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:3px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:4px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:5px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:6px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:7px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:8px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:9px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:10px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +<div class="grid flex10" style="width:11px; clear:none;"> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-005-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-005-ref.html new file mode 100644 index 0000000000..38d054fc74 --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-005-ref.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: Testing track flex max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks"> + <link rel="match" href="grid-max-sizing-flex-005-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } + +.grid { + display: grid; + grid-auto-rows: 12px; + border: 3px dashed blue; + width: 720px; +} + +.c1 { grid-column: 1 / span 2; } +.r1 { grid-column: 2 / span 3; } +.c3 { grid-column: 3 / span 1; } + +span { + min-height:8px; + background: gray; + padding: 1px 3px; + margin: 1px 5px; + justify-self: flex-start; +} + + </style> +</head> +<body> + +<div class="grid" style="grid-template-columns: 80px 160px 240px 160px 80px;"> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-columns: 72px 144px 216px 144px 72px;"> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-columns: 400px 80px 120px 80px 40px;"> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-columns: 400px 80px 120px 80px 40px;"> +<span class="c1"></span> +<span class="c1"></span> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-columns: 400px 320px 0 0 0;"> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-columns: 0 400px 0 0 322px;"> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-columns: 0 0 0 0 722px;"> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<!-- test some extreme flex values: --> + +<div class="grid" style="grid-template-columns: minmax(10px,0fr);"> +<span class="c1"></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(10px,1fr);"> +<span class="c1"></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(10px,0.000000000000000000000000001fr);"> +<span class="c1"></span> +</div> + +<div class="grid" style="width:794px; grid-template-columns: minmax(10px,0fr);"> +<span class="c1"></span> +</div> + +<div class="grid" style="width:794px; grid-template-columns: minmax(10px,1fr);"> +<span class="c1"></span> +</div> + +<div class="grid" style="width:794px; grid-template-columns: minmax(10px,0.000000000000000000000000001fr);"> +<span class="c1"></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-005.html b/layout/reftests/css-grid/grid-max-sizing-flex-005.html new file mode 100644 index 0000000000..a4f3947044 --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-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: Testing track flex max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks"> + <link rel="match" href="grid-max-sizing-flex-005-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } + +body { width: 800px; } +.grid { + display: grid; + grid-auto-rows: minmax(0,1fr); + border: 3px dashed blue; + width: 720px; +} + +.c1 { grid-column: 1 / span 2; min-height:8px; } +.r1 { grid-column: 2 / span 3; } +.c3 { grid-column: 3 / span 1; } + +span { + background: gray; + padding: 1px 3px; + margin: 1px 5px; + justify-self: flex-start; +} + + </style> +</head> +<body> + +<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr) minmax(0,0.2fr) minmax(0,0.1fr) ;"> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> +<span class="c1"></span> +<span class="c1"></span> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(320px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(400px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(322px,1fr) ;"> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(722px,1fr) ;"> +<span class="c1"></span> +<span class="r1"></span> +<span class="c3"></span> +</div> + +<!-- test some extreme flex values: --> + +<div class="grid" style="grid-template-columns: minmax(10px,9999999999999999999999999999999999999999999999999999999fr);"> +<span class="c1"></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(10px,99999999999999999999999999999999999fr);"> +<span class="c1"></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(10px,0.000000000000000000000000001fr);"> +<span class="c1"></span> +</div> + +<div class="grid" style="width:auto; grid-template-columns: minmax(10px,9999999999999999999999999999999999999999999999999999999fr);"> +<span class="c1"></span> +</div> + +<div class="grid" style="width:auto; grid-template-columns: minmax(10px,99999999999999999999999999999999999fr);"> +<span class="c1"></span> +</div> + +<div class="grid" style="width:auto; grid-template-columns: minmax(10px,0.000000000000000000000000001fr);"> +<span class="c1"></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-006-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-006-ref.html new file mode 100644 index 0000000000..855bcba5ee --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-006-ref.html @@ -0,0 +1,81 @@ +<!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: Testing track flex max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } + +.grid { + display: grid; + grid-auto-columns: 40px; + border: 3px dashed blue; + width: 720px; +} + +.c1 { grid-row: 1 / span 2; } +.c2 { grid-row: 2 / span 3; } +.c3 { grid-row: 3 / span 1; } + +span { + background: gray; + padding: 1px 3px; + margin: 1px 5px; + min-height: 5px; + justify-self: flex-start; +} + + </style> +</body> +<head> + +<div class="grid" style="grid-template-rows: 3px 6px 9px 6px 3px;"> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-rows: 0.9px 1.8px 2.7px 1.8px 0.9px;"> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-rows: 9px 18px 27px 18px 9px;"> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-rows: 9px 18px 27px 18px 9px;"> +<span class="c1"></span> +<span class="c1"></span> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;"> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;"> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;"> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-006.html b/layout/reftests/css-grid/grid-max-sizing-flex-006.html new file mode 100644 index 0000000000..7ecf57e79c --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-006.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>CSS Grid Test: Testing track flex max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks"> + <link rel="match" href="grid-max-sizing-flex-006-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } + +.grid { + display: grid; + grid-auto-columns: 40px; + border: 3px dashed blue; + width: 720px; +} + +.c1 { grid-row: 1 / span 2; } +.c2 { grid-row: 2 / span 3; } +.c3 { grid-row: 3 / span 1; } + +span { + background: gray; + padding: 1px 3px; + margin: 1px 5px; + min-height: 5px; + justify-self: flex-start; +} + + </style> +</body> +<head> + +<div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-rows: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr) minmax(0,0.2fr) minmax(0,0.1fr) ;"> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-rows: minmax(9px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-rows: minmax(9px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> +<span class="c1"></span> +<span class="c1"></span> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-rows: minmax(18px,1fr) minmax(9px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;"> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(9px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(18px,1fr) ;"> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +<div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(18px,1fr) ;"> +<span class="c1"></span> +<span class="c2"></span> +<span class="c3"></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-007-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-007-ref.html new file mode 100644 index 0000000000..b17a1cc02e --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-007-ref.html @@ -0,0 +1,134 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<!DOCTYPE html> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track flex max-sizing with min/max</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1309407"> + <style type="text/css"> +.grid { + display: grid; + border:1px dashed; + margin: 3px; +} +.rows { + float: left; + grid: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; + grid-row-gap: 33px; +} +.cols { + display: inline-grid; + grid: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); + grid-column-gap: 33px; +} + +.item:nth-child(1) { background-color: purple; } +.item:nth-child(2) { background-color: blue; } + +.w70 { width: 70px; } +.w90 { width: 90px; } +.h70 { height: 70px; } +.h90 { height: 90px; } +</style> + +</head><body> + +<!-- + NOTE: The resulting size (in the relevant axis) is 83px for all tests below + in the "If the free space is an indefinite length" algo here: + https://drafts.csswg.org/css-grid/#algo-flex-tracks + These tests verifies that we then also apply min/max sizes per the spec: + "If using this flex fraction would cause the grid to be smaller than the grid + container’s min-width/height (or larger than the grid container’s max-width/ + height), then redo this step, treating the free space as definite and the + available grid space as equal to the grid container’s content box size when + it’s sized to its min-width/height (max-width/height)." +--> + +<pre>These grids should look the same:</pre> +<div class="grid rows h70" style="max-height:70px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows h70" style="min-height:70px; max-height:60px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows h70" style="height:70px"> + <div class="item"></div> + <div class="item"></div> +</div> + +<br clear="all"> + +<pre>These grids should look the same:</pre> +<div class="grid rows h90" style="min-height:90px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows h90" style="min-height:90px; max-height:60px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows h90" style="height:90px"> + <div class="item"></div> + <div class="item"></div> +</div> + +<br clear="all"> + +<pre>These grids should look the same:</pre> +<div class="grid cols w70" style="max-width:70px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid cols w70" style="min-width:70px; max-width:60px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid cols w70" style="width:70px"> + <div class="item"></div> + <div class="item"></div> +</div> + +<pre>These grids should look the same:</pre> +<div class="grid cols w90" style="min-width:90px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid cols w90" style="min-width:90px; max-width:60px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid cols w90" style="width:90px"> + <div class="item"></div> + <div class="item"></div> +</div> + +<pre>The first 6 grids should look the same:</pre> +<div class="grid rows" style="grid: 1fr / 30px; height:83px"> + <div class="item"></div> +</div> +<div class="grid rows" style="grid: 10px 1fr / 30px; height:83px"> + <div class="item" style="grid-row:span 2"></div> +</div> +<div class="grid rows" style="grid: 1fr / 30px; height:83px"> + <div class="item"></div> +</div> +<div class="grid rows" style="grid: 1fr 1fr / 30px; height:83px"> + <div class="item" style="grid-row:span 2"><div style="height:90px"></div></div> +</div> +<div class="grid rows" style="grid: 1fr auto / 30px; height:83px"> + <div class="item" style="grid-row:span 2"><div style="height:90px"></div></div> +</div> +<div class="grid rows" style="grid: 10px 1fr / 30px; height:83px"> + <div class="item" style="grid-row:span 2"><div style="height:90px"></div></div> +</div> +<div class="grid rows" style="grid: 1fr 1fr / 30px; grid-row-gap:10px; height:83px"> + <div class="item" style="grid-row:span 2"><div style="height:40px"></div></div> + <div class="item"><div style="height:40px"></div></div> +</div> + +</body></html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-007.html b/layout/reftests/css-grid/grid-max-sizing-flex-007.html new file mode 100644 index 0000000000..a2f39e95be --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-007.html @@ -0,0 +1,132 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<!DOCTYPE html> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track flex max-sizing with min/max</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1309407"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks"> + <link rel="match" href="grid-max-sizing-flex-007-ref.html"> + <style type="text/css"> +.grid { + display: grid; + border:1px dashed; + margin: 3px; +} +.rows { + float: left; + grid: minmax(10px, 1fr) minmax(10px, 4fr) / 50px; + grid-row-gap: 33px; +} +.cols { + display: inline-grid; + grid: 50px / minmax(10px, 1fr) minmax(10px, 4fr); + grid-column-gap: 33px; +} + +.item:nth-child(1) { background-color: purple; } +.item:nth-child(2) { background-color: blue; } + +</style> + +</head><body> + +<!-- + NOTE: The resulting size (in the relevant axis) is 83px for all tests below + in the "If the free space is an indefinite length" algo here: + https://drafts.csswg.org/css-grid/#algo-flex-tracks + These tests verifies that we then also apply min/max sizes per the spec: + "If using this flex fraction would cause the grid to be smaller than the grid + container’s min-width/height (or larger than the grid container’s max-width/ + height), then redo this step, treating the free space as definite and the + available grid space as equal to the grid container’s content box size when + it’s sized to its min-width/height (max-width/height)." +--> + +<pre>These grids should look the same:</pre> +<div class="grid rows" style="max-height:70px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows" style="min-height:70px; max-height:60px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows" style="height:70px"> + <div class="item"></div> + <div class="item"></div> +</div> + +<br clear="all"> + +<pre>These grids should look the same:</pre> +<div class="grid rows" style="min-height:90px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows" style="min-height:90px; max-height:60px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows" style="height:90px"> + <div class="item"></div> + <div class="item"></div> +</div> + +<br clear="all"> + +<pre>These grids should look the same:</pre> +<div class="grid cols" style="max-width:70px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid cols" style="min-width:70px; max-width:60px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid cols" style="width:70px"> + <div class="item"></div> + <div class="item"></div> +</div> + +<pre>These grids should look the same:</pre> +<div class="grid cols" style="min-width:90px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid cols" style="min-width:90px; max-width:60px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid cols" style="width:90px"> + <div class="item"></div> + <div class="item"></div> +</div> + +<pre>The first 6 grids should look the same:</pre> +<div class="grid rows" style="grid: 1fr / 30px; min-height:83px"> + <div class="item"></div> +</div> +<div class="grid rows" style="grid: 10px 1fr / 30px; min-height:83px"> + <div class="item" style="grid-row:span 2"></div> +</div> +<div class="grid rows" style="grid: 1fr / 30px; max-height:30px; min-height:83px"> + <div class="item"></div> +</div> +<div class="grid rows" style="grid: 1fr 1fr / 30px; max-height:83px"> + <div class="item" style="grid-row:span 2"><div style="height:90px"></div></div> +</div> +<div class="grid rows" style="grid: 1fr auto / 30px; max-height:83px"> + <div class="item" style="grid-row:span 2"><div style="height:90px"></div></div> +</div> +<div class="grid rows" style="grid: 10px 1fr / 30px; max-height:83px"> + <div class="item" style="grid-row:span 2"><div style="height:90px"></div></div> +</div> +<div class="grid rows" style="grid: 1fr 1fr / 30px; grid-row-gap:10px; max-height:83px"> + <div class="item" style="grid-row:span 2"><div style="height:40px"></div></div> + <div class="item"><div style="height:40px"></div></div> +</div> + +</body></html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-008-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-008-ref.html new file mode 100644 index 0000000000..6deb8f3c89 --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-008-ref.html @@ -0,0 +1,111 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<!DOCTYPE html> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track flex max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1309407"> + <style type="text/css"> +.grid { + display: grid; + border:1px dashed; + margin: 3px; +} +.rows { + float: left; + grid: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; + grid-row-gap: 33px; +} +.rows-min { + float: left; + grid: 10px 10px / 50px; + grid-row-gap: 33px; +} +.cols { + display: inline-grid; + grid: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); + grid-column-gap: 33px; +} +.cols-min { + display: inline-grid; + grid: 50px / 10px 10px; + grid-column-gap: 33px; +} + +.item:nth-child(1) { background-color: purple; } +.item:nth-child(2) { background-color: blue; } + +.w70 { width: 70px; } +.w90 { width: 90px; } +.h70 { height: 70px; } +.h90 { height: 90px; } +</style> + +</head><body> + +<pre>First four are without min/max-sizes:</pre> +<div style="float:left"> +<div class="grid rows"> + <div class="item"></div> + <div class="item"></div> +</div> +</div> +<div style="height:100px; margin-bottom:-100px"> + <div class="grid rows"> + <div class="item"></div> + <div class="item"></div> + </div> +</div> +<div style="display:inline-block; width:73px; margin-right:-2px"> + <div class="grid cols"> + <div class="item"></div> + <div class="item"></div> + </div> +</div> +<div class="grid cols-min" style="width:53px"> + <div class="item"></div> + <div class="item"></div> +</div> + +<br clear="all"> + +<pre>Max-size less than grid-gap:</pre> +<div class="grid rows-min" style="height:0px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows-min" style="max-height:0px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows-min" style="height:20px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows-min" style="max-height:20px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows-min" style="height:33px"> + <div class="item"></div> + <div class="item"></div> +</div> + +<br clear="all" style="margin-top:40px; "> + +<div class="grid cols-min" style="width:20px; margin-right:30px;"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid cols-min" style="width:20px; margin-right:30px;"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid cols-min" style="width:33px; margin-right:30px;"> + <div class="item"></div> + <div class="item"></div> +</div> + +</body></html> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-008.html b/layout/reftests/css-grid/grid-max-sizing-flex-008.html new file mode 100644 index 0000000000..437615a2e2 --- /dev/null +++ b/layout/reftests/css-grid/grid-max-sizing-flex-008.html @@ -0,0 +1,97 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<!DOCTYPE html> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track flex max-sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1309407"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks"> + <link rel="match" href="grid-max-sizing-flex-008-ref.html"> + <style type="text/css"> +.grid { + display: grid; + border:1px dashed; + margin: 3px; +} +.rows { + float: left; + grid: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; + grid-row-gap: 33px; +} +.cols { + display: inline-grid; + grid: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); + grid-column-gap: 33px; +} + +.item:nth-child(1) { background-color: purple; } +.item:nth-child(2) { background-color: blue; } + +</style> + +</head><body> + +<pre>First four are without min/max-sizes:</pre> +<div class="grid rows"> + <div class="item"></div> + <div class="item"></div> +</div> +<div style="height:0"> + <div class="grid rows"> + <div class="item"></div> + <div class="item"></div> + </div> +</div> +<div class="grid cols"> + <div class="item"></div> + <div class="item"></div> +</div> +<div style="display:inline-block; width:0"> + <div class="grid cols"> + <div class="item"></div> + <div class="item"></div> + </div> +</div> + +<br clear="all"> + +<pre>Max-size less than grid-gap:</pre> +<div class="grid rows" style="height:0px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows" style="max-height:0px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows" style="height:20px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows" style="max-height:20px"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid rows" style="height:33px"> + <div class="item"></div> + <div class="item"></div> +</div> + +<br clear="all" style="margin-top:40px; "> + +<div class="grid cols" style="max-width:20px; margin-right:30px;"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid cols" style="width:20px; margin-right:30px;"> + <div class="item"></div> + <div class="item"></div> +</div> +<div class="grid cols" style="width:33px; margin-right:30px;"> + <div class="item"></div> + <div class="item"></div> +</div> + +</body></html> diff --git a/layout/reftests/css-grid/grid-measuring-reflow-resize-001-ref.html b/layout/reftests/css-grid/grid-measuring-reflow-resize-001-ref.html new file mode 100644 index 0000000000..ab6732819c --- /dev/null +++ b/layout/reftests/css-grid/grid-measuring-reflow-resize-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<title>Testcase simplified from layout/reftests/css-grid/grid-min-max-content-sizing-002.html</title> +<style type="text/css"> + +html { overflow: hidden } +body { margin: 0 } + +div { + display: inline-block; + border: 1px solid fuchsia; +} + +span { + display: block; + border: 4px solid blue; + padding: 0 8px 8px 0; + margin: 0 -8px -8px 0; +} + +</style> + +<div> + <span>blue should overflow fuchsia on right/bottom</span> +</div> diff --git a/layout/reftests/css-grid/grid-measuring-reflow-resize-dynamic-001.html b/layout/reftests/css-grid/grid-measuring-reflow-resize-dynamic-001.html new file mode 100644 index 0000000000..43a5791991 --- /dev/null +++ b/layout/reftests/css-grid/grid-measuring-reflow-resize-dynamic-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<title>Testcase simplified from layout/reftests/css-grid/grid-min-max-content-sizing-002.html</title> +<style type="text/css"> + +html { overflow: hidden } +body { margin: 0 } + +.grid { + display: grid; + grid-template-columns: minmax(min-content,max-content); + grid-template-rows: minmax(min-content,max-content); +} + +.grid > div { + border: 1px solid fuchsia; +} + +span { + display: block; + border: 4px solid blue; + width: 100%; + height: 100%; +} + +</style> + +<div class="grid"> + <div> + <span id="s"></span> + </div> +</div> + +<script> +var s = document.getElementById("s"); +s.offsetWidth; // flush layout +s.textContent = "blue should overflow fuchsia on right/bottom"; +</script> diff --git a/layout/reftests/css-grid/grid-measuring-reflow-resize-static-001.html b/layout/reftests/css-grid/grid-measuring-reflow-resize-static-001.html new file mode 100644 index 0000000000..2cb510c918 --- /dev/null +++ b/layout/reftests/css-grid/grid-measuring-reflow-resize-static-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<title>Testcase simplified from layout/reftests/css-grid/grid-min-max-content-sizing-002.html</title> +<style type="text/css"> + +html { overflow: hidden } +body { margin: 0 } + +.grid { + display: grid; + grid-template-columns: minmax(min-content,max-content); + grid-template-rows: minmax(min-content,max-content); +} + +.grid > div { + border: 1px solid fuchsia; +} + +span { + display: block; + border: 4px solid blue; + width: 100%; + height: 100%; +} + +</style> + +<div class="grid"> + <div> + <span>blue should overflow fuchsia on right/bottom</span> + </div> +</div> + diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-001-ref.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-001-ref.html new file mode 100644 index 0000000000..4d8a60bcc4 --- /dev/null +++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-001-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testing track 'min-content' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom:1em; +} + +.col { grid-auto-rows:10px; } +.col img { min-height:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var coltest = [ +"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px", +"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px", +"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px", +"min-height:4px", "min-height:4px; max-width: 30px" +]; +var results = [ +"48px", "48px", "12px", "12px", "12px", "360px", "80px", "12px", "20px", "12px", +"6px", "48px", "30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-columns:min-content")); +document.body.appendChild(h3); +for (var i = 0; i < coltest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid col"); + grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-24x2.png"); + img.setAttribute("style",coltest[i] + "; min-width:"+ results[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-001.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-001.html new file mode 100644 index 0000000000..a2e6223c91 --- /dev/null +++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-001.html @@ -0,0 +1,59 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track 'min-content' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-min-content-min-sizing-transferred-size-001-ref.html"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom: 1em; +} + +.col { grid-template-columns:min-content; grid-auto-rows:10px; } +.col img { min-height:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var coltest = [ +"height:30px; max-width:48px", "height:30px; width:48px", "height:30px; width:12px", +"width:12px", "max-width:12px", "height:30px", "height:4px; width:80px", "height:1px", +"height:1px; width:20px", "max-height:1px", "max-height:1px; max-width:6px", +"min-height:4px", "min-height:4px; max-width: 30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-columns:min-content")); +document.body.appendChild(h3); +for (var i = 0; i < coltest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid col"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-24x2.png"); + img.setAttribute("style",coltest[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002-ref.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002-ref.html new file mode 100644 index 0000000000..c05d93ecf0 --- /dev/null +++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testing track 'min-content' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom:1em; +} + +.col { grid-template-columns:minmax(auto,0); grid-auto-rows:10px; } +.col img { min-height:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var coltest = [ +"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%", +"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%", +"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px", +"min-height:40%", "min-height:40%; max-width:30px" +]; +var results = [ +"0", "0", "0", "0", "0", "360px", "80px", "24px", "20px", "24px", +"6px", "24px", "24px" +]; +var item_width = [ +"0px", "0px", "0px", "0px", "0px", "360px", "80px", "60px", "20px", "24px", +"6px", "48px", "30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-columns:min-content")); +document.body.appendChild(h3); +for (var i = 0; i < coltest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid col"); + grid.setAttribute("style","grid-template-columns:minmax("+results[i]+",0)"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-24x2.png"); + img.setAttribute("style",coltest[i] + "; width:"+ item_width[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002.html new file mode 100644 index 0000000000..fb51a13de5 --- /dev/null +++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-002.html @@ -0,0 +1,60 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track 'min-content' min-sizing function with 'min-width:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-min-content-min-sizing-transferred-size-002-ref.html"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom: 1em; +} + +.col { grid-template-columns:min-content; grid-auto-rows:10px; } +.col img { min-height:0; } + +br { clear:both; } + + </style> +</head> +<body> + + +<script> +var coltest = [ +"height:30px; max-width:200%", "height:30px; width:200%", "height:30px; width:50%", +"width:50%", "max-width:50%", "height:30px", "height:200%; width:80px", "height:50%", +"height:50%; width:20px", "max-height:50%", "max-height:50%; max-width:6px", +"min-height:40%", "min-height:40%; max-width:30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-columns:min-content")); +document.body.appendChild(h3); +for (var i = 0; i < coltest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid col"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-24x2.png"); + img.setAttribute("style",coltest[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("24x2.png -- "+coltest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003-ref.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003-ref.html new file mode 100644 index 0000000000..9fa82283c1 --- /dev/null +++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testing track 'min-content' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom:1em; +} + +.row { } +.row img { min-width:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var coltest = [ +"12px", "12px", "4px", "1px", "2px", "1px", "1px", "1px", "1px", "3px", "5px" +]; +var rowtest = [ +"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px", +"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px", +"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px" +]; +var results = [ +"48px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-rows:min-content")); +document.body.appendChild(h3); +for (var i = 0; i < rowtest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid row"); + grid.setAttribute("style","grid:minmax("+results[i]+",0) / " + coltest[i]); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-2x24.png"); + img.setAttribute("style",rowtest[i] + "; min-height:"+ results[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003.html new file mode 100644 index 0000000000..2c5cca3ba7 --- /dev/null +++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-003.html @@ -0,0 +1,58 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track 'min-content' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-min-content-min-sizing-transferred-size-003-ref.html"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom: 1em; +} + +.row { grid-template-rows:min-content; } +.row img { min-width:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var rowtest = [ +"width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px", +"height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px", +"width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-rows:min-content")); +document.body.appendChild(h3); +for (var i = 0; i < rowtest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid row"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-2x24.png"); + img.setAttribute("style",rowtest[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004-ref.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004-ref.html new file mode 100644 index 0000000000..04d047b836 --- /dev/null +++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testing track 'min-content' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } +body { overflow:hidden; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom:1em; +} + +.row { } +.row img { min-width:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var rowtest = [ +"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%", +"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px", +"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%" +]; +var results = [ +"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "312px/52px" +]; +var item_height = [ +"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-rows:min-content")); +document.body.appendChild(h3); +for (var i = 0; i < rowtest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid row"); + grid.setAttribute("style","grid:" + results[i]); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-2x24.png"); + img.setAttribute("style",rowtest[i] + "; max-height:auto; height:"+ item_height[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004.html b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004.html new file mode 100644 index 0000000000..e12ac9d671 --- /dev/null +++ b/layout/reftests/css-grid/grid-min-content-min-sizing-transferred-size-004.html @@ -0,0 +1,59 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + https://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Testing track 'min-content' min-sizing function with 'min-height:auto' on an item with an intrinsic aspect ratio</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> + <link rel="match" href="grid-min-content-min-sizing-transferred-size-004-ref.html"> + <style type="text/css"> +html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } +body { overflow:hidden; } + +.grid { + display: grid; + float: left; + border: 1px solid; + align-items: start; + justify-items: start; + margin-bottom: 1em; +} + +.row { grid-template-rows:min-content; } +.row img { min-width:0; } + +br { clear:both; } + + </style> +</head> +<body> + +<script> +var rowtest = [ +"width:50%; max-height:200%", "width:50%; height:200%", "width:4px; height:50%", +"height:50%", "max-height:200%", "max-height:50%", "max-width:50%", "width:50%; height:20px", +"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%" +]; + +var h3 = document.createElement('h3'); +h3.appendChild(document.createTextNode("grid-template-rows:min-content")); +document.body.appendChild(h3); +for (var i = 0; i < rowtest.length; ++i) { + var grid = document.createElement('div'); + grid.setAttribute("class","grid row"); + var img = document.createElement('img'); + img.setAttribute("src","support/lime-2x24.png"); + img.setAttribute("style",rowtest[i]); + grid.appendChild(img); + document.body.appendChild(document.createTextNode("2x24.png -- "+rowtest[i]+'\n')); + document.body.appendChild(document.createElement('br')); + document.body.appendChild(grid); + document.body.appendChild(document.createElement('br')); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-min-max-content-sizing-001-ref.html b/layout/reftests/css-grid/grid-min-max-content-sizing-001-ref.html new file mode 100644 index 0000000000..608dc25f50 --- /dev/null +++ b/layout/reftests/css-grid/grid-min-max-content-sizing-001-ref.html @@ -0,0 +1,98 @@ +<!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: Testing grid minmax(min-content,max-content) column/rows</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } + +.grid { + display: block; + border: 2px solid green; + overflow: hidden; + clear: both; +} +.float { float:left; clear:both; border: 2px dashed blue;} + +span { + background: lime; + border-style: solid; + border-width: 1px 3px 5px 7px; + float: left; +} + +x10 { display:inline-block; width:10px; height:10px; background:yellow; } +x30 { display:inline-block; width:30px; height:30px; background:cyan; } +.c2,.r2 { width:20px; height:20px; background: silver; } +.r2 { background: pink; } +.c1 { margin: 1px 3px 5px 7px; } +.v { + writing-mode:vertical-lr; + -webkit-writing-mode:vertical-lr; +} + </style> +</head> +<body> + +<div class="grid"> +<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="clear:left"></span> +</div> +<div class="grid"> +<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="clear:left"></span> +</div> +<div class="grid float"> +<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="clear:left"></span> +</div> +<div class="grid float"> +<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="clear:left"></span> +</div> + +<div class="grid"> +<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="clear:left"></span> +</div> +<div class="grid"> +<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="clear:left"></span> +</div> +<div class="grid float v"> +<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2" style="background:pink"></span> +<span class="r2" style="clear:left;background:silver"></span> +</div> +<div class="grid float v"> +<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2" style="background:pink"></span> +<span class="r2" style="clear:left;background:silver"></span> +</div> + +<div class="grid float v" style="padding-bottom:4px"> +<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="clear:left;"></span> +</div> + +<div class="grid" style="position:relative"> +<span class="c1 v" style="min-width:100px;"><x10>X</x10><x30>y</x30><x10 style="visibility:hidden">z</x10></span> +<span class="c1" style="min-width:50px;margin-left:-113px; border:none; padding:1px 3px 5px 7px; background:none"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c1" style="min-width:10px;max-width:10px;margin-left:-113px"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="clear:left"></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-min-max-content-sizing-001.html b/layout/reftests/css-grid/grid-min-max-content-sizing-001.html new file mode 100644 index 0000000000..ea4337d02d --- /dev/null +++ b/layout/reftests/css-grid/grid-min-max-content-sizing-001.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: Testing grid minmax(min-content,max-content) column/rows</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content"> + <link rel="match" href="grid-min-max-content-sizing-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } + +.grid { + display: grid; + border: 2px solid green; + grid-template-columns: minmax(min-content,max-content) 30px; + grid-template-rows: minmax(min-content,max-content); + clear: both; +} +.float { float:left; clear:both; border: 2px dashed blue; } +.flex-min { + grid-template-columns: minmax(1fr,max-content) 30px; + grid-template-rows: minmax(1fr,max-content); +} + +span { + background: lime; + border-style: solid; + border-width: 1px 3px 5px 7px; + grid-row: 1; +} + +x10 { display:inline-block; width:10px; height:10px; background:yellow; } +x30 { display:inline-block; width:30px; height:30px; background:cyan; } +.c2,.r2 { width:20px; height:20px; background: silver; } +.r2 { background: pink; } +.c1 { margin: 1px 3px 5px 7px; grid-column:1; } +.v { + writing-mode:vertical-lr; + -webkit-writing-mode:vertical-lr; +} + </style> +</head> +<body> + +<div class="grid"> +<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="grid-row:2"></span> +</div> +<div class="grid flex-min"> +<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="grid-row:2"></span> +</div> +<div class="grid float"> +<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="grid-row:2"></span> +</div> +<div class="grid float flex-min"> +<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="grid-row:2"></span> +</div> + +<div class="grid"> +<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="grid-row:2"></span> +</div> +<div class="grid flex-min"> +<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="grid-row:2"></span> +</div> +<div class="grid float"> +<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="grid-row:2"></span> +</div> +<div class="grid float flex-min"> +<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="grid-row:2"></span> +</div> + +<div class="grid float v"> +<span class="c1 zv"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="grid-row:2"></span> +</div> + +<div class="grid" style="grid-template-columns: minmax(auto,max-content) 47px;"> +<span class="c1 v" style="min-width:100px"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c1" style="min-width:50px"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c1" style="min-width:10px;max-width:10px"><x10>X</x10><x30>y</x30><x10>z</x10></span> +<span class="c2"></span> +<span class="r2" style="grid-row:2"></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-min-max-content-sizing-002-ref.html b/layout/reftests/css-grid/grid-min-max-content-sizing-002-ref.html new file mode 100644 index 0000000000..9765ee1355 --- /dev/null +++ b/layout/reftests/css-grid/grid-min-max-content-sizing-002-ref.html @@ -0,0 +1,82 @@ +<!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: Testing grid minmax(min-content,max-content) column/rows</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227285"> + <style type="text/css"> +body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } + +.grid { + display: grid; + border: 2px solid green; + grid-template-columns: minmax(min-content,max-content); + grid-template-rows: minmax(min-content,max-content); + clear: both; + line-height: 0; +} + +.grid > div { + border: 1px solid black; + min-height:0; + min-width:0; +} + +img.t1 { } +img.t2 { } + +x { + display: block; + border: 1px solid blue; + width: 2px; +} + +.v { + writing-mode:vertical-lr; + -webkit-writing-mode:vertical-lr; +} + </style> +</head> +<body> + +<div class="grid"> + <div> + <img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D"> + </div> +</div> + +<div class="grid"> + <div> + <img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D"> + </div> +</div> + +<div class="grid"> + <div style="width:2px; height:2px"> + <x style="width:2px; height:2px"></x> + </div> +</div> + +<div class="grid"> + <div> + <img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D"> + </div> +</div> + +<div class="grid"> + <div> + <img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D"> + </div> +</div> + +<div class="grid"> + <div style="width:2px; height:2px"> + <x style="width:2px; height:2px"></x> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-min-max-content-sizing-002.html b/layout/reftests/css-grid/grid-min-max-content-sizing-002.html new file mode 100644 index 0000000000..759eb30508 --- /dev/null +++ b/layout/reftests/css-grid/grid-min-max-content-sizing-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: Testing grid minmax(min-content,max-content) column/rows</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227285"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content"> + <link rel="match" href="grid-min-max-content-sizing-002-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } + +.grid { + display: grid; + border: 2px solid green; + grid-template-columns: minmax(min-content,max-content); + grid-template-rows: minmax(min-content,max-content); + clear: both; + line-height: 0; +} + +.grid > div { + border: 1px solid black; + min-height:0; + min-width:0; +} + +img.t1 { width: 100%; } +img.t2 { height: 100%; } + +x { + display: block; + border: 1px solid blue; + width: 100%; + height: 100%; +} + +.v { + writing-mode:vertical-lr; + -webkit-writing-mode:vertical-lr; +} + </style> +</head> +<body> + +<div class="grid"> + <div> + <img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D"> + </div> +</div> + +<div class="grid"> + <div> + <img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D"> + </div> +</div> + +<div class="grid"> + <div> + <x></x> + </div> +</div> + +<div class="grid"> + <div class="v"> + <img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D"> + </div> +</div> + +<div class="grid"> + <div class="v"> + <img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D"> + </div> +</div> + +<div class="grid"> + <div class="v"> + <x></x> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-order-abspos-items-001-ref.html b/layout/reftests/css-grid/grid-order-abspos-items-001-ref.html new file mode 100644 index 0000000000..fb3642422d --- /dev/null +++ b/layout/reftests/css-grid/grid-order-abspos-items-001-ref.html @@ -0,0 +1,148 @@ +<!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 Test: Testing layout and painting of abs.pos. grid items with 'order'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + /*display: grid;*/ + position: relative; + grid-template-columns: 20px 20px 20px 20px; + grid-auto-flow: row; + grid-auto-columns: 23px; + grid-auto-rows: 17px; + padding: 17px 7px 11px 13px; + width: 100px; + height: 25px; +} + +.a { z-index:1; left:74px; right:5px; background:lime; } +.b { z-index:1; left:54px; right:5px; background:pink; } +.c { z-index:1; left:34px; right:5px; background:yellow; } +.d { z-index:1; left:14px; right:5px; background:silver; } +.e { display:none; } + +.abs { + position: absolute; + top:3px; bottom:1px; +} + +span { + background: lime; + border: 1px solid; +} + +.z-1 { z-index:-1; } +.z1 { z-index:11; } +.z1.b { z-index:12; } +.z2 { z-index:13; } +.z3 { z-index:14; } +.z4 { z-index:15; } +x { background:black; order:99; float:right; } +f { float:left; } +.f2 { background:white; } +.f2 span { opacity: 0.5; } +.f2 span.e { z-index:-1; } + </style> +</head> +<body> + +<f> + +<div class="grid"> +<span class="abs a">a</span> +<span class="abs b">b</span> +<span class="abs c">c</span> +<span class="abs e">FAIL<x>x</x></span> +<span class="abs d">d<x>x</x></span> +</div> + +<div class="grid"> +<div> + <span class="abs c">c</span> + <span class="abs e">FAIL<x>x</x></span> + <span class="abs d">d<x>x</x></span> +</div> +<div> + <span class="abs a">a</span> + <span class="abs b">b</span> +</div> +</div> + +<div class="grid"> +<div style="display:grid; order:2"> +<div style="display:grid;"> +<div> + <span class="abs e">FAIL<x>x</x></span> + <span class="abs d">d<x>x</x></span> +</div> +<div> + <span class="abs b">b</span> +</div> +</div> +<div> + <span class="abs c">c</span> +</div> +<div> + <span class="abs a">a</span> +</div> +</div> +</div> + +<div class="grid"> +<span class="abs a">a</span> +<span class="abs z1 b">b</span> +<span class="abs z2 c">c</span> +<span class="abs e">FAIL<x>x</x></span> +<span class="abs d">d<x>x</x></span> +</div> + +<div class="grid"> +<div> + <span class="abs z1 c">c</span> + <span class="abs e">FAIL<x>x</x></span> + <span class="abs d">d<x>x</x></span> +</div> +<div> + <span class="abs a">a</span> + <span class="abs z1 b">b</span> +</div> +</div> + +<div class="grid"> +<div style="display:grid; order:2"> +<div style="order:2"> + <span class="abs a">a</span> +</div> +<div style="order:1"> + <span class="abs z2 c">c</span> +</div> +</div> +<div style="display:grid; order:1"> +<div style="order:2"> + <span class="abs z1 b">b</span> +</div> +<div style="order:1"> + <span class="abs z-1 d">FAIL<x>x</x></span> + <span class="abs z1 d">d<x>x</x></span> +</div> +</div> +</div> + +</f> + +<script> + var f = document.querySelector('f'); + var f2 = f.cloneNode(true); + f2.className = 'f2'; + document.body.appendChild(f2); +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-order-abspos-items-001.html b/layout/reftests/css-grid/grid-order-abspos-items-001.html new file mode 100644 index 0000000000..7d915e5098 --- /dev/null +++ b/layout/reftests/css-grid/grid-order-abspos-items-001.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 Test: Testing layout and painting of abs.pos. grid items with 'order'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property"> + <link rel="match" href="grid-order-abspos-items-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + grid-template-columns: 20px 20px 20px 20px; + grid-auto-flow: row; + grid-auto-columns: 23px; + grid-auto-rows: 17px; + padding: 17px 7px 11px 13px; + width: 100px; + height: 25px; +} + +.a { order:4; grid-column-start:4; background:lime; } +.b { order:3; grid-column-start:3; background:pink; } +.c { order:2; grid-column-start:2; background:yellow; } +.d { order:1; grid-column-start:1; background:silver; } +.e { order:1; grid-column-start:1; background:red; } + +.abs { + position: absolute; + top:3px; left:1px; right:5px; bottom:1px; +} + +span { + background: lime; + border: 1px solid; +} + +.z-1 { z-index:-1; } +.z1 { z-index:1; } +.z2 { z-index:2; } +.z3 { z-index:3; } +.z4 { z-index:4; } +x { background:black; order:99; float:right; } +f { float:left; } +.f2 { background:white; } +.f2 span { opacity: 0.5; } +.f2 span.e { z-index:-1; } + </style> +</head> +<body> + +<f> + +<div class="grid"> +<span class="abs a">a</span> +<span class="abs b">b</span> +<span class="abs c">c</span> +<span class="abs e">FAIL<x>x</x></span> +<span class="abs d">d<x>x</x></span> +</div> + +<div class="grid"> +<div style="order:2"> + <span class="abs a">a</span> + <span class="abs b">b</span> +</div> +<div style="order:1"> + <span class="abs c">c</span> + <span class="abs e">FAIL<x>x</x></span> + <span class="abs d">d<x>x</x></span> +</div> +</div> + +<div class="grid"> +<div style="display:grid; order:2"> +<div style="order:2"> + <span class="abs a">a</span> +</div> +<div style="order:1"> + <span class="abs c">c</span> +</div> +</div> +<div style="display:grid; order:1"> +<div style="order:2"> + <span class="abs b">b</span> +</div> +<div style="order:1"> + <span class="abs e">FAIL<x>x</x></span> + <span class="abs d">d<x>x</x></span> +</div> +</div> +</div> + +<div class="grid"> +<span class="abs a">a</span> +<span class="abs z1 b">b</span> +<span class="abs z2 c">c</span> +<span class="abs e">FAIL<x>x</x></span> +<span class="abs d">d<x>x</x></span> +</div> + +<div class="grid"> +<div style="order:2"> + <span class="abs a">a</span> + <span class="abs z1 b">b</span> +</div> +<div style="order:1"> + <span class="abs z1 c">c</span> + <span class="abs e">FAIL<x>x</x></span> + <span class="abs d">d<x>x</x></span> +</div> +</div> + +<div class="grid"> +<div style="display:grid; order:2"> +<div style="order:2"> + <span class="abs a">a</span> +</div> +<div style="order:1"> + <span class="abs z2 c">c</span> +</div> +</div> +<div style="display:grid; order:1"> +<div style="order:2"> + <span class="abs z1 b">b</span> +</div> +<div style="order:1"> + <span class="abs z-1 d">FAIL<x>x</x></span> + <span class="abs z1 d">d<x>x</x></span> +</div> +</div> +</div> + +</f> + +<script> + var f = document.querySelector('f'); + var f2 = f.cloneNode(true); + f2.className = 'f2'; + document.body.appendChild(f2); +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-order-placement-auto-001-ref.html b/layout/reftests/css-grid/grid-order-placement-auto-001-ref.html new file mode 100644 index 0000000000..81c3274497 --- /dev/null +++ b/layout/reftests/css-grid/grid-order-placement-auto-001-ref.html @@ -0,0 +1,204 @@ +<!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 Test: Testing automatic placement of grid items with 'order'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786"> + <style type="text/css"> +.grid { + height: 60px; + border: 1px solid green; + position: relative; + font-size: 12px; +} + +span { + position: absolute; + background: lime; + border: 1px solid black; + box-sizing: border-box; + width: 20px; + height: 20px; +} + +.test1 .a { + top: 0; + left: 20px; + width: 20px; + height: 20px; +} +.test1 .b { + top: 20px; + left: 20px; + width: 60px; + height: 20px; +} +.test1 .c { + top: 0; + left: 80px; + width: 60px; + height: 40px; +} +.test1 .e { + top: 20px; + left: 0px; +} +.test1 .d2 { + top: 0px; + left: 40px; +} + +.test2 .a { + top: 0; + left: 20px; + width: 60px; + height: 20px; +} +.test2 .b { + top: 20px; + left: 20px; + width: 20px; + height: 20px; +} +.test2 .c { + top: 0; + left: 80px; + width: 60px; + height: 40px; +} +.test2 .e { + top: 20px; + left: 0px; +} +.test2 .d2 { + top: 20px; + left: 40px; +} + +.test3 .a { + top: 0; + left: 0; + width: 60px; + height: 40px; +} +.test3 .b { + top: 40px; + left: 20px; + width: 60px; + height: 20px; +} +.test3 .c { + top: 60px; + left: 0px; + width: 60px; + height: 40px; +} +.test3 .d { top: 0px; left:60px; } +.test3 .e { + top: 20px; + left: 60px; +} +.test3 .d2 { + top: 40px; + left: 0px; +} + +.test4 .c { + top: 20px; + left: 20px; + width: 60px; + height: 40px; +} +.test4 .d { top: 0px; } +.test4 .e { + top: 20px; + left: 0px; +} +.test4 .d2 { + top: 0px; + left: 20px; +} + +.test5 .c { + top: 20px; + left: 20px; + width: 60px; + height: 20px; +} +.test5 .e { + top: 20px; + left: 0px; +} +.test5 .d2 { + top: 0px; + left: 20px; +} + +.test6 { left: 0px; top: 20px;} +.test6d2 { + top: 20px; + left: 140px; +} +.test6e { + top: 20px; + left: 160px; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3" style="height:100px"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6d2">D</span> +<span class="test6e">e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-order-placement-auto-001.html b/layout/reftests/css-grid/grid-order-placement-auto-001.html new file mode 100644 index 0000000000..2f7279729d --- /dev/null +++ b/layout/reftests/css-grid/grid-order-placement-auto-001.html @@ -0,0 +1,156 @@ +<!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 Test: Testing automatic placement of grid items with 'order'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo"> + <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property"> + <link rel="match" href="grid-order-placement-auto-001-ref.html"> + <style type="text/css"> +.grid { + display: grid; + border: 1px solid green; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-auto-flow: row; + grid-auto-columns: 20px; + grid-auto-rows: 20px; + font-size: 12px; +} + +span { + background: lime; + border: 1px solid; +} + +.test1 .a { + grid-row: 1; + grid-column: 2 / span 1; +} +.test1 .b { + grid-row: 2; + grid-column: 2 / span 3; + order: 3; +} +.test1 .c, .test2 .c { + grid-row: 1 / span 2; + grid-column: auto / span 3; + order: 1; +} + +.test2 .a { + grid-row: 1; + grid-column: 2 / span 3; + order: 3; +} +.test2 .b { + grid-row: 2; + grid-column: 2 / span 1; + order: 1; +} + +.test3 { + grid-template-areas: + 'a a a . ' + 'a a a . ' + '. b b . ' + ; +} +.test3 .a { + grid-area: a; + order: 5; +} +.test3 .b { + grid-column: 2 / span 3; + grid-row: b; + order: 4; +} +.test3 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; + order: 3; +} + +.test4 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; + order: 3; +} + +.test5 .c { + grid-row-start: 2; + grid-column: auto / span 3; + order: 2; +} + +.test6 { + grid-row-start: 2; + grid-column: auto / span X; + order: 1; +} + +.e { + grid-row-start: 2; + grid-column: auto / span 1; + order: 1; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6">D</span> +<span class="e">e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-order-placement-definite-001-ref.html b/layout/reftests/css-grid/grid-order-placement-definite-001-ref.html new file mode 100644 index 0000000000..a2c9b9841c --- /dev/null +++ b/layout/reftests/css-grid/grid-order-placement-definite-001-ref.html @@ -0,0 +1,69 @@ +<!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 Test: Testing definite placement of grid items with 'order'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + /*display: grid;*/ + position: relative; + grid-template-columns: 20px 20px 20px 20px; + grid-auto-flow: row; + grid-auto-columns: 23px; + grid-auto-rows: 17px; + padding: 17px 7px 11px 11px; + width: 100px; + height: 25px; +} + +.a { left:73px; right:3px; background:lime; } +.b { left:53px; right:3px; background:pink; } +.c { left:33px; right:3px; background:yellow; } +.d { left:13px; right:3px; background:silver; } + +span { + position:absolute; + border: 1px solid; + height: 18px; +} + +x { background:black; order:99; float:right; } +.f2 { background:white; } +.f2 span { opacity: 0.5; } + </style> +</head> +<body> + +<f> + +<div class="grid"> +<span class="d">d</span> +<span class="c">c</span> +<span class="b">b</span> +<span class="a">a</span> +</div> + +<div class="grid"> +<span class="d">d</span> +<span class="c">c</span> +<span class="b">b</span> +<span class="a">a</span> +</div> + +</f> + +<script> + var f = document.querySelector('f'); + var f2 = f.cloneNode(true); + f2.className = 'f2'; + document.body.appendChild(f2); +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-order-placement-definite-001.html b/layout/reftests/css-grid/grid-order-placement-definite-001.html new file mode 100644 index 0000000000..41625ea44e --- /dev/null +++ b/layout/reftests/css-grid/grid-order-placement-definite-001.html @@ -0,0 +1,71 @@ +<!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 Test: Testing definite placement of grid items with 'order'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo"> + <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property"> + <link rel="match" href="grid-order-placement-definite-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px; + padding: 17px 7px 11px 13px; + width: 100px; + height: 25px; +} + +.a { order:4; grid-column-start:4; grid-row-start:1; width: 40px; background:lime; } +.b { order:3; grid-column-start:3; grid-row-start:1; width: 60px; background:pink; } +.c { order:2; grid-column-start:2; grid-row-start:1; width: 80px; background:yellow; } +.d { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:silver; } +.e { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:red; } + +span { + border: 1px solid; +} + +.f2 { background:white; } +.f2 span { opacity: 0.5; } +.f2 span.e { display:none; } + </style> +</head> +<body> + +<f> + +<div class="grid"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="e"></span> +<span class="d">d</span> +</div> + +<div class="grid"> +<span class="e"></span> +<span class="d">d</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="a">a</span> +</div> + +</f> + +<script> + var f = document.querySelector('f'); + var f2 = f.cloneNode(true); + f2.className = 'f2'; + document.body.appendChild(f2); +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html b/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html new file mode 100644 index 0000000000..1970d10e37 --- /dev/null +++ b/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html @@ -0,0 +1,154 @@ +<!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-column-gap' percentage</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279182"> +<style> +html,body { + color:black; background-color:white; font-size:1px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px; + border: 1px solid; +} + +.inline-grid { + display: inline-grid; + grid: 120px / 160px; + border: 1px solid; +} + +.float { float:left; border: 2px solid blue; } + +.percentgap { + grid-gap: 24px 32px; +} + +span:nth-of-type(1) { background: magenta; } +span:nth-of-type(2) { background: cyan; } +span:nth-of-type(3) { background: yellow; } +span:nth-of-type(4) { background: lime; } + +x { + display: block; + width: 20px; + height: 30px; +} + +br { clear: both; } + </style> +</head> +<body> + +<div class="inline-grid"> +<div class="grid percentgap"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<div class="inline-grid" style="grid: auto / auto"> +<div class="grid percentgap" style="align-self:start; justify-self:start; width:160px; height:120px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<div class="float"> +<div class="grid" style="width:60px; height:60px; gap:12px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<div class="inline-grid"> +<div class="grid" style="width:60px; height:60px; gap:12px; align-self:start; justify-self:start;"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<br> + +<div style="width:320px;height:200px"> +<div class="grid percentgap" style="height:120px; grid-column-gap:64px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<!-- TODO: fails on Windows 8 x64 Opt +<div class="inline-grid"> +<div class="grid percentgap"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> +--> + +<div class="inline-grid" style="grid: auto / auto"> +<div class="grid percentgap" style="align-self:start; justify-self:start; width:160px; height:120px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<div class="inline-grid"> +<div class="grid" style="grid: min-content 20% min-content / min-content 20% min-content"> + <span><x></x></span><z></z><span><x></x></span> + <z></z><z></z><z></z> + <span><x></x></span><z></z><span><x></x></span> +</div> +</div> + +<br> + +<div style="width:320px;height:200px"> +<div class="grid percentgap" style="height:120px; grid-column-gap:64px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<div style="width:320px;height:200px"> +<div class="grid calcgap" style="height:120px; grid-gap:0"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<div class="float" style="margin-top:-50px; width:62px"> +<div class="grid" style="padding-left:186px; height:60px; gap:12px calc(186px * 0.2);"> + <span style="margin-left:-186px; width:30px"><x></x></span> + <span style="margin-left:-186px; width:30px"><x></x></span> + <span style="margin-left:-186px; width:30px"><x></x></span> + <span style="margin-left:-186px; width:30px"><x></x></span> +</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-percent-grid-gap-001.html b/layout/reftests/css-grid/grid-percent-grid-gap-001.html new file mode 100644 index 0000000000..57c0b3c086 --- /dev/null +++ b/layout/reftests/css-grid/grid-percent-grid-gap-001.html @@ -0,0 +1,161 @@ +<!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-column-gap' percentage</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279182"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters"> + <link rel="match" href="grid-percent-grid-gap-ref.html"> +<style> +html,body { + color:black; background-color:white; font-size:1px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: 30px 30px; + border: 1px solid; +} + +.inline-grid { + display: inline-grid; + grid-auto-columns: 160px; + grid-auto-rows: 120px; + border: 1px solid; +} + +.float { float:left; border: 2px solid blue; } + +.percentgap { + grid-gap: 20%; +} + +.calcgap { + grid-gap: calc(12px + 10%) calc(16px + 10%); +} + +span:nth-of-type(1) { background: magenta; } +span:nth-of-type(2) { background: cyan; } +span:nth-of-type(3) { background: yellow; } +span:nth-of-type(4) { background: lime; } + +x { + display: block; + width: 20px; + height: 30px; +} + +br { clear: both; } + </style> +</head> +<body> + +<div class="inline-grid"> +<div class="grid percentgap"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<div class="inline-grid" style="grid: auto / auto"> +<div class="grid percentgap" style="place-self:start/start; width:160px; height:120px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<div class="float"> +<div class="grid percentgap cfill" style="max-width:800%"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<div class="inline-grid"> +<div class="grid percentgap" style="place-self:start"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<br> + +<div style="width:320px;height:200px"> +<div class="grid percentgap" style="height:120px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<!-- TODO: fails on Windows 8 x64 Opt +<div class="inline-grid"> +<div class="grid calcgap"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> +--> + +<div class="inline-grid" style="grid: auto / auto"> +<div class="grid calcgap" style="align-self:start; justify-self:start; width:160px; height:120px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<div class="inline-grid"> +<div class="grid" style="grid: min-content calc(12px + 10%) min-content / min-content calc(16px + 10%) min-content"> + <span><x></x></span><z></z><span><x></x></span> + <z></z><z></z><z></z> + <span><x></x></span><z></z><span><x></x></span> +</div> +</div> + +<br> + +<div style="width:320px;height:200px"> +<div class="grid calcgap" style="height:120px; grid-column-gap:calc(32px + 10%)"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<div style="width:320px;height:200px"> +<div class="grid calcgap" style="height:120px; grid-gap:calc(32px - 30%)"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +<div class="float" style="margin-top:-50px"> +<div class="grid percentgap cfill" style="min-width:300%"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001-ref.html b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001-ref.html new file mode 100644 index 0000000000..202cb2b662 --- /dev/null +++ b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <style type="text/css"> + <title>CSS Grid Test: Grid container intrinsic sizing involving percent track min sizing / grid-gap</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1302541"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +div { + display: grid; + float: left; + border: 1px solid; + clear: left; + align-content: start; + justify-content: start; + margin: 3px; +} + +span { + background: grey; +} +.c > span { width: 10px; } +.r > span { height: 10px; } + +span:nth-child(2) { background:lime; } +x { background: blue; } +x:nth-child(2) { background:pink; } + +.c { grid-auto-rows: 5px; } +.c.p1 { grid-template-columns: 1px; width: 10px; } +.c.p1a { grid-template-columns: minmax(10%,auto); } +.c.p2 { grid-template-columns: 10% 10%; grid-gap: 20%; } +.c.p2a { grid-template-columns: repeat(2,minmax(10%,auto)); grid-gap: 20%; } +.c.c0 { grid-template-columns: 0; } + +.r { grid-auto-columns: 5px; grid-auto-flow: column; } +.r.p1 { grid-template-rows: 10%; } +.r.p1a { grid-template-rows: minmax(10%,auto); } +.r.p2 { grid-template-rows: 10% 10%; grid-gap: 20%; } +.r.p2a { grid-template-rows: repeat(2,minmax(10%,auto)); grid-gap: 20%; } +.r.r0 { grid-template-rows: 0; } + + </style> +</head> +<body> + +<div class="c p1"><span></span><x></x></div> +<div class="c c0"><x></x></div> +<div class="c p1a"><span></span><x></x></div> +<div class="c c0"><x></x></div> + +<div class="c p2"><span></span><span></span><x></x></div> +<div class="c c0"><x></x></div> +<div class="c p2a"><span></span><span></span><x></x></div> +<div class="c c0"><x></x></div> + +<div class="r p1"><span></span><x></x></div> +<div class="r r0"><x></x></div> +<div class="r p1a"><span></span><x></x></div> +<div class="r r0"><x></x></div> + +<div class="r p2"><span></span><span></span><x></x></div> +<div class="r r0"><x></x></div> +<div class="r p2a"><span></span><span></span><x></x></div> +<div class="r r0"><x></x></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html new file mode 100644 index 0000000000..75655d62ae --- /dev/null +++ b/layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html @@ -0,0 +1,73 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <style type="text/css"> + <title>CSS Grid Test: Grid container intrinsic sizing involving percent track min sizing / grid-gap</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1302541"> + <link rel="match" href="grid-percent-intrinsic-sizing-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +div { + display: grid; + float: left; + border: 1px solid; + clear: left; + place-content: start start; + margin: 3px; +} + +span { + background: grey; +} +.c > span { width: 10px; } +.r > span { height: 10px; } + +span:nth-child(2) { background:lime; } +x { background: blue; } +x:nth-child(2) { background:pink; } + +.c { grid-auto-rows: 5px; } +.c.p1 { grid-template-columns: 10%; } +.c.p1a { grid-template-columns: minmax(10%,auto); } +.c.p2 { grid-template-columns: 10% 10%; grid-gap: 20%; } +.c.p2a { grid-template-columns: repeat(2,minmax(10%,auto)); grid-gap: 20%; } + +.r { grid-auto-columns: 5px; grid-auto-flow: column; } +.r.p1 { grid-template-rows: 10%; } +.r.p1a { grid-template-rows: minmax(10%,auto); } +.r.p2 { grid-template-rows: 10% 10%; grid-gap: 20%; } +.r.p2a { grid-template-rows: repeat(2,minmax(10%,auto)); grid-gap: 20%; } + + </style> +</head> +<body> + +<div class="c p1"><span></span><x></x></div> +<div class="c p1"><x></x></div> +<div class="c p1a"><span></span><x></x></div> +<div class="c p1a"><x></x></div> + +<div class="c p2"><span></span><span></span><x></x></div> +<div class="c p2"><x></x><x></x></div> +<div class="c p2a"><span></span><span></span><x></x></div> +<div class="c p2a"><x></x><x></x></div> + +<div class="r p1"><span></span><x></x></div> +<div class="r p1"><x></x></div> +<div class="r p1a"><span></span><x></x></div> +<div class="r p1a"><x></x></div> + +<div class="r p2"><span></span><span></span><x></x></div> +<div class="r p2"><x></x><x></x></div> +<div class="r p2a"><span></span><span></span><x></x></div> +<div class="r p2a"><x></x><x></x></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-abspos-implicit-001-ref.html b/layout/reftests/css-grid/grid-placement-abspos-implicit-001-ref.html new file mode 100644 index 0000000000..3bc177eb27 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-abspos-implicit-001-ref.html @@ -0,0 +1,113 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Test: Testing placement of abs.pos. grid items in negative implicit grid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + /*display: grid;*/ + position: relative; + border: 1px solid; + grid-auto-flow: row; + grid-auto-columns: 23px; + grid-auto-rows: 7px; + padding: 1px 7px 3px 13px; + width: 200px; + height: 60px; +} + +.a { + position: absolute; + left: 59px; top: 22px; + height: 12px; width: 44px; +} + +.abs { + position: absolute; + opacity: 0.7; + width: 21px; + height: 5px; +} +.b { + left: 1px; top: 3px; bottom: 1px; + width: 74px; height: auto; +} +.c { + left: 1px; top: 3px; + width: 51px; height: 2px; +} +.d { + left: 1px; top: 5px; + width: 212px; height: 7px; +} +.e { + right: 5px; bottom: 1px; + width: 212px; height: 58px; +} +.f { + right: 5px; bottom: 1px; + width: 212px; height: 58px; +} +span { + background: lime; + border: 1px solid; +} + </style> +</head> +<body> + +<div class="grid"> +<span class="a"></span> +<span class="b abs">b</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="c abs">c</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="d abs">d</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="e abs">e</span> +</div> + +<div class="grid"> +<span class="a"></span> +<span class="f abs">f</span> +</div> + +<div class="grid"> +<span class="b abs" style="width:212px">b</span> +</div> + +<div class="grid"> +<span class="c abs">c</span> +</div> + +<div class="grid"> +<span class="d abs" style="height:56px;"></span> +</div> + +<div class="grid"> +<span class="e abs">e</span> +</div> + +<div class="grid"> +<span class="f abs">f</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-abspos-implicit-001.html b/layout/reftests/css-grid/grid-placement-abspos-implicit-001.html new file mode 100644 index 0000000000..98e026bace --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-abspos-implicit-001.html @@ -0,0 +1,129 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Test: Testing placement of abs.pos. grid items in negative implicit grid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-items-001-ref.html"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-flow: row; + grid-auto-columns: 23px; + grid-auto-rows: 7px; + padding: 1px 7px 3px 13px; + width: 200px; + height: 60px; +} + +span.negative { + grid-column: span A 2 / 1; + grid-row: A -1; + background: none; + border: none; +} + +.a { + grid-column: 1 / 3; + grid-row: 3 / 5; +} + +.abs { + position: absolute; + top:3px; left:1px; right:5px; bottom:1px; + opacity: 0.7; +} +.b { + grid-column: span A 4 / 2; + grid-row: auto / auto; +} +.c { + grid-column: span 5 / 1; /* outside to the left */ + grid-row: A -5 / 1; /* outside to the top */ +} +.d { + grid-column: auto / A -3; + grid-row: 2 / 1; + top: -3px; +} +.e { + grid-column: A -3 / auto; + grid-row: A -3 / auto; +} +.f { + grid-column: A -3 / auto; + grid-row: auto / A -2; +} +span { + background: lime; + border: 1px solid; +} + </style> +</head> +<body> + +<div class="grid"> +<span class="negative"></span> +<span class="a"></span> +<span class="b abs">b</span> +</div> + +<div class="grid"> +<span class="negative"></span> +<span class="a"></span> +<span class="c abs">c</span> +</div> + +<div class="grid"> +<span class="negative"></span> +<span class="a"></span> +<span class="d abs">d</span> +</div> + +<div class="grid"> +<span class="negative"></span> +<span class="a"></span> +<span class="e abs">e</span> +</div> + +<div class="grid"> +<span class="negative"></span> +<span class="a"></span> +<span class="f abs">f</span> +</div> + +<div class="grid"> +<span class="negative"></span> +<div><span class="b abs">b</span></div> +</div> + +<div class="grid"> +<span class="negative"></span> +<x><span class="c abs">c</span></x> +</div> + +<div class="grid"> +<span class="negative"></span> +<span class="d abs"></span> +</div> + +<div class="grid"> +<span class="negative"></span> +<div><span class="e abs">e</span></div> +</div> + +<div class="grid"> +<span class="negative"></span> +<span class="f abs">f</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-auto-col-dense-001-ref.html b/layout/reftests/css-grid/grid-placement-auto-col-dense-001-ref.html new file mode 100644 index 0000000000..ddaec606f9 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-auto-col-dense-001-ref.html @@ -0,0 +1,233 @@ +<!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 item auto placement: column dense</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + height: 60px; + border: 1px solid green; + position: relative; + font-size: 12px; +} +.grid2 { + display: grid; + grid-auto-columns: 20px; + grid-auto-rows: 20px; + border: 1px solid green; +} + +span { + position: absolute; + background: lime; + border: 1px solid black; + box-sizing: border-box; + width: 20px; + height: 20px; +} +x { + background: lime; + border: 1px solid black; +} + +.test1 .a { + top: 0; + left: 20px; + width: 20px; + height: 20px; +} +.test1 .b { + top: 20px; + left: 20px; + width: 60px; + height: 20px; +} +.test1 .c { + top: 0; + left: 80px; + width: 60px; + height: 40px; +} +.test1 .d2 { + top: 20px; + left: 0px; +} +.test1 .e { + top: 20px; + left: 140px; +} + +.test2 .a { + top: 0; + left: 20px; + width: 60px; + height: 20px; +} +.test2 .b { + top: 20px; + left: 20px; + width: 20px; + height: 20px; +} +.test2 .c { + top: 0; + left: 80px; + width: 60px; + height: 40px; +} +.test2 .d2 { + top: 20px; + left: 0px; +} +.test2 .e { + top: 20px; + left: 40px; +} + +.test3 .a { + top: 0; + left: 0; + width: 60px; + height: 40px; +} +.test3 .b { + top: 40px; + left: 20px; + width: 60px; + height: 20px; +} +.test3 .c { + top: 0px; + left: 60px; + width: 60px; + height: 40px; +} +.test3 .d { top: 40px; left:0px; } +.test3 .e { + top: 20px; + left: 120px; +} +.test3 .d2 { + top: 40px; + left: 80px; +} + +.test4 .c { + top: 0; + left: 0px; + width: 60px; + height: 40px; +} +.test4 .d { top: 40px; } +.test4 .e { + top: 20px; + left: 60px; +} +.test4 .d2 { + top: 40px; + left: 20px; +} + +.test5 .c { + top: 20px; + left: 0; + width: 60px; + height: 20px; +} +.test5 .e { + top: 20px; + left: 60px; +} +.test5 .d2 { + top: 40px; + left: 0px; +} + +.test6 { left: 0px; top: 20px;} +.test6d2 { + top: 20px; + left: 140px; +} +.test6e { + top: 20px; + left: 160px; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6d2">D</span> +<span class="test6e">e</span> +</div> + +<!-- bug 1228984 test 1 --> +<div class="grid2"> +<x style="grid-column: 1; grid-row: 1 / 3">1</x> +<x style="grid-column: 2; grid-row: 1">2</x> +<x style="grid-column: 3; grid-row: span 2">3</x> +<x style="grid-column: 2; grid-row: 2">4</x> +</div> + +<!-- bug 1228984 test 2 with "column dense" --> +<div class="grid2"> +<x style="grid-column: 1; grid-row: 1 / 3">1</x> +<x style="grid-column: 2; grid-row: 2 / 4">2</x> +<x style="grid-column: 3; grid-row: 1 / 4">3</x> +<x style="grid-column: 1; grid-row: 3">4</x> +<x style="grid-column: 2; grid-row: 1">5</x> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-auto-col-dense-001.html b/layout/reftests/css-grid/grid-placement-auto-col-dense-001.html new file mode 100644 index 0000000000..e208a2b6d3 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-auto-col-dense-001.html @@ -0,0 +1,169 @@ +<!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 Test: grid item auto placement: column dense</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-placement-algo"> + <link rel="match" href="grid-placement-auto-col-dense-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + border: 1px solid green; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-auto-flow: dense column; + grid-auto-columns: 20px; + grid-auto-rows: 20px; +} +.grid2 { + display: grid; + grid-auto-columns: 20px; + grid-auto-rows: 20px; + grid-auto-flow: column dense; + border: 1px solid green; +} + +span { + background: lime; + border: 1px solid; +} + +.test1 .a { + grid-row: 1; + grid-column: 2 / span 1; +} +.test1 .b { + grid-row: 2; + grid-column: 2 / span 3; +} +.test1 .c, .test2 .c { + grid-row: 1 / span 2; + grid-column: auto / span 3; +} + +.test2 .a { + grid-row: 1; + grid-column: 2 / span 3; +} +.test2 .b { + grid-row: 2; + grid-column: 2 / span 1; +} + +.test3 { + grid-template-areas: + 'a a a . ' + 'a a a . ' + '. b b . ' + ; +} +.test3 .a { + grid-area: a; +} +.test3 .b { + grid-column: 2 / span 3; + grid-row: b; +} +.test3 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test4 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test5 .c { + grid-row-start: 2; + grid-column: auto / span 3; +} + +.test6 { + grid-row-start: 2; + grid-column: auto / span X; +} + +.e { + grid-row-start: 2; + grid-column: auto / span 1; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6">D</span> +<span class="e">e</span> +</div> + +<!-- bug 1228984 test 1 --> +<div class="grid2"> +<span style="grid-column: 1; grid-row: 1 / 3">1</span> +<span style="grid-column: 2; grid-row: 1">2</span> +<span style="grid-row: span 2">3</span> +<span style="grid-row: 2">4</span> +</div> + +<!-- bug 1228984 test 2 with "column dense" --> +<div class="grid2"> +<span style="grid-row: 1 / 3">1</span> +<span style="grid-row: 2 / 4">2</span> +<span style="grid-row: 1 / 4">3</span> +<span style="">4</span> +<span style="">5</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-auto-col-sparse-001-ref.html b/layout/reftests/css-grid/grid-placement-auto-col-sparse-001-ref.html new file mode 100644 index 0000000000..9d861b7716 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-auto-col-sparse-001-ref.html @@ -0,0 +1,208 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +.grid { + height: 60px; + border: 1px solid green; + position: relative; + font-size: 12px; +} + +span { + position: absolute; + background: lime; + border: 1px solid black; + box-sizing: border-box; + width: 20px; + height: 20px; +} + +.test1 .a { + top: 0; + left: 20px; + width: 20px; + height: 20px; +} +.test1 .b { + top: 20px; + left: 20px; + width: 60px; + height: 20px; +} +.test1 .c { + top: 0; + left: 80px; + width: 60px; + height: 40px; +} +.test1 .d { + top: 40px; + left: 80px; +} +.test1 .d2 { + top: 40px; + left: 100px; +} +.test1 .e { + top: 20px; + left: 140px; +} + +.test2 .a { + top: 0; + left: 20px; + width: 60px; + height: 20px; +} +.test2 .b { + top: 20px; + left: 20px; + width: 20px; + height: 20px; +} +.test2 .c { + top: 0; + left: 80px; + width: 60px; + height: 40px; +} +.test2 .d { + top: 40px; + left: 80px; +} +.test2 .d2 { + top: 40px; + left: 100px; +} +.test2 .e { + top: 20px; + left: 140px; +} + +.test3 .a { + top: 0; + left: 0; + width: 60px; + height: 40px; +} +.test3 .b { + top: 40px; + left: 20px; + width: 60px; + height: 20px; +} +.test3 .c { + top: 0px; + left: 60px; + width: 60px; + height: 40px; +} +.test3 .d { top: 40px; left:80px; } +.test3 .e { + top: 20px; + left: 120px; +} +.test3 .d2 { + top: 40px; + left: 100px; +} + +.test4 .c { + top: 0; + left: 0px; + width: 60px; + height: 40px; +} +.test4 .d { top: 40px; } +.test4 .e { + top: 20px; + left: 60px; +} +.test4 .d2 { + top: 40px; + left: 20px; +} + +.test5 .c { + top: 20px; + left: 0; + width: 60px; + height: 20px; +} +.test5 .d { top: 40px; } +.test5 .e { + top: 20px; + left: 60px; +} +.test5 .d2 { + top: 0px; + left: 20px; +} + +.test6 { left: 140px; top: 20px;} +.test6d2 { + top: 20px; + left: 160px; +} +.test6e { + top: 20px; + left: 180px; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6d2">D</span> +<span class="test6e">e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-auto-col-sparse-001.html b/layout/reftests/css-grid/grid-placement-auto-col-sparse-001.html new file mode 100644 index 0000000000..ab4892aa04 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-auto-col-sparse-001.html @@ -0,0 +1,137 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +.grid { + display: grid; + border: 1px solid green; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-auto-flow: column; + grid-auto-columns: 20px; + grid-auto-rows: 20px; + font-size: 12px; +} + +span { + background: lime; + border: 1px solid; +} + +.test1 .a { + grid-row: 1; + grid-column: 2 / span 1; +} +.test1 .b { + grid-row: 2; + grid-column: 2 / span 3; +} +.test1 .c, .test2 .c { + grid-row: 1 / span 2; + grid-column: auto / span 3; +} + +.test2 .a { + grid-row: 1; + grid-column: 2 / span 3; +} +.test2 .b { + grid-row: 2; + grid-column: 2 / span 1; +} + +.test3 { + grid-template-areas: + 'a a a . ' + 'a a a . ' + '. b b . ' + ; +} +.test3 .a { + grid-area: a; +} +.test3 .b { + grid-column: 2 / span 3; + grid-row: b; +} +.test3 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test4 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test5 .c { + grid-row-start: 2; + grid-column: auto / span 3; +} + +.test6 { + grid-row-start: 2; + grid-column: auto / span X; +} + +.e { + grid-row-start: 2; + grid-column: auto / span 1; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6">D</span> +<span class="e">e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-auto-implicit-001-ref.html b/layout/reftests/css-grid/grid-placement-auto-implicit-001-ref.html new file mode 100644 index 0000000000..6d97fbb370 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-auto-implicit-001-ref.html @@ -0,0 +1,153 @@ +<!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 Test: Testing placement of grid items outside the explicit grid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + border: 1px solid blue; + width:270px; +} + +.a { background:lime; } +.a2 { height:38px; background:lime; } +.b { display:block; background:pink; } +.c { width:1px; background:yellow; } +.e { background:silver; } +.f { background:cyan; } +.g { background:tan; } + +br { display:block; height:0; width:0; } +.f2 .b { display:inline-block; } + +span { + display: inline-block; + width: 18px; + height: 18px; + line-height: 18px; + border: 1px solid; + vertical-align:top; +} + + </style> +</head> +<body style="overflow:hidden"> + +<div style="float:left"> + +<div class="grid"> +<span class="c" style="width:18px">c</span><span class="a">a</span><span class="e">e</span><span class="b">b</span> +</div> +<div class="grid"> +<span class="g">g</span><span class="a">a</span><span class="b">b</span> +</div> +<div class="grid"> +<span class="c">c</span><span class="e">e</span><span class="a">a</span><span class="b" span="2">b</span> +</div> + +<div class="grid"> +<span class="c">c</span><span class="f">f</span><span class="a">a</span><span class="b" span="2">b</span> +</div> +<div class="grid"> +<span class="c">c</span><span class="e" style="width:1px">e</span><span class="a" style="margin-left:23px">a</span><span class="b" span="4">b</span> +</div> +<div class="grid"> +<span class="c">c</span><span class="f" style="margin-left:3px; width:21px">f</span><span class="a">a</span><span class="b" span="4">b</span> +</div> +<div class="grid"> +<span class="c">c</span><span class="e" style="width:28px">e</span><span class="a" style="margin-left:134px">a</span><span class="b" span="50">b</span> +</div> +<div class="grid"> +<span class="c">c</span><span class="f" style="margin-left:144px">f</span><span class="a">a</span><span class="b" span="50">b</span><span class="f" style="margin-left:147px">f</span> +</div> +<div class="grid"> +<span class="c">c</span><span class="f" style="width:4px;margin-left:138px">f</span><span class="f">f</span><span class="a">a</span><span class="b" span="50">b</span> +</div> +<div class="grid"> +<span class="c">c</span><span class="g" style="width:1px">g</span><span class="a" style="margin-left:161px">a</span><span class="b" span="50">b</span> +</div> +<div class="grid"> +<span class="g" style="width:1px">g</span><span class="g" style="width:1px">g</span><span class="a" style="margin-left:161px">a</span><span class="b" span="50">b</span> +</div> + +</div><div style="float:left; margin-top:300px;"> + +<div class="grid" style="height:40px; position:relative"> +<span style="margin-top:-10000px; height:20060px; width:78px;"></span> +<span style="position:absolute; z-index:1; left:0; width:216px; height:10000px">b</span><br> +<span style="margin-top:-10042px; height:30px; width:78px; color:black"></span> +</div> +<div class="grid" style="height:40px; position:relative"> +<span style="margin-top:20px; position:absolute; left:0; z-index:0; height:30px; width:78px; color:black"></span> +<span style="margin-top:-10000px; height:20018px; width:78px;"></span> +<span style="position:absolute; left:0; width:216px; height:2000px">b</span><br> +</div> +<div class="grid" style="height:40px; position:relative;"> +<span style="position:absolute; left:20px; width: 30px; height:78px; z-index:2; color:black;"></span> +<span style="position:absolute; left:82px; width: 30px;">b</span> +</div> +<div class="grid" style="height:40px; position:relative"> +<span style="position:absolute; left:0; z-index:1; margin-top:20px; height:30px; width:78px; color:black; border-left-color:black;"></span> +<span style="position:absolute; left:0; width:216px; height:2000px">b</span><br> +<span style="position:relative; z-index:1; margin-top:-10000px; height:20018px; width:78px;"></span> +</div> +<div class="grid" style="height:40px; position:relative;"> +<span style="position:absolute; left:20px; width: 30px; height:78px; z-index:2; color:silver;"></span> +<span style="position:absolute; left:143px; width: 120px;">b</span> +</div> + +</div><div style="float:left" class="f2"> + +<div class="grid"> +<span class="b">b</span><span class="a2">a</span><br><span class="c" style="width:18px">c</span><span class="e">e</span> +</div> +<div class="grid"> +<span class="b">b</span><span class="a2">a</span><span class="g">g</span><br><span class="b" style="visibility:hidden">b</span> +</div> +<div class="grid"> +<span class="b" span="2">b</span><span class="a2">a</span><br><span class="c">c</span><span class="e">e</span> +</div> +<div class="grid"> +<span class="b" span="2">b</span><span class="a2">a</span><br><span class="c">c</span><span class="f" style="position:relative;top:-20px;">f</span> +</div> +<div class="grid"> +<span class="b" span="4">b</span><span class="a2">a</span><br><span class="c">c</span><span class="e" style="width:1px">e</span> +</div> +<div class="grid"> +<span class="b" span="4">b</span><span class="a2">a</span><br><span class="c">c</span><span class="f" style="position:relative;top:-20px; margin-left:3px; width:21px">f</span> +</div> +<div class="grid"> +<span class="b" span="50">b</span><span class="a2">a</span><br><span class="c">c</span><span class="e" style="width:28px">e</span> +</div> +<div class="grid"> +<span class="b" span="50">b</span><span class="a2">a</span><br><span class="c">c</span><span class="f" style="position:relative;top:-20px; margin-left:144px">f</span><span class="f" style="position:relative;left:-20px">f</span> +</div> +<div class="grid"> +<span class="b" span="50">b</span><span class="a2">a</span><br><span class="c">c</span><span class="f" style="position:relative;top:-20px; width:4px;margin-left:138px">f</span><span class="f" style="position:relative;top:-20px;">f</span> +</div> +<div class="grid"> +<span class="b" span="50">b</span><span class="a2">a</span><span class="g" >g</span><br><span class="c">c</span> +</div> +<div class="grid"> +<span class="b" span="50">b</span><span class="a2">a</span><span class="g">g</span><span class="g">g</span><br><span class="g" style="visibility:hidden">g</span> +</div> +</div> + +<script> +var elms = document.querySelectorAll("[span].b"); +for (i=0; i < elms.length; ++i) { + var e = elms[i]; + var span = e.getAttribute("span"); + var width = (15 + (3*parseInt((span>10000?10000:span)))); + e.style.width = width + "px"; +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-auto-implicit-001.html b/layout/reftests/css-grid/grid-placement-auto-implicit-001.html new file mode 100644 index 0000000000..c14bf06cc5 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-auto-implicit-001.html @@ -0,0 +1,155 @@ +<!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 Test: Testing placement of grid items outside the explicit grid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#overlarge-grids"> + <link rel="match" href="grid-placement-auto-implicit-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px; + grid-auto-columns: 3px; + grid-auto-rows: 20px; + border: 1px solid blue; + width: 270px; +} + +.a { grid-area: 1 / 2; background:lime; } +.a2 { grid-column:2; grid-row:span 2 / 1; background:lime; } +.b { grid-column: span 1 / 2; grid-row: 2; background:pink; } +.b2 { grid-column: span 1 / 2; background:pink; } +.c { grid-row: 1; background:yellow; } +.e { grid-row: 1; background:silver; } +.f { grid-column: 1; background:cyan; } +.g { background:tan; } + +span { + border: 1px solid; + line-height: 18px; + min-width: 0; +} + + </style> +</head> +<body style="overflow:hidden"> + +<div style="float:left"> + +<div class="grid"> +<span class="a">a</span><span class="b">b</span><span class="c">c</span><span class="e">e</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b">b</span><span class="g">g</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="2">b</span><span class="c">c</span><span class="e">e</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="2">b</span><span class="c">c</span><span class="f">f</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="4">b</span><span class="c">c</span><span class="e">e</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="4">b</span><span class="c">c</span><span class="f" style="grid-column:span 2 / 2">f</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="e" style="grid-column-start: span 10;">e</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="f">f</span><span class="f">f</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="f" style="grid-column: span 2 / 1;">f</span><span class="f">f</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="g">g</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="50">b</span><span class="g">g</span><span class="g">g</span> +</div> + +</div><div style="float:left; margin-top:300px;"> + +<div class="grid" style="height:40px"> +<span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span> +<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:black"></span> +<span span="50" style="margin-top:-399960px">b</span> +</div> +<div class="grid" style="height:40px"> +<span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span> +<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:black"></span> +<span style="grid-column: 1 / span 50; margin-top:-399960px">b</span> +</div> +<div class="grid" style="height:40px"> +<span style="grid-area: 1 / X -10000 / 5 / span 10000; width: 30px; margin-left:-29980px"></span> +<span style="grid-area: 1 / 1 / 5 / span 10000; width: 30px; margin-left:-29980px; color:black"></span> +<span style="grid-row: 1; grid-column:auto / span 1; width: 30px; margin-left:-59980px">b</span> +</div> +<div class="grid" style="height:40px"> +<span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span> +<span style="grid-area: 1 / 1 / span 9998 / 5; margin-top:-199980px; height:30px; color:black"></span> +<span span="50" style="grid-row:auto / span 5; margin-top:-399960px">b</span> +</div> +<div class="grid" style="height:40px"> +<span style="grid-area: 1 / X -10000 / 5 / span 10000; width: 30px; margin-left:-29980px"></span> +<span style="grid-area: 1 / 1 / 5 / span 9995; width: 30px; margin-left:-29980px; color:silver"></span> +<span style="grid-row: 1; grid-column:auto / span 10; margin-left:-59910px; margin-right:59800px">b</span> +</div> + +</div><div style="float:left"> + +<div class="grid"> +<span class="a2">a</span><span class="b2">b</span><span class="c">c</span><span class="e">e</span> +</div> +<div class="grid"> +<span class="a2">a</span><span class="b2">b</span><span class="g">g</span> +</div> +<div class="grid"> +<span class="a2">a</span><span class="b2" span="2">b</span><span class="c">c</span><span class="e">e</span> +</div> +<div class="grid"> +<span class="a2">a</span><span class="b2" span="2">b</span><span class="c">c</span><span class="f">f</span> +</div> +<div class="grid"> +<span class="a2">a</span><span class="b2" span="4">b</span><span class="c">c</span><span class="e">e</span> +</div> +<div class="grid"> +<span class="a2">a</span><span class="b2" span="4">b</span><span class="c">c</span><span class="f" style="grid-column:span 2 / 2">f</span> +</div> +<div class="grid"> +<span class="a2">a</span><span class="b2" span="50">b</span><span class="c">c</span><span class="e" style="grid-column-start: span 10;">e</span> +</div> +<div class="grid"> +<span class="a2">a</span><span class="b2" span="50">b</span><span class="c">c</span><span class="f">f</span><span class="f">f</span> +</div> +<div class="grid"> +<span class="a2">a</span><span class="b2" span="50">b</span><span class="c">c</span><span class="f" style="grid-column: span 2 / 1;">f</span><span class="f">f</span> +</div> +<div class="grid"> +<span class="a2">a</span><span class="b2" span="50">b</span><span class="c">c</span><span class="g">g</span> +</div> +<div class="grid"> +<span class="a2">a</span><span class="b2" span="50">b</span><span class="g">g</span><span class="g">g</span> +</div> +</div> + +<script> +var elms = document.querySelectorAll("[span]"); +for (i=0; i < elms.length; ++i) { + var e = elms[i]; + e.style.gridColumnStart = "span " + e.getAttribute("span"); +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-auto-row-dense-001-ref.html b/layout/reftests/css-grid/grid-placement-auto-row-dense-001-ref.html new file mode 100644 index 0000000000..85df406e6e --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-auto-row-dense-001-ref.html @@ -0,0 +1,251 @@ +<!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 item auto placement: row dense</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + height: 60px; + border: 1px solid green; + position: relative; + font-size: 12px; +} + +.grid2 { + display: grid; + grid-auto-columns: 20px; + grid-auto-rows: 20px; + grid-auto-flow: row dense; + border: 1px solid green; +} + +span { + position: absolute; + background: lime; + border: 1px solid black; + box-sizing: border-box; + width: 20px; + height: 20px; +} + +x { + background: lime; + border: 1px solid black; +} + +.test1 .a { + top: 0; + left: 20px; + width: 20px; + height: 20px; +} +.test1 .b { + top: 20px; + left: 20px; + width: 60px; + height: 20px; +} +.test1 .c { + top: 0; + left: 80px; + width: 60px; + height: 40px; +} +.test1 .e { + top: 20px; + left: 0px; +} +.test1 .d2 { + top: 0px; + left: 40px; +} + +.test2 .a { + top: 0; + left: 20px; + width: 60px; + height: 20px; +} +.test2 .b { + top: 20px; + left: 20px; + width: 20px; + height: 20px; +} +.test2 .c { + top: 0; + left: 80px; + width: 60px; + height: 40px; +} +.test2 .e { + top: 20px; + left: 0px; +} +.test2 .d2 { + top: 20px; + left: 40px; +} + +.test3 .a { + top: 0; + left: 0; + width: 60px; + height: 40px; +} +.test3 .b { + top: 40px; + left: 20px; + width: 60px; + height: 20px; +} +.test3 .c { + top: 60px; + left: 0px; + width: 60px; + height: 40px; +} +.test3 .d { top: 0px; left:60px; } +.test3 .e { + top: 20px; + left: 60px; +} +.test3 .d2 { + top: 40px; + left: 0px; +} + +.test4 .c { + top: 0; + left: 20px; + width: 60px; + height: 40px; +} +.test4 .e { + top: 20px; + left: 0px; +} +.test4 .d2 { + top: 40px; + left: 0px; +} + +.test5 .c { + top: 20px; + left: 0; + width: 60px; + height: 20px; +} +.test5 .e { + top: 20px; + left: 60px; +} +.test5 .d2 { + top: 0px; + left: 20px; +} + +.test6d2 { + top: 0px; + left: 40px; +} +.test6e { + top: 20px; + left: 0px; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3" style="height:100px"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6d2">D</span> +<span class="test6e">e</span> +</div> + +<!-- bug 1228984 test 2 --> +<div class="grid2"> +<x style="grid-row: 1 / 3">1</x> +<x style="grid-row: 2 / 4">2</x> +<x style="grid-row: 1 / 4">3</x> +<x style="">4</x> +<x style="">5</x> +</div> + +<!-- bug 1228984 test 1: with "row dense" --> +<div class="grid2"> +<x style="grid-column: 1; grid-row: 1 / 3">1</x> +<x style="grid-column: 2; grid-row: 1">2</x> +<x style="grid-row: span 2">3</x> +<x style="grid-row: 2">4</x> +</div> + +<!-- bug 1228984 test 2 --> +<div class="grid2"> +<x style="grid-column: 1 / 3; grid-row: 1;">1</x> +<x style="grid-column: 1; grid-row: 2;">2</x> +<x style="grid-column: span 2; grid-row: 3;">3</x> +<x style="grid-column: 2; grid-row: 2;">4</x> +</div> + +<!-- bug 1228984 test 3 --> +<div class="grid2"> +<x style="grid-row: 1 / 3">1</x> +<x style="grid-row: 2 / 4">2</x> +<x style="grid-row: 1 / 4">3</x> +<x style="">4</x> +<x style="">5</x> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-auto-row-dense-001.html b/layout/reftests/css-grid/grid-placement-auto-row-dense-001.html new file mode 100644 index 0000000000..b4f9c5c2d0 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-auto-row-dense-001.html @@ -0,0 +1,187 @@ +<!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 Test: grid item auto placement: row dense</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-placement-algo"> + <link rel="match" href="grid-placement-auto-row-dense-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + border: 1px solid green; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-auto-flow: dense row; + grid-auto-columns: 20px; + grid-auto-rows: 20px; +} + +.grid2 { + display: grid; + grid-auto-columns: 20px; + grid-auto-rows: 20px; + grid-auto-flow: row dense; + border: 1px solid green; +} + +span { + background: lime; + border: 1px solid; +} + +.test1 .a { + grid-row: 1; + grid-column: 2 / span 1; +} +.test1 .b { + grid-row: 2; + grid-column: 2 / span 3; +} +.test1 .c, .test2 .c { + grid-row: 1 / span 2; + grid-column: auto / span 3; +} + +.test2 .a { + grid-row: 1; + grid-column: 2 / span 3; +} +.test2 .b { + grid-row: 2; + grid-column: 2 / span 1; +} + +.test3 { + grid-template-areas: + 'a a a . ' + 'a a a . ' + '. b b . ' + ; +} +.test3 .a { + grid-area: a; +} +.test3 .b { + grid-column: 2 / span 3; + grid-row: b; +} +.test3 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test4 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test5 .c { + grid-row-start: 2; + grid-column: auto / span 3; +} + +.test6 { + grid-column: auto / span X; +} + +.e { + grid-row-start: 2; + grid-column: auto / span 1; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6">D</span> +<span class="e">e</span> +</div> + +<!-- bug 1228984 test 2 --> +<div class="grid2"> +<span style="grid-row: 1 / 3">1</span> +<span style="grid-row: 2 / 4">2</span> +<span style="grid-row: 1 / 4">3</span> +<span style="">4</span> +<span style="">5</span> +</div> + +<!-- bug 1228984 test 1: with "row dense" --> +<div class="grid2"> +<span style="grid-column: 1; grid-row: 1 / 3">1</span> +<span style="grid-column: 2; grid-row: 1">2</span> +<span style="grid-row: span 2">3</span> +<span style="grid-row: 2">4</span> +</div> + +<!-- bug 1228984 test 2 --> +<div class="grid2"> +<span style="grid-column: 1 / 3; grid-row: 1;">1</span> +<span style="grid-column: 1; grid-row: 2;">2</span> +<span style="grid-column: span 2;">3</span> +<span style="grid-column: 2;">4</span> +</div> + +<!-- bug 1228984 test 3 --> +<div class="grid2"> +<span style="grid-row: 1 / 3">1</span> +<span style="grid-row: 2 / 4">2</span> +<span style="grid-row: 1 / 4">3</span> +<span style="">4</span> +<span style="">5</span> +</div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-auto-row-sparse-001-ref.html b/layout/reftests/css-grid/grid-placement-auto-row-sparse-001-ref.html new file mode 100644 index 0000000000..15a180dac2 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-auto-row-sparse-001-ref.html @@ -0,0 +1,226 @@ +<!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 item auto placement: row sparse</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + height: 60px; + border: 1px solid green; + position: relative; + font-size: 12px; +} + +.grid2 { + display: grid; + grid-auto-columns: 20px; + grid-auto-rows: 20px; + border: 1px solid green; +} + +x { + background: lime; + border: 1px solid black; +} + +span { + position: absolute; + background: lime; + border: 1px solid black; + box-sizing: border-box; + width: 20px; + height: 20px; +} + +.test1 .a { + top: 0; + left: 20px; + width: 20px; + height: 20px; +} +.test1 .b { + top: 20px; + left: 20px; + width: 60px; + height: 20px; +} +.test1 .c { + top: 0; + left: 80px; + width: 60px; + height: 40px; +} +.test1 .e { + top: 20px; + left: 0px; +} +.test1 .d2 { + top: 0px; + left: 40px; +} + +.test2 .a { + top: 0; + left: 20px; + width: 60px; + height: 20px; +} +.test2 .b { + top: 20px; + left: 20px; + width: 20px; + height: 20px; +} +.test2 .c { + top: 0; + left: 80px; + width: 60px; + height: 40px; +} +.test2 .e { + top: 20px; + left: 0px; +} +.test2 .d2 { + top: 20px; + left: 40px; +} + +.test3 .a { + top: 0; + left: 0; + width: 60px; + height: 40px; +} +.test3 .b { + top: 40px; + left: 20px; + width: 60px; + height: 20px; +} +.test3 .c { + top: 60px; + left: 0px; + width: 60px; + height: 40px; +} +.test3 .d { top: 60px; left:60px; } +.test3 .e { + top: 20px; + left: 60px; +} +.test3 .d2 { + top: 80px; + left: 60px; +} + +.test4 .c { + top: 0; + left: 20px; + width: 60px; + height: 40px; +} +.test4 .d { top: 40px; } +.test4 .e { + top: 20px; + left: 0px; +} +.test4 .d2 { + top: 40px; + left: 20px; +} + +.test5 .c { + top: 20px; + left: 0; + width: 60px; + height: 20px; +} +.test5 .e { + top: 20px; + left: 60px; +} +.test5 .d2 { + top: 0px; + left: 20px; +} + +.test6 { left: 0px; top: 20px;} +.test6d2 { + top: 20px; + left: 140px; +} +.test6e { + top: 20px; + left: 160px; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3" style="height:100px"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6d2">D</span> +<span class="test6e">e</span> +</div> + +<!-- bug 1229009 --> +<div class="grid2"> +<x style="grid-column: 2; grid-row: 1;">1</x> +<x style="grid-column: 1; grid-row: 2;">2</x> +<x style="grid-column: 3; grid-row: 1 / 3;">3</x> +<x style="grid-column: 2; grid-row: 2;">4</x> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-auto-row-sparse-001.html b/layout/reftests/css-grid/grid-placement-auto-row-sparse-001.html new file mode 100644 index 0000000000..52133ccacf --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-auto-row-sparse-001.html @@ -0,0 +1,160 @@ +<!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 Test: grid item auto placement: row sparse</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-placement-algo"> + <link rel="match" href="grid-placement-auto-row-sparse-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + border: 1px solid green; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-auto-flow: row; + grid-auto-columns: 20px; + grid-auto-rows: 20px; +} + +.grid2 { + display: grid; + grid-auto-columns: 20px; + grid-auto-rows: 20px; + border: 1px solid green; +} + +span { + background: lime; + border: 1px solid; +} + +.test1 .a { + grid-row: 1; + grid-column: 2 / span 1; +} +.test1 .b { + grid-row: 2; + grid-column: 2 / span 3; +} +.test1 .c, .test2 .c { + grid-row: 1 / span 2; + grid-column: auto / span 3; +} + +.test2 .a { + grid-row: 1; + grid-column: 2 / span 3; +} +.test2 .b { + grid-row: 2; + grid-column: 2 / span 1; +} + +.test3 { + grid-template-areas: + 'a a a . ' + 'a a a . ' + '. b b . ' + ; +} +.test3 .a { + grid-area: a; +} +.test3 .b { + grid-column: 2 / span 3; + grid-row: b; +} +.test3 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test4 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test5 .c { + grid-row-start: 2; + grid-column: auto / span 3; +} + +.test6 { + grid-row-start: 2; + grid-column: auto / span X; +} + +.e { + grid-row-start: 2; + grid-column: auto / span 1; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6">D</span> +<span class="e">e</span> +</div> + +<!-- bug 1229009 --> +<div class="grid2"> +<span style="grid-column: 2; grid-row: 1;">1</span> +<span style="grid-column: 1; grid-row: 2;">2</span> +<span style="grid-row: 1 / 3;">3</span> +<span style="grid-row: 2;">4</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-definite-001-ref.html b/layout/reftests/css-grid/grid-placement-definite-001-ref.html new file mode 100644 index 0000000000..2391d214e3 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-definite-001-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> + +.grid { + height: 60px; + border: 10px solid green; + position: relative; + font-size:12px; +} + +span { + position: absolute; + background: lime; + border: 1px solid black; + box-sizing: border-box; +} + +.a { + left: 40px; + width: 60px; + height: 40px; +} +.b { + left: 20px; + top: 40px; + width: 60px; + height: 20px; +} +.c { + left: 80px; + top: 40px; + width: 60px; + height: 20px; +} +.d { + left: 0px; + width: 20px; + height: 60px; +} + </style> +</head> +<body> + +<div class=grid> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-definite-001.html b/layout/reftests/css-grid/grid-placement-definite-001.html new file mode 100644 index 0000000000..60050619ca --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-definite-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> + +.grid { + display: grid; + grid-template-areas: +'. . a a a .' +'. . a a a .' +'. b b . . .' +; + border: 10px solid green; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-auto-flow: column dense; + grid-auto-columns: 20px; + grid-auto-rows: 20px; + font-size:12px; +} + +span { + background: lime; + border: 1px solid black; +} + +.a { + grid-area: a; +} +.b { + grid-column: 2 / span 3; + grid-row: b; +} +.c { + grid-column: span 3; +} +.d { + grid-row: span 3; +} + </style> +</head> +<body> + +<div class=grid> +<span class=a>a</span> +<span class=b>b</span> +<span class=c>c</span> +<span class=d>d</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-definite-002-ref.html b/layout/reftests/css-grid/grid-placement-definite-002-ref.html new file mode 100644 index 0000000000..9749c62bcf --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-definite-002-ref.html @@ -0,0 +1,108 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +html,body { + font-size:12px; + font-family:monospace; +} +.grid { + height: 60px; + border: 1px solid green; + position: relative; +} + +span { + position: absolute; + background: lime; + border: 1px solid black; + box-sizing: border-box; +} + +.test1 span { + top: 0; + left: 40px; + width: 100px; + height: 20px; +} + +.test2 .a { + top: 0; + left: 0; + width: 60px; + height: 40px; +} +.test2 .b { + top: 40px; + left: 20px; + width: 60px; + height: 20px; +} +.test2 .c { + top: 0; + left: 60px; + width: 60px; + height: 20px; +} + +.test3 span { + top: 0; + left: 40px; + width: 100px; + height: 20px; +} + +.test4 span { + top: 0; + left: 40px; + width: 100px; + height: 20px; +} + +.test5 span { + top: 0; + left: 20px; + width: 120px; + height: 20px; +} + +.test6 span { + top: 0; + left: 0; + width: 20px; + height: 20px; +} + +.test7 span { + top: 0; + left: 0; + width: 700px; + height: 60px; + padding:3px; +} + + </style> +</head> +<body> + +<div class="grid test1"><span>a</span></div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +</div> + +<div class="grid test3"><span>a</span></div> + +<div class="grid test4"><span>a</span></div> + +<div class="grid test5"><span>a</span></div> + +<div class="grid test6"><span>b</span></div> + +<div class="grid test7"><span> grid</span></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-definite-002.html b/layout/reftests/css-grid/grid-placement-definite-002.html new file mode 100644 index 0000000000..6e9cd72d1c --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-definite-002.html @@ -0,0 +1,90 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +html,body { + font-size:12px; + font-family:monospace; +} +.grid { + display: grid; + border: 1px solid green; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-auto-flow: row; + grid-auto-columns: 20px; + grid-auto-rows: 20px; +} + +span { + background: lime; + border: 1px solid; +} + +.test1 { grid-template-areas:'. a a-start .'; } +.test1 span { grid-column: a-start / 8; } + +.test2 { + grid-template-areas: + 'a a a . . .' + 'a a a . . .' + '. b b . . .' + ; +} + +.test2 .a { + grid-area: a; +} +.test2 .b { + grid-column: 2 / span 3; + grid-row: b; +} +.test2 .c { + grid-column: auto / span 3; +} + +.test3 { + grid-template-areas:'. a .'; + grid-template-columns: [a-start] 20px 20px [a-start-start] 20px [a-start-end]; +} +.test3 span { grid-column: a-start / 8; } + +.test4, .test5 { + grid-template-areas:'. . . a'; + grid-template-columns: 20px [a-start] 20px [a-start] 20px [a-end] 20px ; +} +.test4 span { grid-column: a-start 2 / 8; } +.test5 span { grid-column: a / 8; } + +.test6 #span1 { grid-row:1/2; grid-column:1/2; } +.test6 #span2 { grid-row:1/2; grid-column:1/2; } + +.test7 {grid-template-columns: 700px; grid-template-rows: 60px; } +.test7 #span1 { grid-area: 1/1; background: red; border: 4px solid red; color:red; } +.test7 #span2 { grid-area: 1/1; background: lime; padding: 3px; margin:0; } + + </style> +</head> +<body> + +<div class="grid test1"><span>a</span></div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +</div> + +<div class="grid test3"><span>a</span></div> + +<div class="grid test4"><span>a</span></div> + +<div class="grid test5"><span>a</span></div> + +<div class="grid test6"><span id="span1">a</span><span id="span2">b</span></div> + +<div class="grid test7"><span id="span1">FAIL</span><span id="span2"> grid</span></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-definite-003-ref.html b/layout/reftests/css-grid/grid-placement-definite-003-ref.html new file mode 100644 index 0000000000..e9d6f8c142 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-definite-003-ref.html @@ -0,0 +1,79 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +html,body { + font-size:12px; + font-family:monospace; +} +.grid { + height: 60px; + border: 1px solid green; + position: relative; +} + +span { + position: absolute; + background: lime; + border: 1px solid black; + box-sizing: border-box; +} + +.test1 span { + top: 0; + left: 40px; + width: 100px; + height: 20px; +} + +.test2 .a { + top: 0; + left: 0; + width: 60px; + height: 40px; +} +.test2 .b { + top: 40px; + left: 20px; + width: 60px; + height: 20px; +} +.test2 .c { + top: 0; + left: 60px; + width: 60px; + height: 20px; +} + +.test3 span { + top: 0; + left: 40px; + width: 100px; + height: 20px; +} + +.test4 span { + top: 0; + left: 40px; + width: 100px; + height: 20px; +} + </style> +</head> +<body> + +<div class="grid test1"><span>a</span></div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +</div> + +<div class="grid test3"><span>a</span></div> + +<div class="grid test4"><span>a</span></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-definite-003.html b/layout/reftests/css-grid/grid-placement-definite-003.html new file mode 100644 index 0000000000..c23505f2ac --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-definite-003.html @@ -0,0 +1,76 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +html,body { + font-size:12px; + font-family:monospace; +} +.grid { + display: grid; + border: 1px solid green; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-auto-flow: row; + grid-auto-columns: 20px; + grid-auto-rows: 20px; +} + +span { + background: lime; + border: 1px solid; +} + +.test1 { grid-template-areas:'.. a a-start-.'; } +.test1 span { grid-column: a-start- / 8; } + +.test2 { + grid-template-areas: + 'a a a ... . .' + 'a a a . . ..' + '.-b b . . ...' + ; +} + +.test2 .a { + grid-area: a; +} +.test2 .b { + grid-column: 2 / span 3; + grid-row: b; +} +.test2 .c { + grid-column: auto / span 3; +} + +.test3 { + grid-template-areas:'.a.'; + grid-template-columns: [a-start] 20px 20px [a-start-start] 20px [a-start-end]; +} +.test3 span { grid-column: a-start / 8; } + +.test4 { + grid-template-areas:'. .... .-a'; + grid-template-columns: 20px [-a-start] 20px [-a-start] 20px [-a-end] 20px ; +} +.test4 span { grid-column: -a-start 2 / 8; } + + </style> +</head> +<body> + +<div class="grid test1"><span>a</span></div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +</div> + +<div class="grid test3"><span>a</span></div> + +<div class="grid test4"><span>a</span></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-definite-implicit-001-ref.html b/layout/reftests/css-grid/grid-placement-definite-implicit-001-ref.html new file mode 100644 index 0000000000..a9684cfd1d --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-definite-implicit-001-ref.html @@ -0,0 +1,93 @@ +<!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 Test: Testing placement of grid items outside the explicit grid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + border: 1px solid blue; +} + +.a { background:lime; } +.b { background:pink; } +.c { width:1px; display: block; background:yellow; } +.d { margin-left:3px; width:10000px; display: block; background:cyan; } + +span { + display: inline-block; + width: 18px; + height: 18px; + line-height: 18px; + border: 1px solid; + vertical-align:top; +} + + </style> +</head> +<body style="overflow:hidden"> + +<div class="grid"> +<span class="b">b</span><span class="a">a</span><span class="c" style="width:18px">c</span> +</div> + +<div class="grid"> +<span class="b" span="2">b</span><span class="a">a</span><span class="c">c</span> +</div> +<div class="grid"> +<span class="b" span="3">b</span><span class="a">a</span><span class="c">c</span> +</div> +<div class="grid"> +<span class="b" span="4">b</span><span class="a">a</span><span class="c">c</span> +</div> +<div class="grid"> +<span class="b" span="100">b</span><span class="a">a</span><span class="c">c</span> +</div> +<div class="grid"> +<span class="b" span="9998">b</span> +</div> +<div class="grid"> +<span class="b" span="9999">b</span> +</div> +<div class="grid"> +<span class="b" span="10000">b</span> +</div> +<div class="grid"> +<span class="b" span="12345">b</span> +</div> +<div class="grid" style="height:40px"> +<span class="b" span="10000">b</span> +</div> +<div class="grid"> +<span class="b" span="2">b</span><span class="a">a</span><span class="d">d</span> +</div> +<div class="grid"> +<span class="b" style="margin-left:56px; width:30000px; ">b</span> +</div> + +<div class="grid cols" style="margin-left:-30000px;"> +<span class="b" style="width:1px; margin-left:30062px">b</span> +<span class="c" style="margin-left:29000px; width:1063px;">c</span> +</div> +<div class="grid rows" style="border:none"> +<span class="b" style="margin-top:11px;height:1px;"></span> +</div> + + +<script> +var elms = document.querySelectorAll("[span].b"); +for (i=0; i < elms.length; ++i) { + var e = elms[i]; + var span = e.getAttribute("span"); + var width = (15 + 3*parseInt((span>10000?10000:span))); + e.style.width = width + "px"; +} +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-definite-implicit-001.html b/layout/reftests/css-grid/grid-placement-definite-implicit-001.html new file mode 100644 index 0000000000..b559770948 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-definite-implicit-001.html @@ -0,0 +1,112 @@ +<!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 Test: Testing placement of grid items outside the explicit grid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#overlarge-grids"> + <link rel="match" href="grid-placement-definite-implicit-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px; + grid-auto-columns: 3px; + grid-auto-rows: 20px; + border: 1px solid blue; + justify-items: stretch; +} + +.a { grid-area: 1 / 2; background:lime; } +.b { grid-column: span 1 / 2; grid-row: 1; background:pink; } +.c { grid-row: 2; background:yellow; } +.d { grid-row: 2; grid-column: 1 / span 20000; background:cyan; } + +span { + border: 1px solid; + line-height: 18px; + min-width: 0; +} + + </style> +</head> +<body style="overflow:hidden"> + +<div class="grid"> +<span class="a">a</span><span class="b">b</span><span class="c">c</span> +</div> + +<div class="grid"> +<span class="a">a</span><span class="b" span="2">b</span><span class="c">c</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="3">b</span><span class="c">c</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="4">b</span><span class="c">c</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="100">b</span><span class="c">c</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="9998">b</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="9999">b</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="10000">b</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="12345">b</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="10000">b</span><span class="d">d</span> +</div> +<div class="grid"> +<span class="a">a</span><span class="b" span="2">b</span><span class="d">d</span> +</div> +<div class="grid"> +<span class="b" style="grid-column: 9997 / span 1000; margin-left:-30000px; ">b</span> +</div> + +<div class="grid cols" style="margin-left:-30000px;"> +<span class="b" style="grid-column: span 1 / a;">b</span> +<span class="c" style="grid-column: a;">c</span> +</div> +<div class="grid rows" style="grid-auto-rows:3px; grid-auto-cols:20px; margin-top:-30000px; border:none"> +<span class="b" style="grid-row: span 1 / a;"></span> +</div> + +<script> +var elms = document.querySelectorAll("[span]"); +for (i=0; i < elms.length; ++i) { + var e = elms[i]; + e.style.gridColumnStart = "span " + e.getAttribute("span"); +} +var cols = '"'; +for (j = 0; j < 10010; ++j) { + cols += "a " +} +cols += '"'; +var rows = ''; +for (j = 0; j < 10010; ++j) { + rows += '"a" ' +} + +var style = document.createElement('style'); +style.appendChild(document.createTextNode( + ".cols { grid-template-areas: " + cols + "; }" + + ".rows { grid-template-areas: " + rows + "; }")); +var head = document.querySelector("head"); +head.appendChild(style) +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-definite-implicit-002-ref.html b/layout/reftests/css-grid/grid-placement-definite-implicit-002-ref.html new file mode 100644 index 0000000000..a796ea9acd --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-definite-implicit-002-ref.html @@ -0,0 +1,231 @@ +<!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 Test: Testing definite placement with non-existent line names</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051"> + <style type="text/css"> +html,body { + font-size: 16px; + font-family: monospace; + padding:0; margin:0; +} + +.grid { + height: 40px; + position: relative; +} + +span { + position: absolute; + top:0; left:0; width:20px; height:20px; + background: lime; + border: 1px solid black; + box-sizing: border-box; +} + +.XeN { left: 20px; width: 80px; } +.XsN { width: 80px; } .XsN ~ span { top:20px; left:60px; } +.NeX { left: 20px; width: 80px; } +.NsX { width: 80px; } .NsX ~ span { left: 60px; top: 20px; } +.XeA { width: 100px; } .XeA ~ span { top: 20px; } +.XsA { width: 60px; } .XsA ~ span { left: 60px; } +.XsA2 { width: 80px; } .XsA2 ~ span { left: 60px; top: 20px; } +.XsA3 { width: 120px; } .XsA3 ~ span { left: 60px; top: 20px; } +.AsX { width: 60px;} .AsX ~ span { left: 60px; } +.xsN { } .xsN ~ span { left: 20px; } +.x2sN { width: 40px; } .x2sN ~ span { left: 40px; } +.xsN2 { width: 40px; } .xsN2 ~ span { left: 20px; top: 20px; } +.xXs { } .xXs ~ span { left: 60px;} +.aXs { } .aXs ~ span { left: 60px;} +.aXe { left: 20px; width: 60px; } +.xXe { width: 100px; } .xXe ~ span { left: 20px; top: 20px; } + +.AXe { width: 80px; } .AXe ~ span { top: 20px; } +.A2Xe { left: 20px; width: 60px; } +.XXe { left: 60px; } +.XX3e { left: 60px; width: 40px; } +.XbXe { width: 100px; } .XbXe ~ span { top: 20px; left: 40px; } +.XX0b { } .XX0b ~ span { left: 60px; } +.XX1b { } .XX1b ~ span { left: 60px; } +.XX2b { width: 40px; } .XX2b ~ span { left: 60px; } +.XbN1 { width: 60px; } .XbN1 ~ span { left: 60px; } +.XbN2 { width: 80px; } .XbN2 ~ span { top: 20px; left: 60px; } +.Xbb { } .Xbb ~ span { left: 80px; } +.Xee { left: 60px; width:40px; } +.nX2s { width: 40px; } .nX2s ~ span { left: 80px; } +.nXs { width: 40px; } .nXs ~ span { left: 60px; } +.nXe { left: 20px; width: 40px; } +.nX2e { left: 40px; width: 40px; } + +.nX3e { left: 60px; width: 40px; } +.n3Xe { width: 60px; } .n3Xe ~ span { top: 20px; } +.n4Xe { width: 80px; } .n4Xe ~ span { top: 20px; left: 20px; } +.Xen3 { left: 60px; width: 60px; } +.Xea { left: 60px; } +.Xea2 { left: 60px; width: 40px; } +.Xea3 { left: 60px; width: 60px; } +.Xsa { } .Xsa ~ span { left: 20px; } +.Xsa2 { width: 40px; } .Xsa2 ~ span { left: 20px; top: 20px; } +.Xsa4 { width: 100px; } .Xsa4 ~ span { left: 20px; top: 20px; } +.Xs2a { width: 40px; } .Xs2a ~ span { left: 40px; } +.Xs2a2 { width: 60px; } .Xs2a2 ~ span { left: 40px; top: 20px; } +.Xs2a4 { width: 120px; } .Xs2a4 ~ span { left: 40px; top: 20px; } +.Xs3a { width: 60px; } .Xs3a ~ span { left: 60px; } +.Xs3a2 { width: 80px; } .Xs3a2 ~ span { left: 60px; top: 20px; } +.Xs3a4 { width: 140px; } .Xs3a4 ~ span { left: 60px; top: 20px; } + +.nxe { width: 60px; } .nxe ~ span { top: 20px; } +.nx3e { width: 100px; } .nx3e ~ span { top: 20px; } +.n2x3e { left: 20px; width: 80px; } +.Axe { width: 60px; } .Axe ~ span { top: 20px; } +.A2xe { left: 20px; width: 40px; } +.Ax3e { width: 100px; } .Ax3e ~ span { top: 20px; } +.A2x3e { left: 20px; width: 80px; } +.Aa { } .Aa ~ span { top: 20px; } +.A2a { left: 20px; width: 40px; } +.Aa3 { width: 80px; } .Aa3 ~ span { top: 20px; } +.AXs { width: 40px; } .AXs ~ span { left:40px; } +.A2Xs { width: 60px; } .A2Xs ~ span { left: 40px; top:20px; } +._Xs { } ._Xs ~ span { left: 60px; } +._Xe { left: 60px; } +._xe { } ._xe ~ span { top: 20px; } +._x3e { } ._x3e ~ span { top: 20px; } + +._xa { } ._xa ~ span { top: 20px; } +._xa3 { } ._xa3 ~ span { top: 20px; } +._xn3 { width: 60px; } ._xn3 ~ span { top: 20px; } +._xn5 { width: 100px; } ._xn5 ~ span { top: 20px; } +.Xs_ { } .Xs_ ~ span { left: 20px; } +.X2s_ { } .X2s_ ~ span { left: 40px; } +.X2e_ { left: 80px; } +.A_ { } .A_ ~ span { top: 20px; } +.A2_ { left: 20px; } +.x3_ { } .x3_ ~ span { top: 20px; } +.a2_ { } .a2_ ~ span { top: 20px; } +.a-2_ { } .a-2_ ~ span { top: 20px; } +._n { } ._n ~ span { left: 20px; } +._n2 { } ._n2 ~ span { top: 20px; } +.A3Xe { left: 60px; } +.asA { } .asA ~ span { left: 20px; } +.asA2 { } .asA2 ~ span { top: 20px; } +.a2sA2 { width: 40px; } .a2sA2 ~ span { left: 20px; top: 20px; } +.as1 { } .as1 ~ span { left: 20px; } +.as2 { } .as2 ~ span { top: 20px; } +.as3 { left: 20px; } + +.c1 { background:grey; } + + </style> +</head> +<body> + + +<div style="float:left; width:140px"> +<div class="grid"><span class="XeN" ></span><span class="c1"></span></div> +<div class="grid"><span class="XsN" ></span><span class="c1"></span></div> +<div class="grid"><span class="NeX" ></span><span class="c1"></span></div> +<div class="grid"><span class="NsX" ></span><span class="c1"></span></div> +<div class="grid"><span class="XeA" ></span><span class="c1"></span></div> +<div class="grid"><span class="XsA" ></span><span class="c1"></span></div> +<div class="grid"><span class="XsA2"></span><span class="c1"></span></div> +<div class="grid"><span class="XsA3"></span><span class="c1"></span></div> +<div class="grid"><span class="AsX" ></span><span class="c1"></span></div> +<div class="grid"><span class="xsN" ></span><span class="c1"></span></div> +<div class="grid"><span class="x2sN"></span><span class="c1"></span></div> +<div class="grid"><span class="xsN2"></span><span class="c1"></span></div> +<div class="grid"><span class="xXs" ></span><span class="c1"></span></div> +<div class="grid"><span class="aXs" ></span><span class="c1"></span></div> +<div class="grid"><span class="aXe" ></span><span class="c1"></span></div> +<div class="grid"><span class="xXe" ></span><span class="c1"></span></div> +</div> + +<div style="float:left; width:140px"> +<div class="grid"><span class="AXe" ></span><span class="c1"></span></div> +<div class="grid"><span class="A2Xe"></span><span class="c1"></span></div> +<div class="grid"><span class="XXe" ></span><span class="c1"></span></div> +<div class="grid"><span class="XX3e"></span><span class="c1"></span></div> +<div class="grid"><span class="XbXe"></span><span class="c1"></span></div> +<div class="grid"><span class="XX0b"></span><span class="c1"></span></div> +<div class="grid"><span class="XX1b"></span><span class="c1"></span></div> +<div class="grid"><span class="XX2b"></span><span class="c1"></span></div> +<div class="grid"><span class="XbN1"></span><span class="c1"></span></div> +<div class="grid"><span class="XbN2"></span><span class="c1"></span></div> +<div class="grid"><span class="Xbb" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xee" ></span><span class="c1"></span></div> +<div class="grid"><span class="nX2s"></span><span class="c1"></span></div> +<div class="grid"><span class="nXs" ></span><span class="c1"></span></div> +<div class="grid"><span class="nXe" ></span><span class="c1"></span></div> +<div class="grid"><span class="nX2e"></span><span class="c1"></span></div> +</div> + +<div style="float:left; width:140px"> +<div class="grid"><span class="nX3e" ></span><span class="c1"></span></div> +<div class="grid"><span class="n3Xe" ></span><span class="c1"></span></div> +<div class="grid"><span class="n4Xe" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xen3" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xea" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xea2" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xea3" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xsa" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xsa2" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xsa4" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xs2a" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xs2a2"></span><span class="c1"></span></div> +<div class="grid"><span class="Xs2a4"></span><span class="c1"></span></div> +<div class="grid"><span class="Xs3a" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xs3a2"></span><span class="c1"></span></div> +<div class="grid"><span class="Xs3a4"></span><span class="c1"></span></div> +</div> + +<div style="float:left; width:140px"> +<div class="grid"><span class="nxe" ></span><span class="c1"></span></div> +<div class="grid"><span class="nx3e" ></span><span class="c1"></span></div> +<div class="grid"><span class="n2x3e"></span><span class="c1"></span></div> +<div class="grid"><span class="Axe" ></span><span class="c1"></span></div> +<div class="grid"><span class="A2xe" ></span><span class="c1"></span></div> +<div class="grid"><span class="Ax3e" ></span><span class="c1"></span></div> +<div class="grid"><span class="A2x3e"></span><span class="c1"></span></div> +<div class="grid"><span class="Aa" ></span><span class="c1"></span></div> +<div class="grid"><span class="A2a" ></span><span class="c1"></span></div> +<div class="grid"><span class="Aa3" ></span><span class="c1"></span></div> +<div class="grid"><span class="AXs" ></span><span class="c1"></span></div> +<div class="grid"><span class="A2Xs" ></span><span class="c1"></span></div> +<div class="grid"><span class="_Xs" ></span><span class="c1"></span></div> +<div class="grid"><span class="_Xe" ></span><span class="c1"></span></div> +<div class="grid"><span class="_xe" ></span><span class="c1"></span></div> +<div class="grid"><span class="_x3e" ></span><span class="c1"></span></div> +</div> + +<div style="float:left; width:140px"> +<div class="grid"><span class="_xa" ></span><span class="c1"></span></div> +<div class="grid"><span class="_xa3"></span><span class="c1"></span></div> +<div class="grid"><span class="_xn3"></span><span class="c1"></span></div> +<div class="grid"><span class="_xn5"></span><span class="c1"></span></div> +<div class="grid"><span class="Xs_" ></span><span class="c1"></span></div> +<div class="grid"><span class="X2s_"></span><span class="c1"></span></div> +<div class="grid"><span class="X2e_"></span><span class="c1"></span></div> +<div class="grid"><span class="A_" ></span><span class="c1"></span></div> +<div class="grid"><span class="A2_" ></span><span class="c1"></span></div> +<div class="grid"><span class="x3_" ></span><span class="c1"></span></div> +<div class="grid"><span class="a2_" ></span><span class="c1"></span></div> +<div class="grid"><span class="a-2_"></span><span class="c1"></span></div> +<div class="grid"><span class="_n" ></span><span class="c1"></span></div> +<div class="grid"><span class="_n2" ></span><span class="c1"></span></div> +<div class="grid"><span class="A3Xe"></span><span class="c1"></span></div> +<div class="grid"><span class="asA"></span><span class="c1"></span></div> +</div> + +<div style="float:left; width:140px; clear:both"> +<div class="grid"><span class="asA2"></span><span class="c1"></span></div> +<div class="grid"><span class="a2sA2"></span><span class="c1"></span></div> +<div class="grid"><span class="as1"></span><span class="c1"></span></div> +<div class="grid"><span class="as2"></span><span class="c1"></span></div> +<div class="grid"><span class="as3"></span><span class="c1"></span></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-definite-implicit-002.html b/layout/reftests/css-grid/grid-placement-definite-implicit-002.html new file mode 100644 index 0000000000..5e74258547 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-definite-implicit-002.html @@ -0,0 +1,244 @@ +<!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 Test: Testing definite placement with non-existent line names</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#grid-placement-slot"> + <link rel="match" href="grid-placement-definite-implicit-002-ref.html"> + <style type="text/css"> +html,body { + font-size: 16px; + font-family: monospace; + padding:0; margin:0; +} + +span { + background: lime; + border: 1px solid; + grid-row: 1; +} + +.grid { + display: grid; + grid-template-columns: [A] 20px [A] 20px; + grid-template-rows: 20px 20px; + grid-auto-columns: 20px; +} + +/* Legend: + X = line name with no match + x = ditto with span + A = existing line name + a = ditto with span + N = line number + n = ditto with span + e = on the end side + s = on the start side +*/ +.XeN { grid-column: X 3 / 2; } +.XsN { grid-column: X -3 / 2; } +.NeX { grid-column: 2 / X 3; } +.NsX { grid-column: 2 / X -3; } +.XeA { grid-column: X 3 / A; } +.XsA { grid-column: X -3 / A; } +.XsA2 { grid-column: X -3 / A 2; } +.XsA3 { grid-column: X -3 / A 3; } +.AsX { grid-column: A / X -3; } +.xsN { grid-column: span X / 1; } +.x2sN { grid-column: span X 2 / 1; } +.xsN2 { grid-column: span X / 2; } +.xXs { grid-column: span X / X -2; } +.aXs { grid-column: span A / X -2; } +.aXe { grid-column: span A / X 2; } +.xXe { grid-column: span X / X 2; } + +.AXe { grid-column: A / X 2; } +.A2Xe { grid-column: A 2 / X 2; } +.XXe { grid-column: X / X 2; } +.XX3e { grid-column: X / X 3; } +.XbXe { grid-column: X -2 / X; } +.XX0b { grid-column: X -3 / X -3; } +.XX1b { grid-column: X -3 / X -2; } +.XX2b { grid-column: X -3 / X -1; } +.XbN1 { grid-column: X -3 / 1; } +.XbN2 { grid-column: X -3 / 2; } +.Xbb { grid-column: X -3 / X -4; } +.Xee { grid-column: X 3 / X; } +.nX2s { grid-column: span 2 / X -2; } +.nXs { grid-column: span 2 / X -1; } +.nXe { grid-column: span 2 / X; } +.nX2e { grid-column: span 2 / X 2; } + +.nX3e { grid-column: span 2 / X 3; } +.n3Xe { grid-column: span 3 / X; } +.n4Xe { grid-column: span 4 / X; } +.Xen3 { grid-column: X / span 3; } +.Xea { grid-column: X / span A; } +.Xea2 { grid-column: X / span A 2; } +.Xea3 { grid-column: X / span A 3; } +.Xsa { grid-column: X -1 / span A; } +.Xsa2 { grid-column: X -1 / span A 2; } +.Xsa4 { grid-column: X -1 / span A 4; } +.Xs2a { grid-column: X -2 / span A; } +.Xs2a2 { grid-column: X -2 / span A 2; } +.Xs2a4 { grid-column: X -2 / span A 4; } +.Xs3a { grid-column: X -3 / span A; } +.Xs3a2 { grid-column: X -3 / span A 2; } +.Xs3a4 { grid-column: X -3 / span A 4; } + +.nxe { grid-column: 1 / span X; } +.nx3e { grid-column: 1 / span X 3; } +.n2x3e { grid-column: 2 / span X 3; } +.Axe { grid-column: A / span X; } +.A2xe { grid-column: A 2 / span X; } +.Ax3e { grid-column: A / span X 3; } +.A2x3e { grid-column: A 2 / span X 3; } +.Aa { grid-column: A / span A; } +.A2a { grid-column: A 2 / span A; } +.Aa3 { grid-column: A / span A 3; } +.AXs { grid-column: A / X -2; } +.A2Xs { grid-column: A 2 / X -2; } +._Xs { grid-column: auto / X -2; } +._Xe { grid-column: auto / X 2; } +._xe { grid-column: auto / span X; } +._x3e { grid-column: auto / span X 3; } + +._xa { grid-column: auto / span A; } +._xa3 { grid-column: auto / span A 3; } +._xn3 { grid-column: auto / span 3; } +._xn5 { grid-column: auto / span 5; } +.Xs_ { grid-column: X -1 / auto; } +.X2s_ { grid-column: X -2 / auto; } +.X2e_ { grid-column: X 2 / auto; } +.A_ { grid-column: A / auto; } +.A2_ { grid-column: A 2 / auto; } +.x3_ { grid-column: span X 3 / auto; } +.a2_ { grid-column: span A 2 / auto; } +.a-2_ { grid-column: span A -2 / auto; } /*intentionally invalid span*/ +._n { grid-column: auto / 1; } +._n2 { grid-column: auto / 2; } +.A3Xe { grid-column: A 3 / X 2; } +.asA { grid-column: span A / A; } +.asA2 { grid-column: span A / A 2; } +.a2sA2 { grid-column: span A 2 / A 2; } +.as1 { grid-column: span A / 1; } +.as2 { grid-column: span A / 2; } +.as3 { grid-column: span A / 3; } + +.c1 { grid-column:1; grid-row:auto; background:grey; } + + </style> +</head> +<body> + +<div style="float:left; width:140px"> +<div class="grid"><span class="XeN" ></span><span class="c1"></span></div> +<div class="grid"><span class="XsN" ></span><span class="c1"></span></div> +<div class="grid"><span class="NeX" ></span><span class="c1"></span></div> +<div class="grid"><span class="NsX" ></span><span class="c1"></span></div> +<div class="grid"><span class="XeA" ></span><span class="c1"></span></div> +<div class="grid"><span class="XsA" ></span><span class="c1"></span></div> +<div class="grid"><span class="XsA2"></span><span class="c1"></span></div> +<div class="grid"><span class="XsA3"></span><span class="c1"></span></div> +<div class="grid"><span class="AsX" ></span><span class="c1"></span></div> +<div class="grid"><span class="xsN" ></span><span class="c1"></span></div> +<div class="grid"><span class="x2sN"></span><span class="c1"></span></div> +<div class="grid"><span class="xsN2"></span><span class="c1"></span></div> +<div class="grid"><span class="xXs" ></span><span class="c1"></span></div> +<div class="grid"><span class="aXs" ></span><span class="c1"></span></div> +<div class="grid"><span class="aXe" ></span><span class="c1"></span></div> +<div class="grid"><span class="xXe" ></span><span class="c1"></span></div> +</div> + +<div style="float:left; width:140px"> +<div class="grid"><span class="AXe" ></span><span class="c1"></span></div> +<div class="grid"><span class="A2Xe"></span><span class="c1"></span></div> +<div class="grid"><span class="XXe" ></span><span class="c1"></span></div> +<div class="grid"><span class="XX3e"></span><span class="c1"></span></div> +<div class="grid"><span class="XbXe"></span><span class="c1"></span></div> +<div class="grid"><span class="XX0b"></span><span class="c1"></span></div> +<div class="grid"><span class="XX1b"></span><span class="c1"></span></div> +<div class="grid"><span class="XX2b"></span><span class="c1"></span></div> +<div class="grid"><span class="XbN1"></span><span class="c1"></span></div> +<div class="grid"><span class="XbN2"></span><span class="c1"></span></div> +<div class="grid"><span class="Xbb" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xee" ></span><span class="c1"></span></div> +<div class="grid"><span class="nX2s"></span><span class="c1"></span></div> +<div class="grid"><span class="nXs" ></span><span class="c1"></span></div> +<div class="grid"><span class="nXe" ></span><span class="c1"></span></div> +<div class="grid"><span class="nX2e"></span><span class="c1"></span></div> +</div> + +<div style="float:left; width:140px"> +<div class="grid"><span class="nX3e" ></span><span class="c1"></span></div> +<div class="grid"><span class="n3Xe" ></span><span class="c1"></span></div> +<div class="grid"><span class="n4Xe" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xen3" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xea" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xea2" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xea3" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xsa" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xsa2" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xsa4" ></span><span class="c1"></span></div> + +<div class="grid"><span class="Xs2a" ></span><span class="c1"></span></div> + +<div class="grid"><span class="Xs2a2"></span><span class="c1"></span></div> +<div class="grid"><span class="Xs2a4"></span><span class="c1"></span></div> +<div class="grid"><span class="Xs3a" ></span><span class="c1"></span></div> +<div class="grid"><span class="Xs3a2"></span><span class="c1"></span></div> +<div class="grid"><span class="Xs3a4"></span><span class="c1"></span></div> +</div> + +<div style="float:left; width:140px"> +<div class="grid"><span class="nxe" ></span><span class="c1"></span></div> +<div class="grid"><span class="nx3e" ></span><span class="c1"></span></div> +<div class="grid"><span class="n2x3e"></span><span class="c1"></span></div> +<div class="grid"><span class="Axe" ></span><span class="c1"></span></div> +<div class="grid"><span class="A2xe" ></span><span class="c1"></span></div> +<div class="grid"><span class="Ax3e" ></span><span class="c1"></span></div> +<div class="grid"><span class="A2x3e"></span><span class="c1"></span></div> +<div class="grid"><span class="Aa" ></span><span class="c1"></span></div> +<div class="grid"><span class="A2a" ></span><span class="c1"></span></div> +<div class="grid"><span class="Aa3" ></span><span class="c1"></span></div> +<div class="grid"><span class="AXs" ></span><span class="c1"></span></div> +<div class="grid"><span class="A2Xs" ></span><span class="c1"></span></div> +<div class="grid"><span class="_Xs" ></span><span class="c1"></span></div> +<div class="grid"><span class="_Xe" ></span><span class="c1"></span></div> +<div class="grid"><span class="_xe" ></span><span class="c1"></span></div> +<div class="grid"><span class="_x3e" ></span><span class="c1"></span></div> +</div> + +<div style="float:left; width:140px"> +<div class="grid"><span class="_xa" ></span><span class="c1"></span></div> +<div class="grid"><span class="_xa3"></span><span class="c1"></span></div> +<div class="grid"><span class="_xn3"></span><span class="c1"></span></div> +<div class="grid"><span class="_xn5"></span><span class="c1"></span></div> +<div class="grid"><span class="Xs_" ></span><span class="c1"></span></div> +<div class="grid"><span class="X2s_"></span><span class="c1"></span></div> +<div class="grid"><span class="X2e_"></span><span class="c1"></span></div> +<div class="grid"><span class="A_" ></span><span class="c1"></span></div> +<div class="grid"><span class="A2_" ></span><span class="c1"></span></div> +<div class="grid"><span class="x3_" ></span><span class="c1"></span></div> +<div class="grid"><span class="a2_" ></span><span class="c1"></span></div> +<div class="grid"><span class="a-2_"></span><span class="c1"></span></div> +<div class="grid"><span class="_n" ></span><span class="c1"></span></div> +<div class="grid"><span class="_n2" ></span><span class="c1"></span></div> +<div class="grid"><span class="A3Xe"></span><span class="c1"></span></div> +<div class="grid"><span class="asA"></span><span class="c1"></span></div> +</div> + +<div style="float:left; width:140px; clear:both"> +<div class="grid"><span class="asA2"></span><span class="c1"></span></div> +<div class="grid"><span class="a2sA2"></span><span class="c1"></span></div> +<div class="grid"><span class="as1"></span><span class="c1"></span></div> +<div class="grid"><span class="as2"></span><span class="c1"></span></div> +<div class="grid"><span class="as3"></span><span class="c1"></span></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-implicit-named-areas-001-ref.html b/layout/reftests/css-grid/grid-placement-implicit-named-areas-001-ref.html new file mode 100644 index 0000000000..01e936d3ae --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-implicit-named-areas-001-ref.html @@ -0,0 +1,155 @@ +<!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: implicit named areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215182"> + <style type="text/css"> +div { + display: grid; + grid-auto-columns: 3px; + grid-auto-rows: 3px; + border: 1px solid; + float: left; + width: 100px; + margin: 2px; + place-items: stretch; + place-content: start; +} +.row-tests div { + height: 100px; +} +span { background:lime; grid-column:A/B; grid-row:A/B; } + +.col-valid { grid-template-columns:[A] 40px [] 40px [B]; } +.row-valid { grid-template-rows: [A] 40px [] 40px [B]; } + +.col-start-1 { grid-template-columns:[A] 40px [] 40px; } +.row-start-1 { grid-template-rows: [A] 40px [] 40px; } + +.col-end-1 { grid-template-columns:[B] 40px [] 40px; } +.row-end-1 { grid-template-rows: [B] 40px [] 40px; } + +.col-start { grid-template-columns: 40px [A] 40px []; } +.row-start { grid-template-rows: 40px [A] 40px []; } + +.col-end { grid-template-columns:40px [B] 40px; } +.row-end { grid-template-rows: 40px [B] 40px; } + +.col-end-start { grid-template-columns:[B] 40px [A] 40px; } +.row-end-start { grid-template-rows: [B] 40px [A] 40px; } + +.col-start-end-start { grid-template-columns:[A] 40px [B] 40px [A] 40px; } +.row-start-end-start { grid-template-rows: [A] 40px [B] 40px [A] 40px; } + +.col-start-start-end { grid-template-columns:[A] 40px [A] 40px [B] 40px; } +.row-start-start-end { grid-template-rows: [A] 40px [A] 40px [B] 40px; } + +.col-start-end-end { grid-template-columns:[A] 40px [B] 40px [B]; } +.row-start-end-end { grid-template-rows: [A] 40px [B] 40px [B]; } + +.col-start-last { grid-template-columns: 40px [] 40px [A]; } +.row-start-last { grid-template-rows: 40px [] 40px [A]; } + +.col-same-1 { grid-template-columns:[B A] 40px [] 40px; } +.row-same-1 { grid-template-rows: [B A] 40px [] 40px; } + +.col-same-2 { grid-template-columns:40px [B A] 40px; } +.row-same-2 { grid-template-rows: 40px [B A] 40px; } + +.col-same-2b { grid-template-columns:40px [A B] 40px; } +.row-same-2b { grid-template-rows: 40px [A B] 40px; } + +.col-same-3 { grid-template-columns:40px [] 40px [B A]; } +.row-same-3 { grid-template-rows: 40px [] 40px [B A]; } + </style> +</head> +<body> + +<div class="col-valid"><span></span></div> +<div class="col-start-1"><span></span></div> +<div class="col-end-1"><span></span></div> +<div class="col-start"><span></span></div> +<div class="col-end"><span></span></div> +<div class="col-end-start"><span></span></div> +<div class="col-start-end-start"><span></span></div> + +<br clear="all"> + +<div class="col-valid row-valid"><span></span></div> +<div class="col-start-1 row-valid"><span></span></div> +<div class="col-end-1 row-valid"><span></span></div> +<div class="col-start row-valid"><span></span></div> +<div class="col-end row-valid"><span></span></div> +<div class="col-end-start row-valid"><span></span></div> +<div class="col-start-end-start row-valid"><span></span></div> + +<br clear="all"> + +<div class="col-start-start-end"><span></span></div> +<div class="col-start-end-end"><span></span></div> +<div class="col-start-last"><span></span></div> +<div class="col-same-1"><span></span></div> +<div class="col-same-2"><span></span></div> +<div class="col-same-2b"><span></span></div> +<div class="col-same-3"><span></span></div> + +<br clear="all"> + +<div class="col-start-start-end row-valid"><span></span></div> +<div class="col-start-end-end row-valid"><span></span></div> +<div class="col-start-last row-valid"><span></span></div> +<div class="col-same-1 row-valid"><span></span></div> +<div class="col-same-2 row-valid"><span></span></div> +<div class="col-same-2b row-valid"><span></span></div> +<div class="col-same-3 row-valid"><span></span></div> + +<br clear="all"> + +<x class="row-tests"> + +<div class="row-valid"><span></span></div> +<div class="row-start-1"><span></span></div> +<div class="row-end-1"><span></span></div> +<div class="row-start"><span></span></div> +<div class="row-end"><span></span></div> +<div class="row-end-start"><span></span></div> +<div class="row-start-end-start"><span></span></div> + +<br clear="all"> + +<div class="row-valid col-valid"><span></span></div> +<div class="row-start-1 col-valid"><span></span></div> +<div class="row-end-1 col-valid"><span></span></div> +<div class="row-start col-valid"><span></span></div> +<div class="row-end col-valid"><span></span></div> +<div class="row-end-start col-valid"><span></span></div> +<div class="row-start-end-start col-valid"><span></span></div> + +<br clear="all"> + +<div class="row-start-start-end"><span></span></div> +<div class="row-start-end-end"><span></span></div> +<div class="row-start-last"><span></span></div> +<div class="row-same-1"><span></span></div> +<div class="row-same-2"><span></span></div> +<div class="row-same-2b"><span></span></div> +<div class="row-same-3"><span></span></div> + +<br clear="all"> + +<div class="row-start-start-end col-valid"><span></span></div> +<div class="row-start-end-end col-valid"><span></span></div> +<div class="row-start-last col-valid"><span></span></div> +<div class="row-same-1 col-valid"><span></span></div> +<div class="row-same-2 col-valid"><span></span></div> +<div class="row-same-2b col-valid"><span></span></div> +<div class="row-same-3 col-valid"><span></span></div> + +</x> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-implicit-named-areas-001.html b/layout/reftests/css-grid/grid-placement-implicit-named-areas-001.html new file mode 100644 index 0000000000..8f73dfb9b6 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-implicit-named-areas-001.html @@ -0,0 +1,159 @@ +<!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: implicit named areas</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215182"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#grid-placement-slot"> + <link rel="match" href="grid-placement-implicit-named-areas-001-ref.html"> + <style type="text/css"> +div { + display: grid; + grid-auto-columns: 3px; + grid-auto-rows: 3px; + border: 1px solid; + float: left; + width: 100px; + margin: 2px; + align-items: stretch; + justify-items: stretch; + align-content: start; + justify-content: start; +} +.row-tests div { + height: 100px; +} +span { background:lime; grid-column:A; grid-row:A; } + +.col-valid { grid-template-columns:[A-start] 40px [] 40px [A-end]; } +.row-valid { grid-template-rows: [A-start] 40px [] 40px [A-end]; } + +.col-start-1 { grid-template-columns:[A-start] 40px [] 40px; } +.row-start-1 { grid-template-rows: [A-start] 40px [] 40px; } + +.col-end-1 { grid-template-columns:[A-end] 40px [] 40px; } +.row-end-1 { grid-template-rows: [A-end] 40px [] 40px; } + +.col-start { grid-template-columns: 40px [A-start] 40px []; } +.row-start { grid-template-rows: 40px [A-start] 40px []; } + +.col-end { grid-template-columns:40px [A-end] 40px; } +.row-end { grid-template-rows: 40px [A-end] 40px; } + +.col-end-start { grid-template-columns:[A-end] 40px [A-start] 40px; } +.row-end-start { grid-template-rows: [A-end] 40px [A-start] 40px; } + +.col-start-end-start { grid-template-columns:[A-start] 40px [A-end] 40px [A-start] 40px; } +.row-start-end-start { grid-template-rows: [A-start] 40px [A-end] 40px [A-start] 40px; } + +.col-start-start-end { grid-template-columns:[A-start] 40px [A-start] 40px [A-end] 40px; } +.row-start-start-end { grid-template-rows: [A-start] 40px [A-start] 40px [A-end] 40px; } + +.col-start-end-end { grid-template-columns:[A-start] 40px [A-end] 40px [A-end]; } +.row-start-end-end { grid-template-rows: [A-start] 40px [A-end] 40px [A-end]; } + +.col-start-last { grid-template-columns: 40px [] 40px [A-start]; } +.row-start-last { grid-template-rows: 40px [] 40px [A-start]; } + +.col-same-1 { grid-template-columns:[A-end A-start] 40px [] 40px; } +.row-same-1 { grid-template-rows: [A-end A-start] 40px [] 40px; } + +.col-same-2 { grid-template-columns:40px [A-end A-start] 40px; } +.row-same-2 { grid-template-rows: 40px [A-end A-start] 40px; } + +.col-same-2b { grid-template-columns:40px [A-start A-end] 40px; } +.row-same-2b { grid-template-rows: 40px [A-start A-end] 40px; } + +.col-same-3 { grid-template-columns:40px [] 40px [A-end A-start]; } +.row-same-3 { grid-template-rows: 40px [] 40px [A-end A-start]; } + </style> +</head> +<body> + +<div class="col-valid"><span></span></div> +<div class="col-start-1"><span></span></div> +<div class="col-end-1"><span></span></div> +<div class="col-start"><span></span></div> +<div class="col-end"><span></span></div> +<div class="col-end-start"><span></span></div> +<div class="col-start-end-start"><span></span></div> + +<br clear="all"> + +<div class="col-valid row-valid"><span></span></div> +<div class="col-start-1 row-valid"><span></span></div> +<div class="col-end-1 row-valid"><span></span></div> +<div class="col-start row-valid"><span></span></div> +<div class="col-end row-valid"><span></span></div> +<div class="col-end-start row-valid"><span></span></div> +<div class="col-start-end-start row-valid"><span></span></div> + +<br clear="all"> + +<div class="col-start-start-end"><span></span></div> +<div class="col-start-end-end"><span></span></div> +<div class="col-start-last"><span></span></div> +<div class="col-same-1"><span></span></div> +<div class="col-same-2"><span></span></div> +<div class="col-same-2b"><span></span></div> +<div class="col-same-3"><span></span></div> + +<br clear="all"> + +<div class="col-start-start-end row-valid"><span></span></div> +<div class="col-start-end-end row-valid"><span></span></div> +<div class="col-start-last row-valid"><span></span></div> +<div class="col-same-1 row-valid"><span></span></div> +<div class="col-same-2 row-valid"><span></span></div> +<div class="col-same-2b row-valid"><span></span></div> +<div class="col-same-3 row-valid"><span></span></div> + +<br clear="all"> + +<x class="row-tests"> + +<div class="row-valid"><span></span></div> +<div class="row-start-1"><span></span></div> +<div class="row-end-1"><span></span></div> +<div class="row-start"><span></span></div> +<div class="row-end"><span></span></div> +<div class="row-end-start"><span></span></div> +<div class="row-start-end-start"><span></span></div> + +<br clear="all"> + +<div class="row-valid col-valid"><span></span></div> +<div class="row-start-1 col-valid"><span></span></div> +<div class="row-end-1 col-valid"><span></span></div> +<div class="row-start col-valid"><span></span></div> +<div class="row-end col-valid"><span></span></div> +<div class="row-end-start col-valid"><span></span></div> +<div class="row-start-end-start col-valid"><span></span></div> + +<br clear="all"> + +<div class="row-start-start-end"><span></span></div> +<div class="row-start-end-end"><span></span></div> +<div class="row-start-last"><span></span></div> +<div class="row-same-1"><span></span></div> +<div class="row-same-2"><span></span></div> +<div class="row-same-2b"><span></span></div> +<div class="row-same-3"><span></span></div> + +<br clear="all"> + +<div class="row-start-start-end col-valid"><span></span></div> +<div class="row-start-end-end col-valid"><span></span></div> +<div class="row-start-last col-valid"><span></span></div> +<div class="row-same-1 col-valid"><span></span></div> +<div class="row-same-2 col-valid"><span></span></div> +<div class="row-same-2b col-valid"><span></span></div> +<div class="row-same-3 col-valid"><span></span></div> + +</x> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-named-lines-001-ref.html b/layout/reftests/css-grid/grid-placement-named-lines-001-ref.html new file mode 100644 index 0000000000..2a0c095185 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-named-lines-001-ref.html @@ -0,0 +1,187 @@ +<!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="https://bugzilla.mozilla.org/show_bug.cgi?id=1226697"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 15px; + grid-gap: 1px; +} +.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; +} +.t3 { + grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px; +} + +x { + background: lime; + border: 1px solid; +} +y { + position: absolute; + border: 1px solid blue; + bottom:0;height:0;left:0;right:0; + grid-row-end:span 1!important; +} +.a2 { bottom:2px; } +.a3 { bottom:4px; } +.a4 { bottom:6px; } +.a5 { bottom:8px; } + + </style> +</head> +<body> + +<pre> +grid-template-columns: [A-start] 60px 60px 60px; +grid-template-areas: "B A"; +grid-auto-columns: 40px; +grid-gap: 1px; +</pre> + +<pre>grid-column-start:</pre> +<div class="grid t1" style="padding-right:13px; border-right-width:5px"> +<x style="grid-row:1; grid-column-start:4; background:grey"></x> +<x style="grid-row:2; grid-column-start:7">-1</x> +<x style="grid-row:3; grid-column-start:7">4</x> +<x style="grid-row:3; grid-column-start:6">-2</x> +<x style="grid-row:3; grid-column-start:5">-3</x> +<x style="grid-row:3; grid-column-start:4">-4</x> +<x style="grid-row:3; grid-column-start:3">-5</x> +<x style="grid-row:4; grid-column-start:5">A -1</x> +<x style="grid-row:4; grid-column-start:3">B -1</x> +<x style="grid-row:5; grid-column-start:4">A -2</x> +<x style="grid-row:6; grid-column-start:3">A -3</x> +<x style="grid-row:6; grid-column-start:2">A -4</x> +<x style="grid-row:6; grid-column-start:1">A -5</x> +<x style="grid-row:7; grid-column-start:4">A</x> +<x style="grid-row:7; grid-column-start:4">B</x> +<x style="grid-row:8; grid-column-start:4">A 1</x> +<x style="grid-row:8; grid-column-start:5">A 2</x> +<x style="grid-row:8; grid-column-start:8">A 3</x> +<x style="grid-row:8; grid-column-start:9">A 4</x> +<x style="grid-row:8; grid-column-start:10">A 5</x> +<y style="grid-row:2; grid-column-start:7"></y> +<y style="grid-row:3; grid-column-start:7"></y> +<y style="grid-row:3; grid-column-start:6" class="a2"></y> +<y style="grid-row:3; grid-column-start:5" class="a3"></y> +<y style="grid-row:3; grid-column-start:4" class="a4"></y> +<y style="grid-row:3; grid-column-start:3" class="a5"></y> +<y style="grid-row:4; grid-column-start:5"></y> +<y style="grid-row:4; grid-column-start:3" class="a2"></y> +<y style="grid-row:5; grid-column-start:4"></y> +<y style="grid-row:6; grid-column-start:3"></y> +<y style="grid-row:6; grid-column-start:2" class="a2"></y> +<y style="grid-row:6; grid-column-start:1" class="a3"></y> +<y style="grid-row:7; grid-column-start:4"></y> +<y style="grid-row:7; grid-column-start:4" class="a2"></y> +<y style="grid-row:8; grid-column-start:4"></y> +<y style="grid-row:8; grid-column-start:5" class="a2"></y> +<y style="grid-row:8; grid-column-start:8" class="a3"></y> +<y style="grid-row:8; grid-column-start:9" class="a4"></y> +<y style="grid-row:8; grid-column-start:10" class="a5"></y> +</div> + +<pre>grid-column-end:</pre> +<div class="grid t2" style="padding-left:13px;"> +<x style="grid-row:1; grid-column-start:5; background:grey"></x> +<x style="grid-row:2; grid-column-start:7">-1</x> +<x style="grid-row:3; grid-column-start:7">4</x> +<x style="grid-row:3; grid-column-start:6">-2</x> +<x style="grid-row:3; grid-column-start:5">-3</x> +<x style="grid-row:3; grid-column-start:4">-4</x> +<x style="grid-row:3; grid-column-start:3">-5</x> +<x style="grid-row:4; grid-column-start:5">A -1</x> +<x style="grid-row:4; grid-column-start:3">B -1</x> +<x style="grid-row:5; grid-column-start:4">A -2</x> +<x style="grid-row:6; grid-column-start:3">A -3</x> +<x style="grid-row:6; grid-column-start:2">A -4</x> +<x style="grid-row:6; grid-column-start:1">A -5</x> +<x style="grid-row:7; grid-column-start:4">A</x> +<x style="grid-row:7; grid-column-start:5">B</x> +<x style="grid-row:8; grid-column-start:4">A 1</x> +<x style="grid-row:8; grid-column-start:5">A 2</x> +<x style="grid-row:8; grid-column-start:8">A 3</x> +<x style="grid-row:8; grid-column-start:9">A 4</x> +<x style="grid-row:8; grid-column-start:10">A 5</x> +<y style="grid-row:2; grid-column-end:8"></y> +<y style="grid-row:3; grid-column-end:8"></y> +<y style="grid-row:3; grid-column-end:7" class="a5"></y> +<y style="grid-row:3; grid-column-end:6" class="a4"></y> +<y style="grid-row:3; grid-column-end:5" class="a3"></y> +<y style="grid-row:3; grid-column-end:4" class="a2"></y> +<y style="grid-row:4; grid-column-end:6"></y> +<y style="grid-row:4; grid-column-end:4" class="a2"></y> +<y style="grid-row:5; grid-column-end:5"></y> +<y style="grid-row:6; grid-column-end:4"></y> +<y style="grid-row:6; grid-column-end:3" class="a2"></y> +<y style="grid-row:6; grid-column-end:2" class="a3"></y> +<y style="grid-row:7; grid-column-end:5"></y> +<y style="grid-row:7; grid-column-end:6" class="a2"></y> +<y style="grid-row:8; grid-column-end:5"></y> +<y style="grid-row:8; grid-column-end:6" class="a2"></y> +<y style="grid-row:8; grid-column-end:9" class="a3"></y> +<y style="grid-row:8; grid-column-end:10" class="a4"></y> +<y style="grid-row:8; grid-column-end:11" class="a5"></y> +</div> + +<pre>grid-column: / span A-start 2</pre> +<div class="grid t3"> +<x style="grid-row:1; grid-column:4; background:grey"></x> +<x style="grid-row:2; grid-column:7/span 2;">-1</x> +<x style="grid-row:3; 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:8; 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:19; grid-column:9/span 2;">A 4</x> +<x style="grid-row:20; grid-column:10/span 2;">A 5</x> +<y style="grid-row:2; grid-column:7/span 2;"></y> +<y style="grid-row:3; 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:8; 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:19; grid-column:9/span 2;"></y> +<y style="grid-row:20; grid-column:10/span 2;"></y> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-named-lines-001.html b/layout/reftests/css-grid/grid-placement-named-lines-001.html new file mode 100644 index 0000000000..d0e4244923 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-named-lines-001.html @@ -0,0 +1,182 @@ +<!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="https://bugzilla.mozilla.org/show_bug.cgi?id=1226697"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int"> + <link rel="match" href="grid-placement-named-lines-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-template-columns: [A-start] 60px 60px 60px; + grid-template-areas: "B A"; + grid-auto-columns: 40px; + grid-auto-rows: 15px; + grid-gap: 1px; +} + +x { + background: lime; + border: 1px solid; +} +y { + position: absolute; + border: 1px solid blue; + bottom:0;height:0;left:0;right:0; + grid-row-end:span 1!important; +} +.a2 { bottom:2px; } +.a3 { bottom:4px; } +.a4 { bottom:6px; } +.a5 { bottom:8px; } + + </style> +</head> +<body> + +<pre> +grid-template-columns: [A-start] 60px 60px 60px; +grid-template-areas: "B A"; +grid-auto-columns: 40px; +grid-gap: 1px; +</pre> + +<pre>grid-column-start:</pre> +<div class="grid" style="padding-right:13px; border-right-width:5px"> +<x style="grid-row:1; grid-column:1; background:grey"></x> +<x style="grid-row:2; grid-column-start:-1">-1</x> +<x style="grid-row:3; grid-column-start:4">4</x> +<x style="grid-row:3; grid-column-start:-2">-2</x> +<x style="grid-row:3; grid-column-start:-3">-3</x> +<x style="grid-row:3; grid-column-start:-4">-4</x> +<x style="grid-row:3; grid-column-start:-5">-5</x> +<x style="grid-row:4; grid-column-start:A-start -1">A -1</x> +<x style="grid-row:4; grid-column-start:B -1">B -1</x> +<x style="grid-row:5; grid-column-start:A-start -2">A -2</x> +<x style="grid-row:6; grid-column-start:A-start -3">A -3</x> +<x style="grid-row:6; grid-column-start:A-start -4">A -4</x> +<x style="grid-row:6; grid-column-start:A-start -5">A -5</x> +<x style="grid-row:7; grid-column-start:A-start">A</x> +<x style="grid-row:7; grid-column-start:B">B</x> +<x style="grid-row:8; grid-column-start:A-start 1">A 1</x> +<x style="grid-row:8; grid-column-start:A-start 2">A 2</x> +<x style="grid-row:8; grid-column-start:A-start 3">A 3</x> +<x style="grid-row:8; grid-column-start:A-start 4">A 4</x> +<x style="grid-row:8; grid-column-start:A-start 5">A 5</x> +<y style="grid-row:2; grid-column-start:-1"></y> +<y style="grid-row:3; grid-column-start:4"></y> +<y style="grid-row:3; grid-column-start:-2" class="a2"></y> +<y style="grid-row:3; grid-column-start:-3" class="a3"></y> +<y style="grid-row:3; grid-column-start:-4" class="a4"></y> +<y style="grid-row:3; grid-column-start:-5" class="a5"></y> +<y style="grid-row:4; grid-column-start:A-start -1"></y> +<y style="grid-row:4; grid-column-start:B -1" class="a2"></y> +<y style="grid-row:5; grid-column-start:A-start -2"></y> +<y style="grid-row:6; grid-column-start:A-start -3"></y> +<y style="grid-row:6; grid-column-start:A-start -4" class="a2"></y> +<y style="grid-row:6; grid-column-start:A-start -5" class="a3"></y> +<y style="grid-row:7; grid-column-start:A-start"></y> +<y style="grid-row:7; grid-column-start:B" class="a2"></y> +<y style="grid-row:8; grid-column-start:A-start 1"></y> +<y style="grid-row:8; grid-column-start:A-start 2" class="a2"></y> +<y style="grid-row:8; grid-column-start:A-start 3" class="a3"></y> +<y style="grid-row:8; grid-column-start:A-start 4" class="a4"></y> +<y style="grid-row:8; grid-column-start:A-start 5" class="a5"></y> +</div> + +<pre>grid-column-end:</pre> +<div class="grid" style="padding-left:13px;"> +<x style="grid-row:1; grid-column:1; background:grey"></x> +<x style="grid-row:2; grid-column-end:-1">-1</x> +<x style="grid-row:3; grid-column-end:4">4</x> +<x style="grid-row:3; grid-column-end:-5">-5</x> +<x style="grid-row:3; grid-column-end:-4">-4</x> +<x style="grid-row:3; grid-column-end:-3">-3</x> +<x style="grid-row:3; grid-column-end:-2">-2</x> +<x style="grid-row:4; grid-column-end:A-start -1">A -1</x> +<x style="grid-row:4; grid-column-end:B -1">B -1</x> +<x style="grid-row:5; grid-column-end:A-start -2">A -2</x> +<x style="grid-row:6; grid-column-end:A-start -3">A -3</x> +<x style="grid-row:6; grid-column-end:A-start -4">A -4</x> +<x style="grid-row:6; grid-column-end:A-start -5">A -5</x> +<x style="grid-row:7; grid-column-end:A-start">A</x> +<x style="grid-row:7; grid-column-end:B">B</x> +<x style="grid-row:8; grid-column-end:A-start 1">A 1</x> +<x style="grid-row:8; grid-column-end:A-start 2">A 2</x> +<x style="grid-row:8; grid-column-end:A-start 3">A 3</x> +<x style="grid-row:8; grid-column-end:A-start 4">A 4</x> +<x style="grid-row:8; grid-column-end:A-start 5">A 5</x> +<y style="grid-row:2; grid-column-end:-1"></y> +<y style="grid-row:3; grid-column-end:4"></y> +<y style="grid-row:3; grid-column-end:-5" class="a2"></y> +<y style="grid-row:3; grid-column-end:-4" class="a3"></y> +<y style="grid-row:3; grid-column-end:-3" class="a4"></y> +<y style="grid-row:3; grid-column-end:-2" class="a5"></y> +<y style="grid-row:4; grid-column-end:A-start -1"></y> +<y style="grid-row:4; grid-column-end:B -1" class="a2"></y> +<y style="grid-row:5; grid-column-end:A-start -2"></y> +<y style="grid-row:6; grid-column-end:A-start -3"></y> +<y style="grid-row:6; grid-column-end:A-start -4" class="a2"></y> +<y style="grid-row:6; grid-column-end:A-start -5" class="a3"></y> +<y style="grid-row:7; grid-column-end:A-start"></y> +<y style="grid-row:7; grid-column-end:B" class="a2"></y> +<y style="grid-row:8; grid-column-end:A-start 1"></y> +<y style="grid-row:8; grid-column-end:A-start 2" class="a2"></y> +<y style="grid-row:8; grid-column-end:A-start 3" class="a3"></y> +<y style="grid-row:8; grid-column-end:A-start 4" class="a4"></y> +<y style="grid-row:8; grid-column-end:A-start 5" class="a5"></y> +</div> + +<pre>grid-column: / span A-start 2</pre> +<div class="grid"> +<x style="grid-row:1; grid-column:1; background:grey"></x> +<x style="grid-row:2; grid-column:-1/span A-start 2">-1</x> +<x style="grid-row:3; grid-column:4/span A-start 2">4</x> +<x style="grid-row:4; grid-column:-2/span A-start 2">-2</x> +<x style="grid-row:5; grid-column:-3/span A-start 2">-3</x> +<x style="grid-row:6; grid-column:-4/span A-start 2">-4</x> +<x style="grid-row:7; grid-column:-5/span A-start 2">-5</x> +<x style="grid-row:8; grid-column:A-start -1/span A-start 2">A -1</x> +<x style="grid-row:9; grid-column:B -1/span A-start 2">B -1</x> +<x style="grid-row:10; grid-column:A-start -2/span A-start 2">A -2</x> +<x style="grid-row:11; grid-column:A-start -3/span A-start 2">A -3</x> +<x style="grid-row:12; grid-column:A-start -4/span A-start 2">A -4</x> +<x style="grid-row:13; grid-column:A-start -5/span A-start 2">A -5</x> +<x style="grid-row:14; grid-column:A-start/span A-start 2">A</x> +<x style="grid-row:15; grid-column:B/span B">B</x> +<x style="grid-row:16; grid-column:A-start 1/span A-start 2">A 1</x> +<x style="grid-row:17; grid-column:A-start 2/span A-start 2">A 2</x> +<x style="grid-row:18; grid-column:A-start 3/span A-start 2">A 3</x> +<x style="grid-row:19; grid-column:A-start 4/span A-start 2">A 4</x> +<x style="grid-row:20; grid-column:A-start 5/span A-start 2">A 5</x> +<y style="grid-row:2; grid-column:-1/span A-start 2"></y> +<y style="grid-row:3; grid-column:4/span A-start 2"></y> +<y style="grid-row:4; grid-column:-2/span A-start 2"></y> +<y style="grid-row:5; grid-column:-3/span A-start 2"></y> +<y style="grid-row:6; grid-column:-4/span A-start 2"></y> +<y style="grid-row:7; grid-column:-5/span A-start 2"></y> +<y style="grid-row:8; grid-column:A-start -1/span A-start 2"></y> +<y style="grid-row:9; grid-column:B -1/span A-start 2"></y> +<y style="grid-row:10; grid-column:A-start -2/span A-start 2"></y> +<y style="grid-row:11; grid-column:A-start -3/span A-start 2"></y> +<y style="grid-row:12; grid-column:A-start -4/span A-start 2"></y> +<y style="grid-row:13; grid-column:A-start -5/span A-start 2"></y> +<y style="grid-row:14; grid-column:A-start/span A-start 2"></y> +<y style="grid-row:15; grid-column:B/span B"></y> +<y style="grid-row:16; grid-column:A-start 1/span A-start 2"></y> +<y style="grid-row:17; grid-column:A-start 2/span A-start 2"></y> +<y style="grid-row:18; grid-column:A-start 3/span A-start 2"></y> +<y style="grid-row:19; grid-column:A-start 4/span A-start 2"></y> +<y style="grid-row:20; grid-column:A-start 5/span A-start 2"></y> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-named-lines-002-ref.html b/layout/reftests/css-grid/grid-placement-named-lines-002-ref.html new file mode 100644 index 0000000000..9b0c931062 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-named-lines-002-ref.html @@ -0,0 +1,187 @@ +<!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="https://bugzilla.mozilla.org/show_bug.cgi?id=1226697"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 15px; + grid-gap: 1px; +} +.t1 { + grid-template-columns: 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px ; + +} +.t2 { + grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px; +} +.t3 { + grid-template-columns: 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px 40px; +} + +x { + background: lime; + border: 1px solid; +} +y { + position: absolute; + border: 1px solid blue; + bottom:0;height:0;left:0;right:0; + grid-row-end:span 1!important; +} +.a2 { bottom:2px; } +.a3 { bottom:4px; } +.a4 { bottom:6px; } +.a5 { bottom:8px; } + + </style> +</head> +<body> + +<pre> +grid-template-columns: [A-start] 60px [A-start] 60px 60px; +grid-template-areas: "B . . . A"; +grid-auto-columns: 40px; +grid-gap: 1px; +</pre> + +<pre>grid-column-start:</pre> +<div class="grid t1" style="padding-right:13px; border-right-width:5px"> +<x style="grid-row:1; grid-column-start:3; background:grey"></x> +<x style="grid-row:2; grid-column-start:8">-1</x> +<x style="grid-row:3; grid-column-start:7">4</x> +<x style="grid-row:3; grid-column-start:7">-2</x> +<x style="grid-row:3; grid-column-start:6">-3</x> +<x style="grid-row:3; grid-column-start:5">-4</x> +<x style="grid-row:3; grid-column-start:4">-5</x> +<x style="grid-row:4; grid-column-start:7">A -1</x> +<x style="grid-row:4; grid-column-start:2">B -1</x> +<x style="grid-row:5; grid-column-start:4">A -2</x> +<x style="grid-row:6; grid-column-start:3">A -3</x> +<x style="grid-row:6; grid-column-start:2">A -4</x> +<x style="grid-row:6; grid-column-start:1">A -5</x> +<x style="grid-row:7; grid-column-start:3">A</x> +<x style="grid-row:7; grid-column-start:3">B</x> +<x style="grid-row:8; grid-column-start:3">A 1</x> +<x style="grid-row:8; grid-column-start:4">A 2</x> +<x style="grid-row:8; grid-column-start:7">A 3</x> +<x style="grid-row:8; grid-column-start:9">A 4</x> +<x style="grid-row:8; grid-column-start:10">A 5</x> +<y style="grid-row:2; grid-column-start:8"></y> +<y style="grid-row:3; grid-column-start:6"></y> +<y style="grid-row:3; grid-column-start:7" class="a2"></y> +<y style="grid-row:3; grid-column-start:6" class="a3"></y> +<y style="grid-row:3; grid-column-start:5" class="a4"></y> +<y style="grid-row:3; grid-column-start:4" class="a5"></y> +<y style="grid-row:4; grid-column-start:7"></y> +<y style="grid-row:4; grid-column-start:2" class="a2"></y> +<y style="grid-row:5; grid-column-start:4"></y> +<y style="grid-row:6; grid-column-start:3"></y> +<y style="grid-row:6; grid-column-start:2" class="a2"></y> +<y style="grid-row:6; grid-column-start:1" class="a3"></y> +<y style="grid-row:7; grid-column-start:3"></y> +<y style="grid-row:7; grid-column-start:3" class="a2"></y> +<y style="grid-row:8; grid-column-start:3"></y> +<y style="grid-row:8; grid-column-start:4" class="a2"></y> +<y style="grid-row:8; grid-column-start:7" class="a3"></y> +<y style="grid-row:8; grid-column-start:9" class="a4"></y> +<y style="grid-row:8; grid-column-start:10" class="a5"></y> +</div> + +<pre>grid-column-end:</pre> +<div class="grid t2" style="padding-left:13px;"> +<x style="grid-row:1; grid-column-start:4; background:grey"></x> +<x style="grid-row:2; grid-column-start:8">-1</x> +<x style="grid-row:3; grid-column-start:7">4</x> +<x style="grid-row:3; grid-column-start:7">-2</x> +<x style="grid-row:3; grid-column-start:6">-3</x> +<x style="grid-row:3; grid-column-start:5">-4</x> +<x style="grid-row:3; grid-column-start:4">-5</x> +<x style="grid-row:4; grid-column-start:7">A -1</x> +<x style="grid-row:4; grid-column-start:2">B -1</x> +<x style="grid-row:5; grid-column-start:4">A -2</x> +<x style="grid-row:6; grid-column-start:3">A -3</x> +<x style="grid-row:6; grid-column-start:2">A -4</x> +<x style="grid-row:6; grid-column-start:1">A -5</x> +<x style="grid-row:7; grid-column-start:3">A</x> +<x style="grid-row:7; grid-column-start:4">B</x> +<x style="grid-row:8; grid-column-start:3">A 1</x> +<x style="grid-row:8; grid-column-start:4">A 2</x> +<x style="grid-row:8; grid-column-start:7">A 3</x> +<x style="grid-row:8; grid-column-start:9">A 4</x> +<x style="grid-row:8; grid-column-start:10">A 5</x> +<y style="grid-row:2; grid-column-end:9"></y> +<y style="grid-row:3; grid-column-end:7"></y> +<y style="grid-row:3; grid-column-end:8" class="a5"></y> +<y style="grid-row:3; grid-column-end:7" class="a4"></y> +<y style="grid-row:3; grid-column-end:6" class="a3"></y> +<y style="grid-row:3; grid-column-end:5" class="a2"></y> +<y style="grid-row:4; grid-column-end:8"></y> +<y style="grid-row:4; grid-column-end:3" class="a2"></y> +<y style="grid-row:5; grid-column-end:5"></y> +<y style="grid-row:6; grid-column-end:4"></y> +<y style="grid-row:6; grid-column-end:3" class="a2"></y> +<y style="grid-row:6; grid-column-end:2" class="a3"></y> +<y style="grid-row:7; grid-column-end:4"></y> +<y style="grid-row:7; grid-column-end:5" class="a2"></y> +<y style="grid-row:8; grid-column-end:4"></y> +<y style="grid-row:8; grid-column-end:5" class="a2"></y> +<y style="grid-row:8; grid-column-end:8" class="a3"></y> +<y style="grid-row:8; grid-column-end:10" class="a4"></y> +<y style="grid-row:8; grid-column-end:11" class="a5"></y> +</div> + +<pre>grid-column: / span A-start 2</pre> +<div class="grid t3"> +<x style="grid-row:1; grid-column:3; background:grey"></x> +<x style="grid-row:2; grid-column:8/span 2;">-1</x> +<x style="grid-row:3; grid-column:6/span 3;">4</x> +<x style="grid-row:4; grid-column:7/span 3;">-2</x> +<x style="grid-row:5; grid-column:6/span 3;">-3</x> +<x style="grid-row:6; grid-column:5/span 4;">-4</x> +<x style="grid-row:7; grid-column:4/span 5;">-5</x> +<x style="grid-row:8; grid-column:7/span 3;">A -1</x> +<x style="grid-row:9; grid-column:2/span 2;">B -1</x> +<x style="grid-row:10; grid-column:4/span 5;">A -2</x> +<x style="grid-row:11; grid-column:3/span 4;">A -3</x> +<x style="grid-row:12; grid-column:2/span 2;">A -4</x> +<x style="grid-row:13; grid-column:1/span 3;">A -5</x> +<x style="grid-row:14; grid-column:3/span 4;">A</x> +<x style="grid-row:15; grid-column:3/span 6;">B</x> +<x style="grid-row:16; grid-column:3/span 4;">A 1</x> +<x style="grid-row:17; grid-column:4/span 5;">A 2</x> +<x style="grid-row:18; grid-column:7/span 3;">A 3</x> +<x style="grid-row:19; grid-column:9/span 2;">A 4</x> +<x style="grid-row:20; grid-column:10/span 2;">A 5</x> +<y style="grid-row:2; grid-column:8/span 2;"></y> +<y style="grid-row:3; grid-column:6/span 3;"></y> +<y style="grid-row:4; grid-column:7/span 3;"></y> +<y style="grid-row:5; grid-column:6/span 3;"></y> +<y style="grid-row:6; grid-column:5/span 4;"></y> +<y style="grid-row:7; grid-column:4/span 5;"></y> +<y style="grid-row:8; grid-column:7/span 3;"></y> +<y style="grid-row:9; grid-column:2/span 2;"></y> +<y style="grid-row:10; grid-column:4/span 5;"></y> +<y style="grid-row:11; grid-column:3/span 4;"></y> +<y style="grid-row:12; grid-column:2/span 2;"></y> +<y style="grid-row:13; grid-column:1/span 3;"></y> +<y style="grid-row:14; grid-column:3/span 4;"></y> +<y style="grid-row:15; grid-column:3/span 6;"></y> +<y style="grid-row:16; grid-column:3/span 4;"></y> +<y style="grid-row:17; grid-column:4/span 5;"></y> +<y style="grid-row:18; grid-column:7/span 3;"></y> +<y style="grid-row:19; grid-column:9/span 2;"></y> +<y style="grid-row:20; grid-column:10/span 2;"></y> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-named-lines-002.html b/layout/reftests/css-grid/grid-placement-named-lines-002.html new file mode 100644 index 0000000000..7a07093c24 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-named-lines-002.html @@ -0,0 +1,182 @@ +<!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="https://bugzilla.mozilla.org/show_bug.cgi?id=1226697"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int"> + <link rel="match" href="grid-placement-named-lines-002-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-template-columns: [A-start] 60px [A-start] 60px 60px; + grid-template-areas: "B . . . A"; + grid-auto-columns: 40px; + grid-auto-rows: 15px; + grid-gap: 1px; +} + +x { + background: lime; + border: 1px solid; +} +y { + position: absolute; + border: 1px solid blue; + bottom:0;height:0;left:0;right:0; + grid-row-end:span 1!important; +} +.a2 { bottom:2px; } +.a3 { bottom:4px; } +.a4 { bottom:6px; } +.a5 { bottom:8px; } + + </style> +</head> +<body> + +<pre> +grid-template-columns: [A-start] 60px [A-start] 60px 60px; +grid-template-areas: "B . . . A"; +grid-auto-columns: 40px; +grid-gap: 1px; +</pre> + +<pre>grid-column-start:</pre> +<div class="grid" style="padding-right:13px; border-right-width:5px"> +<x style="grid-row:1; grid-column:1; background:grey"></x> +<x style="grid-row:2; grid-column-start:-1">-1</x> +<x style="grid-row:3; grid-column-start:4">4</x> +<x style="grid-row:3; grid-column-start:-2">-2</x> +<x style="grid-row:3; grid-column-start:-3">-3</x> +<x style="grid-row:3; grid-column-start:-4">-4</x> +<x style="grid-row:3; grid-column-start:-5">-5</x> +<x style="grid-row:4; grid-column-start:A-start -1">A -1</x> +<x style="grid-row:4; grid-column-start:B -1">B -1</x> +<x style="grid-row:5; grid-column-start:A-start -2">A -2</x> +<x style="grid-row:6; grid-column-start:A-start -3">A -3</x> +<x style="grid-row:6; grid-column-start:A-start -4">A -4</x> +<x style="grid-row:6; grid-column-start:A-start -5">A -5</x> +<x style="grid-row:7; grid-column-start:A-start">A</x> +<x style="grid-row:7; grid-column-start:B">B</x> +<x style="grid-row:8; grid-column-start:A-start 1">A 1</x> +<x style="grid-row:8; grid-column-start:A-start 2">A 2</x> +<x style="grid-row:8; grid-column-start:A-start 3">A 3</x> +<x style="grid-row:8; grid-column-start:A-start 4">A 4</x> +<x style="grid-row:8; grid-column-start:A-start 5">A 5</x> +<y style="grid-row:2; grid-column-start:-1"></y> +<y style="grid-row:3; grid-column-start:4"></y> +<y style="grid-row:3; grid-column-start:-2" class="a2"></y> +<y style="grid-row:3; grid-column-start:-3" class="a3"></y> +<y style="grid-row:3; grid-column-start:-4" class="a4"></y> +<y style="grid-row:3; grid-column-start:-5" class="a5"></y> +<y style="grid-row:4; grid-column-start:A-start -1"></y> +<y style="grid-row:4; grid-column-start:B -1" class="a2"></y> +<y style="grid-row:5; grid-column-start:A-start -2"></y> +<y style="grid-row:6; grid-column-start:A-start -3"></y> +<y style="grid-row:6; grid-column-start:A-start -4" class="a2"></y> +<y style="grid-row:6; grid-column-start:A-start -5" class="a3"></y> +<y style="grid-row:7; grid-column-start:A-start"></y> +<y style="grid-row:7; grid-column-start:B" class="a2"></y> +<y style="grid-row:8; grid-column-start:A-start 1"></y> +<y style="grid-row:8; grid-column-start:A-start 2" class="a2"></y> +<y style="grid-row:8; grid-column-start:A-start 3" class="a3"></y> +<y style="grid-row:8; grid-column-start:A-start 4" class="a4"></y> +<y style="grid-row:8; grid-column-start:A-start 5" class="a5"></y> +</div> + +<pre>grid-column-end:</pre> +<div class="grid" style="padding-left:13px;"> +<x style="grid-row:1; grid-column:1; background:grey"></x> +<x style="grid-row:2; grid-column-end:-1">-1</x> +<x style="grid-row:3; grid-column-end:4">4</x> +<x style="grid-row:3; grid-column-end:-5">-5</x> +<x style="grid-row:3; grid-column-end:-4">-4</x> +<x style="grid-row:3; grid-column-end:-3">-3</x> +<x style="grid-row:3; grid-column-end:-2">-2</x> +<x style="grid-row:4; grid-column-end:A-start -1">A -1</x> +<x style="grid-row:4; grid-column-end:B -1">B -1</x> +<x style="grid-row:5; grid-column-end:A-start -2">A -2</x> +<x style="grid-row:6; grid-column-end:A-start -3">A -3</x> +<x style="grid-row:6; grid-column-end:A-start -4">A -4</x> +<x style="grid-row:6; grid-column-end:A-start -5">A -5</x> +<x style="grid-row:7; grid-column-end:A-start">A</x> +<x style="grid-row:7; grid-column-end:B">B</x> +<x style="grid-row:8; grid-column-end:A-start 1">A 1</x> +<x style="grid-row:8; grid-column-end:A-start 2">A 2</x> +<x style="grid-row:8; grid-column-end:A-start 3">A 3</x> +<x style="grid-row:8; grid-column-end:A-start 4">A 4</x> +<x style="grid-row:8; grid-column-end:A-start 5">A 5</x> +<y style="grid-row:2; grid-column-end:-1"></y> +<y style="grid-row:3; grid-column-end:4"></y> +<y style="grid-row:3; grid-column-end:-5" class="a2"></y> +<y style="grid-row:3; grid-column-end:-4" class="a3"></y> +<y style="grid-row:3; grid-column-end:-3" class="a4"></y> +<y style="grid-row:3; grid-column-end:-2" class="a5"></y> +<y style="grid-row:4; grid-column-end:A-start -1"></y> +<y style="grid-row:4; grid-column-end:B -1" class="a2"></y> +<y style="grid-row:5; grid-column-end:A-start -2"></y> +<y style="grid-row:6; grid-column-end:A-start -3"></y> +<y style="grid-row:6; grid-column-end:A-start -4" class="a2"></y> +<y style="grid-row:6; grid-column-end:A-start -5" class="a3"></y> +<y style="grid-row:7; grid-column-end:A-start"></y> +<y style="grid-row:7; grid-column-end:B" class="a2"></y> +<y style="grid-row:8; grid-column-end:A-start 1"></y> +<y style="grid-row:8; grid-column-end:A-start 2" class="a2"></y> +<y style="grid-row:8; grid-column-end:A-start 3" class="a3"></y> +<y style="grid-row:8; grid-column-end:A-start 4" class="a4"></y> +<y style="grid-row:8; grid-column-end:A-start 5" class="a5"></y> +</div> + +<pre>grid-column: / span A-start 2</pre> +<div class="grid"> +<x style="grid-row:1; grid-column:1; background:grey"></x> +<x style="grid-row:2; grid-column:-1/span A-start 2">-1</x> +<x style="grid-row:3; grid-column:4/span A-start 2">4</x> +<x style="grid-row:4; grid-column:-2/span A-start 2">-2</x> +<x style="grid-row:5; grid-column:-3/span A-start 2">-3</x> +<x style="grid-row:6; grid-column:-4/span A-start 2">-4</x> +<x style="grid-row:7; grid-column:-5/span A-start 2">-5</x> +<x style="grid-row:8; grid-column:A-start -1/span A-start 2">A -1</x> +<x style="grid-row:9; grid-column:B -1/span A-start 2">B -1</x> +<x style="grid-row:10; grid-column:A-start -2/span A-start 2">A -2</x> +<x style="grid-row:11; grid-column:A-start -3/span A-start 2">A -3</x> +<x style="grid-row:12; grid-column:A-start -4/span A-start 2">A -4</x> +<x style="grid-row:13; grid-column:A-start -5/span A-start 2">A -5</x> +<x style="grid-row:14; grid-column:A-start/span A-start 2">A</x> +<x style="grid-row:15; grid-column:B/span B">B</x> +<x style="grid-row:16; grid-column:A-start 1/span A-start 2">A 1</x> +<x style="grid-row:17; grid-column:A-start 2/span A-start 2">A 2</x> +<x style="grid-row:18; grid-column:A-start 3/span A-start 2">A 3</x> +<x style="grid-row:19; grid-column:A-start 4/span A-start 2">A 4</x> +<x style="grid-row:20; grid-column:A-start 5/span A-start 2">A 5</x> +<y style="grid-row:2; grid-column:-1/span A-start 2"></y> +<y style="grid-row:3; grid-column:4/span A-start 2"></y> +<y style="grid-row:4; grid-column:-2/span A-start 2"></y> +<y style="grid-row:5; grid-column:-3/span A-start 2"></y> +<y style="grid-row:6; grid-column:-4/span A-start 2"></y> +<y style="grid-row:7; grid-column:-5/span A-start 2"></y> +<y style="grid-row:8; grid-column:A-start -1/span A-start 2"></y> +<y style="grid-row:9; grid-column:B -1/span A-start 2"></y> +<y style="grid-row:10; grid-column:A-start -2/span A-start 2"></y> +<y style="grid-row:11; grid-column:A-start -3/span A-start 2"></y> +<y style="grid-row:12; grid-column:A-start -4/span A-start 2"></y> +<y style="grid-row:13; grid-column:A-start -5/span A-start 2"></y> +<y style="grid-row:14; grid-column:A-start/span A-start 2"></y> +<y style="grid-row:15; grid-column:B/span B"></y> +<y style="grid-row:16; grid-column:A-start 1/span A-start 2"></y> +<y style="grid-row:17; grid-column:A-start 2/span A-start 2"></y> +<y style="grid-row:18; grid-column:A-start 3/span A-start 2"></y> +<y style="grid-row:19; grid-column:A-start 4/span A-start 2"></y> +<y style="grid-row:20; grid-column:A-start 5/span A-start 2"></y> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-named-lines-003-ref.html b/layout/reftests/css-grid/grid-placement-named-lines-003-ref.html new file mode 100644 index 0000000000..8baf2be8ad --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-named-lines-003-ref.html @@ -0,0 +1,171 @@ +<!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="https://bugzilla.mozilla.org/show_bug.cgi?id=1226697"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 15px; + grid-gap: 1px; +} +.t1 { + grid-template-columns: 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px ; + +} +.t2 { + grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px; +} +.t3 { + grid-template-columns: 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px 40px; +} + +x { + background: lime; + border: 1px solid; +} +y { + position: absolute; + border: 1px solid blue; + bottom:0;height:0;left:0;right:0; + grid-row-end:span 1!important; +} +.a2 { bottom:2px; } +.a3 { bottom:4px; } +.a4 { bottom:6px; } +.a5 { bottom:8px; } + + </style> +</head> +<body> + +<pre> +grid-template-columns: [A-start] 60px 60px [A-start] 60px; +grid-template-areas: "B A"; +grid-auto-columns: 40px; +grid-gap: 1px; +</pre> + +<pre>grid-column-start:</pre> +<div class="grid t1" style="padding-right:13px; border-right-width:5px"> +<x style="grid-row:1; grid-column-start:3; background:grey"></x> +<x style="grid-row:2; grid-column-start:6">-1</x> +<x style="grid-row:3; grid-column-start:3">A</x> +<x style="grid-row:4; grid-column-start:5">A -1</x> +<x style="grid-row:4; grid-column-start:2">B -1</x> +<x style="grid-row:5; grid-column-start:4">A -2</x> +<x style="grid-row:6; grid-column-start:3">A -3</x> +<x style="grid-row:6; grid-column-start:2">A -4</x> +<x style="grid-row:6; grid-column-start:1">A -5</x> +<x style="grid-row:7; grid-column-start:3">A</x> +<x style="grid-row:7; grid-column-start:3">B</x> +<x style="grid-row:8; grid-column-start:3">A 1</x> +<x style="grid-row:8; grid-column-start:4">A 2</x> +<x style="grid-row:8; grid-column-start:5">A 3</x> +<x style="grid-row:8; grid-column-start:7">A 4</x> +<x style="grid-row:8; grid-column-start:8">A 5</x> +<y style="grid-row:2; grid-column-start:6"></y> +<y style="grid-row:3; grid-column-start:3"></y> +<y style="grid-row:4; grid-column-start:5"></y> +<y style="grid-row:4; grid-column-start:2" class="a2"></y> +<y style="grid-row:5; grid-column-start:4"></y> +<y style="grid-row:6; grid-column-start:3"></y> +<y style="grid-row:6; grid-column-start:2" class="a2"></y> +<y style="grid-row:6; grid-column-start:1" class="a3"></y> +<y style="grid-row:7; grid-column-start:3"></y> +<y style="grid-row:7; grid-column-start:3" class="a2"></y> +<y style="grid-row:8; grid-column-start:3"></y> +<y style="grid-row:8; grid-column-start:4" class="a2"></y> +<y style="grid-row:8; grid-column-start:5" class="a3"></y> +<y style="grid-row:8; grid-column-start:7" class="a4"></y> +<y style="grid-row:8; grid-column-start:8" class="a5"></y> +</div> + +<pre>grid-column-end:</pre> +<div class="grid t2" style="padding-left:13px;"> +<x style="grid-row:1; grid-column-start:4; background:grey"></x> +<x style="grid-row:2; grid-column-start:6">-1</x> +<x style="grid-row:3; grid-column-start:5">A</x> +<x style="grid-row:4; grid-column-start:5">A -1</x> +<x style="grid-row:4; grid-column-start:2">B -1</x> +<x style="grid-row:5; grid-column-start:4">A -2</x> +<x style="grid-row:6; grid-column-start:3">A -3</x> +<x style="grid-row:6; grid-column-start:2">A -4</x> +<x style="grid-row:6; grid-column-start:1">A -5</x> +<x style="grid-row:7; grid-column-start:3">A</x> +<x style="grid-row:7; grid-column-start:4">B</x> +<x style="grid-row:8; grid-column-start:3">A 1</x> +<x style="grid-row:8; grid-column-start:4">A 2</x> +<x style="grid-row:8; grid-column-start:5">A 3</x> +<x style="grid-row:8; grid-column-start:7">A 4</x> +<x style="grid-row:8; grid-column-start:8">A 5</x> +<y style="grid-row:2; grid-column-end:7"></y> +<y style="grid-row:3; grid-column-end:6"></y> +<y style="grid-row:4; grid-column-end:6"></y> +<y style="grid-row:4; grid-column-end:3" class="a2"></y> +<y style="grid-row:5; grid-column-end:5"></y> +<y style="grid-row:6; grid-column-end:4"></y> +<y style="grid-row:6; grid-column-end:3" class="a2"></y> +<y style="grid-row:6; grid-column-end:2" class="a3"></y> +<y style="grid-row:7; grid-column-end:4"></y> +<y style="grid-row:7; grid-column-end:5" class="a2"></y> +<y style="grid-row:8; grid-column-end:4"></y> +<y style="grid-row:8; grid-column-end:5" class="a2"></y> +<y style="grid-row:8; grid-column-end:6" class="a3"></y> +<y style="grid-row:8; grid-column-end:8" class="a4"></y> +<y style="grid-row:8; grid-column-end:9" class="a5"></y> +</div> + +<pre>grid-column: / span A-start 2</pre> +<div class="grid t3"> +<x style="grid-row:1; grid-column:3; background:grey"></x> +<x style="grid-row:2; grid-column:6/span 2;">-1</x> +<x style="grid-row:3; grid-column:6/span 1;">A</x> +<x style="grid-row:4; grid-column:5/span 3;">-2</x> +<x style="grid-row:5; grid-column:4/span 3;">-3</x> +<x style="grid-row:6; grid-column:3/span 2;">-4</x> +<x style="grid-row:7; grid-column:2/span 2;">-5</x> +<x style="grid-row:8; grid-column:5/span 3;">A -1</x> +<x style="grid-row:9; grid-column:2/span 2;">B -1</x> +<x style="grid-row:10; grid-column:4/span 3;">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 2;">A -4</x> +<x style="grid-row:13; grid-column:1/span 3;">A -5</x> +<x style="grid-row:14; grid-column:3/span 2;">A</x> +<x style="grid-row:15; grid-column:3/span 4;">span A</x> +<x style="grid-row:16; grid-column:3/span 2;">A 1</x> +<x style="grid-row:17; grid-column:4/span 3;">A 2</x> +<x style="grid-row:18; grid-column:5/span 3;">A 3</x> +<x style="grid-row:19; grid-column:7/span 2;">A 4</x> +<x style="grid-row:20; grid-column:8/span 2;">A 5</x> +<y style="grid-row:2; grid-column:6/span 2;"></y> +<y style="grid-row:3; grid-column:6/span 1;"></y> +<y style="grid-row:4; grid-column:5/span 3;"></y> +<y style="grid-row:5; grid-column:4/span 3;"></y> +<y style="grid-row:6; grid-column:3/span 2;"></y> +<y style="grid-row:7; grid-column:2/span 2;"></y> +<y style="grid-row:8; grid-column:5/span 3;"></y> +<y style="grid-row:9; grid-column:2/span 2;"></y> +<y style="grid-row:10; grid-column:4/span 3;"></y> +<y style="grid-row:11; grid-column:3/span 2;"></y> +<y style="grid-row:12; grid-column:2/span 2;"></y> +<y style="grid-row:13; grid-column:1/span 3;"></y> +<y style="grid-row:14; grid-column:3/span 2;"></y> +<y style="grid-row:15; grid-column:3/span 4;"></y> +<y style="grid-row:16; grid-column:3/span 2;"></y> +<y style="grid-row:17; grid-column:4/span 3;"></y> +<y style="grid-row:18; grid-column:5/span 3;"></y> +<y style="grid-row:19; grid-column:7/span 2;"></y> +<y style="grid-row:20; grid-column:8/span 2;"></y> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-named-lines-003.html b/layout/reftests/css-grid/grid-placement-named-lines-003.html new file mode 100644 index 0000000000..e4a8de4b6e --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-named-lines-003.html @@ -0,0 +1,166 @@ +<!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="https://bugzilla.mozilla.org/show_bug.cgi?id=1226697"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int"> + <link rel="match" href="grid-placement-named-lines-003-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-template-columns: [A-start] 60px 60px [A-start] 60px; + grid-template-areas: "B A"; + grid-auto-columns: 40px; + grid-auto-rows: 15px; + grid-gap: 1px; +} + +x { + background: lime; + border: 1px solid; +} +y { + position: absolute; + border: 1px solid blue; + bottom:0;height:0;left:0;right:0; + grid-row-end:span 1!important; +} +.a2 { bottom:2px; } +.a3 { bottom:4px; } +.a4 { bottom:6px; } +.a5 { bottom:8px; } + + </style> +</head> +<body> + +<pre> +grid-template-columns: [A-start] 60px 60px [A-start] 60px; +grid-template-areas: "B A"; +grid-auto-columns: 40px; +grid-gap: 1px; +</pre> + +<pre>grid-column-start:</pre> +<div class="grid" style="padding-right:13px; border-right-width:5px"> +<x style="grid-row:1; grid-column:1; background:grey"></x> +<x style="grid-row:2; grid-column-start:-1">-1</x> +<x style="grid-row:3; grid-column-start:A">A</x> +<x style="grid-row:4; grid-column-start:A-start -1">A -1</x> +<x style="grid-row:4; grid-column-start:B -1">B -1</x> +<x style="grid-row:5; grid-column-start:A-start -2">A -2</x> +<x style="grid-row:6; grid-column-start:A-start -3">A -3</x> +<x style="grid-row:6; grid-column-start:A-start -4">A -4</x> +<x style="grid-row:6; grid-column-start:A-start -5">A -5</x> +<x style="grid-row:7; grid-column-start:A-start">A</x> +<x style="grid-row:7; grid-column-start:B">B</x> +<x style="grid-row:8; grid-column-start:A-start 1">A 1</x> +<x style="grid-row:8; grid-column-start:A-start 2">A 2</x> +<x style="grid-row:8; grid-column-start:A-start 3">A 3</x> +<x style="grid-row:8; grid-column-start:A-start 4">A 4</x> +<x style="grid-row:8; grid-column-start:A-start 5">A 5</x> +<y style="grid-row:2; grid-column-start:-1"></y> +<y style="grid-row:3; grid-column-start:A"></y> +<y style="grid-row:4; grid-column-start:A-start -1"></y> +<y style="grid-row:4; grid-column-start:B -1" class="a2"></y> +<y style="grid-row:5; grid-column-start:A-start -2"></y> +<y style="grid-row:6; grid-column-start:A-start -3"></y> +<y style="grid-row:6; grid-column-start:A-start -4" class="a2"></y> +<y style="grid-row:6; grid-column-start:A-start -5" class="a3"></y> +<y style="grid-row:7; grid-column-start:A-start"></y> +<y style="grid-row:7; grid-column-start:B" class="a2"></y> +<y style="grid-row:8; grid-column-start:A-start 1"></y> +<y style="grid-row:8; grid-column-start:A-start 2" class="a2"></y> +<y style="grid-row:8; grid-column-start:A-start 3" class="a3"></y> +<y style="grid-row:8; grid-column-start:A-start 4" class="a4"></y> +<y style="grid-row:8; grid-column-start:A-start 5" class="a5"></y> +</div> + +<pre>grid-column-end:</pre> +<div class="grid" style="padding-left:13px;"> +<x style="grid-row:1; grid-column:1; background:grey"></x> +<x style="grid-row:2; grid-column-end:-1">-1</x> +<x style="grid-row:3; grid-column-end:A">A</x> +<x style="grid-row:4; grid-column-end:A-start -1">A -1</x> +<x style="grid-row:4; grid-column-end:B -1">B -1</x> +<x style="grid-row:5; grid-column-end:A-start -2">A -2</x> +<x style="grid-row:6; grid-column-end:A-start -3">A -3</x> +<x style="grid-row:6; grid-column-end:A-start -4">A -4</x> +<x style="grid-row:6; grid-column-end:A-start -5">A -5</x> +<x style="grid-row:7; grid-column-end:A-start">A</x> +<x style="grid-row:7; grid-column-end:B">B</x> +<x style="grid-row:8; grid-column-end:A-start 1">A 1</x> +<x style="grid-row:8; grid-column-end:A-start 2">A 2</x> +<x style="grid-row:8; grid-column-end:A-start 3">A 3</x> +<x style="grid-row:8; grid-column-end:A-start 4">A 4</x> +<x style="grid-row:8; grid-column-end:A-start 5">A 5</x> +<y style="grid-row:2; grid-column-end:-1"></y> +<y style="grid-row:3; grid-column-end:A"></y> +<y style="grid-row:4; grid-column-end:A-start -1"></y> +<y style="grid-row:4; grid-column-end:B -1" class="a2"></y> +<y style="grid-row:5; grid-column-end:A-start -2"></y> +<y style="grid-row:6; grid-column-end:A-start -3"></y> +<y style="grid-row:6; grid-column-end:A-start -4" class="a2"></y> +<y style="grid-row:6; grid-column-end:A-start -5" class="a3"></y> +<y style="grid-row:7; grid-column-end:A-start"></y> +<y style="grid-row:7; grid-column-end:B" class="a2"></y> +<y style="grid-row:8; grid-column-end:A-start 1"></y> +<y style="grid-row:8; grid-column-end:A-start 2" class="a2"></y> +<y style="grid-row:8; grid-column-end:A-start 3" class="a3"></y> +<y style="grid-row:8; grid-column-end:A-start 4" class="a4"></y> +<y style="grid-row:8; grid-column-end:A-start 5" class="a5"></y> +</div> + +<pre>grid-column: / span A-start 2</pre> +<div class="grid"> +<x style="grid-row:1; grid-column:1; background:grey"></x> +<x style="grid-row:2; grid-column:-1/span A-start 2">-1</x> +<x style="grid-row:3; grid-column:4/span A">A</x> +<x style="grid-row:4; grid-column:-2/span A-start 2">-2</x> +<x style="grid-row:5; grid-column:-3/span A-start 2">-3</x> +<x style="grid-row:6; grid-column:-4/span A-start 2">-4</x> +<x style="grid-row:7; grid-column:-5/span A-start 2">-5</x> +<x style="grid-row:8; grid-column:A-start -1/span A-start 2">A -1</x> +<x style="grid-row:9; grid-column:B -1/span A-start 2">B -1</x> +<x style="grid-row:10; grid-column:A-start -2/span A-start 2">A -2</x> +<x style="grid-row:11; grid-column:A-start -3/span A-start 2">A -3</x> +<x style="grid-row:12; grid-column:A-start -4/span A-start 2">A -4</x> +<x style="grid-row:13; grid-column:A-start -5/span A-start 2">A -5</x> +<x style="grid-row:14; grid-column:A-start/span A-start 2">A</x> +<x style="grid-row:15; grid-column:B/span A">span A</x> +<x style="grid-row:16; grid-column:A-start 1/span A-start 2">A 1</x> +<x style="grid-row:17; grid-column:A-start 2/span A-start 2">A 2</x> +<x style="grid-row:18; grid-column:A-start 3/span A-start 2">A 3</x> +<x style="grid-row:19; grid-column:A-start 4/span A-start 2">A 4</x> +<x style="grid-row:20; grid-column:A-start 5/span A-start 2">A 5</x> +<y style="grid-row:2; grid-column:-1/span A-start 2"></y> +<y style="grid-row:3; grid-column:4/span A"></y> +<y style="grid-row:4; grid-column:-2/span A-start 2"></y> +<y style="grid-row:5; grid-column:-3/span A-start 2"></y> +<y style="grid-row:6; grid-column:-4/span A-start 2"></y> +<y style="grid-row:7; grid-column:-5/span A-start 2"></y> +<y style="grid-row:8; grid-column:A-start -1/span A-start 2"></y> +<y style="grid-row:9; grid-column:B -1/span A-start 2"></y> +<y style="grid-row:10; grid-column:A-start -2/span A-start 2"></y> +<y style="grid-row:11; grid-column:A-start -3/span A-start 2"></y> +<y style="grid-row:12; grid-column:A-start -4/span A-start 2"></y> +<y style="grid-row:13; grid-column:A-start -5/span A-start 2"></y> +<y style="grid-row:14; grid-column:A-start/span A-start 2"></y> +<y style="grid-row:15; grid-column:B/span B"></y> +<y style="grid-row:16; grid-column:A-start 1/span A-start 2"></y> +<y style="grid-row:17; grid-column:A-start 2/span A-start 2"></y> +<y style="grid-row:18; grid-column:A-start 3/span A-start 2"></y> +<y style="grid-row:19; grid-column:A-start 4/span A-start 2"></y> +<y style="grid-row:20; grid-column:A-start 5/span A-start 2"></y> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-negative-lines-001-ref.html b/layout/reftests/css-grid/grid-placement-negative-lines-001-ref.html new file mode 100644 index 0000000000..863ec716a1 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-negative-lines-001-ref.html @@ -0,0 +1,186 @@ +<!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 negative line numbers</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215957"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 15px; + grid-gap: 1px; +} +.t1 { + grid-template-columns: 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px; + +} +.t2 { + grid-template-columns: 40px 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px; +} +.t3 { + grid-template-columns: 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px; +} + +x { + background: lime; + border: 1px solid; +} +y { + position: absolute; + border: 1px solid blue; + bottom:0;height:0;left:0;right:0; + grid-row-end:span 1!important; +} +.a2 { bottom:2px; } +.a3 { bottom:4px; } +.a4 { bottom:6px; } +.a5 { bottom:8px; } + + </style> +</head> +<body> + +<pre> +grid-template-columns: 60px [A] 60px 60px; +grid-auto-columns: 40px; +grid-gap: 1px; +</pre> + +<pre>grid-column-start:</pre> +<div class="grid t1" style="padding-right:13px; border-right-width:5px"> +<x style="grid-row:1; grid-column-start:5; background:grey"></x> +<x style="grid-row:2; grid-column-start:8">-1</x> +<x style="grid-row:3; grid-column-start:8">4</x> +<x style="grid-row:3; grid-column-start:7">-2</x> +<x style="grid-row:3; grid-column-start:6">-3</x> +<x style="grid-row:3; grid-column-start:5">-4</x> +<x style="grid-row:3; grid-column-start:4">-5</x> +<x style="grid-row:4; grid-column-start:6">A -1</x> +<x style="grid-row:4; grid-column-start:4">B -1</x> +<x style="grid-row:5; grid-column-start:4">A -2</x> +<x style="grid-row:6; grid-column-start:3">A -3</x> +<x style="grid-row:6; grid-column-start:2">A -4</x> +<x style="grid-row:6; grid-column-start:1">A -5</x> +<x style="grid-row:7; grid-column-start:6">A</x> +<x style="grid-row:7; grid-column-start:9">B</x> +<x style="grid-row:8; grid-column-start:6">A 1</x> +<x style="grid-row:8; grid-column-start:9">A 2</x> +<x style="grid-row:8; grid-column-start:10">A 3</x> +<x style="grid-row:8; grid-column-start:11">A 4</x> +<x style="grid-row:8; grid-column-start:12">A 5</x> +<y style="grid-row:2; grid-column-start:8"></y> +<y style="grid-row:3; grid-column-start:8"></y> +<y style="grid-row:3; grid-column-start:7" class="a2"></y> +<y style="grid-row:3; grid-column-start:6" class="a3"></y> +<y style="grid-row:3; grid-column-start:5" class="a4"></y> +<y style="grid-row:3; grid-column-start:4" class="a5"></y> +<y style="grid-row:4; grid-column-start:6"></y> +<y style="grid-row:4; grid-column-start:4" class="a2"></y> +<y style="grid-row:5; grid-column-start:4"></y> +<y style="grid-row:6; grid-column-start:3"></y> +<y style="grid-row:6; grid-column-start:2" class="a2"></y> +<y style="grid-row:6; grid-column-start:1" class="a3"></y> +<y style="grid-row:7; grid-column-start:6"></y> +<y style="grid-row:7; grid-column-start:9" class="a2"></y> +<y style="grid-row:8; grid-column-start:6"></y> +<y style="grid-row:8; grid-column-start:9" class="a2"></y> +<y style="grid-row:8; grid-column-start:10" class="a3"></y> +<y style="grid-row:8; grid-column-start:11" class="a4"></y> +<y style="grid-row:8; grid-column-start:12" class="a5"></y> +</div> + +<pre>grid-column-end:</pre> +<div class="grid t2" style="padding-left:13px;"> +<x style="grid-row:1; grid-column-start:6; background:grey"></x> +<x style="grid-row:2; grid-column-start:8">-1</x> +<x style="grid-row:3; grid-column-start:8">4</x> +<x style="grid-row:3; grid-column-start:7">-2</x> +<x style="grid-row:3; grid-column-start:6">-3</x> +<x style="grid-row:3; grid-column-start:5">-4</x> +<x style="grid-row:3; grid-column-start:4">-5</x> +<x style="grid-row:4; grid-column-start:6">A -1</x> +<x style="grid-row:4; grid-column-start:4">B -1</x> +<x style="grid-row:5; grid-column-start:4">A -2</x> +<x style="grid-row:6; grid-column-start:3">A -3</x> +<x style="grid-row:6; grid-column-start:2">A -4</x> +<x style="grid-row:6; grid-column-start:1">A -5</x> +<x style="grid-row:7; grid-column-start:6">A</x> +<x style="grid-row:7; grid-column-start:9">B</x> +<x style="grid-row:8; grid-column-start:6">A 1</x> +<x style="grid-row:8; grid-column-start:9">A 2</x> +<x style="grid-row:8; grid-column-start:10">A 3</x> +<x style="grid-row:8; grid-column-start:11">A 4</x> +<x style="grid-row:8; grid-column-start:12">A 5</x> +<y style="grid-row:2; grid-column-end:9"></y> +<y style="grid-row:3; grid-column-end:9"></y> +<y style="grid-row:3; grid-column-end:8" class="a5"></y> +<y style="grid-row:3; grid-column-end:7" class="a4"></y> +<y style="grid-row:3; grid-column-end:6" class="a3"></y> +<y style="grid-row:3; grid-column-end:5" class="a2"></y> +<y style="grid-row:4; grid-column-end:7"></y> +<y style="grid-row:4; grid-column-end:5" class="a2"></y> +<y style="grid-row:5; grid-column-end:5"></y> +<y style="grid-row:6; grid-column-end:4"></y> +<y style="grid-row:6; grid-column-end:3" class="a2"></y> +<y style="grid-row:6; grid-column-end:2" class="a3"></y> +<y style="grid-row:7; grid-column-end:7"></y> +<y style="grid-row:7; grid-column-end:10" class="a2"></y> +<y style="grid-row:8; grid-column-end:7"></y> +<y style="grid-row:8; grid-column-end:10" class="a2"></y> +<y style="grid-row:8; grid-column-end:11" class="a3"></y> +<y style="grid-row:8; grid-column-end:12" class="a4"></y> +<y style="grid-row:8; grid-column-end:13" class="a5"></y> +</div> + +<pre>grid-column: / span A 2</pre> +<div class="grid t3"> +<x style="grid-row:1; grid-column:5; background:grey"></x> +<x style="grid-row:2; grid-column:8/span 2;">-1</x> +<x style="grid-row:3; grid-column:8/span 2;">4</x> +<x style="grid-row:4; grid-column:7/span 3;">-2</x> +<x style="grid-row:5; grid-column:6/span 4;">-3</x> +<x style="grid-row:6; grid-column:5/span 4;">-4</x> +<x style="grid-row:7; grid-column:4/span 5;">-5</x> +<x style="grid-row:8; grid-column:6/span 4;">A -1</x> +<x style="grid-row:9; grid-column:4/span 5;">B -1</x> +<x style="grid-row:10; grid-column:4/span 5;">A -2</x> +<x style="grid-row:11; grid-column:3/span 6;">A -3</x> +<x style="grid-row:12; grid-column:2/span 7;">A -4</x> +<x style="grid-row:13; grid-column:1/span 8;">A -5</x> +<x style="grid-row:14; grid-column:6/span 4;">A</x> +<x style="grid-row:15; grid-column:9/span 1;">B</x> +<x style="grid-row:16; grid-column:6/span 4;">A 1</x> +<x style="grid-row:17; grid-column:9/span 2;">A 2</x> +<x style="grid-row:18; grid-column:10/span 2;">A 3</x> +<x style="grid-row:19; grid-column:11/span 2;">A 4</x> +<x style="grid-row:20; grid-column:12/span 2;">A 5</x> +<y style="grid-row:2; grid-column:8/span 2;"></y> +<y style="grid-row:3; grid-column:8/span 2;"></y> +<y style="grid-row:4; grid-column:7/span 3;"></y> +<y style="grid-row:5; grid-column:6/span 4;"></y> +<y style="grid-row:6; grid-column:5/span 4;"></y> +<y style="grid-row:7; grid-column:4/span 5;"></y> +<y style="grid-row:8; grid-column:6/span 4;"></y> +<y style="grid-row:9; grid-column:4/span 5;"></y> +<y style="grid-row:10; grid-column:4/span 5;"></y> +<y style="grid-row:11; grid-column:3/span 6;"></y> +<y style="grid-row:12; grid-column:2/span 7;"></y> +<y style="grid-row:13; grid-column:1/span 8;"></y> +<y style="grid-row:14; grid-column:6/span 4;"></y> +<y style="grid-row:15; grid-column:9/span 1;"></y> +<y style="grid-row:16; grid-column:6/span 4;"></y> +<y style="grid-row:17; grid-column:9/span 2;"></y> +<y style="grid-row:18; grid-column:10/span 2;"></y> +<y style="grid-row:19; grid-column:11/span 2;"></y> +<y style="grid-row:20; grid-column:12/span 2;"></y> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-placement-negative-lines-001.html b/layout/reftests/css-grid/grid-placement-negative-lines-001.html new file mode 100644 index 0000000000..4218f3c8e8 --- /dev/null +++ b/layout/reftests/css-grid/grid-placement-negative-lines-001.html @@ -0,0 +1,180 @@ +<!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 negative line numbers</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215957"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int"> + <link rel="match" href="grid-placement-negative-lines-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-template-columns: 60px [A] 60px 60px; + grid-auto-columns: 40px; + grid-auto-rows: 15px; + grid-gap: 1px; +} + +x { + background: lime; + border: 1px solid; +} +y { + position: absolute; + border: 1px solid blue; + bottom:0;height:0;left:0;right:0; + grid-row-end:span 1!important; +} +.a2 { bottom:2px; } +.a3 { bottom:4px; } +.a4 { bottom:6px; } +.a5 { bottom:8px; } + + </style> +</head> +<body> + +<pre> +grid-template-columns: 60px [A] 60px 60px; +grid-auto-columns: 40px; +grid-gap: 1px; +</pre> + +<pre>grid-column-start:</pre> +<div class="grid" style="padding-right:13px; border-right-width:5px"> +<x style="grid-row:1; grid-column:1; background:grey"></x> +<x style="grid-row:2; grid-column-start:-1">-1</x> +<x style="grid-row:3; grid-column-start:4">4</x> +<x style="grid-row:3; grid-column-start:-2">-2</x> +<x style="grid-row:3; grid-column-start:-3">-3</x> +<x style="grid-row:3; grid-column-start:-4">-4</x> +<x style="grid-row:3; grid-column-start:-5">-5</x> +<x style="grid-row:4; grid-column-start:A -1">A -1</x> +<x style="grid-row:4; grid-column-start:B -1">B -1</x> +<x style="grid-row:5; grid-column-start:A -2">A -2</x> +<x style="grid-row:6; grid-column-start:A -3">A -3</x> +<x style="grid-row:6; grid-column-start:A -4">A -4</x> +<x style="grid-row:6; grid-column-start:A -5">A -5</x> +<x style="grid-row:7; grid-column-start:A">A</x> +<x style="grid-row:7; grid-column-start:B">B</x> +<x style="grid-row:8; grid-column-start:A 1">A 1</x> +<x style="grid-row:8; grid-column-start:A 2">A 2</x> +<x style="grid-row:8; grid-column-start:A 3">A 3</x> +<x style="grid-row:8; grid-column-start:A 4">A 4</x> +<x style="grid-row:8; grid-column-start:A 5">A 5</x> +<y style="grid-row:2; grid-column-start:-1"></y> +<y style="grid-row:3; grid-column-start:4"></y> +<y style="grid-row:3; grid-column-start:-2" class="a2"></y> +<y style="grid-row:3; grid-column-start:-3" class="a3"></y> +<y style="grid-row:3; grid-column-start:-4" class="a4"></y> +<y style="grid-row:3; grid-column-start:-5" class="a5"></y> +<y style="grid-row:4; grid-column-start:A -1"></y> +<y style="grid-row:4; grid-column-start:B -1" class="a2"></y> +<y style="grid-row:5; grid-column-start:A -2"></y> +<y style="grid-row:6; grid-column-start:A -3"></y> +<y style="grid-row:6; grid-column-start:A -4" class="a2"></y> +<y style="grid-row:6; grid-column-start:A -5" class="a3"></y> +<y style="grid-row:7; grid-column-start:A"></y> +<y style="grid-row:7; grid-column-start:B" class="a2"></y> +<y style="grid-row:8; grid-column-start:A 1"></y> +<y style="grid-row:8; grid-column-start:A 2" class="a2"></y> +<y style="grid-row:8; grid-column-start:A 3" class="a3"></y> +<y style="grid-row:8; grid-column-start:A 4" class="a4"></y> +<y style="grid-row:8; grid-column-start:A 5" class="a5"></y> +</div> + +<pre>grid-column-end:</pre> +<div class="grid" style="padding-left:13px;"> +<x style="grid-row:1; grid-column:1; background:grey"></x> +<x style="grid-row:2; grid-column-end:-1">-1</x> +<x style="grid-row:3; grid-column-end:4">4</x> +<x style="grid-row:3; grid-column-end:-5">-5</x> +<x style="grid-row:3; grid-column-end:-4">-4</x> +<x style="grid-row:3; grid-column-end:-3">-3</x> +<x style="grid-row:3; grid-column-end:-2">-2</x> +<x style="grid-row:4; grid-column-end:A -1">A -1</x> +<x style="grid-row:4; grid-column-end:B -1">B -1</x> +<x style="grid-row:5; grid-column-end:A -2">A -2</x> +<x style="grid-row:6; grid-column-end:A -3">A -3</x> +<x style="grid-row:6; grid-column-end:A -4">A -4</x> +<x style="grid-row:6; grid-column-end:A -5">A -5</x> +<x style="grid-row:7; grid-column-end:A">A</x> +<x style="grid-row:7; grid-column-end:B">B</x> +<x style="grid-row:8; grid-column-end:A 1">A 1</x> +<x style="grid-row:8; grid-column-end:A 2">A 2</x> +<x style="grid-row:8; grid-column-end:A 3">A 3</x> +<x style="grid-row:8; grid-column-end:A 4">A 4</x> +<x style="grid-row:8; grid-column-end:A 5">A 5</x> +<y style="grid-row:2; grid-column-end:-1"></y> +<y style="grid-row:3; grid-column-end:4"></y> +<y style="grid-row:3; grid-column-end:-5" class="a2"></y> +<y style="grid-row:3; grid-column-end:-4" class="a3"></y> +<y style="grid-row:3; grid-column-end:-3" class="a4"></y> +<y style="grid-row:3; grid-column-end:-2" class="a5"></y> +<y style="grid-row:4; grid-column-end:A -1"></y> +<y style="grid-row:4; grid-column-end:B -1" class="a2"></y> +<y style="grid-row:5; grid-column-end:A -2"></y> +<y style="grid-row:6; grid-column-end:A -3"></y> +<y style="grid-row:6; grid-column-end:A -4" class="a2"></y> +<y style="grid-row:6; grid-column-end:A -5" class="a3"></y> +<y style="grid-row:7; grid-column-end:A"></y> +<y style="grid-row:7; grid-column-end:B" class="a2"></y> +<y style="grid-row:8; grid-column-end:A 1"></y> +<y style="grid-row:8; grid-column-end:A 2" class="a2"></y> +<y style="grid-row:8; grid-column-end:A 3" class="a3"></y> +<y style="grid-row:8; grid-column-end:A 4" class="a4"></y> +<y style="grid-row:8; grid-column-end:A 5" class="a5"></y> +</div> + +<pre>grid-column: / span A 2</pre> +<div class="grid"> +<x style="grid-row:1; grid-column:1; background:grey"></x> +<x style="grid-row:2; grid-column:-1/span A 2">-1</x> +<x style="grid-row:3; grid-column:4/span A 2">4</x> +<x style="grid-row:4; grid-column:-2/span A 2">-2</x> +<x style="grid-row:5; grid-column:-3/span A 2">-3</x> +<x style="grid-row:6; grid-column:-4/span A 2">-4</x> +<x style="grid-row:7; grid-column:-5/span A 2">-5</x> +<x style="grid-row:8; grid-column:A -1/span A 2">A -1</x> +<x style="grid-row:9; grid-column:B -1/span A 2">B -1</x> +<x style="grid-row:10; grid-column:A -2/span A 2">A -2</x> +<x style="grid-row:11; grid-column:A -3/span A 2">A -3</x> +<x style="grid-row:12; grid-column:A -4/span A 2">A -4</x> +<x style="grid-row:13; grid-column:A -5/span A 2">A -5</x> +<x style="grid-row:14; grid-column:A/span A 2">A</x> +<x style="grid-row:15; grid-column:B/span B">B</x> +<x style="grid-row:16; grid-column:A 1/span A 2">A 1</x> +<x style="grid-row:17; grid-column:A 2/span A 2">A 2</x> +<x style="grid-row:18; grid-column:A 3/span A 2">A 3</x> +<x style="grid-row:19; grid-column:A 4/span A 2">A 4</x> +<x style="grid-row:20; grid-column:A 5/span A 2">A 5</x> +<y style="grid-row:2; grid-column:-1/span A 2"></y> +<y style="grid-row:3; grid-column:4/span A 2"></y> +<y style="grid-row:4; grid-column:-2/span A 2"></y> +<y style="grid-row:5; grid-column:-3/span A 2"></y> +<y style="grid-row:6; grid-column:-4/span A 2"></y> +<y style="grid-row:7; grid-column:-5/span A 2"></y> +<y style="grid-row:8; grid-column:A -1/span A 2"></y> +<y style="grid-row:9; grid-column:B -1/span A 2"></y> +<y style="grid-row:10; grid-column:A -2/span A 2"></y> +<y style="grid-row:11; grid-column:A -3/span A 2"></y> +<y style="grid-row:12; grid-column:A -4/span A 2"></y> +<y style="grid-row:13; grid-column:A -5/span A 2"></y> +<y style="grid-row:14; grid-column:A/span A 2"></y> +<y style="grid-row:15; grid-column:B/span B"></y> +<y style="grid-row:16; grid-column:A 1/span A 2"></y> +<y style="grid-row:17; grid-column:A 2/span A 2"></y> +<y style="grid-row:18; grid-column:A 3/span A 2"></y> +<y style="grid-row:19; grid-column:A 4/span A 2"></y> +<y style="grid-row:20; grid-column:A 5/span A 2"></y> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-relpos-items-001-ref.html b/layout/reftests/css-grid/grid-relpos-items-001-ref.html new file mode 100644 index 0000000000..e45ba5cf07 --- /dev/null +++ b/layout/reftests/css-grid/grid-relpos-items-001-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Test: Testing layout of rel.pos. grid items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151316"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + height: 30px; + border: 3px solid; +} + +.c1 { background: grey; } +.r2 { -moz-transform: translate(-201px, -90px); } +.r3 { -moz-transform: translate(-10px, -40px); } +.r4 { -moz-transform: translate(70px, 40px); } + +span { + border: 1px solid; + display: inline-block; + width: 18px; + height: 28px; + vertical-align: top; +} +.abs { + background: lime; + position: absolute; + top: 116px; + left: 204px; + padding-left: 3px; + padding-top: 5px; + width: 18px; + height: 28px; + vertical-align: top; +} +.abs1 { + position: absolute; + top: -5px; + left: -11px; + width: 30px; + height: 36px; +} + </style> +</head> +<body> + +<div class="grid"> +<span class="c1">1</span> +<span class="abs r1"><iframe width="20" height="20" src="data:text/html,<body>F"></iframe></span> +<span class="abs r2"><iframe width="20" height="20" src="data:text/html,<body>2"></iframe></span> +<span class="abs r3" style="xheight:23px"><span class="abs1">r3</span></span> +<span class="abs r4" style="xheight:23px"><span class="abs1">r4</span></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-relpos-items-001.html b/layout/reftests/css-grid/grid-relpos-items-001.html new file mode 100644 index 0000000000..000e9660ea --- /dev/null +++ b/layout/reftests/css-grid/grid-relpos-items-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS Test: Testing layout of rel.pos. grid items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151316"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/"> + <link rel="match" href="grid-relpos-items-001-ref.html"> + <meta charset="utf-8"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-columns: 20px 20px [A] 20px; + grid-template-rows: 30px; + grid-auto-columns: 20px; + grid-auto-rows: 30px; + border: solid; +} + +.c1 { background: grey; } +.r1 { } +.r2 { -moz-transform: translate(-201px, -90px); } +.r3 { grid-column-start: auto; -moz-transform: translate(-30px, -40px); } +.r4 { grid-area: auto; -moz-transform: translate(30px, 40px); } + +span { + border: 1px solid; + grid-area: 1 / 1; +} +.rel { + background: lime; + position: relative; + top: 113px; + left: 201px; + padding-left: 3px; + padding-top: 5px; + width: 18px; + height: 28px; + vertical-align: top; +} +.abs1 { + position: absolute; + top: -5px; + left: -11px; + right: 0px; + bottom: 0px; +} + </style> +</head> +<body> + +<div class="grid"> +<span class="c1">1</span> +<span class="rel r1"><iframe width="20" height="20" src="data:text/html,<body>F"></iframe></span> +<span class="rel r2"><iframe width="20" height="20" src="data:text/html,<body>2"></iframe></span> +<span class="rel r3"><span class="abs1">r3</span></span> +<span class="rel r4"><span class="abs1">r4</span></span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001-ref.html new file mode 100644 index 0000000000..e650af263a --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001-ref.html @@ -0,0 +1,275 @@ +<!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: repeat(auto-fill/auto-fit)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 10px; + grid-gap: 2px; + margin-bottom: 2px; + padding-right: 3px; +} +.r1 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d]; } +.r2 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; } +.r3 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; } +fit .r1 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d]; } +fit .r2 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; } +fit .r3 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; } + +.w100 { width: 100px; } +.w50 { width: 50px; } +.w40 { width: 40px; } +.w42 { width: 42px; } +.w64 { width: 64px; } +.w20 { width: 20px; } +.w80 { width: 80px; } +.w90 { width: 90px; } +.mw100 { min-width: 100px; } +.mw50 { min-width: 50px; } +.mw42 { min-width: 42px; } +.mw80 { min-width: 80px; } +.xw100 { max-width: 100px; } +.xw50 { max-width: 50px; } +.xw42 { max-width: 42px; } +.xw80 { max-width: 80px; } +.pw10 { width: 10%; } +.pxw10 { max-width: 10%; } +.pmw10 { min-width: 10%; } +.cw10 { width: calc(50px + 10%); } +.cxw10 { max-width: calc(50px + 10%); } +.cmw10 { min-width: calc(50px - 10%); } +.float { float: left; } + +x { + height: 10px; + background: grey; +} +a { + position: absolute; + left:0; right:0; top:0; height: 3px; + background: black; + grid-column: c / c -1; +} +b { + position: absolute; + left:0; right:0; bottom:0; height: 3px; + background: brown; + grid-column: auto / c -1; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +fill,fit { + float: left; + width: 400px; +} + +.r1.c0 { grid-template-columns: none;} +.r1.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d];} +.r1.c2 { grid-template-columns: [a] repeat(2, [b] 20px [c]) [d]; } +.r1.c4 { grid-template-columns: [a] repeat(4, [b] 20px [c]) [d]; } +.r1.c18 { grid-template-columns: [a] repeat(18, [b] 20px [c]) [d]; } + +.r2.c16 { grid-template-columns: [a] repeat(16, [b] 20px [c]) [d] 30px [e]; } +.r2.c0 { grid-template-columns: 30px [e];} +.r2.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } +.r2.c2 { grid-template-columns: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; } + +.r3.c15 { grid-template-columns: [a] repeat(15, [b] 20px [c]) [d] 30px [e] 30px [f]; } +.r3.c0 { grid-template-columns: [a d] 30px [e] 30px [f]; } +.r3.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; } + +.zero-progress { + grid-column-gap: calc(10px - 1%); + grid-template-columns: [a] 10px repeat(3, [b] 0 [c]) [d]; +} +</style> +</head> +<body> + +<fill> + +<div class="grid r1 c18"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 c4"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w50 c2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw50 c2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 float c4"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 mw50 float c4"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw100 w50 float c4"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w42 float c2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw42 float c2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw42 float c2"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> + +<div class="grid r1 c1 w40 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c1 w20 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c1 w40 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c2 w42 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c4 w100 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c1 w40 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> + +<div class="grid r1 w80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c1 w20 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c1 w20 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w64 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c4 w100 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c4 w90 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> + +<div class="float"> +<div style="width:296px"> +<div class="grid r1 c1 pw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +</div> +<div class="grid r1 c1 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c1 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c2 pmw10 xw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c4 w100 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c1 pw10 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div> +</div> + +<br clear="all"> + +<div class="float"> +<div class="grid r1 c3 cw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c1 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c1 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c3 cmw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 c4 w100 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div style="width:318px"> +<div class="grid r1 c3 cw10 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div> +</div> +</div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2 c16"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w80 c2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w50 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3 c15"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w80 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w50 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw80 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw100 w50 float c1"><x></x><x></x><a></a><b></b><x></x></div> + +</fill> + +<fit> + +<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w50 c2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw50 c2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w80 c2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w50 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w80 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w50 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw80 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw100 w50 float c1"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div style="float:left"> + <div class="grid xw50 zero-progress"> + <x></x><x></x><a></a><b></b><x></x> + </div> + <div class="grid w50 zero-progress"> + <x></x><x></x><a></a><b></b><x></x> + </div> + <div class="grid mw50 zero-progress"> + <x></x><x></x><a></a><b></b><x></x> + </div> +</div> + +</fit> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001.html new file mode 100644 index 0000000000..93af88ed73 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-001.html @@ -0,0 +1,254 @@ +<!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: repeat(auto-fill/auto-fit)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> + <link rel="match" href="grid-repeat-auto-fill-fit-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 10px; + grid-gap: 2px; + margin-bottom: 2px; + padding-right: 3px; +} +.r1 { grid-template-columns: [a] repeat(auto-fill, [b] 20px [c]) [d]; } +.r2 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(20px,20px) [c]) [d] 30px [e]; } +.r3 { grid-template-columns: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; } +fit .r1 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; } +fit .r2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; } +fit .r3 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; } + +.w100 { width: 100px; } +.w50 { width: 50px; } +.w80 { width: 80px; } +.w42 { width: 42px; } +.xw42 { max-width: 42px; } +.mw42 { min-width: 42px; } +.mw100 { min-width: 100px; } +.mw50 { min-width: 50px; } +.mw80 { min-width: 80px; } +.xw100 { max-width: 100px; } +.xw50 { max-width: 50px; } +.xw80 { max-width: 80px; } +.pw10 { width: 10%; } +.pxw10 { max-width: 10%; } +.pmw10 { min-width: 10%; } +.cw10 { width: calc(50px + 10%); } +.cxw10 { max-width: calc(50px + 10%); } +.cmw10 { min-width: calc(50px - 10%); } +.float { float: left; } + +x { + height: 10px; + background: grey; +} +a { + position: absolute; + left:0; right:0; top:0; height: 3px; + background: black; + grid-column: c / c -1; +} +b { + position: absolute; + left:0; right:0; bottom:0; height: 3px; + background: brown; + grid-column: auto / c -1; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +fill,fit { + float: left; + width: 400px; +} + +.zero-progress { + grid-column-gap: calc(10px - 1%); + grid-template-columns: [a] 10px repeat(auto-fill, [b] calc(1% - 10px) [c]) [d]; +} +</style> +</head> +<body> + +<fill> + +<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w42 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw42 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw42 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> + +<div class="grid r1 pw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 pmw10 xw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 pw10 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> + +<div class="grid r1 cw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 cmw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 cw10 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> + +<div class="float"> +<div class="grid r1 pw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 pmw10 xw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 pmw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 pw10 pxw10 float"><x></x><x></x><a></a><b></b><x></x></div> +</div> + +<br clear="all"> + +<div class="float"> +<div class="grid r1 cw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 cmw10 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 cmw10 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 cw10 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div> +</div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +</fill> + +<fit> + +<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div style="float:left"> + <div class="grid xw50 zero-progress"> + <x></x><x></x><a></a><b></b><x></x> + </div> + <div class="grid w50 zero-progress"> + <x></x><x></x><a></a><b></b><x></x> + </div> + <div class="grid mw50 zero-progress"> + <x></x><x></x><a></a><b></b><x></x> + </div> +</div> + +</fit> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html new file mode 100644 index 0000000000..8de84391eb --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html @@ -0,0 +1,218 @@ +<!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: repeat(auto-fill/auto-fit)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + grid-auto-columns: 10px; + grid-auto-rows: 10px; + grid-auto-flow: row; + grid-gap: 2px; + margin-right: 2px; + padding-top: 3px; +} +.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } +.r12 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d]; } +.r13 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d]; } +.r14 { grid-template-rows: [a] repeat(4, [b] 20px [c]) [d]; } + +.r20,.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } +.r22 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; } +.r23 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; } + +.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; } +.r32 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e] 30px [f]; } +.r33 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; } + +fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } +fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } +fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; } + +.w100 { height: 100px; } +.w50 { height: 50px; } +.w80 { height: 80px; } +.mw100 { min-height: 100px; } +.mw50 { min-height: 50px; } +.mw80 { min-height: 80px; } +.xw100 { max-height: 100px; } +.xw50 { max-height: 50px; } +.xw80 { max-height: 80px; } +.float { float: left; } + +x { + width: 10px; + background: grey; +} +a { + position: absolute; + left:0; top:0; bottom:0; width: 3px; + background: black; + grid-row: c / c -1; +} +b { + position: absolute; + right:0; top:0; bottom:0; width: 3px; + background: brown; + grid-row: auto / c -1; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +fill,fit { + float: left; + height: 400px; +} + +.zero-progress { + grid-row-gap: calc(10px - 1%); + grid-template-rows: [a] 10px repeat(3, [b] calc(4px / 10) [c]) [d]; + height:40px; +} +.w50.zero-progress { + grid-row-gap: calc(10px - 1%); + grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d]; + height:50px; +} +.mw50.zero-progress { + grid-row-gap: calc(10px - 1%); + grid-template-rows: [a] 10px repeat(4, [b] calc(5px / 10) [c]) [d]; + height:50px; +} +</style> +</head> +<body> + +<fill> + +<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r14 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r14 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r14 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r14 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +</fill> + +<fit> + +<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div style="float:left"> + <div class="grid xw50 zero-progress"> + <x></x><x></x><a></a><b></b><x></x> + </div> + <div class="grid w50 zero-progress"> + <x></x><x></x><a></a><b></b><x></x> + </div> + <div class="grid mw50 zero-progress"> + <x></x><x></x><a></a><b></b><x></x> + </div> +</div> + +</fit> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002.html new file mode 100644 index 0000000000..4a9061a010 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002.html @@ -0,0 +1,199 @@ +<!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: repeat(auto-fill/auto-fit)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> + <link rel="match" href="grid-repeat-auto-fill-fit-002-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + grid-auto-columns: 10px; + grid-auto-rows: 10px; + grid-auto-flow: row; + grid-gap: 2px; + margin-right: 2px; + padding-top: 3px; +} +.r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; } +.r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; } +.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; } +fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; } +fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; } +fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; } + +.w100 { height: 100px; } +.w50 { height: 50px; } +.w80 { height: 80px; } +.mw100 { min-height: 100px; } +.mw50 { min-height: 50px; } +.mw80 { min-height: 80px; } +.xw100 { max-height: 100px; } +.xw50 { max-height: 50px; } +.xw80 { max-height: 80px; } +.float { float: left; } + +x { + width: 10px; + background: grey; +} +a { + position: absolute; + left:0; top:0; bottom:0; width: 3px; + background: black; + grid-row: c / c -1; +} +b { + position: absolute; + right:0; top:0; bottom:0; width: 3px; + background: brown; + grid-row: auto / c -1; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +fill,fit { + float: left; + height: 400px; +} + +.zero-progress { + grid-row-gap: calc(10px - 1%); + grid-template-rows: [a] 10px repeat(auto-fill, [b] calc(1% - 10px) [c]) [d]; +} +</style> +</head> +<body> + +<fill> + +<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +</fill> + +<fit> + +<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div style="float:left"> + <div class="grid xw50 zero-progress"> + <x></x><x></x><a></a><b></b><x></x> + </div> + <div class="grid w50 zero-progress"> + <x></x><x></x><a></a><b></b><x></x> + </div> + <div class="grid mw50 zero-progress"> + <x></x><x></x><a></a><b></b><x></x> + </div> +</div> + +</fit> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-003-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-003-ref.html new file mode 100644 index 0000000000..1978563152 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-003-ref.html @@ -0,0 +1,197 @@ +<!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: repeat(auto-fill/auto-fit)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + grid-auto-columns: 10px; + grid-auto-rows: 10px; + grid-auto-flow: column; + grid-gap: 2px; + margin-right: 2px; + padding-top: 3px; +} +.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } +.r12 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d]; } +.r13 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d]; } +.r14 { grid-template-rows: [a] repeat(4, [b] 20px [c]) [d]; } + +.r20,.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } +.r22 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; } +.r23 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; } + +.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; } +.r32 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; } +.r33 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; } + +fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } +fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } +fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; } + +.w100 { height: 100px; } +.w50 { height: 50px; } +.w80 { height: 80px; } +.mw100 { min-height: 100px; } +.mw50 { min-height: 50px; } +.mw80 { min-height: 80px; } +.xw100 { max-height: 100px; } +.xw50 { max-height: 50px; } +.xw80 { max-height: 80px; } +.float { float: left; } + +x { + width: 10px; + background: grey; +} +a { + position: absolute; + left:0; top:0; bottom:0; width: 3px; + background: black; + grid-row: c / c -1; +} +b { + position: absolute; + right:0; top:0; bottom:0; width: 3px; + background: brown; + grid-row: auto / c -1; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +</style> +</head> +<body> + +<fill> + +<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r14 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r12 w100 xw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r14 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r14 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r14 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +</fill> + +<br clear="all"> +<br clear="all"> + +<fit> + +<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r12 w100 xw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +</fit> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-003.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-003.html new file mode 100644 index 0000000000..5d88ea37b3 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-003.html @@ -0,0 +1,189 @@ +<!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: repeat(auto-fill/auto-fit)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> + <link rel="match" href="grid-repeat-auto-fill-fit-003-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + grid-auto-columns: 10px; + grid-auto-rows: 10px; + grid-auto-flow: column; + grid-gap: 2px; + margin-right: 2px; + padding-top: 3px; +} +.r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; } +.r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; } +.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; } +fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; } +fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; } +fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; } + +.w100 { height: 100px; } +.w50 { height: 50px; } +.w80 { height: 80px; } +.mw100 { min-height: 100px; } +.mw50 { min-height: 50px; } +.mw80 { min-height: 80px; } +.xw100 { max-height: 100px; } +.xw50 { max-height: 50px; } +.xw80 { max-height: 80px; } +.float { float: left; } + +x { + width: 10px; + background: grey; +} +a { + position: absolute; + left:0; top:0; bottom:0; width: 3px; + background: black; + grid-row: c / c -1; +} +b { + position: absolute; + right:0; top:0; bottom:0; width: 3px; + background: brown; + grid-row: auto / c -1; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +</style> +</head> +<body> + +<fill> + +<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +</fill> + +<br clear="all"> +<br clear="all"> + +<fit> + +<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +</fit> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-004-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-004-ref.html new file mode 100644 index 0000000000..d61a9dcaab --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-004-ref.html @@ -0,0 +1,191 @@ +<!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: repeat(auto-fill/auto-fit)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + grid-auto-columns: 10px; + grid-auto-rows: 10px; + grid-auto-flow: column; + grid-gap: 2px; + margin-right: 2px; + padding-top: 3px; +} +.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; width:34px; } +.r12 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d]; width:34px; } +.r13 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d]; width:34px; } +.r14 { grid-template-rows: [a] repeat(4, [b] 20px [c]) [d]; width:34px; } + +.r20,.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; width:22px; } +.r22 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; width:22px; } +.r23 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; width:22px; } + +.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; } +.r32 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; } +.r33 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; } + +fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } +fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } +fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; } + +.w100 { height: 100px; } +.w50 { height: 50px; } +.w80 { height: 80px; } +.mw100 { min-height: 100px; } +.mw50 { min-height: 50px; } +.mw80 { min-height: 80px; } +.xw100 { max-height: 100px; } +.xw50 { max-height: 50px; } +.xw80 { max-height: 80px; } +.float { float: left; } + +wrap { float:left; height: 100px; } + +x { + width: 10px; + background: grey; +} +a { + position: absolute; + left:0; top:0; bottom:0; width: 3px; + background: black; + grid-row: c / c -1; +} +b { + position: absolute; + right:0; top:0; bottom:0; width: 3px; + background: brown; + grid-row: auto / c -1; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +</style> +</head> +<body> + +<fill> + +<wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r14 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r14 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r14 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r14 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r14 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> + +<br clear="all"> +<br clear="all"> + +<wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r23 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> + +<br clear="all"> +<br clear="all"> + +<wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> + +</fill> + +<br clear="all"> +<br clear="all"> + +<fit> + +<wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r13 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> + +<br clear="all"> +<br clear="all"> + +<wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> + +<br clear="all"> +<br clear="all"> + +<wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> + +<br clear="all"> +<br clear="all"> + +</fit> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-004.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-004.html new file mode 100644 index 0000000000..dd9af776aa --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-004.html @@ -0,0 +1,183 @@ +<!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: repeat(auto-fill/auto-fit)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> + <link rel="match" href="grid-repeat-auto-fill-fit-004-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + grid-auto-columns: 10px; + grid-auto-rows: 10px; + grid-auto-flow: column; + grid-gap: 2px; + margin-right: 2px; + padding-top: 3px; +} +.r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; } +.r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; } +.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; } +fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; } +fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; } +fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; } + +.w100 { height: 100%; } +.w50 { height: 50%; } +.w80 { height: 80%; } +.mw100 { min-height: 100%; } +.mw50 { min-height: 50%; } +.mw80 { min-height: 80%; } +.xw100 { max-height: 100%; } +.xw50 { max-height: 50%; } +.xw80 { max-height: 80%; } +.float { float: left; } + +wrap { float:left; height: 100px; } + +x { + width: 10px; + background: grey; +} +a { + position: absolute; + left:0; top:0; bottom:0; width: 3px; + background: black; + grid-row: c / c -1; +} +b { + position: absolute; + right:0; top:0; bottom:0; width: 3px; + background: brown; + grid-row: auto / c -1; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +</style> +</head> +<body> + +<fill> + +<wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> + +<br clear="all"> +<br clear="all"> + +<wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> + +<br clear="all"> +<br clear="all"> + +<wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> + +</fill> + +<br clear="all"> +<br clear="all"> + +<fit> + +<wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> + +<br clear="all"> +<br clear="all"> + +<wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> + +<br clear="all"> +<br clear="all"> + +<wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> +<wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> + +<br clear="all"> +<br clear="all"> + +</fit> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-005-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-005-ref.html new file mode 100644 index 0000000000..b68c40be82 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-005-ref.html @@ -0,0 +1,382 @@ +<!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: repeat(auto-fill/auto-fit)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; +} + +.grid { + display: grid; + float: left; + position: relative; + border: 2px solid; + grid-auto-columns: 10px; + grid-auto-rows: 10px; + grid-auto-flow: column; + grid-gap: 2px; + margin-right: 2px; + padding-top: 3px; + padding-bottom: 2px; +} + +.r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; } +.r10,.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } +.r01 { grid-template-rows: [a] repeat(1, [b] 0 [c]) 20px [d]; grid-gap:0;} +.r01 a {grid-row-end:auto; } +.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } +.r20 { width:22px; grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } +.r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; } +.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; } +.r03 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; } +.r003 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; } +.ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; } +.r0a { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 10px [f]; grid-gap:0; padding-bottom:4px;} + +fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; } +fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } +fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } +fit .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; grid-gap:0;} +fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; } +fit .r03 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; } +fit .r003 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; padding-bottom:4px;} +fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; } + +.w100 { height: 100px; } +.w3 { height: 3px; } +.w20 { height: 20px; } +.w50 { height: 50px; } +.w80 { height: 80px; } +.mw100 { min-height: 100px; } +.mw3 { height: 3px; } +.mw20 { height: 20px; } +.mw50 { min-height: 50px; } +.mw80 { min-height: 80px; } +.xw100 { max-height: 100px; } +.xw3 { height: 3px; } +.xw20 { height: 20px; } +.xw50 { max-height: 50px; } +.xw80 { max-height: 80px; } + +.w { width:10px} + +x { + height: 10px; + background: grey; +} +a { + position: absolute; + left:0; top:0; bottom:0; width: 3px; + background: black; + grid-row: c / c -1; +} +b { + position: absolute; + right:0; top:0; bottom:0; width: 3px; + background: brown; + grid-row: auto / c -1; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +fill,fit { + float: left; + height: 400px; +} +</style> +</head> +<body> + +<fill> + +<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r1 w w20"><a></a><b></b></div> +<div class="grid r1 w w3"><a></a><b></b></div> +<div class="grid r1 w xw20"><a></a><b></b></div> +<div class="grid r1 w xw3"><a></a><b></b></div> +<div class="grid r1 w mw20"><a></a><b></b></div> +<div class="grid r1 w mw3"><a></a><b></b></div> +<div class="grid r1 w w20 xw3"><a></a><b></b></div> +<div class="grid r1 w w3 mw20"><a></a><b></b></div> +<div class="grid r1 w w3 mw3"><a></a><b></b></div> +<div class="grid r1 w xw20"><a></a><b></b></div> +<div class="grid r1 w xw3 mw20"><a></a><b></b></div> +<div class="grid r1 w mw20"><a></a><b></b></div> + +<div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> + +<div class="grid w r1" style="min-height:0"><a></a><b></b></div> +<div class="grid w r1" style="height:0"><a></a><b></b></div> +<div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div> +<div class="grid w r1" style="max-height:0"><a></a><b></b></div> +<div class="grid w r0"><a></a><b></b></div> +<div class="grid w ra"><a></a><b></b></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r20 w w20"><a></a><b></b></div> +<div class="grid r20 w w3"><a></a><b></b></div> +<div class="grid r20 w xw20"><a></a><b></b></div> +<div class="grid r20 w xw3"><a></a><b></b></div> +<div class="grid r20 w mw20"><a></a><b></b></div> +<div class="grid r20 w mw3"><a></a><b></b></div> +<div class="grid r20 w w20 xw3"><a></a><b></b></div> +<div class="grid r20 w w3 mw20"><a></a><b></b></div> +<div class="grid r20 w w3 mw3"><a></a><b></b></div> +<div class="grid r20 w xw20"><a></a><b></b></div> +<div class="grid r20 w xw3 mw20"><a></a><b></b></div> +<div class="grid r20 w mw20"><a></a><b></b></div> + +<div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> + +<div class="grid w r20" style="min-height:0"><a></a><b></b></div> +<div class="grid w r20" style="height:0"><a></a><b></b></div> +<div class="grid w r20" style="min-height:0; height:0"><a></a><b></b></div> +<div class="grid w r20" style="max-height:0"><a></a><b></b></div> +<div class="grid w r02"><a></a><b></b></div> + + +<br clear="all"> +<br clear="all"> + +<div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r30 w w20"><a></a><b></b></div> +<div class="grid r30 w w3"><a></a><b></b></div> +<div class="grid r30 w xw20"><a></a><b></b></div> +<div class="grid r30 w xw3"><a></a><b></b></div> +<div class="grid r30 w mw20"><a></a><b></b></div> +<div class="grid r30 w mw3"><a></a><b></b></div> +<div class="grid r30 w w20 xw3"><a></a><b></b></div> +<div class="grid r30 w w3 mw20"><a></a><b></b></div> +<div class="grid r30 w w3 mw3"><a></a><b></b></div> +<div class="grid r30 w xw20"><a></a><b></b></div> +<div class="grid r30 w xw3 mw20"><a></a><b></b></div> +<div class="grid r30 w mw20"><a></a><b></b></div> + +<div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> + +<div class="grid w r30" style="min-height:0"><a></a><b></b></div> +<div class="grid w r30" style="height:0"><a></a><b></b></div> +<div class="grid w r30" style="min-height:0; height:0"><a></a><b></b></div> +<div class="grid w r30" style="max-height:0"><a></a><b></b></div> +<div class="grid w r003"><a></a><b></b></div> + + +</fill> + +<fit> + +<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r01 w w20"><a></a><b></b></div> +<div class="grid r01 w w3"><a></a><b></b></div> +<div class="grid r01 w xw20"><a></a><b></b></div> +<div class="grid r01 w xw3"><a></a><b></b></div> +<div class="grid r01 w mw20"><a></a><b></b></div> +<div class="grid r01 w mw3"><a></a><b></b></div> +<div class="grid r01 w w20 xw3"><a></a><b></b></div> +<div class="grid r01 w w3 mw20"><a></a><b></b></div> +<div class="grid r01 w w3 mw3"><a></a><b></b></div> +<div class="grid r01 w xw20"><a></a><b></b></div> +<div class="grid r01 w xw3 mw20"><a></a><b></b></div> +<div class="grid r01 w mw20"><a></a><b></b></div> + +<div class="grid r10" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r10" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r10" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r10" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> + +<div class="grid w r01" style="max-height:0"><a></a><b></b></div> +<div class="grid w r01" style="height:0"><a></a><b></b></div> +<div class="grid w r01" style="min-height:0; height:0"><a></a><b></b></div> +<div class="grid w r01" style="max-height:0"><a></a><b></b></div> +<div class="grid w r01" style="max-height:0"><a></a><b></b></div> +<div class="grid w r0a"><a></a><b></b></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r02 w w20"><a></a><b></b></div> +<div class="grid r02 w w3"><a></a><b></b></div> +<div class="grid r02 w xw20"><a></a><b></b></div> +<div class="grid r02 w xw3"><a></a><b></b></div> +<div class="grid r02 w mw20"><a></a><b></b></div> +<div class="grid r02 w mw3"><a></a><b></b></div> +<div class="grid r02 w w20 xw3"><a></a><b></b></div> +<div class="grid r02 w w3 mw20"><a></a><b></b></div> +<div class="grid r02 w w3 mw3"><a></a><b></b></div> +<div class="grid r02 w xw20"><a></a><b></b></div> +<div class="grid r02 w xw3 mw20"><a></a><b></b></div> +<div class="grid r02 w mw20"><a></a><b></b></div> + +<div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> + +<div class="grid w r02" style="min-height:0"><a></a><b></b></div> +<div class="grid w r02" style="height:0"><a></a><b></b></div> +<div class="grid w r02" style="min-height:0; height:0"><a></a><b></b></div> +<div class="grid w r02" style="max-height:0"><a></a><b></b></div> +<div class="grid w r02"><a></a><b></b></div> + + +<br clear="all"> +<br clear="all"> + +<div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r03 w w20"><a></a><b></b></div> +<div class="grid r03 w w3"><a></a><b></b></div> +<div class="grid r03 w xw20"><a></a><b></b></div> +<div class="grid r03 w xw3"><a></a><b></b></div> +<div class="grid r03 w mw20"><a></a><b></b></div> +<div class="grid r03 w mw3"><a></a><b></b></div> +<div class="grid r03 w w20 xw3"><a></a><b></b></div> +<div class="grid r03 w w3 mw20"><a></a><b></b></div> +<div class="grid r03 w w3 mw3"><a></a><b></b></div> +<div class="grid r03 w xw20"><a></a><b></b></div> +<div class="grid r03 w xw3 mw20"><a></a><b></b></div> +<div class="grid r03 w mw20"><a></a><b></b></div> + +<div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> + +<div class="grid w r003" style="min-height:0"><a></a><b></b></div> +<div class="grid w r03" style="height:0"><a></a><b></b></div> +<div class="grid w r03" style="min-height:0; height:0"><a></a><b></b></div> +<div class="grid w r03" style="max-height:0"><a></a><b></b></div> +<div class="grid w r003"><a></a><b></b></div> + + + +</fit> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-005.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-005.html new file mode 100644 index 0000000000..b6b521787f --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-005.html @@ -0,0 +1,377 @@ +<!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: repeat(auto-fill/auto-fit)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> + <link rel="match" href="grid-repeat-auto-fill-fit-005-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; +} + +.grid { + display: grid; + float: left; + position: relative; + border: 2px solid; + grid-auto-columns: 10px; + grid-auto-rows: 10px; + grid-auto-flow: column; + grid-gap: 2px; + margin-right: 2px; + padding-top: 3px; + padding-bottom: 2px; +} + +.r0 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d]; } +.r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; } +.r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; } +.r02 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e]; } +.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; } +.r03 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e] 30px [f]; } +.ra { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 10px [f]; } + +fit .r0 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d]; } +fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; } +fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; } +fit .r02 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e]; } +fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; } +fit .r03 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e] 30px [f]; } +fit .ra { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 10px [f]; } + +.w100 { height: 100px; } +.w3 { height: 3px; } +.w20 { height: 20px; } +.w50 { height: 50px; } +.w80 { height: 80px; } +.mw100 { min-height: 100px; } +.mw3 { height: 3px; } +.mw20 { height: 20px; } +.mw50 { min-height: 50px; } +.mw80 { min-height: 80px; } +.xw100 { max-height: 100px; } +.xw3 { height: 3px; } +.xw20 { height: 20px; } +.xw50 { max-height: 50px; } +.xw80 { max-height: 80px; } + +.w { width:10px} + +x { + height: 10px; + background: grey; +} +a { + position: absolute; + left:0; top:0; bottom:0; width: 3px; + background: black; + grid-row: c / c -1; +} +b { + position: absolute; + right:0; top:0; bottom:0; width: 3px; + background: brown; + grid-row: auto / c -1; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +fill,fit { + float: left; + height: 400px; +} +</style> +</head> +<body> + +<fill> + +<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r1 w w20"><a></a><b></b></div> +<div class="grid r1 w w3"><a></a><b></b></div> +<div class="grid r1 w xw20"><a></a><b></b></div> +<div class="grid r1 w xw3"><a></a><b></b></div> +<div class="grid r1 w mw20"><a></a><b></b></div> +<div class="grid r1 w mw3"><a></a><b></b></div> +<div class="grid r1 w w20 xw3"><a></a><b></b></div> +<div class="grid r1 w w3 mw20"><a></a><b></b></div> +<div class="grid r1 w w3 mw3"><a></a><b></b></div> +<div class="grid r1 w xw20"><a></a><b></b></div> +<div class="grid r1 w xw3 mw20"><a></a><b></b></div> +<div class="grid r1 w mw20"><a></a><b></b></div> + +<div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> + +<div class="grid w r1" style="min-height:0"><a></a><b></b></div> +<div class="grid w r1" style="height:0"><a></a><b></b></div> +<div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div> +<div class="grid w r1" style="max-height:0"><a></a><b></b></div> +<div class="grid w r0"><a></a><b></b></div> +<div class="grid w ra"><a></a><b></b></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2 w w20"><a></a><b></b></div> +<div class="grid r2 w w3"><a></a><b></b></div> +<div class="grid r2 w xw20"><a></a><b></b></div> +<div class="grid r2 w xw3"><a></a><b></b></div> +<div class="grid r2 w mw20"><a></a><b></b></div> +<div class="grid r2 w mw3"><a></a><b></b></div> +<div class="grid r2 w w20 xw3"><a></a><b></b></div> +<div class="grid r2 w w3 mw20"><a></a><b></b></div> +<div class="grid r2 w w3 mw3"><a></a><b></b></div> +<div class="grid r2 w xw20"><a></a><b></b></div> +<div class="grid r2 w xw3 mw20"><a></a><b></b></div> +<div class="grid r2 w mw20"><a></a><b></b></div> + +<div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> + +<div class="grid w r2" style="min-height:0"><a></a><b></b></div> +<div class="grid w r2" style="height:0"><a></a><b></b></div> +<div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div> +<div class="grid w r2" style="max-height:0"><a></a><b></b></div> +<div class="grid w r02"><a></a><b></b></div> + + +<br clear="all"> +<br clear="all"> + +<div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3 w w20"><a></a><b></b></div> +<div class="grid r3 w w3"><a></a><b></b></div> +<div class="grid r3 w xw20"><a></a><b></b></div> +<div class="grid r3 w xw3"><a></a><b></b></div> +<div class="grid r3 w mw20"><a></a><b></b></div> +<div class="grid r3 w mw3"><a></a><b></b></div> +<div class="grid r3 w w20 xw3"><a></a><b></b></div> +<div class="grid r3 w w3 mw20"><a></a><b></b></div> +<div class="grid r3 w w3 mw3"><a></a><b></b></div> +<div class="grid r3 w xw20"><a></a><b></b></div> +<div class="grid r3 w xw3 mw20"><a></a><b></b></div> +<div class="grid r3 w mw20"><a></a><b></b></div> + +<div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> + +<div class="grid w r3" style="min-height:0"><a></a><b></b></div> +<div class="grid w r3" style="height:0"><a></a><b></b></div> +<div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div> +<div class="grid w r3" style="max-height:0"><a></a><b></b></div> +<div class="grid w r03"><a></a><b></b></div> + + +</fill> + +<fit> + +<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r1 w w20"><a></a><b></b></div> +<div class="grid r1 w w3"><a></a><b></b></div> +<div class="grid r1 w xw20"><a></a><b></b></div> +<div class="grid r1 w xw3"><a></a><b></b></div> +<div class="grid r1 w mw20"><a></a><b></b></div> +<div class="grid r1 w mw3"><a></a><b></b></div> +<div class="grid r1 w w20 xw3"><a></a><b></b></div> +<div class="grid r1 w w3 mw20"><a></a><b></b></div> +<div class="grid r1 w w3 mw3"><a></a><b></b></div> +<div class="grid r1 w xw20"><a></a><b></b></div> +<div class="grid r1 w xw3 mw20"><a></a><b></b></div> +<div class="grid r1 w mw20"><a></a><b></b></div> + +<div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> + +<div class="grid w r1" style="min-height:0"><a></a><b></b></div> +<div class="grid w r1" style="height:0"><a></a><b></b></div> +<div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div> +<div class="grid w r1" style="max-height:0"><a></a><b></b></div> +<div class="grid w r0"><a></a><b></b></div> +<div class="grid w ra"><a></a><b></b></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r2 w w20"><a></a><b></b></div> +<div class="grid r2 w w3"><a></a><b></b></div> +<div class="grid r2 w xw20"><a></a><b></b></div> +<div class="grid r2 w xw3"><a></a><b></b></div> +<div class="grid r2 w mw20"><a></a><b></b></div> +<div class="grid r2 w mw3"><a></a><b></b></div> +<div class="grid r2 w w20 xw3"><a></a><b></b></div> +<div class="grid r2 w w3 mw20"><a></a><b></b></div> +<div class="grid r2 w w3 mw3"><a></a><b></b></div> +<div class="grid r2 w xw20"><a></a><b></b></div> +<div class="grid r2 w xw3 mw20"><a></a><b></b></div> +<div class="grid r2 w mw20"><a></a><b></b></div> + +<div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> + +<div class="grid w r2" style="min-height:0"><a></a><b></b></div> +<div class="grid w r2" style="height:0"><a></a><b></b></div> +<div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div> +<div class="grid w r2" style="max-height:0"><a></a><b></b></div> +<div class="grid w r02"><a></a><b></b></div> + + +<br clear="all"> +<br clear="all"> + +<div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div> + +<br clear="all"> +<br clear="all"> + +<div class="grid r3 w w20"><a></a><b></b></div> +<div class="grid r3 w w3"><a></a><b></b></div> +<div class="grid r3 w xw20"><a></a><b></b></div> +<div class="grid r3 w xw3"><a></a><b></b></div> +<div class="grid r3 w mw20"><a></a><b></b></div> +<div class="grid r3 w mw3"><a></a><b></b></div> +<div class="grid r3 w w20 xw3"><a></a><b></b></div> +<div class="grid r3 w w3 mw20"><a></a><b></b></div> +<div class="grid r3 w w3 mw3"><a></a><b></b></div> +<div class="grid r3 w xw20"><a></a><b></b></div> +<div class="grid r3 w xw3 mw20"><a></a><b></b></div> +<div class="grid r3 w mw20"><a></a><b></b></div> + +<div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> +<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> + +<div class="grid w r3" style="min-height:0"><a></a><b></b></div> +<div class="grid w r3" style="height:0"><a></a><b></b></div> +<div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div> +<div class="grid w r3" style="max-height:0"><a></a><b></b></div> +<div class="grid w r03"><a></a><b></b></div> + + +</fit> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006-ref.html new file mode 100644 index 0000000000..ab07edd5f4 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006-ref.html @@ -0,0 +1,184 @@ +<!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: repeat(auto-fit) with grid-aligned abs.pos.</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 30px; + grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px; + grid-gap: 2px; + width: 160px; + height: 30px; +} + +.c1 { width: 160px; } +.c2 { width: 150px; } +.c3 { width: 140px; } +.p1 { padding-left:5px; } + +.t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; } + +x { + width: 18px; + border:1px solid; + background: grey; +} +a { + position: absolute; + left:0; top:0; height:3px; right:0; + background: cyan; + grid-column: -1 / auto; +} +b { + position: absolute; + left:0; bottom:0; height:3px; right:0; + background: brown; + grid-column: auto / -1; +} +c { + position: absolute; + left:0; bottom:5px; height:3px; right:0; + background: pink; + grid-column: 6 / auto; +} +d { + position: absolute; + left:0; bottom:10px; height:3px; right:0; + background: silver; + grid-column: 3 / -2; +} +e { + position: absolute; + left:0; bottom:15px; height:3px; right:0; + background: magenta; + grid-column: 3 / -1; +} +f { + position: absolute; + left:0; bottom:20px; height:3px; right:0; + background: orange; + grid-column: auto / -2; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +.t1 x:last-child { + grid-column-end:-1; +} + +float { float:left; margin-right:20px; } + +.x5 { grid-template-columns: repeat(5,20px); } +.x4 { grid-template-columns: repeat(4,20px); } +.x3 { grid-template-columns: repeat(3,20px); } +.x2 { grid-template-columns: repeat(2,20px); } +.x1 { grid-template-columns: repeat(1,20px); } +.x0 { grid-template-columns: none; } + +.c1.t1.x5 a { grid-column:5/auto; } +.c1.t1.x4 a { grid-column:4/auto; } +.c1.t1.x3 a { grid-column:3/auto; } +.c1.t1.x2 a { grid-column:2/auto; } +.c1.t1.x1 a { grid-column:1/auto; } +.c2.t1.x0 a { grid-column:2/auto; } + +.c1.t1.x5 c { grid-column:-2/auto; } +.c2.t1.x5 c,.c3.t1.x5 c { grid-column:5/6; } + +.c1.t1.x4 c { grid-column:4/auto; } +.c2.t1.x4 c,.c3.t1.x4 c { grid-column:-2/-1; } +.t2.x4 c { grid-column:-1/auto; } + +.c1.t1.x3 c, .c1.t1.x2 c, .c1.t1.x1 c { grid-column:-2/auto; } +.c2.t1.x3 c, .c3.t1.x3 c, .c2.t1.x2 c, .c3.t1.x2 c, .c2.t1.x1 c, .c3.t1.x1 c { grid-column:-2/-1; } +.t2.x3 c, .t2.x2 c, .t2.x1 c { grid-column:-1/auto; } + +.t2 f { grid-column:auto/-1; } + +.c1.t1.x5 e, .c1.t1.x4 e, .c2.t1.x2 e, .c3.t1.x2 e { grid-column:3/-2; } +.c1.t1.x3 e ,.c1.t1.x2 e { grid-column:-2/auto; } +.c1.t1.x1 e { grid-column:1/auto; } +.c2.t1.x1 e,.c3.t1.x1 e { grid-column:1/2; } + +.t2.x5 d, .t2.x4 d { grid-column:3/-1; } +.t1.x3 d, .t1.x2 d { grid-column:-2/auto; } +.t2.x2 d, .t2.x1 d { grid-column:-1/auto; } +.t2.x0 d, .t2.x0 c { grid-column:1/auto; } + +.c1.t1 b { grid-column:auto/-2; } + +</style> +</head> +<body> + +<float> +<div class="grid c1 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><f></f><x></x></div> +<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div> +<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div> + +<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +</float> + +<float> +<div class="grid c1 t1 x2"><x></x><a></a><b></b><f></f><x></x></div> +<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div> +<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div> + +<div class="grid c1 t2 x2"><x></x><a></a><b></b><f></f><x></x></div> +<div class="grid c2 t2 x2"><x></x><a></a><b></b><f></f><x></x></div> +<div class="grid c3 t2 x2"><x></x><a></a><b></b><f></f><x></x></div> + +<div class="grid c1 t1 x1"><a></a><b></b><f></f><x></x></div> +<div class="grid c2 t1 x1"><a></a><b></b><c></c><e></e><f></f><x></x></div> +<div class="grid c3 t1 x1"><a></a><b></b><c></c><e></e><f></f><x></x></div> + +<div class="grid c1 t2 x1"><a></a><b></b><f></f><x></x></div> +<div class="grid c2 t2 x1"><a></a><b></b><f></f><x></x></div> +<div class="grid c3 t2 x1"><a></a><b></b><f></f><x></x></div> + +<div class="grid c1 t1 x1 p1"><a></a><b></b><f></f></div> +<div class="grid c2 t1 x1 p1"><a></a><b></b><c></c><e></e><f></f></div> +<div class="grid c3 t1 x1 p1"><a></a><b></b><c></c><e></e><f></f></div> + +<div class="grid c1 t2 x0 p1"><a></a><b></b><f></f></div> +<div class="grid c2 t2 x0 p1"><a></a><b></b><f></f></div> +<div class="grid c3 t2 x0 p1"><a></a><b></b><f></f></div> +</float> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006.html new file mode 100644 index 0000000000..eb5768d0ca --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006.html @@ -0,0 +1,213 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: repeat(auto-fit) with grid-aligned abs.pos.</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> + <link rel="match" href="grid-repeat-auto-fill-fit-006-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 30px; + grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px; + grid-gap: 2px; + width: 160px; + height: 30px; +} + +.c1 { width: 160px; } +.c2 { width: 150px; } +.c3 { width: 140px; } +.p1 { padding-left:5px; } + +.t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; } + +x { + width: 18px; + border:1px solid; + background: grey; +} +a { + position: absolute; + left:0; top:0; height:3px; right:0; + background: cyan; + grid-column: 7 / auto; +} +b { + position: absolute; + left:0; bottom:0; height:3px; right:0; + background: brown; + grid-column: auto / 7; +} +c { + position: absolute; + left:0; bottom:5px; height:3px; right:0; + background: pink; + grid-column: 6 / 7; +} +d { + position: absolute; + left:0; bottom:10px; height:3px; right:0; + background: silver; + grid-column: 3 / 6; +} +e { + position: absolute; + left:0; bottom:15px; height:3px; right:0; + background: magenta; + grid-column: 3 / 7; +} +f { + position: absolute; + left:0; bottom:20px; height:3px; right:0; + background: orange; + grid-column: auto / 6; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +.t1 x:last-child { + grid-column-end:-1; +} + +float { float:left; margin-right:20px; } + +</style> +</head> +<body> + +<float> +<div class="grid c1 t1"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t1"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t1"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +</float> + +<float> +<div class="grid c1 t1"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> +<div class="grid c2 t1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> +<div class="grid c3 t1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> + +<div class="grid c1 t2 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> +<div class="grid c2 t2 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> +<div class="grid c3 t2 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> +</float> + +<script> +function testGridTemplateColumns(elem, expected) { + var actual = window.getComputedStyle(elem).gridTemplateColumns; + if (actual != expected) { + var err = "FAIL: gridTemplateColumns " + elem.className + + ", GOT=" + actual + + ", EXPECTED=" + expected; + document.body.appendChild(document.createTextNode(err)); + } +} +var a1 = [ +"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d] 20px", +"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d] 20px", +"[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px" +]; +var a2 = [ +"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]", +"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]", +"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]", +"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]", +"[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]", +"[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]" +]; +function runTest() { + var t1 = document.querySelectorAll('.t1'); + for (var i = 0; i < t1.length; ++i) { + testGridTemplateColumns(t1[i], a1[i]); + } + var t2 = document.querySelectorAll('.t2'); + for (var i = 0; i < t2.length; ++i) { + testGridTemplateColumns(t2[i], a2[i]); + } + + document.documentElement.className=''; +} +document.addEventListener('MozReftestInvalidate', runTest); + +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007-ref.html new file mode 100644 index 0000000000..fd073a072f --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007-ref.html @@ -0,0 +1,177 @@ +<!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: repeat(auto-fit) with grid-aligned abs.pos. with removed start/middle tracks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1237805"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 30px; + grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px; + grid-gap: 2px; + width: 160px; + height: 30px; +} + +.c1 { width: 160px; } +.c2 { width: 150px; } +.c3 { width: 140px; } +.p1 { padding-left:5px; } + +.t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; } + +x { + width: 18px; + border:1px solid; + background: grey; +} +a { + position: absolute; + left:0; top:0; height:3px; right:0; + background: cyan; + grid-column: -1 / auto; +} +b { + position: absolute; + left:0; bottom:0; height:3px; right:0; + background: brown; + grid-column: auto / -1; +} +c { + position: absolute; + left:0; bottom:5px; height:3px; right:0; + background: pink; + grid-column: -2 / auto; +} +d { + position: absolute; + left:0; bottom:10px; height:3px; right:0; + background: silver; + grid-column: 2 / -3; +} +e { + position: absolute; + left:0; bottom:15px; height:3px; right:0; + background: magenta; + grid-column: 3 / -1; +} +f { + position: absolute; + left:0; bottom:20px; height:3px; right:0; + background: orange; + grid-column: auto / -2; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +.t1 x:last-child { + grid-column-end:-1; +} + +.x5 x:first-child , .x3 x:first-child , .x2 x:first-child { + background: cyan; +} + +.x5.t1 x:nth-child(2) , .x4 x:nth-child(2) , .x3 x:nth-child(2) { + background: purple; +} + + +float { float:left; margin-right:20px; } + +.x5 { grid-template-columns: repeat(5,20px); } +.x4 { grid-template-columns: repeat(4,20px); } +.x3 { grid-template-columns: repeat(3,20px); } +.x2 { grid-template-columns: repeat(2,20px); } + +.t1.x5 a { grid-column:5/auto; } +.c2.t1.x5 a , .c3.t1.x5 a { grid-column-start:-2; left:-2px; } +.c1.t1.x4 a { grid-column:4/auto; } +.c1.t1.x3 a { grid-column:3/auto; } +.c1.t1.x2 a { grid-column:2/auto; } + +.t1.x5 c { grid-column:-3/-2; } +.t2.x5 c { grid-column:-2/-1; } + +.c1.t1.x4 c { grid-column:-2/auto; } +.x4 c { grid-column:-2/-1; } + +.c1.t1.x3 c, .c1.t1.x2 c { grid-column:-2/auto; } +.c2.t1.x3 c, .c3.t1.x3 c, .c2.t1.x2 c, .c3.t1.x2 c { grid-column:-2/-1; } +.t2.x3 c, .t2.x2 c { grid-column:-1/auto; } + +.t1.x5 f , .t2.x4 f { grid-column:auto/4; } +.t2.x5 f { grid-column:auto/5; } +.t2 f { grid-column:auto/-1; } + +.t2.x5 e , .t2.x4 e , .x3 e { grid-column:2/-1; } +.t1.x5 e , .c1.t1.x4 e, .c3.t1.x2 e { grid-column:2/-2; } +.c2.t1.x4 e, .c3.t1.x4 e { grid-column:2/-1; } +.c1.t1.x2 e { grid-column:2/auto; } +.c1.t1.x3 e , .x2 e { grid-column:2/3; } + +.t2.x5 d, .t2.x4 d , .t1.x4 d { grid-column:2/-2; } +.t1.x3 d, .t1.x2 d { grid-column:2/3; } +.t2.x3 d { grid-column:2/-1; } +.t1.x2 d { grid-column:2/auto; } +.t2.x2 d { grid-column:2/3; } + +.c1.t1 b , .c2.t1.x5 b , .c3.t1.x5 b { grid-column:auto/-2; } + +</style> +</head> +<body> + +<float> +<div class="grid c1 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f></div> +<div class="grid c3 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f></div> + +<div class="grid c1 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +</float> + +<float> +<div class="grid c1 t1 x2"><x></x><a></a><b></b><f></f><x></x></div> +<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div> +<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div> + +<div class="grid c1 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +</float> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007.html new file mode 100644 index 0000000000..8ddbdb0d8d --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007.html @@ -0,0 +1,195 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: repeat(auto-fit) with grid-aligned abs.pos. with removed start/middle tracks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1237805"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> + <link rel="match" href="grid-repeat-auto-fill-fit-007-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 30px; + grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px; + grid-gap: 2px; + width: 160px; + height: 30px; +} + +.c1 { width: 160px; } +.c2 { width: 150px; } +.c3 { width: 140px; } +.p1 { padding-left:5px; } + +.t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; } + +x { + width: 18px; + border:1px solid; + background: grey; +} +a { + position: absolute; + left:0; top:0; height:3px; right:0; + background: cyan; + grid-column: 7 / auto; +} +b { + position: absolute; + left:0; bottom:0; height:3px; right:0; + background: brown; + grid-column: auto / 7; +} +c { + position: absolute; + left:0; bottom:5px; height:3px; right:0; + background: pink; + grid-column: 6 / 7; +} +d { + position: absolute; + left:0; bottom:10px; height:3px; right:0; + background: silver; + grid-column: 3 / 6; +} +e { + position: absolute; + left:0; bottom:15px; height:3px; right:0; + background: magenta; + grid-column: 3 / 7; +} +f { + position: absolute; + left:0; bottom:20px; height:3px; right:0; + background: orange; + grid-column: auto / 6; +} + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +.t1 x:last-child { + grid-column-end:-1; +} + +float { float:left; margin-right:20px; } + +.m x:first-child , .n x:first-child { + background: cyan; + grid-column:2; +} + +.n x:nth-child(2) , .o x:nth-child(2) { + background: purple; + grid-column:4; +} + +</style> +</head> +<body> + +<float> +<div class="grid c1 t1 n"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 n"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 n"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 m"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 m"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 m"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t1 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t1 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +</float> + +<float> +<div class="grid c1 t1 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +</float> + +<script> +function testGridTemplateColumns(elem, expected) { + var actual = window.getComputedStyle(elem).gridTemplateColumns; + if (actual != expected) { + var err = "FAIL: gridTemplateColumns " + elem.className + + ", GOT=" + actual + + ", EXPECTED=" + expected; + document.body.appendChild(document.createTextNode(err)); + } +} +var a1 = [ +"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", +"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c d] 20px", +"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c d] 20px", +"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c d] 20px", +"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c d] 20px", +"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c d] 20px", +"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c d] 20px", +"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c d] 20px", +"[a b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px" +]; +var a2 = [ +"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]", +"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d]", +"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d]", +"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]", +"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d]", +"[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d]", +"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]", +"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c d]", +"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c d]", +"[a b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]" +]; +function runTest() { + var t1 = document.querySelectorAll('.t1'); + for (var i = 0; i < t1.length; ++i) { + testGridTemplateColumns(t1[i], a1[i]); + } + var t2 = document.querySelectorAll('.t2'); + for (var i = 0; i < t2.length; ++i) { + testGridTemplateColumns(t2[i], a2[i]); + } + + document.documentElement.className=''; +} +document.addEventListener('MozReftestInvalidate', runTest); + +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-ref.html new file mode 100644 index 0000000000..028d9e209d --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-ref.html @@ -0,0 +1,193 @@ +<!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: repeat(auto-fit) with grid-aligned abs.pos. with removed start/middle tracks and implicit tracks on either/both sides</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1239036"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 30px; + grid-auto-columns: 3px; + grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px; + height: 30px; +} + +.c1 { width: 165px; } +.c2 { width: 155px; } +.c3 { width: 150px; } +.p1 { padding-left:5px; } + +.t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; } + +x { + width: 18px; + border:1px solid; + background: grey; +} +a { + position: absolute; + top:0; height:3px; right:0; + background: cyan; + grid-column: auto / auto; +} +b { + position: absolute; + left:0; bottom:0; height:3px; width:103px; + background: brown; + grid-column: auto / auto; +} +.c2 b {width:100px;} +c { + position: absolute; + left:0; bottom:5px; height:3px; right:0; + background: pink; + grid-column: auto / auto; +} +d { + position: absolute; + left:23px; bottom:10px; height:3px; width:60px; + background: silver; + grid-column: auto / auto; +} +e { + position: absolute; + left:0; bottom:15px; height:3px; right:0; + background: magenta; + grid-column: auto / auto; +} +f { + position: absolute; + left:0; bottom:20px; height:3px; width:83px; + background: orange; + grid-column: auto / auto; +} +.c2 f {width:80px;} + +x:first-of-type { + background: lime; +} +x:nth-of-type(1) { grid-area:1/1; } +x:nth-of-type(2) { grid-area:1/2; } +x:nth-of-type(3) { grid-area:1/3; } +x:nth-of-type(4) { grid-area:1/4; } +x:nth-of-type(5) { grid-area:1/5; } + +x:last-of-type { + background: blue; +} + +.t1 x:last-of-type { + grid-column-end:-1; +} + +float { float:left; margin-right:20px; } + +.m x:first-of-type , .n x:first-of-type { + background: cyan; + grid-area:1/2; +} + +.n x:nth-of-type(2) , .o x:nth-of-type(2) { + background: purple; + grid-area:1/4; +} + +.c1 y, .c3 y:first-of-type { grid-column: span X / 1; background:black; } +.c2 y, .c3 y:last-of-type { grid-column: -1 / span X; background:black; } + +.s2 { left: 23px; } +.s2a { left: 20px; } +.e5 { right: 82px; } +.e5a { right: 75px; } +.e5b { right: 67px; } +.e6 { right: 62px; } +.e6a { right: 55px; } +.e6b { right: 47px; } +.c2 d { left:20px; } +.t2.x4 f, .t2.x3 f { width:63px; } +.c2.t2.x4 f, .c2.t2.x3 f { width:60px; } +.t2.x4 d, .t2.x3 d { width:40px; } +.x2 d { width:20px; } +.x2 f { width:43px; } +.c2.x2 f { width:40px; } + +.t2.x5 b { width:83px; } +.c2.t2.x5 b { width:80px; } +.t2.x4 b, .t2.x3 b { width:63px; } +.c2.t2.x4 b, .c2.t2.x3 b { width:60px; } +.x2 b { width:43px; } +.c2.x2 b { width:40px; } + +.t1.x5 c, .t1.x4 c, .t1.x3 c { left:83px; width:20px; right:auto; } +.c2.x5 c , .c2.t1.x4 c , .c2.t1.x3 c { left:80px; } +.t2.x5 c { left:83px; } +.c2.t2.x5 c { left:80px; } +.t2.x4 c , .t2.x3 c { left:63px; } +.c2.t2.x4 c , .c2.t2.x3 c { left:60px; } +.t1.x2 c , .t2.x2 c { left:43px; } +.c2.t2.x2 c , .c2.t1.x2 c { left:40px;} + +.x2 e { left:23px; width:20px; right:auto; } +.c2.x2 e { left:20px; } +.t1.c3.x2 e { width:20px; } +.t1.c3.x2 c { width:20px; right:auto;} + +.t2.x5 e { left:23px; width:60px; } +.x4 e , .x3 e , .x2 e { left:23px; } +.c2.x4 e , .c2.x3 e , .c2.x2 e { left:20px; } +.c2.t2.x5 e { left:20px; } +.t1.x4 e , .t1.x3 e { width:80px; } +.t2.x4 e , .t2.x3 e { width:40px; } + +</style> +</head> +<body> + +<float> +<div class="grid c1 t1 n x5"><x></x><x></x><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e class="s2 e6"></e><f class="e5"></f><x></x></div> +<div class="grid c2 t1 n x5"><x></x><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e class="s2a e6a"></e><f class="e5a"></f><x></x></div> +<div class="grid c3 t1 n x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e class="s2 e6b"></e><f class="e5b"></f><x></x></div> + +<div class="grid c1 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:82px"></a><b></b><d></d><e class="s2"></e><f class="e5"></f><x></x></div> +<div class="grid c2 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:75px"></a><b></b><d></d><e class="s2e"></e><f class="e5"></f><x></x></div> +<div class="grid c3 t2 m x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:67px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div> + +<div class="grid c1 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div> +<div class="grid c2 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:102px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div> +<div class="grid c2 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:95px"></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t1 n x3"><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div> +<div class="grid c2 t1 n x3"><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 n x3"><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 n x3"><x></x><x></x><y></y><a style="width:102px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div> +<div class="grid c2 t2 n x3"><x></x><x></x><y></y><a style="width:95px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div> +<div class="grid c3 t2 n x3"><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><d></d><e></e><f></f><x></x></div> +</float> + +<float> +<div class="grid c1 t1 n x2"><x></x><y></y><a style="width:122px"></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 n x2"><x></x><y></y><a style="width:115px"></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 n x2"><x></x><y></y><a style="width:122px"></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 n x2"><x></x><y></y><a style="width:115px"></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><d></d><e></e><f></f><x></x></div> +</float> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html new file mode 100644 index 0000000000..061d9477c0 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html @@ -0,0 +1,240 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>CSS Grid Test: repeat(auto-fit) with grid-aligned abs.pos. with removed start/middle tracks and implicit tracks on either/both sides</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1239036"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> + <link rel="match" href="grid-repeat-auto-fill-fit-008-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 30px; + grid-auto-columns: 3px; + grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px; + height: 30px; +} + +.c1 { width: 165px; } +.c2 { width: 155px; } +.c3 { width: 150px; } +.p1 { padding-left:5px; } + +.t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; } + +x { + width: 18px; + border:1px solid; + background: grey; +} +a { + position: absolute; + left:0; top:0; height:3px; right:0; + background: cyan; + grid-column: 7 / auto; +} +b { + position: absolute; + left:0; bottom:0; height:3px; right:0; + background: brown; + grid-column: auto / 7; +} +c { + position: absolute; + left:0; bottom:5px; height:3px; right:0; + background: pink; + grid-column: 6 / 7; +} +d { + position: absolute; + left:0; bottom:10px; height:3px; right:0; + background: silver; + grid-column: 3 / 6; +} +e { + position: absolute; + left:0; bottom:15px; height:3px; right:0; + background: magenta; + grid-column: 3 / 7; +} +f { + position: absolute; + left:0; bottom:20px; height:3px; right:0; + background: orange; + grid-column: auto / 6; +} + +x:first-of-type { + background: lime; +} +x:nth-of-type(1) { grid-area:1/1; } +x:nth-of-type(2) { grid-area:1/2; } +x:nth-of-type(3) { grid-area:1/3; } +x:nth-of-type(4) { grid-area:1/4; } +x:nth-of-type(5) { grid-area:1/5; } + +x:last-of-type { + background: blue; +} + +.t1 x:last-of-type { + grid-column-end:-1; +} + +float { float:left; margin-right:20px; } + +.m x:first-of-type , .n x:first-of-type { + background: cyan; + grid-area:1/2; +} + +.n x:nth-of-type(2) , .o x:nth-of-type(2) { + background: purple; + grid-area:1/4; +} + +.c1 y, .c3 y:first-of-type { grid-column: span X / 1; background:black; } +.c2 y, .c3 y:last-of-type { grid-column: -1 / span X; background:black; } + +</style> +</head> +<body> + +<float> +<div class="grid c1 t1 n"><x></x><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 n"><x></x><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 n"><x></x><x></x><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 m"><x></x><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 m"><x></x><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 m"><x></x><x></x><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t1 o"><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 o"><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 o"><x></x><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 o"><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 o"><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 o"><x></x><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t1 n"><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 n"><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 n"><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 n"><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 n"><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 n"><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +</float> + +<float> +<div class="grid c1 t1 n"><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 n"><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 n"><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> + +<div class="grid c1 t2 n"><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 n"><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 n"><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +</float> + +<script> +function testGridTemplateColumns(elem, expected) { + var actual = window.getComputedStyle(elem).gridTemplateColumns; + if (actual != expected) { + var err = "FAIL: gridTemplateColumns " + elem.className + + ", GOT=" + actual + + ", EXPECTED=" + expected; + document.body.appendChild(document.createTextNode(err)); + } + if (location.search.indexOf("no-implicit") !== -1) { + /* This shouldn't change the layout */ + elem.style.gridTemplateColumns = actual; + } +} +var a1 = [ +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", +"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", +"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", +"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", +"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", +"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", +"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", +"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px", +"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px" +]; +var a2 = [ +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px", +"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px", +"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px", +"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", +"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px", +"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px" +]; + +if (location.search.indexOf("no-implicit") !== -1) { + a1 = [ + "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", + "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", + "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", + "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", + "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", + "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", + "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", + "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", + "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", + "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", + "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px", + "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px", + ] + + a2 = [ + "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", + "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]", + "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]", + "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", + "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", + "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", + "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", + "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", + "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", + "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", + "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", + "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", + ] +} + +function runTest() { + var t1 = document.querySelectorAll('.t1'); + for (var i = 0; i < t1.length; ++i) { + testGridTemplateColumns(t1[i], a1[i]); + } + var t2 = document.querySelectorAll('.t2'); + for (var i = 0; i < t2.length; ++i) { + testGridTemplateColumns(t2[i], a2[i]); + } + + document.documentElement.className=''; +} +document.addEventListener('MozReftestInvalidate', runTest); + +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-009-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-009-ref.html new file mode 100644 index 0000000000..e475d4921f --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-009-ref.html @@ -0,0 +1,131 @@ +<!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: repeat(auto-fill/auto-fit) with intrinsic min- or max-sizing function</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 10px; + grid-gap: 2px; + margin-bottom: 2px; + padding-right: 3px; +} +.r1 { grid-template-columns: repeat(17, minmax(20px,auto)); } +.r2 { grid-template-columns: repeat(18, minmax(auto,20px)); } +.r3 { grid-template-columns: repeat(17, minmax(20px,1fr)); } +.r4 { grid-template-columns: repeat(17, minmax(1fr,20px)); } +.r5 { grid-template-columns: repeat(18, minmax(20px,min-content)); } +.r6 { grid-template-columns: repeat(18, minmax(min-content,20px)); } +.r7 { grid-template-columns: repeat(17, minmax(20px,max-content)); } +.r8 { grid-template-columns: repeat(18, minmax(max-content,20px)); } +.r1.w200 { grid-template-columns: repeat(9, minmax(20px,auto)); } +.r2.w200 { grid-template-columns: repeat(9, minmax(auto,20px)); } +.r3.w200 { grid-template-columns: repeat(9, minmax(20px,1fr)); } +.r4.w200 { grid-template-columns: repeat(9, minmax(1fr,20px)); } +.r5.w200 { grid-template-columns: repeat(9, minmax(20px,min-content)); } +.r6.w200 { grid-template-columns: repeat(9, minmax(min-content,20px)); } +.r7.w200 { grid-template-columns: repeat(9, minmax(20px,max-content)); } +.r8.w200 { grid-template-columns: repeat(9, minmax(max-content,20px)); } + +fit .r1 { grid-template-columns: repeat(3, minmax(20px,auto)); } +fit .r2 { grid-template-columns: repeat(18, minmax(auto,20px)); } +fit .r3 { grid-template-columns: repeat(3, minmax(20px,1fr)); } +fit .r4 { grid-template-columns: repeat(17, minmax(1fr,20px)); } +fit .r5 { grid-template-columns: repeat(18, minmax(20px,min-content)); } +fit .r6 { grid-template-columns: repeat(18, minmax(min-content,20px)); } +fit .r7 { grid-template-columns: repeat(3, minmax(20px,max-content)); } +fit .r8 { grid-template-columns: repeat(3, minmax(max-content,20px)); } +fit .r1.w200 { grid-template-columns: repeat(3, minmax(20px,auto)); } +fit .r2.w200 { grid-template-columns: repeat(9, minmax(auto,20px)); } +fit .r3.w200 { grid-template-columns: repeat(3, minmax(20px,1fr)); } +fit .r4.w200 { grid-template-columns: repeat(9, minmax(1fr,20px)); } +fit .r5.w200 { grid-template-columns: repeat(9, minmax(20px,min-content)); } +fit .r6.w200 { grid-template-columns: repeat(9, minmax(min-content,20px)); } +fit .r7.w200 { grid-template-columns: repeat(3, minmax(20px,max-content)); } +fit .r8.w200 { grid-template-columns: repeat(3, minmax(max-content,20px)); } + +.w200 { width: 200px; } + +x { + height: 10px; + background: grey; +} +a,b,c { display:inline-block; height:10px; width:10px; } + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +fill,fit { + float: left; + width: 390px; +} +</style> +</head> +<body> + +<fill> + +<div class="grid r1"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r2"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r3"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r4"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r5"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r6"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r7"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r8"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> + +<br clear="all"> + +<div class="grid r1 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r2 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r3 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r4 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r5 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r6 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r7 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r8 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> + +</fill> + +<fit> + +<div class="grid r1"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r2"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r3"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r4"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r5"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r6"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r7"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r8"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> + +<br clear="all"> + +<div class="grid r1 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r2 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r3 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r4 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r5 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r6 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r7 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r8 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> + +</fit> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-009.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-009.html new file mode 100644 index 0000000000..5a56a8f6c0 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-009.html @@ -0,0 +1,117 @@ +<!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: repeat(auto-fill/auto-fit) with intrinsic min- or max-sizing function</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> + <link rel="match" href="grid-repeat-auto-fill-fit-009-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + position: relative; + border: 1px solid; + grid-auto-rows: 10px; + grid-gap: 2px; + margin-bottom: 2px; + padding-right: 3px; +} +.r1 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(20px,auto) [c]) [d]; } +.r2 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(auto,20px) [c]) [d]; } +.r3 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(20px,1fr) [c]) [d]; } +.r4 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(1fr,20px) [c]) [d]; } +.r5 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(20px,min-content) [c]) [d]; } +.r6 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(min-content,20px) [c]) [d]; } +.r7 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(20px,max-content) [c]) [d]; } +.r8 { grid-template-columns: [a] repeat(auto-fill, [b] minmax(max-content,20px) [c]) [d]; } + +fit .r1 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(20px,auto) [c]) [d]; } +fit .r2 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(auto,20px) [c]) [d]; } +fit .r3 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(20px,1fr) [c]) [d]; } +fit .r4 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(1fr,20px) [c]) [d]; } +fit .r5 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(20px,min-content) [c]) [d]; } +fit .r6 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(min-content,20px) [c]) [d]; } +fit .r7 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(20px,max-content) [c]) [d]; } +fit .r8 { grid-template-columns: [a] repeat(auto-fit, [b] minmax(max-content,20px) [c]) [d]; } + +.w200 { width: 200px; } + +x { + height: 10px; + background: grey; +} +a,b,c { display:inline-block; height:10px; width:10px; } + +x:first-child { + background: lime; +} +x:last-child { + background: blue; +} + +fill,fit { + float: left; + width: 390px; +} +</style> +</head> +<body> + +<fill> + +<div class="grid r1"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r2"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r3"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r4"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r5"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r6"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r7"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r8"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> + +<br clear="all"> + +<div class="grid r1 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r2 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r3 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r4 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r5 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r6 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r7 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r8 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> + +</fill> + +<fit> + +<div class="grid r1"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r2"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r3"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r4"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r5"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r6"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r7"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r8"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> + +<br clear="all"> + +<div class="grid r1 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r2 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r3 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r4 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r5 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r6 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r7 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> +<div class="grid r8 w200"><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x><x><a></a><b></b><c></c></x></div> + +</fit> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-010-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-010-ref.html new file mode 100644 index 0000000000..5da5488943 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-010-ref.html @@ -0,0 +1,334 @@ +<!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: intrinsic grid container size with repeat(auto-fill/auto-fit) under min-content constraint</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1280798"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + border: 1px solid; +} + +.inline-grid { + display: inline-grid; + grid: min-content 40px / min-content 40px; + border: 3px dotted silver; + align-items: start; + justify-items: start; +} + +.cfill { grid: auto auto / repeat(3, 100px); } +.rfill { grid: repeat(3, 50px) / auto auto; grid-auto-flow:column; } +fit .cfill { grid: auto auto / repeat(2, 100px); } +fit .rfill { grid: repeat(2, 50px) / auto auto; grid-auto-flow:column; } +.r3 { grid: repeat(3, 50px) / auto auto; grid-auto-flow:column; } + +span:nth-of-type(1) { background: magenta; } +span:nth-of-type(2) { background: cyan; } +span:nth-of-type(3) { background: yellow; } +span:nth-of-type(4) { background: lime; } + +x { + display: inline-block; + width: 20px; + height: 30px; +} + +y { + grid-row: 2; + align-self: stretch; + justify-self: stretch; + min-width: 10px; + min-height: 10px; + background: grey; +} +.fill { + min-width: -moz-available; + min-width: -webkit-fill-available; + min-width: fill; +} +.rfill.fill { + min-height: -moz-available; + min-height: -webkit-fill-available; + min-height: fill; +} + </style> +</head> +<body> + +<div class="inline-grid"> +<div class="grid cfill" style="min-width:250px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="max-width:250px; grid-template-columns: 100px 100px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="min-width:350px; max-width:250px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="grid-template-columns:100px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="grid-template-columns:100px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="grid-template-columns:100px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="grid-template-columns:100px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:120px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="max-height:160px;"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:120px; max-height:100px; grid-template-rows: 50px 50px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:160px; max-height:100px;"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="grid-template-rows:50px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="grid-template-rows:50px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="grid-template-rows:50px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="grid-template-rows:50px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid r3" style="min-height:120px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<fit> + +<div class="inline-grid"> +<div class="grid cfill" style="min-width:250px;"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="max-width:250px; grid-template-columns: 100px"> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="min-width:350px; max-width:250px"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="grid-template-columns:none"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="grid-template-columns:none"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="grid-template-columns:none"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill fill" style="grid-template-columns:none"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:120px"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="max-height:160px;"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:120px; max-height:100px; grid-template-rows: 50px"> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:160px; max-height:100px;"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="grid-template-rows:none"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="grid-template-rows:none"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="grid-template-rows:none"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill fill" style="grid-template-rows:none"> +</div> +<y></y> +</div> + +</fit> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-010.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-010.html new file mode 100644 index 0000000000..7c923e65cf --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-010.html @@ -0,0 +1,364 @@ +<!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: intrinsic grid container size with repeat(auto-fill/auto-fit) under min-content constraint</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1280798"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> + <link rel="match" href="grid-repeat-auto-fill-fit-010-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + border: 1px solid; +} + +.inline-grid { + display: inline-grid; + grid: min-content 40px / min-content 40px; + border: 3px dotted silver; + align-items: start; + justify-items: start; +} + +.cfill { grid: auto auto / repeat(auto-fill, 100px); } +.rfill { grid: repeat(auto-fill, 50px) / auto auto; grid-auto-flow:column; } +fit .cfill { grid: auto auto / repeat(auto-fit, 100px); } +fit .rfill { grid: repeat(auto-fit, 50px) / auto auto; grid-auto-flow:column; } +.r3 { grid: repeat(3, 50px) / auto auto; grid-auto-flow:column; } + +span:nth-of-type(1) { background: magenta; } +span:nth-of-type(2) { background: cyan; } +span:nth-of-type(3) { background: yellow; } +span:nth-of-type(4) { background: lime; } + +x { + display: inline-block; + width: 20px; + height: 30px; +} + +y { + grid-row: 2; + align-self: stretch; + justify-self: stretch; + min-width: 10px; + min-height: 10px; + background: grey; +} + +.min-content { + min-width: -webkit-min-content; + min-width: min-content; +} +.max-content { + min-width: -webkit-max-content; + min-width: max-content; +} +.fill { + min-width: -moz-available; + min-width: -webkit-fill-available; + min-width: fill; +} +.fit-content { + min-width: -moz-fit-content; + min-width: -webkit-fit-content; + min-width: fit-content; +} + +.rfill.min-content { + min-height: -webkit-min-content; + min-height: min-content; +} +.rfill.max-content { + min-height: -webkit-max-content; + min-height: max-content; +} +.rfill.fill { + min-height: -moz-available; + min-height: -webkit-fill-available; + min-height: fill; +} +.rfill.fit-content { + min-height: -moz-fit-content; + min-height: -webkit-fit-content; + min-height: fit-content; +} + </style> +</head> +<body> + +<div class="inline-grid"> +<div class="grid cfill" style="min-width:250px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="max-width:250px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="min-width:350px; max-width:250px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill min-content"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill max-content"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill fit-content"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill fill"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:120px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="max-height:160px;"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:120px; max-height:100px;"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:160px; max-height:100px;"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill min-content"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill max-content"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill fit-content"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill fill"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid r3" style="min-height:120px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<fit> + +<div class="inline-grid"> +<div class="grid cfill" style="min-width:250px"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="max-width:250px"> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="min-width:350px; max-width:250px"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill min-content"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill max-content"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill fit-content"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill fill"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:120px"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="max-height:160px;"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:120px; max-height:100px;"> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:160px; max-height:100px;"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill min-content"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill max-content"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill fit-content"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill fill"> +</div> +<y></y> +</div> + +</fit> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-011.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-011.html new file mode 100644 index 0000000000..4a39831f29 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-011.html @@ -0,0 +1,364 @@ +<!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: intrinsic grid container size with repeat(auto-fill/auto-fit) under max-content constraint</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1280798"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> + <link rel="match" href="grid-repeat-auto-fill-fit-010-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + border: 1px solid; +} + +.inline-grid { + display: inline-grid; + grid: max-content 40px / max-content 40px; + border: 3px dotted silver; + align-items: start; + justify-items: start; +} + +.cfill { grid: auto auto / repeat(auto-fill, 100px); } +.rfill { grid: repeat(auto-fill, 50px) / auto auto; grid-auto-flow:column; } +fit .cfill { grid: auto auto / repeat(auto-fit, 100px); } +fit .rfill { grid: repeat(auto-fit, 50px) / auto auto; grid-auto-flow:column; } +.r3 { grid: repeat(3, 50px) / auto auto; grid-auto-flow:column; } + +span:nth-of-type(1) { background: magenta; } +span:nth-of-type(2) { background: cyan; } +span:nth-of-type(3) { background: yellow; } +span:nth-of-type(4) { background: lime; } + +x { + display: inline-block; + width: 20px; + height: 30px; +} + +y { + grid-row: 2; + align-self: stretch; + justify-self: stretch; + min-width: 10px; + min-height: 10px; + background: grey; +} + +.min-content { + min-width: -webkit-min-content; + min-width: min-content; +} +.max-content { + min-width: -webkit-max-content; + min-width: max-content; +} +.fill { + min-width: -moz-available; + min-width: -webkit-fill-available; + min-width: fill; +} +.fit-content { + min-width: -moz-fit-content; + min-width: -webkit-fit-content; + min-width: fit-content; +} + +.rfill.min-content { + min-height: -webkit-min-content; + min-height: min-content; +} +.rfill.max-content { + min-height: -webkit-max-content; + min-height: max-content; +} +.rfill.fill { + min-height: -moz-available; + min-height: -webkit-fill-available; + min-height: fill; +} +.rfill.fit-content { + min-height: -moz-fit-content; + min-height: -webkit-fit-content; + min-height: fit-content; +} + </style> +</head> +<body> + +<div class="inline-grid"> +<div class="grid cfill" style="min-width:250px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="max-width:250px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="min-width:350px; max-width:250px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill min-content"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill max-content"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill fit-content"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill fill"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:120px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="max-height:160px;"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:120px; max-height:100px;"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:160px; max-height:100px;"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill min-content"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill max-content"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill fit-content"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill fill"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid r3" style="min-height:120px"> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<fit> + +<div class="inline-grid"> +<div class="grid cfill" style="min-width:250px"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="max-width:250px"> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill" style="min-width:350px; max-width:250px"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill min-content"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill max-content"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill fit-content"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid cfill fill"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:120px"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="max-height:160px;"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:120px; max-height:100px;"> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill" style="min-height:160px; max-height:100px;"> + <span><x></x></span> + <span><x></x></span> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill min-content"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill max-content"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill fit-content"> +</div> +<y></y> +</div> + +<div class="inline-grid"> +<div class="grid rfill fill"> +</div> +<y></y> +</div> + +</fit> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012-ref.html new file mode 100644 index 0000000000..04963b45fb --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012-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: repeat(auto-fit) with removed tracks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1417711"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0px; margin:0; +} + +.container { + width: 200px; +} + +.grid { + position: relative; + display: grid; + grid: 10px / repeat(5, 30px); + grid-auto-columns: 2px; + background: lightgrey; + margin-bottom: 4px; + grid-gap: 5px; +} +.distribute { + grid-gap: 0; + align-content: space-around; +} + +span { + background: blue; + height: 10px; +} + +.abs { + position: absolute; + top:0; right:0; bottom:0; left:0; + grid-column-end: span 1; + background: pink; +} + + </style> +</head> +<body> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1 / 2" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1 / 2" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1 / 3" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1 / 2" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1 / auto" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1 / 2" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1 / 2" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1 / 3" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1 / 2" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1 / auto" class="abs"></span> +</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html new file mode 100644 index 0000000000..7ed0843af2 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html @@ -0,0 +1,160 @@ +<!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: repeat(auto-fit) with removed tracks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1417711"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> + <link rel="match" href="grid-repeat-auto-fill-fit-012-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0px; margin:0; +} + +.container { + width: 200px; +} + +.grid { + position: relative; + display: grid; + grid: 10px / repeat(auto-fit, 30px); + grid-auto-columns: 2px; + background: lightgrey; + margin-bottom: 4px; + grid-gap: 5px; +} +.distribute { + grid-gap: 0; + align-content: space-around; +} + +span { + background: blue; + height: 10px; +} + +.abs { + position: absolute; + top:0; right:0; bottom:0; left:0; + grid-column-end: span 1; + background: pink; +} + + </style> +</head> +<body> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 4 / 5" class="abs"></span> +<span style="grid-column: 3"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 4 / 5" class="abs"></span> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1 / 5" class="abs"></span> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 2 / 5" class="abs"></span> +<span style="grid-column: 2"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 2 / 5" class="abs"></span> +<span style="grid-column: 2 / 4"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 2 / 5" class="abs"></span> +<span style="grid-column: 4 / 5"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 2 / 5" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 2 / 10" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 4 / 5" class="abs"></span> +<span style="grid-column: 3"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 4 / 5" class="abs"></span> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1 / 5" class="abs"></span> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 2 / 5" class="abs"></span> +<span style="grid-column: 2"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 2 / 5" class="abs"></span> +<span style="grid-column: 2 / 4"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 2 / 5" class="abs"></span> +<span style="grid-column: 4 / 5"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 2 / 5" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 2 / 10" class="abs"></span> +</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013-ref.html new file mode 100644 index 0000000000..9b8267f88d --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013-ref.html @@ -0,0 +1,116 @@ +<!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 Reference: test auto placement in repeat auto-fit grids with leading implicit tracks</title> +<style type="text/css"> +body { + margin: 10px; + font-size: 10px; +} +.wrapper { + display: grid; + width: 600px; + background-color: #f00; +} +.wrapper > * { + background-color: #444; + color: #fff; +} + +.templateFit { + grid-template-columns: 10px 10px repeat(auto-fill, 40px); +} +.templateFixedFit { + grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px); +} +.templateFitFixed { + grid-template-columns: 10px 10px repeat(auto-fill, 40px) 40px; +} +.templateFixedFitFixed { + grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px) 40px; +} + +z { + grid-column: 1; +} +z::after { + content: "Z"; +} + +y { + grid-column: auto; +} +y::after { + content: "Y"; +} + + +b { + grid-column: 3; +} +b::after { + content: "B"; +} + +c { + grid-column: 4; +} +c::after { + content: "C"; +} + +d { + grid-column: 5; +} +d::after { + content: "D"; +} + +e { + grid-column: 6; +} +e::after { + content: "E"; +} + +f { + grid-column: 7; +} +f::after { + content: "F"; +} + +</style> +</head> +<body> + +<div class="wrapper templateFit"><z></z><b></b><y></y></div> +<div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d></div> +<div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div> + +<div class="wrapper templateFixedFit"><z></z><b></b><y></y></div> +<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d></div> +<div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div> + +<div class="wrapper templateFitFixed"><z></z><b></b><y></y></div> +<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div> +<div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div> + +<div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div> +<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div> +<div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.html new file mode 100644 index 0000000000..5a9c05d734 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.html @@ -0,0 +1,135 @@ +<!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: test placement in repeat auto-fit grids with leading implicit tracks</title> +<link rel="author" title="Brad Werth" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1416350"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> +<link rel="match" href="grid-repeat-auto-fill-fit-013-ref.html"> +<style type="text/css"> +body { + margin: 10px; + font-size: 10px; +} +.wrapper { + display: grid; + width: 600px; + background-color: #f00; + grid-auto-columns: 10px; + grid-auto-flow: row; +} +.wrapper > * { + background-color: #444; + color: #fff; +} + +.relative { + position: relative; +} + +.absposchild { + z-index: -1; + position: absolute; + grid-column-end: span 1; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; +} + +.templateFit { + grid-template-columns: repeat(auto-fit, 40px); +} +.templateFixedFit { + grid-template-columns: 20px repeat(auto-fit, 40px); +} +.templateFitFixed { + grid-template-columns: repeat(auto-fit, 40px) 40px; +} +.templateFixedFitFixed { + grid-template-columns: 20px repeat(auto-fit, 40px) 40px; +} + +z { + grid-column: -18; +} +z::after { + content: "Z"; +} + +y { + grid-column: auto; +} +y::after { + content: "Y"; +} + + +b { + grid-column: 3; +} +b::after { + content: "B"; +} + +c { + grid-column: 5; +} +c::after { + content: "C"; +} + +d { + grid-column: 7; +} +d::after { + content: "D"; +} + +e { + grid-column: 9; +} +e::after { + content: "E"; +} + +f { + grid-column: 11; +} +f::after { + content: "F"; +} + +</style> +</head> +<body> + +<div class="wrapper templateFit"><z></z><b></b><y></y></div> +<div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div> +<div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div> + +<div class="wrapper templateFixedFit"><z></z><b></b><y></y></div> +<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div> +<div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div> + +<div class="wrapper templateFitFixed"><z></z><b></b><y></y></div> +<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div> +<div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div> + +<div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div> +<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div> +<div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-row-gap-001-ref.html b/layout/reftests/css-grid/grid-row-gap-001-ref.html new file mode 100644 index 0000000000..34b8b1ddb4 --- /dev/null +++ b/layout/reftests/css-grid/grid-row-gap-001-ref.html @@ -0,0 +1,91 @@ +<!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-row-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 3px 1px 5px 1px 7px / 11px 7px 5px; + padding: 1px 1px 3px 2px; + margin-right: 4px; + width: 40px; + height: 40px; +} + +item1,item2,item3 { + display: block; + position: relative; + background: grey; + justify-self: stretch; + align-self: stretch; +} + +item1 { grid-area: 1 / 1; } +item2 { grid-area: 3 / 2; } +item3 { grid-area: 5 / 3; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.aend *, .aflexend * { inset-block-start:23px; } +.acenter * { inset-block-start:11.5px; } + + +.aspace-between item2 { inset-block-start:11.5px; } +.aspace-between item3 { inset-block-start:23px; } + +.aspace-around item1 { inset-block-start:4.1666px; } +.aspace-around item2 { inset-block-start:11.5px; } +.aspace-around item3 { inset-block-start:18.8333px; } + +.aspace-evenly item1 { inset-block-start:6.25px; } +.aspace-evenly item2 { inset-block-start:11.5px; } +.aspace-evenly item3 { inset-block-start:16.75px; } + +.astretch2 { grid-template-rows: 1fr 1px 5px 1px 7px; } +.astretch3 { grid-template-rows: 14.5px 1px 16.3333px 1px 7px; } +.astretch4 { grid-template-rows: 10.66666px 1px 12.66666px 1px 14.66666px; } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "space-between", "space-around", "space-evenly", + "stretch1", "stretch2", "stretch3", "stretch4" ]; +for (var k = 0; k < test.length; ++k) { + for (var i = 0; i < gridwm.length; ++i) { + var div = document.createElement("div"); + div.className = "grid a" + test[k] + " " + gridwm[i]; + div.appendChild(document.createElement("item1")); + div.appendChild(document.createElement("item2")); + div.appendChild(document.createElement("item3")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-row-gap-001.html b/layout/reftests/css-grid/grid-row-gap-001.html new file mode 100644 index 0000000000..65c58ca60a --- /dev/null +++ b/layout/reftests/css-grid/grid-row-gap-001.html @@ -0,0 +1,91 @@ +<!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-row-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176792"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters"> + <link rel="match" href="grid-row-gap-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 3px 5px 7px / 11px 7px 5px; + padding: 1px 1px 3px 2px; + margin-right: 4px; + width: 40px; + height: 40px; + grid-row-gap: 1px; +} + +item1,item2,item3 { + display: block; + background: grey; + justify-self: stretch; + align-self: stretch; +} + +item1 { grid-area: 1 / 1; } +item2 { grid-area: 2 / 2; } +item3 { grid-area: 3 / 3; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.astart { align-content:start; } +.aend { align-content:end; } +.aflexstart { align-content:flex-start; } +.aflexend { align-content:flex-end; } +.acenter { align-content:center; } +.aleft { align-content:left; } +.aright { align-content:right; } + +.aspace-between{ align-content:space-between; } +.aspace-around { align-content:space-around; } +.aspace-evenly { align-content:space-evenly; } + +.astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch; } +.astretch2 { grid-template-rows: minmax(3px,auto) 5px 7px; } +.astretch3 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) 7px; } +.astretch4 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) minmax(7px,auto); } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "space-between", "space-around", "space-evenly", + "stretch1", "stretch2", "stretch3", "stretch4" ]; +for (var k = 0; k < test.length; ++k) { + for (var i = 0; i < gridwm.length; ++i) { + var div = document.createElement("div"); + div.className = "grid a" + test[k] + " " + gridwm[i]; + div.appendChild(document.createElement("item1")); + div.appendChild(document.createElement("item2")); + div.appendChild(document.createElement("item3")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-row-gap-002-ref.html b/layout/reftests/css-grid/grid-row-gap-002-ref.html new file mode 100644 index 0000000000..dc219ce123 --- /dev/null +++ b/layout/reftests/css-grid/grid-row-gap-002-ref.html @@ -0,0 +1,124 @@ +<!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-row-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-flow: column; + grid-auto-rows: minmax(1px,auto); + grid-template-columns: 0px 7px; + border: 2px solid black; + float: left; +} + +.grid :last-child { background:grey; } +.grid :nth-child(2) { background:pink; } +.grid .gap { background:transparent; } + +x { background: lime; width:7px; } + </style> +</head> +<body> + +<script> +document.body.style.display = "none"; +var align = [ + "start", + // "end", + // "center", + // "start", + // "end", + "start", + "start", + "start", + "start", + "end", + "center", + "start", + // "end", + // "start", + // "safe end", + "center", + // "center", + // "start", + // "safe end", + // "start", + "center", + // "end", +]; +var rows = [ "0", "1", "2", "3", "8", "9" ]; +var heights = [ "auto", "0", "1", "5", "6" ]; +var gaps = [ "1", "2" ]; +for (var j = 0; j < align.length; ++j) { + // document.body.appendChild(document.createTextNode(align[j])); // for debugging + var chunk = document.createElement('div'); + chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden"); + for (var c = 0; c < rows.length; ++c) { + for (var w = 0; w < heights.length; ++w) { + // set this to true if you want to see all tests + var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1; + if (run_test) { + for (var g = 0; g < gaps.length; ++g) { + var grid = document.createElement('div'); + grid.style.height = heights[w]+"px"; + grid.className = "grid"; + grid.style.alignContent = align[j]; + var span = document.createElement('span'); + grid.appendChild(span); + var numRows = parseInt(rows[c]); + var gapRows = numRows==0 ? 0 : (numRows-1); + numRows += gapRows*parseInt(gaps[g]); + span.style.gridRow = "1 / span " + numRows; + for (var x = 0; x < numRows; ++x) { + var item = document.createElement('x'); + if (x % (1+(parseInt(gaps[g]))) != 0) + item.className = "gap"; + grid.appendChild(item); + } + // if (j < 5) { // The stretch tests. + if (j < 1) { // The stretch test. + if (c == 1) + grid.style.background = 'pink' + } + // if (j == 6 && rows[c] == 1) { // The 'safe end' tests. + if (j == 2 && rows[c] == 1) { // The 'safe end' tests. + if (heights[w] != 0) grid.style.alignContent = 'end'; + } + // if (j == 7 && rows[c] == 1) { // The 'safe center' tests. + if (j == 3 && rows[c] == 1) { // The 'safe center' tests. + if (heights[w] != 0) grid.style.alignContent = 'center'; + } + // if (j > 15) { // The space-around and space-evenly tests. + if (j > 7) { // The space-around and space-evenly tests. + if (rows[c] == 1) { + if (heights[w] == 0) { + if (grid.style.alignContent != 'end') { + grid.style.alignContent = 'start'; + } + } else { + grid.style.alignContent = 'center'; + } + } + } + chunk.appendChild(grid); + } + } + } + } + document.body.appendChild(chunk); +} +document.body.style.display = ""; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-row-gap-002.html b/layout/reftests/css-grid/grid-row-gap-002.html new file mode 100644 index 0000000000..0200319445 --- /dev/null +++ b/layout/reftests/css-grid/grid-row-gap-002.html @@ -0,0 +1,100 @@ +<!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-row-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters"> + <link rel="match" href="grid-row-gap-002-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-flow: column; + grid-auto-rows: minmax(1px,auto); + grid-template-columns: 0px 7px; + border: 2px solid black; + float: left; +} + +.grid :last-child { background:grey; } +.grid :nth-child(2) { background:pink; } + +x { background: lime; width:7px; } + + </style> +</head> +<body> + +<script> +document.body.style.display = "none"; +var align = [ + "stretch", + // FIXME: When https://github.com/w3c/csswg-drafts/issues/1002 is implemented. + // "stretch end", + // "stretch center", + // "stretch safe end", + // "stretch unsafe end", + "safe start", + "safe end", + "safe center", + "unsafe start", + "unsafe end", + "unsafe center", + "space-between", + // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 + // "space-between end", + // "space-between start", + // "space-between safe end", + "space-around", + // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 + // "space-around center", + // "space-around right", + // "space-around safe right", + // "space-around left", + "space-evenly", + // "space-evenly end", +]; +var rows = [ "0", "1", "2", "3", "8", "9" ]; +var heights = [ "auto", "0", "1", "5", "6" ]; +var gaps = [ "1", "2" ]; +for (var j = 0; j < align.length; ++j) { + // document.body.appendChild(document.createTextNode(align[j])); // for debugging + var chunk = document.createElement('div'); + chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden"); + for (var c = 0; c < rows.length; ++c) { + for (var w = 0; w < heights.length; ++w) { + // set this to true if you want to see all tests + var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1; + if (run_test) { + for (var g = 0; g < gaps.length; ++g) { + var grid = document.createElement('div'); + if (heights[w] != "auto") + grid.style.height = heights[w]+"px"; + grid.style.gridRowGap = gaps[g]+"px"; + grid.className = "grid"; + grid.style.alignContent = align[j]; + var span = document.createElement('span'); + span.style.gridRow = "1 / span " + rows[c]; + grid.appendChild(span); + for (var x = 0; x < rows[c]; ++x) { + grid.appendChild(document.createElement('x')); + } + chunk.appendChild(grid); + } + } + } + } + document.body.appendChild(chunk); +} +document.body.style.display = ""; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-row-gap-003-ref.html b/layout/reftests/css-grid/grid-row-gap-003-ref.html new file mode 100644 index 0000000000..07bbe29247 --- /dev/null +++ b/layout/reftests/css-grid/grid-row-gap-003-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: 'grid-row-gap' sideways-lr</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-flow: column; + grid-auto-rows: minmax(1px,auto); + grid-template-columns: 0px 7px; + border: 2px solid black; + float: left; + writing-mode: sideways-lr; + margin-right:16px +} + +.grid :last-child { background:grey; } +.grid :nth-child(2) { background:pink; } +.grid .gap { background:transparent; } + +x { background: lime; height:7px; } + </style> +</head> +<body> + +<script> +document.body.style.display = "none"; +var align = [ + "start", + // "end", + // "center", + // "start", + // "end", + "start", + "start", + "start", + "start", + "end", + "center", + "start", + // "end", + // "start", + // "safe end", + "center", + // "center", + // "start", + // "safe end", + // "start", + "center", + // "end", +]; +var rows = [ "0", "1", "2", "3", "8", "9" ]; +var heights = [ "auto", "0", "1", "5", "6" ]; +var gaps = [ "1", "2" ]; +for (var j = 0; j < align.length; ++j) { + // document.body.appendChild(document.createTextNode(align[j])); // for debugging + var chunk = document.createElement('div'); + chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;"); + for (var c = 0; c < rows.length; ++c) { + for (var w = 0; w < heights.length; ++w) { + // set this to true if you want to see all tests + var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1; + if (run_test) { + for (var g = 0; g < gaps.length; ++g) { + var grid = document.createElement('div'); + grid.style.width = heights[w]+"px"; + grid.className = "grid"; + grid.style.alignContent = align[j]; + var span = document.createElement('span'); + grid.appendChild(span); + var numRows = parseInt(rows[c]); + var gapRows = numRows==0 ? 0 : (numRows-1); + numRows += gapRows*parseInt(gaps[g]); + span.style.gridRow = "1 / span " + numRows; + for (var x = 0; x < numRows; ++x) { + var item = document.createElement('x'); + if (x % (1+(parseInt(gaps[g]))) != 0) + item.className = "gap"; + grid.appendChild(item); + } + // if (j < 5) { // The stretch tests. + if (j < 1) { // The stretch test. + if (c == 1) + grid.style.background = 'pink' + } + // if (j == 6 && rows[c] == 1) { // The 'safe end' tests. + if (j == 2 && rows[c] == 1) { // The 'safe end' tests. + if (heights[w] != 0) grid.style.alignContent = 'end'; + } + // if (j == 7 && rows[c] == 1) { // The 'safe center' tests. + if (j == 3 && rows[c] == 1) { // The 'safe center' tests. + if (heights[w] != 0) grid.style.alignContent = 'center'; + } + // if (j > 15) { // The space-around and space-evenly tests. + if (j > 7) { // The space-around and space-evenly tests. + if (rows[c] == 1) { + if (heights[w] == 0) { + if (grid.style.alignContent != 'end') { + grid.style.alignContent = 'start'; + } + } else { + grid.style.alignContent = 'center'; + } + } + } + chunk.appendChild(grid); + } + } + } + } + document.body.appendChild(chunk); +} +document.body.style.display = ""; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-row-gap-003.html b/layout/reftests/css-grid/grid-row-gap-003.html new file mode 100644 index 0000000000..a9a84bc8a9 --- /dev/null +++ b/layout/reftests/css-grid/grid-row-gap-003.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>CSS Grid Test: 'grid-row-gap' sideways-lr</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters"> + <link rel="match" href="grid-row-gap-003-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-flow: column; + grid-auto-rows: minmax(1px,auto); + grid-template-columns: 0px 7px; + border: 2px solid black; + float: left; + writing-mode: sideways-lr; + margin-right:16px +} + +.grid :last-child { background:grey; } +.grid :nth-child(2) { background:pink; } + +x { background: lime; height:7px; } + + </style> +</head> +<body> + +<script> +document.body.style.display = "none"; +var align = [ + "stretch", + // FIXME: When https://github.com/w3c/csswg-drafts/issues/1002 is implemented. + // "stretch end", + // "stretch center", + // "stretch safe end", + // "stretch unsafe end", + "safe start", + "safe end", + "safe center", + "unsafe start", + "unsafe end", + "unsafe center", + "space-between", + // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 + // "space-between end", + // "space-between start", + // "space-between safe end", + "space-around", + // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 + // "space-around center", + // "space-around right", + // "space-around safe right", + // "space-around left", + "space-evenly", + // "space-evenly end", +]; +var rows = [ "0", "1", "2", "3", "8", "9" ]; +var heights = [ "auto", "0", "1", "5", "6" ]; +var gaps = [ "1", "2" ]; +for (var j = 0; j < align.length; ++j) { + // document.body.appendChild(document.createTextNode(align[j])); // for debugging + var chunk = document.createElement('div'); + chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;"); + for (var c = 0; c < rows.length; ++c) { + for (var w = 0; w < heights.length; ++w) { + // set this to true if you want to see all tests + var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1; + if (run_test) { + for (var g = 0; g < gaps.length; ++g) { + var grid = document.createElement('div'); + if (heights[w] != "auto") + grid.style.width = heights[w]+"px"; + grid.style.gridRowGap = gaps[g]+"px"; + grid.className = "grid"; + grid.style.alignContent = align[j]; + var span = document.createElement('span'); + span.style.gridRow = "1 / span " + rows[c]; + grid.appendChild(span); + for (var x = 0; x < rows[c]; ++x) { + grid.appendChild(document.createElement('x')); + } + chunk.appendChild(grid); + } + } + } + } + document.body.appendChild(chunk); +} +document.body.style.display = ""; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-row-gap-004-ref.html b/layout/reftests/css-grid/grid-row-gap-004-ref.html new file mode 100644 index 0000000000..74d2b6fe65 --- /dev/null +++ b/layout/reftests/css-grid/grid-row-gap-004-ref.html @@ -0,0 +1,122 @@ +<!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-row-gap' sideways-rl</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-flow: column; + grid-auto-rows: minmax(1px,auto); + grid-template-columns: 0px 7px; + border: 2px solid black; + float: left; + writing-mode: sideways-rl; + margin-right:16px +} + +.grid :last-child { background:grey; } +.grid :nth-child(2) { background:pink; } +.grid .gap { background:transparent; } + +x { background: lime; height:7px; } + </style> +</head> +<body> + +<script> +document.body.style.display = "none"; +var align = [ + "start", + // "end", + // "center", + // "start", + // "end", + "start", + "start", + "start", + "start", + "end", + "center", + "start", + // "end", + // "start", + // "safe end", + "center", + // "center", + // "start", + // "safe end", + // "start", + "center", + // "end", +]; +var rows = [ "0", "1", "2", "3", "8", "9" ]; +var heights = [ "auto", "0", "1", "5", "6" ]; +var gaps = [ "1", "2" ]; +for (var j = 0; j < align.length; ++j) { + // document.body.appendChild(document.createTextNode(align[j])); // for debugging + var chunk = document.createElement('div'); + chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;"); + for (var c = 0; c < rows.length; ++c) { + for (var w = 0; w < heights.length; ++w) { + // set this to true if you want to see all tests + var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1; + if (run_test) { + for (var g = 0; g < gaps.length; ++g) { + var grid = document.createElement('div'); + grid.style.width = heights[w]+"px"; + grid.className = "grid"; + grid.style.alignContent = align[j]; + var span = document.createElement('span'); + grid.appendChild(span); + var numRows = parseInt(rows[c]); + var gapRows = numRows==0 ? 0 : (numRows-1); + numRows += gapRows*parseInt(gaps[g]); + span.style.gridRow = "1 / span " + numRows; + for (var x = 0; x < numRows; ++x) { + var item = document.createElement('x'); + if (x % (1+(parseInt(gaps[g]))) != 0) + item.className = "gap"; + grid.appendChild(item); + } + // if (j < 5) { // The stretch tests. + if (j < 1) { // The stretch test. + if (c == 1) + grid.style.background = 'pink' + } + // if (j == 6 && rows[c] == 1) { // The 'safe end' tests. + if (j == 2 && rows[c] == 1) { // The 'safe end' tests. + if (heights[w] != 0) grid.style.alignContent = 'end'; + } + // if (j == 7 && rows[c] == 1) { // The 'safe center' tests. + if (j == 3 && rows[c] == 1) { // The 'safe center' tests. + if (heights[w] != 0) grid.style.alignContent = 'center'; + } + // if (j > 15) { // The space-around and space-evenly tests. + if (j > 7) { // The space-around and space-evenly tests. + if (rows[c] == 1) { + if (heights[w] != 0) { + grid.style.alignContent = 'center'; + } + } + } + chunk.appendChild(grid); + } + } + } + } + document.body.appendChild(chunk); +} +document.body.style.display = ""; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-row-gap-004.html b/layout/reftests/css-grid/grid-row-gap-004.html new file mode 100644 index 0000000000..c1047fc2dc --- /dev/null +++ b/layout/reftests/css-grid/grid-row-gap-004.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>CSS Grid Test: 'grid-row-gap' sideways-rl</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters"> + <link rel="match" href="grid-row-gap-004-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid-auto-flow: column; + grid-auto-rows: minmax(1px,auto); + grid-template-columns: 0px 7px; + border: 2px solid black; + float: left; + writing-mode: sideways-rl; + margin-right:16px +} + +.grid :last-child { background:grey; } +.grid :nth-child(2) { background:pink; } + +x { background: lime; height:7px; } + + </style> +</head> +<body> + +<script> +document.body.style.display = "none"; +var align = [ + "stretch", + // FIXME: When https://github.com/w3c/csswg-drafts/issues/1002 is implemented. + // "stretch end", + // "stretch center", + // "stretch safe end", + // "stretch unsafe end", + "safe start", + "safe end", + "safe center", + "unsafe start", + "unsafe end", + "unsafe center", + "space-between", + // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 + // "space-between end", + // "space-between start", + // "space-between safe end", + "space-around", + // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 + // "space-around center", + // "space-around right", + // "space-around safe right", + // "space-around left", + "space-evenly", + // "space-evenly end", +]; +var rows = [ "0", "1", "2", "3", "8", "9" ]; +var heights = [ "auto", "0", "1", "5", "6" ]; +var gaps = [ "1", "2" ]; +for (var j = 0; j < align.length; ++j) { + // document.body.appendChild(document.createTextNode(align[j])); // for debugging + var chunk = document.createElement('div'); + chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;"); + for (var c = 0; c < rows.length; ++c) { + for (var w = 0; w < heights.length; ++w) { + // set this to true if you want to see all tests + var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1; + if (run_test) { + for (var g = 0; g < gaps.length; ++g) { + var grid = document.createElement('div'); + if (heights[w] != "auto") + grid.style.width = heights[w]+"px"; + grid.style.gridRowGap = gaps[g]+"px"; + grid.className = "grid"; + grid.style.alignContent = align[j]; + var span = document.createElement('span'); + span.style.gridRow = "1 / span " + rows[c]; + grid.appendChild(span); + for (var x = 0; x < rows[c]; ++x) { + grid.appendChild(document.createElement('x')); + } + chunk.appendChild(grid); + } + } + } + } + document.body.appendChild(chunk); +} +document.body.style.display = ""; +</script> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-row-gap-005-ref.html b/layout/reftests/css-grid/grid-row-gap-005-ref.html new file mode 100644 index 0000000000..11727afdc1 --- /dev/null +++ b/layout/reftests/css-grid/grid-row-gap-005-ref.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>Reference: Percentage 'grid-row-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1266268"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 3px 5px 7px / 11px 7px 5px; + padding: 1px 1px 3px 2px; + margin-right: 4px; + width: 40px; + height: 30px; + grid-row-gap: 3px; +} +.vl.grid, .vr.grid, .vlr.grid, .vrl.grid { grid-row-gap: 4px; } + +item1,item2,item3 { + display: block; + background: grey; + justify-self: stretch; + align-self: stretch; +} + +item1 { grid-area: 1 / 1; } +item2 { grid-area: 2 / 2; } +item3 { grid-area: 3 / 3; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.astart { align-content:start; } +.aend { align-content:end; } +.aflexstart { align-content:flex-start; } +.aflexend { align-content:flex-end; } +.acenter { align-content:center; } +.aleft { align-content:left; } +.aright { align-content:right; } + +.aspace-between{ align-content:space-between; } +.aspace-around { align-content:space-around; } +.aspace-evenly { align-content:space-evenly; } + +.astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch; } +.astretch2 { grid-template-rows: minmax(3px,auto) 5px 7px; } +.astretch3 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) 7px; } +.astretch4 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) minmax(7px,auto); } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "space-between", "space-around", "space-evenly", + "stretch1", "stretch2", "stretch3", "stretch4" ]; +for (var k = 0; k < test.length; ++k) { + for (var i = 0; i < gridwm.length; ++i) { + var div = document.createElement("div"); + div.className = "grid a" + test[k] + " " + gridwm[i]; + div.appendChild(document.createElement("item1")); + div.appendChild(document.createElement("item2")); + div.appendChild(document.createElement("item3")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-row-gap-005.html b/layout/reftests/css-grid/grid-row-gap-005.html new file mode 100644 index 0000000000..69dc675fcd --- /dev/null +++ b/layout/reftests/css-grid/grid-row-gap-005.html @@ -0,0 +1,91 @@ +<!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: Percentage 'grid-row-gap'</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1266268"> + <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters"> + <link rel="match" href="grid-row-gap-005-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +separator { clear:both; display:block; height:6px; } + +.grid { + display: grid; + float: left; + position: relative; + border: 1px solid; + border-block-start: 2px solid blue; + grid-template: 3px 5px 7px / 11px 7px 5px; + padding: 1px 1px 3px 2px; + margin-right: 4px; + width: 40px; + height: 30px; + grid-row-gap: 10%; +} + +item1,item2,item3 { + display: block; + background: grey; + justify-self: stretch; + align-self: stretch; +} + +item1 { grid-area: 1 / 1; } +item2 { grid-area: 2 / 2; } +item3 { grid-area: 3 / 3; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + +.astart { align-content:start; } +.aend { align-content:end; } +.aflexstart { align-content:flex-start; } +.aflexend { align-content:flex-end; } +.acenter { align-content:center; } +.aleft { align-content:left; } +.aright { align-content:right; } + +.aspace-between{ align-content:space-between; } +.aspace-around { align-content:space-around; } +.aspace-evenly { align-content:space-evenly; } + +.astretch1, .astretch2, .astretch3, .astretch4 { align-content:stretch; } +.astretch2 { grid-template-rows: minmax(3px,auto) 5px 7px; } +.astretch3 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) 7px; } +.astretch4 { grid-template-rows: minmax(3px,auto) minmax(5px,auto) minmax(7px,auto); } + +</style> +</head> +<body> + +<script> +var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; +var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right", + "space-between", "space-around", "space-evenly", + "stretch1", "stretch2", "stretch3", "stretch4" ]; +for (var k = 0; k < test.length; ++k) { + for (var i = 0; i < gridwm.length; ++i) { + var div = document.createElement("div"); + div.className = "grid a" + test[k] + " " + gridwm[i]; + div.appendChild(document.createElement("item1")); + div.appendChild(document.createElement("item2")); + div.appendChild(document.createElement("item3")); + document.body.appendChild(div) + } + document.body.appendChild(document.createElement("separator")); +} +</script> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-fit-content-sizing-001-ref.html b/layout/reftests/css-grid/grid-track-fit-content-sizing-001-ref.html new file mode 100644 index 0000000000..d68f180efe --- /dev/null +++ b/layout/reftests/css-grid/grid-track-fit-content-sizing-001-ref.html @@ -0,0 +1,179 @@ +<!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: fit-content() track sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1281320"> + <style type="text/css"> +body,html { color:black; background:white; font-size:1px; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-rows: auto auto; + position: relative; + border: 1px solid; +} + +.c1 { grid-template-columns: max-content minmax(100px, 1fr); } +.c2 { grid: auto 10px / 200px 0 minmax(100px, 1fr); } +.c3 { grid: auto 10px / 100px 100px minmax(0px, 1fr); } +.c4 { grid: auto 10px / 100px 100px minmax(100px, 1fr); } +.c5 { grid: auto 10px / 0px minmax(0, 1fr) minmax(100px, 1fr); } +.c6 { grid: auto 10px / fit-content(0px) minmax(0, 1fr) minmax(100px, 1fr); } +.c7 { grid: auto 10px / fit-content(40%) fit-content(40%); } + +span { line-height:0; grid-column:span 2; background: lime; } +.c1 span { grid-column:span 1; } + +a { + display: inline-block; + width: 50px; + height: 1px; +} + +y { + position: absolute; + left:0; right:0; top:0; bottom:0; + grid-area: 2/2/3/3; + height: 1px; + background: grey; +} + +.w3 .c1 { grid-template-columns: 176px minmax(0px, 1fr); } +.w3 .c2 { grid-template-columns: 176px 0 minmax(0px, 1fr); } + +.w4 .c1 { grid-template-columns: 152px minmax(0px, 1fr); } +.w4 .c2 { grid-template-columns: 152px 0 minmax(0px, 1fr); } + +.w5 .c1 { grid-template-columns: 128px minmax(0px, 1fr); } +.w5 .c2 { grid-template-columns: 128px 0 minmax(0px, 1fr); } + +.w6 .c1 { grid-template-columns: 104px minmax(0px, 1fr); } +.w6 .c2 { grid-template-columns: 104px 0 minmax(0px, 1fr); } +.w6 .c4 { grid-template-columns: 60px 100px minmax(0px, 1fr); } + +.w7 .c1 { grid-template-columns: 80px minmax(0px, 1fr); } +.w7 .c2 { grid-template-columns: 80px 0 minmax(0px, 1fr); } +.w7 .c3 { grid-template-columns: 80px 80px minmax(0px, 1fr); } +.w7 .c4 { grid-template-columns: 0px 100px minmax(0px, 1fr); } + +.w8 .c1 { grid-template-columns: 50px minmax(100px, 1fr); } +.w8 .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); } +.w8 .c3 { grid-template-columns: 56px 56px minmax(0, 1fr); } +.w8 .c4 { grid-template-columns: 0px 100px minmax(100px, 1fr); } +.w8 .c5 { grid-template-columns: 0px 40px 100px; } + +.w9 .c1 { grid-template-columns: 50px minmax(100px, 1fr); } +.w9 .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); } +.w9 .c3 { grid-template-columns: 32px 32px minmax(0, 1fr); } +.w9 .c4 { grid-template-columns: 0px 100px 100px; } + +.wA .c1 { grid-template-columns: 50px minmax(100px, 1fr); } +.wA .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); } +.wA .c3 { grid-template-columns: 25px 25px minmax(0, 1fr); } +.wA .c4 { grid-template-columns: 0px 100px minmax(100px, 1fr); } + +.wB .c1 { grid-template-columns: 50px minmax(100px, 1fr); } +.wB .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); } +.wB .c3 { grid-template-columns: 25px 25px minmax(0, 1fr); } +.wB .c4 { grid-template-columns: 0px 100px minmax(100px, 1fr); } + + </style> +</head> +<body> + +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div> + +<div class="w2" style="width:502px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div class="w3" style="width:442px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div class="w4" style="width:382px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div class="w5" style="width:322px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div class="w6" style="width:262px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div class="w7" style="width:202px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div class="w8" style="width:142px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div class="w9" style="width:82px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div class="wA" style="width:22px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div class="wB" style="width:2px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-fit-content-sizing-001.html b/layout/reftests/css-grid/grid-track-fit-content-sizing-001.html new file mode 100644 index 0000000000..f925c2c5a4 --- /dev/null +++ b/layout/reftests/css-grid/grid-track-fit-content-sizing-001.html @@ -0,0 +1,141 @@ +<!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: fit-content() track sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1281320"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-fit-content"> + <link rel="match" href="grid-track-fit-content-sizing-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:1px; padding:0; margin:0; } + +.grid { + display: grid; + grid-template-rows: auto auto; + position: relative; + border: 1px solid; +} + +.c1 { grid-template-columns: fit-content(40%) minmax(100px, 1fr); } +.c2 { grid: auto 10px / fit-content(40%) 0 minmax(100px, 1fr); } +.c3 { grid: auto 10px / fit-content(40%) fit-content(40%) minmax(0px, 1fr); } +.c4 { grid: auto 10px / fit-content(40%) 100px minmax(100px, 1fr); } +.c5 { grid: auto 10px / fit-content(40%) minmax(0, 1fr) minmax(100px, 1fr); } +.c6 { grid: auto 10px / fit-content(calc(1px - 99%)) minmax(0, 1fr) minmax(100px, 1fr); } +.c7 { grid: auto 10px / none; grid-auto-columns: fit-content(40%); } + +span { line-height:0; grid-column:span 2; background: lime; } +.c1 span { grid-column:span 1; } + +a { + display: inline-block; + width: 50px; + height: 1px; +} + +y { + position: absolute; + left:0; right:0; top:0; bottom:0; + grid-area: 2/2/3/3; + height: 1px; + background: grey; +} + </style> +</head> +<body> + +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div> + +<div style="width:502px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div style="width:442px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div style="width:382px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div style="width:322px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div style="width:262px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div style="width:202px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div style="width:142px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div style="width:82px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div style="width:22px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +<div style="width:2px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-fit-content-sizing-002-ref.html b/layout/reftests/css-grid/grid-track-fit-content-sizing-002-ref.html new file mode 100644 index 0000000000..f12ee1c32f --- /dev/null +++ b/layout/reftests/css-grid/grid-track-fit-content-sizing-002-ref.html @@ -0,0 +1,148 @@ +<!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: fit-content() track sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1299133"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + grid-auto-rows: 5px; + justify-content: start; + position: relative; + border: 1px solid; +} + +.c1 { grid-template-columns: fit-content(40%) 25px minmax(100px, 1fr); } +.c2 { grid-template-columns: fit-content(40%) 25px 0 25px minmax(100px, 1fr); } +.c3 { grid-template-columns: fit-content(40%) 25px fit-content(40%) 25px minmax(0px, 1fr); } +.c4 { grid-template-columns: fit-content(40%) 25px 100px 25px minmax(100px, 1fr); } +.c5 { grid-template-columns: fit-content(40%) 25px minmax(0, 1fr) 25px minmax(100px, 1fr); } +.c6 { grid-template-columns: fit-content(calc(1px - 99%)) 25px minmax(0, 1fr) 25px minmax(100px, 1fr); } +.c7 { grid-template-columns: fit-content(40%) 25px fit-content(40%); } + +span { + grid-column: 1 / span 3; + grid-row: 2; + height: 2px; + background: lime; + min-width: 50px; +} +.c1 span { grid-column:1; } + +a { + display: inline-block; + width: 50px; + height: 1px; +} + +y { + position: absolute; + left: 0; right: 0; top: 0; + height: 2px; + background: purple; + grid-column: 1 / 2; +} +y:nth-of-type(2n) { background: orange; grid-column: 3 / 4; } + + </style> +</head> +<body> + +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> + +<div style="width:502px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:442px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:382px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:322px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:262px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:202px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:142px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:82px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:22px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:2px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-fit-content-sizing-002.html b/layout/reftests/css-grid/grid-track-fit-content-sizing-002.html new file mode 100644 index 0000000000..14607bfd92 --- /dev/null +++ b/layout/reftests/css-grid/grid-track-fit-content-sizing-002.html @@ -0,0 +1,151 @@ +<!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: fit-content() track sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1299133"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-fit-content"> + <link rel="match" href="grid-track-fit-content-sizing-002-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + grid-auto-rows: 5px; + grid-column-gap: 25px; + justify-content: start; + position: relative; + border: 1px solid; +} + +.c1 { grid-template-columns: fit-content(40%) minmax(100px, 1fr); } +.c2 { grid-template-columns: fit-content(40%) 0 minmax(100px, 1fr); } +.c3 { grid-template-columns: fit-content(40%) fit-content(40%) minmax(0px, 1fr); } +.c4 { grid-template-columns: fit-content(40%) 100px minmax(100px, 1fr); } +.c5 { grid-template-columns: fit-content(40%) minmax(0, 1fr) minmax(100px, 1fr); } +.c6 { grid-template-columns: fit-content(calc(1px - 99%)) minmax(0, 1fr) minmax(100px, 1fr); } +.c7 { grid-template-columns: none; grid-auto-columns: fit-content(40%); } + +span { + grid-column: 1 / span 2; + grid-row: 2; + height: 2px; + background: lime; + min-width: 50px; +} +.c1 span { grid-column:1; } + +a { + display: inline-block; + width: 50px; + height: 1px; +} + +y { + position: absolute; + left: 0; right: 0; top: 0; + height: 2px; + background: purple; + grid-column: 1 / 2; +} +y:nth-of-type(2n) { background: orange; grid-column: 2 / 3; } + + </style> +</head> +<body> + +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> + +<div style="width:502px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:442px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:382px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:322px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:262px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:202px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:142px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:82px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:22px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:2px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-001-ref.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-001-ref.html new file mode 100644 index 0000000000..ba46cc1a6f --- /dev/null +++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-001-ref.html @@ -0,0 +1,139 @@ +<!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: Distribute space beyond growth limits</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: block; + border: 1px solid; + width: 500px; +} +.grid div.c1 { + display: table-row; +} +.grid div { + display: table-cell; +} + +.c1 { } +x { display:block; width:396px; border:2px solid; } +.c2 { background: grey; } +.c3 { background: blue; } +.h10 { height:10px; } + </style> +</head> +<body> + +<div class="grid t1"> +<table border="0" cellpadding="0" cellspacing="0"><tr> + <td colspan="2"><x>1 2 3 4 5</x></td> +</tr><tr> + <td class="c2"> </td> + <td class="c3"> </td> +</tr></table> +</div> +<div class="grid t1"> +<table border="0" cellpadding="0" cellspacing="0"><tr> + <td colspan="2"><x>1 2 3 4 5</x></td> +</tr><tr> + <td class="c2"> </td> + <td class="c3"> </td> +</tr></table> +</div> +<div class="grid t1"> +<table border="0" cellpadding="0" cellspacing="0"><tr> + <td colspan="2"><x>1 2 3 4 5</x></td> +</tr><tr> + <td class="c2 h10"></td> + <td class="c3 h10"></td> +</tr></table> +</div> +<div class="grid t1"> +<table border="0" cellpadding="0" cellspacing="0"><tr> + <td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td> +</tr><tr> + <td class="c2"> </td> + <td class="c3"> </td> +</tr></table> +</div> +<div class="grid t1"> +<table border="0" cellpadding="0" cellspacing="0"><tr> + <td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td> +</tr><tr> + <td class="c2"> </td> + <td class="c3"> </td> +</tr></table> +</div> +<div class="grid t1"> +<table border="0" cellpadding="0" cellspacing="0"><tr> + <td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td> +</tr><tr> + <td class="c2 h10"></td> + <td class="c3 h10"></td> +</tr></table> +</div> +<div class="grid t1"> +<table border="0" cellpadding="0" cellspacing="0"><tr> + <td colspan="2"><x style="width:-webkit-max-content;width:max-content">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4</x></td> +</tr><tr> + <td class="c2"> </td> + <td class="c3"> </td> +</tr></table> +</div> +<div class="grid t2"> +<table border="0" cellpadding="0" cellspacing="0"><tr> + <td colspan="2"><x style="width:auto">1 2 3 4 5 </x></td> +</tr><tr> + <td class="c2"> </td> + <td class="c3"> </td> +</tr></table> +</div> +<div class="grid t2"> +<table border="0" cellpadding="0" cellspacing="0"><tr> + <td colspan="2"><x style="width:auto">1 2 3 4 5 </x></td> +</tr><tr> + <td class="c2"> </td> + <td class="c3"> </td> +</tr></table> +</div> +<div class="grid t2"> +<table border="0" cellpadding="0" cellspacing="0"><tr> + <td colspan="2"><x style="width:auto">1 2 3 4 5</x></td> +</tr><tr> + <td class="c2"></td> + <td class="c3"> </td> +</tr></table> +</div> +<div class="grid t2"> +<table border="0" cellpadding="0" cellspacing="0"><tr> + <td colspan="2"><x style="width:auto">1 2 3 4 5</x></td> +</tr><tr> + <td class="c3 h10" colspan="2"></td> +</tr></table> +</div> +<div class="grid t2"> +<table border="0" cellpadding="0" cellspacing="0"><tr> + <td colspan="2"><x style="width:auto">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 </x></td> +</tr><tr> + <td class="c2"> </td> + <td class="c3"> </td> +</tr></table> +</div> +<div class="grid t2"> +<table border="0" cellpadding="0" cellspacing="0"><tr> + <td colspan="2"><x style="width:auto">1 2 3 4 5 </x></td> +</tr><tr> + <td class="c2"> </td> + <td class="c3"> </td> +</tr></table> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-001.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-001.html new file mode 100644 index 0000000000..061be012e4 --- /dev/null +++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-001.html @@ -0,0 +1,103 @@ +<!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: Distribute space beyond growth limits</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#distribute-extra-space"> + <link rel="match" href="grid-track-intrinsic-sizing-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + border: 1px solid; + width: 500px; + justify-content: start; + align-content: start; +} +.t1 { + grid-template-columns: minmax(max-content,200px) minmax(max-content,200px); +} +.t2 { + grid-template-columns: minmax(0,auto) minmax(max-content,auto); +} + +.c1 { grid-column: span 2; border:2px solid; min-width:0; } +.c2 { background: grey; min-height:10px; min-width:0; } +.c3 { background: blue; min-width:0;} + </style> +</head> +<body> + +<div class="grid t1"> + <span class="c1">1 2 3 4 5</span> + <div class="c2"> </div> + <div class="c3"> </div> +</div> +<div class="grid t1"> + <span class="c1">1 2 3 4 5</span> + <div class="c2"> </div> + <div class="c3"></div> +</div> +<div class="grid t1"> + <span class="c1">1 2 3 4 5</span> + <div class="c2"></div> + <div class="c3"></div> +</div> +<div class="grid t1"> + <span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span> + <div class="c2"> </div> + <div class="c3"> </div> +</div> +<div class="grid t1"> + <span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span> + <div class="c2"> </div> + <div class="c3"></div> +</div> +<div class="grid t1"> + <span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span> + <div class="c2"></div> + <div class="c3"></div> +</div> +<div class="grid t1"> + <span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4</span> + <div class="c2"> </div> + <div class="c3"> </div> +</div> +<div class="grid t2"> + <span class="c1">1 2 3 4 5</span> + <div class="c2"> </div> + <div class="c3"> </div> +</div> +<div class="grid t2"> + <span class="c1">1 2 3 4 5</span> + <div class="c2"> </div> + <div class="c3"></div> +</div> +<div class="grid t2"> + <span class="c1">1 2 3 4 5</span> + <div class="c2"></div> + <div class="c3"> </div> +</div> +<div class="grid t2"> + <span class="c1">1 2 3 4 5</span> + <div class="c2"></div> + <div class="c3"></div> +</div> +<div class="grid t2"> + <span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span> + <div class="c2"> </div> + <div class="c3"> </div> +</div> +<div class="grid t2"> + <span class="c1">1 2 3 4 5</span> + <div class="c2"> </div> + <div class="c3"> </div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html new file mode 100644 index 0000000000..23dc42b692 --- /dev/null +++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html @@ -0,0 +1,168 @@ +<!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: Intrinsic track sizing (w/o span:1)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + position: relative; + display: grid; + border: 1px dashed; + width: 500px; + grid-template-columns: auto; + padding-bottom:10px; + justify-content: start; + align-content: start; +} + +.d1 { + position: absolute; + bottom: 0; + background: grey; +} +.g1 .d1 { + width: 0px; +} +.g2 .d1 { + width: 0px; +} +.g2f .d1 { + width: 0px; +} +.g3 .d1 { + width: 0px; +} +.g4 .d1 { + width: 80px; +} +.g4f .d1 { + width: 0px; +} +.g5 .d1 { + width: 80px; +} +.g6 .d1 { + width: 0px; +} +.g6f .d1 { + width: 0px; +} +.g7 .d1 { + width: 0px; +} +.g8 .t { + width: 196px; +} +.g8 .d1 { + width: 200px; +} +.g9 .d1 { + width: 0px; +} +.gA .d1 { + width: 80px; +} +.gB .d1 { + width: 80px; +} +.gC .d1 { + width: 80px; +} +.gD .d1 { + width: 80px; +} + +.t { grid-column: span 1; border:2px solid; } +div { min-width:0; min-height:10px; } +t { display:inline-block; width:20px; } + + </style> +</head> +<body> + + +<div class="g1 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g2 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> +<div class="g2f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g3 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g4 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> +<div class="g4f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g5 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g6 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> +<div class="g6f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g7 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g8 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g9 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="gA grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="gB grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="gC grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="gD grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-002.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-002.html new file mode 100644 index 0000000000..8dd9e963bc --- /dev/null +++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-002.html @@ -0,0 +1,192 @@ +<!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: Intrinsic track sizing (w/o span:1)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content"> + <link rel="match" href="grid-track-intrinsic-sizing-002-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + border: 1px dashed; + width: 500px; + justify-content: start; + align-content: start; +} + +.g1 { + grid-template-columns: minmax(0,auto) + minmax(max-content,auto) + minmax(max-content,max-content); +} +.g2 { + grid-template-columns: minmax(max-content,auto) + minmax(min-content,auto) + minmax(max-content,max-content); +} +.g2f { + grid-template-columns: minmax(max-content,auto) + minmax(1fr,auto) + minmax(max-content,max-content); +} +.g3 { + grid-template-columns: minmax(max-content,max-content) + minmax(min-content,max-content) + minmax(max-content,max-content); +} +.g4 { + grid-template-columns: minmax(max-content,max-content) + minmax(min-content,max-content) + minmax(min-content,max-content); +} +.g4f { + grid-template-columns: minmax(max-content,max-content) + minmax(1fr,max-content) + minmax(min-content,max-content); +} +.g5 { + grid-template-columns: minmax(max-content,auto) + minmax(min-content,max-content) + minmax(min-content,auto); +} +.g6 { + grid-template-columns: minmax(min-content,auto) + minmax(min-content,max-content) + minmax(min-content,auto); +} +.g6f { + grid-template-columns: minmax(min-content,auto) + minmax(min-content,max-content) + minmax(1fr,auto); +} +.g7 { + grid-template-columns: minmax(min-content,auto) + minmax(min-content,auto) + minmax(min-content,auto); +} +.g8 { + grid-template-columns: minmax(auto,min-content) + minmax(200px,min-content) + minmax(min-content,min-content); +} +.g9 { + grid-template-columns: minmax(auto,auto) + minmax(auto,auto) + minmax(auto,auto); +} +.gA { + grid-template-columns: minmax(auto,auto) + minmax(min-content,min-content) + minmax(min-content,min-content); +} +.gB { + grid-template-columns: minmax(auto,auto) + minmax(max-content,min-content) + minmax(min-content,min-content); +} +.gC { + grid-template-columns: minmax(auto,auto) + minmax(max-content,min-content) + minmax(min-content,max-content); +} +.gD { + grid-template-columns: minmax(auto,auto) + minmax(max-content,max-content) + minmax(min-content,max-content); +} + +.t { grid-column: span 3; border:2px solid; } +.c1 { grid-column: 1; } +.d1 { grid-column: 1 / span 2; background: grey; } +div { min-width:0; min-height:10px; } +t { display:inline-block; width:20px; } + + </style> +</head> +<body> + +<div class="g1 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g2 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> +<div class="g2f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g3 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g4 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> +<div class="g4f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g5 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g6 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> +<div class="g6f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g7 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g8 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="g9 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="gA grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="gB grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="gC grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +<div class="gD grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html new file mode 100644 index 0000000000..01739578ce --- /dev/null +++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html @@ -0,0 +1,228 @@ +<!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: Intrinsic track sizing (w/o span:1, with flex)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + position: relative; + display: grid; + border: 1px dashed; + width: 500px; + grid-template-columns: auto; + padding-bottom:10px; + justify-content: start; + align-content: start; +} + +.d1 { + position: absolute; + bottom: 0; + background: grey; +} +.g1 .d1 { + width: 0px; +} +.g2 .d1 { + width: 0px; +} +.g2f .d1 { + width: 69px; +} +.g3 .d1 { + width: 0px; +} +.g4 .d1 { + width: 80px; +} +.g4f .d1 { + width: 104px; +} +.g5 .d1 { + width: 80px; +} +.g6 .d1 { + width: 0px; +} +.g6f .d1 { + width: 89px; +} +.g7 .d1 { + width: 0px; +} +.g8 .t { + width: 196px; +} +.g8 .d1 { + width: 200px; +} +.g9 .d1 { + width: 0px; +} +.gA .d1 { + width: 80px; +} +.gB .d1 { + width: 80px; +} +.gC .d1 { + width: 80px; +} +.gD .d1 { + width: 80px; +} +.d2 { + position: absolute; + bottom: 0; + right: 0; + background: blue; +} +.g1 .d2 { + width: 500px; +} +.g2 .d2 { + width: 500px; +} +.g2f .d2 { + right: auto; + left: 69px; + width: 35px; +} +.g3 .d2 { + width: 500px; +} +.g4 .d2 { + width: 420px; +} +.g4f .d2 { + right: auto; + left: 69px; + width: 35px; +} +.g5 .d2 { + width: 420px; +} +.g6 .d2 { + width: 500px; +} +.g6f .d2 { + right: auto; + left: 69px; + width: 35px; +} +.g7 .d2 { + width: 500px; +} +.g8 .d2 { + width: 300px; +} +.g9 .d2 { + width: 500px; +} +.gA .d2 { + width: 420px; +} +.gB .d2 { + width: 420px; +} +.gC .d2 { + width: 420px; +} +.gD .d2 { + width: 420px; +} + +.t { grid-column: span 1; border:2px solid; } +div { min-width:0; min-height:10px; } +t { display:inline-block; width:20px; } + + </style> +</head> +<body> + + +<div class="g1 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g2 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> +<div class="g2f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g3 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g4 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> +<div class="g4f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g5 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g6 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> +<div class="g6f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g7 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g8 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g9 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="gA grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="gB grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="gC grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="gD grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-003.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-003.html new file mode 100644 index 0000000000..bee7ef1dd7 --- /dev/null +++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-003.html @@ -0,0 +1,208 @@ +<!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: Intrinsic track sizing (w/o span:1, with flex)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content"> + <link rel="match" href="grid-track-intrinsic-sizing-003-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + border: 1px dashed; + width: 500px; + justify-content: start; + align-content: start; +} + +.g1 { + grid-template-columns: minmax(0,auto) + minmax(max-content,auto) + minmax(max-content,max-content) + 1fr; +} +.g2 { + grid-template-columns: minmax(max-content,auto) + minmax(min-content,auto) + minmax(max-content,max-content) + 1fr; +} +.g2f { + grid-template-columns: minmax(max-content,auto) + minmax(1fr,auto) + minmax(max-content,max-content) + 1fr; +} +.g3 { + grid-template-columns: minmax(max-content,max-content) + minmax(min-content,max-content) + minmax(max-content,max-content) + 1fr; +} +.g4 { + grid-template-columns: minmax(max-content,max-content) + minmax(min-content,max-content) + minmax(min-content,max-content) + 1fr; +} +.g4f { + grid-template-columns: minmax(max-content,max-content) + minmax(min-content,max-content) + minmax(1fr,max-content) + 1fr; +} +.g5 { + grid-template-columns: minmax(max-content,auto) + minmax(min-content,max-content) + minmax(min-content,auto) + 1fr; +} +.g6 { + grid-template-columns: minmax(min-content,auto) + minmax(min-content,max-content) + minmax(min-content,auto) + 1fr; +} +.g6f { + grid-template-columns: minmax(min-content,auto) + minmax(min-content,max-content) + minmax(1fr,auto) + 1fr; +} +.g7 { + grid-template-columns: minmax(min-content,auto) + minmax(min-content,auto) + minmax(min-content,auto) + 1fr; +} +.g8 { + grid-template-columns: minmax(auto,min-content) + minmax(200px,min-content) + minmax(min-content,min-content) + 1fr; +} +.g9 { + grid-template-columns: minmax(auto,auto) + minmax(auto,auto) + minmax(auto,auto) + 1fr; +} +.gA { + grid-template-columns: minmax(auto,auto) + minmax(min-content,min-content) + minmax(min-content,min-content) + 1fr; +} +.gB { + grid-template-columns: minmax(auto,auto) + minmax(max-content,min-content) + minmax(min-content,min-content) + 1fr; +} +.gC { + grid-template-columns: minmax(auto,auto) + minmax(max-content,min-content) + minmax(min-content,max-content) + 1fr; +} +.gD { + grid-template-columns: minmax(auto,auto) + minmax(max-content,max-content) + minmax(min-content,max-content) + 1fr; +} + +.t { grid-column: span 3; border:2px solid; } +.d1 { grid-column: 1 / span 2; background: grey; } +.d3 { grid-column: 3 / span 2; background: blue; } +div { min-width:0; min-height:10px; } +t { display:inline-block; width:20px; } + + </style> +</head> +<body> + +<div class="g1 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> + +<div class="g2 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> +<div class="g2f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> + +<div class="g3 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> + +<div class="g4 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> +<div class="g4f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> + +<div class="g5 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> + +<div class="g6 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> +<div class="g6f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> + +<div class="g7 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> + +<div class="g8 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> + +<div class="g9 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> + +<div class="gA grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> + +<div class="gB grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> + +<div class="gC grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> + +<div class="gD grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d3"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-004-ref.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-004-ref.html new file mode 100644 index 0000000000..fb9d870d00 --- /dev/null +++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-004-ref.html @@ -0,0 +1,251 @@ +<!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: Intrinsic track sizing (with span:1)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + position: relative; + display: grid; + border: 1px solid black; + width: 500px; + grid-template-columns: auto; + padding-bottom:10px; + justify-content: start; + align-content: start; +} + +.d1 { + position: absolute; + bottom: 0; + background: grey; +} +.g1 .d1 { + width: 52px; +} +.g2 .d1 { + width: 56px; +} +.g2f .d1 { + left: 28px; + width: 28px; +} +.g3 .d1 { + left: 41px; + width: 2px; +} +.g4 .d1 { + left: 81px; + width: 2px; +} +.g4f .d1 { + left: 28px; + width: 28px; +} +.g5 .d1 { + left: 81px; + width: 2px; +} +.g6 .d1 { + left: 28px; + width: 28px; +} +.g6f .d1 { + left: 28px; + width: 28px; +} +.g7 .d1 { + left: 28px; + width: 28px; +} +.g8 .t { + width: 216px; +} +.g8 .d1 { + left:0; + width: 200px; +} +.g9 .d1 { + left: 28px; + width: 28px; +} +.gA .d1 { + left: 80px; + width: 2px; +} +.gB .d1 { + left: 0; + width: 82px; +} +.gC .d1 { + left: 0; + width: 82px; +} +.gD .d1 { + left: 0; + width: 82px; +} +.d2 { + position: absolute; + bottom: 0; + background: blue; +} +.g1 .d2 { + width: 104px; + left: 0; +} +.g2 .d2 { + width: 102px; + left: 2px; +} +.g2f .d2 { + width: 48px; + left: 56px; +} +.g3 .d2 { + width: 61px; + left: 43px; +} +.g4 .d2 { + width: 21px; + left: 83px; +} +.g4f .d2 { + width: 48px; + left: 56px; +} +.g5 .d2 { + width: 21px; + left: 83px; +} +.g6 .d2 { + width: 48px; + left: 56px; +} +.g6f .d2 { + width: 48px; + left: 56px; +} +.g7 .d2 { + width: 48px; + left: 56px; +} +.g8 .d2 { + width: 20px; + left: 200px; +} +.g9 .d2 { + width: 48px; + left: 56px; +} +.gA .d2 { + width: 22px; + left: 82px; +} +.gB .d2 { + width: 22px; + left: 82px; +} +.gC .d2 { + width: 22px; + left: 82px; +} +.gD .d2 { + width: 22px; + left: 82px; +} + +.t { grid-column: span 1; border:2px solid; } +div { min-width:0; min-height:10px; } +t { display:inline-block; width:20px; } + + </style> +</head> +<body> + + +<div class="g1 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g2 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> +<div class="g2f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g3 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g4 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> +<div class="g4f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g5 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g6 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> +<div class="g6f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g7 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g8 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="g9 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="gA grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="gB grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="gC grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +<div class="gD grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="d1"></div><div class="d2"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-004.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-004.html new file mode 100644 index 0000000000..cad2f31549 --- /dev/null +++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-004.html @@ -0,0 +1,225 @@ +<!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: Intrinsic track sizing (with span:1)</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content"> + <link rel="match" href="grid-track-intrinsic-sizing-004-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + border: 1px solid black; + width: 500px; + justify-content: start; + align-content: start; +} +.float { width:auto; float:left; } +.g1 { + grid-template-columns: minmax(0,auto) + minmax(max-content,auto) + minmax(max-content,max-content); +} +.g2 { + grid-template-columns: minmax(max-content,auto) + minmax(min-content,auto) + minmax(max-content,max-content); +} +.g2f { + grid-template-columns: minmax(max-content,auto) + minmax(1fr,auto) + minmax(max-content,max-content); +} +.g3 { + grid-template-columns: minmax(max-content,max-content) + minmax(min-content,max-content) + minmax(max-content,max-content); +} +.g4 { + grid-template-columns: minmax(max-content,max-content) + minmax(min-content,max-content) + minmax(min-content,max-content); +} +.g4f { + grid-template-columns: minmax(max-content,max-content) + minmax(1fr,max-content) + minmax(min-content,max-content); +} +.g5 { + grid-template-columns: minmax(max-content,auto) + minmax(min-content,max-content) + minmax(min-content,auto); +} +.g6 { + grid-template-columns: minmax(min-content,auto) + minmax(min-content,max-content) + minmax(min-content,auto); +} +.g6f { + grid-template-columns: minmax(1fr,auto) + minmax(min-content,max-content) + minmax(min-content,auto); +} +.g7 { + grid-template-columns: minmax(min-content,auto) + minmax(min-content,auto) + minmax(min-content,auto); +} +.g8 { + grid-template-columns: minmax(auto,min-content) + minmax(200px,min-content) + minmax(min-content,min-content); +} +.g9 { + grid-template-columns: minmax(auto,auto) + minmax(auto,auto) + minmax(auto,auto); +} +.gA { + grid-template-columns: minmax(auto,auto) + minmax(min-content,min-content) + minmax(min-content,min-content); +} +.gB { + grid-template-columns: minmax(auto,auto) + minmax(max-content,min-content) + minmax(min-content,min-content); +} +.gC { + grid-template-columns: minmax(auto,auto) + minmax(max-content,min-content) + minmax(min-content,max-content); +} +.gD { + grid-template-columns: minmax(auto,auto) + minmax(max-content,max-content) + minmax(min-content,max-content); +} + +.t { grid-column: span 3; border:2px solid; } +.c1 { grid-column: 1; height:10px; } +.c2 { grid-column: 2; background: grey; height:10px; } +.c3 { grid-column: 3; background: blue; height:10px; } +div { min-width:0; min-height:10px; } +t { display:inline-block; width:20px; } + + </style> +</head> +<body> + +<div class="g1 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> + +<div class="g2 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> +<div class="g2f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> + +<div class="g3 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> + +<div class="g4 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> +<div class="g4f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> + +<div class="g5 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> + +<div class="g6 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> +<div class="g6f grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> + +<div class="g7 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> + +<div class="g8 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> + +<div class="g9 grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> + +<div class="gA grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> + +<div class="gB grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> + +<div class="gC grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> + +<div class="gD grid"> + <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> + <div class="c1"></div> + <div class="c2"></div> + <div class="c3"><t> </t></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html b/layout/reftests/css-grid/grid-track-percent-sizing-001-ref.html new file mode 100644 index 0000000000..44a652cb68 --- /dev/null +++ b/layout/reftests/css-grid/grid-track-percent-sizing-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: Percent track sizes</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1264607"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font:1px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 3px solid; + grid-template-columns: 18px; + width: 30px; + grid-template-rows: 5px 10px; + margin-right: 20px; + grid-auto-rows: 10px; + align-content: start; + justify-content: start; +} + +span { + background: grey; + min-width: 0; + min-height: 0; + line-height: 0; + align-self: start; + justify-self: start; +} +t { + display: inline-block; + width: 30px; + height: 5px; +} +x { + background: lime; + min-width: 0; + min-height: 0; +} + +.tA { + grid-template-columns: 30px; + width: auto; +} +.tB { + grid-template-columns: 30px; + grid-template-rows: 0 10px; +} + +.t1 { + grid-template-columns: 28px; +} +.t3, .t4, .t8 { grid: auto 10px / auto; width: auto; } + +.t9 x { width: 18px } +.t3 x, .t4 x, .t8 x, .tA x { width: 0 } +.t5 x { width: 10px } +.tB x { width: 18px } + +.sz { + grid-template-rows: 40px; + width: 100px; + height: 100px; +} +.sz.t1 { grid-template-rows: 50px; } +.sz.t3, .sz.t4 { grid-template-rows: 0; } +.sz.t5 { grid-template-rows: 10px; } +.sz.t9 { grid-template-rows: 40px 10px; height:100px; } +.sz.tA { grid: 0 0 / 0; } +.sz.tB { + grid-template-columns: 60px; + grid-template-rows: 40px; +} + +.sz x { width: 60px; } +.sz.t1 x { width: 70px; } +.sz.t3 x, .sz.t4 x, .sz.t8 x { width: 0 } +.sz.t5 x { width: 10px } +.sz.tA x { width: 160px } + +.tC { + grid-template-columns: 5px; + grid-template-rows: 5px; +} +.tD { + grid-template-columns: 0; + grid-template-rows: 0; +} + </style> +</head> +<body> + +<div class="grid t0"><span><t></t></span><x></x></div> +<div class="grid t1"><span><t></t></span><x></x></div> +<div class="grid t2"><span><t></t></span><x></x></div> +<div class="grid t3"><span><t></t></span><x></x></div> +<div class="grid t4"><span><t></t></span><x></x></div> +<div class="grid t5"><span><t></t></span><x></x></div> +<div class="grid t6"><span><t></t></span><x></x></div> +<div class="grid t7"><span><t></t></span><x></x></div> +<div class="grid t8"><span><t></t></span><x></x></div> +<div class="grid t9"><span><t></t></span><x></x></div> +<div class="grid tA"><span><t></t></span><x></x></div> +<div class="grid tD" style="width:0"><span><t></t></span><x></x></div> + +<br clear="all"> + +<div class="grid sz t0"><span><t></t></span><x></x></div> +<div class="grid sz t1"><span><t></t></span><x></x></div> +<div class="grid sz t2"><span><t></t></span><x></x></div> +<div class="grid sz t3"><span><t></t></span><x></x></div> +<div class="grid sz t4"><span><t></t></span><x></x></div> +<div class="grid sz t5"><span><t></t></span><x></x></div> +<div class="grid sz t6"><span><t></t></span><x></x></div> +<div class="grid sz t7"><span><t></t></span><x></x></div> +<div class="grid sz t8"><span><t></t></span><x></x></div> +<div class="grid sz t9"><span><t></t></span><x></x></div> +<div class="grid sz tA"><span><t></t></span><x></x></div> +<div class="grid sz tB"><span><t></t></span><x></x></div> +<div class="grid sz tC"><span><t></t></span><x style="height:10px; width:5px"></x></div> +<div class="grid sz tD"><span><t></t></span><x style="width:0"></x></div> +<div class="grid sz tD"><span><t></t></span><x style="width:0"></x></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-percent-sizing-001.html b/layout/reftests/css-grid/grid-track-percent-sizing-001.html new file mode 100644 index 0000000000..c0296afe44 --- /dev/null +++ b/layout/reftests/css-grid/grid-track-percent-sizing-001.html @@ -0,0 +1,140 @@ +<!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: Percent track sizes</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1264607"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-percentage"> + <link rel="match" href="grid-track-percent-sizing-001-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font:1px/1 monospace; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + border: 3px solid; + grid-template-columns: 60%; + grid-template-rows: 40%; + margin-right: 20px; + grid-auto-rows: 10px; + align-content: start; + justify-content: start; +} +.sz { + width: 100px; + height: 100px; +} + +.t1 { + grid-template-columns: calc(10px + 60%); + grid-template-rows: calc(10px + 40%); +} +.t2 { + grid-template-columns: calc(60%); + grid-template-rows: calc(40%); +} +.t3 { + grid-template-columns: calc(0%); + grid-template-rows: calc(0%); +} +.t4 { + grid-template-columns: 0%; + grid-template-rows: 0%; +} +.t5 { + grid-template-columns: calc(10px + 0%); + grid-template-rows: calc(10px + 0%); +} +.t6 { + grid-template-columns: calc(0px + 60%); + grid-template-rows: calc(0px + 40%); +} +.t7 { + grid-template-columns: calc(0% + 60%); + grid-template-rows: calc(0% + 40%); +} +.t8 { + grid-template-columns: calc(0% + 0%); + grid-template-rows: calc(0% + 0%); +} +.t9 { + grid-template-columns: minmax(0, 60%); + grid-template-rows: minmax(0, 40%); +} +.tA { + grid-template-columns: calc(10px - 200%); + grid-template-rows: calc(10px - 99%); +} +.tB { + grid-template-columns: minmax(60%, 0); + grid-template-rows: minmax(40%, 0); +} +.tC { + grid-template-columns: calc(10px - 5%); + grid-template-rows: calc(10px - 5%); +} +.tD { + grid-template-columns: calc(10px - 40%); + grid-template-rows: calc(10px - 40%); +} + +span { + background: grey; + min-width: 0; + min-height: 0; + line-height: 0; + align-self: start; + justify-self: start; +} +t { + display: inline-block; + width: 30px; + height: 5px; +} +x { + background: lime; + min-width: 0; + min-height: 0; +} + + </style> +</head> +<body> + +<div class="grid" ><span><t></t></span><x></x></div> +<div class="grid t1"><span><t></t></span><x></x></div> +<div class="grid t2"><span><t></t></span><x></x></div> +<div class="grid t3"><span><t></t></span><x></x></div> +<div class="grid t4"><span><t></t></span><x></x></div> +<div class="grid t5"><span><t></t></span><x></x></div> +<div class="grid t6"><span><t></t></span><x></x></div> +<div class="grid t7"><span><t></t></span><x></x></div> +<div class="grid t8"><span><t></t></span><x></x></div> +<div class="grid t9"><span><t></t></span><x></x></div> +<div class="grid tA"><span><t></t></span><x></x></div> +<div class="grid tB"><span><t></t></span><x></x></div> + +<br clear="all"> + +<div class="grid sz" ><span><t></t></span><x></x></div> +<div class="grid sz t1"><span><t></t></span><x></x></div> +<div class="grid sz t2"><span><t></t></span><x></x></div> +<div class="grid sz t3"><span><t></t></span><x></x></div> +<div class="grid sz t4"><span><t></t></span><x></x></div> +<div class="grid sz t5"><span><t></t></span><x></x></div> +<div class="grid sz t6"><span><t></t></span><x></x></div> +<div class="grid sz t7"><span><t></t></span><x></x></div> +<div class="grid sz t8"><span><t></t></span><x></x></div> +<div class="grid sz t9"><span><t></t></span><x></x></div> +<div class="grid sz tA"><span><t></t></span><x></x></div> +<div class="grid sz tB"><span><t></t></span><x></x></div> +<div class="grid sz tC"><span><t></t></span><x></x></div> +<div class="grid sz tD"><span><t></t></span><x style="grid-area:1/2;height:10px"></x></div> +<div class="grid sz tD"><span><t></t></span><x style="grid-area:2/2;height:10px"></x></div> + + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-sizing-001-ref.html b/layout/reftests/css-grid/grid-track-sizing-001-ref.html new file mode 100644 index 0000000000..4922066e83 --- /dev/null +++ b/layout/reftests/css-grid/grid-track-sizing-001-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> +<meta charset="utf-8"> +<title>Test simple track sizing and grid item layout</title> +<style> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +span { + position: absolute; + border: 3px dashed; +} +span.bg { + position: absolute; + background: lime; + border: 0 none; +} +#item1 { top: 50px; left: 11px; width: 21px; height: 37px; } +#item2 { top: 50px; left: 11px; width: 15px; height: 31px; } +#item3 { top: 3px; left: 48px; width: 41px; height: 37px; } +#item4 { top: 3px; left: 48px; width: 35px; height: 31px; } +#item5 { top: 3px; left: 105px; width: 57px; height: 37px; } +#item6 { top: 0px; left: 94px; width: 67px; height: 41px; } +#item7 { top: 94px; left: 11px; width: 500px; height: 40px; } +#item8 { top: 141px; left: 0px; width: 94px; height: 10px; } +</style> +</head> +<body> +<div class="grid"> + <span id="item1" class="bg"></span> + <span id="item2">1</span> + <span id="item3" class="bg"></span> + <span id="item4">2</span> + <span id="item5" class="bg"></span> + <span id="item6">3</span> + <span id="item7" class="bg">4</span> + <span id="item8" class="bg">5</span> +</div> +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-sizing-001.html b/layout/reftests/css-grid/grid-track-sizing-001.html new file mode 100644 index 0000000000..9cd36835d8 --- /dev/null +++ b/layout/reftests/css-grid/grid-track-sizing-001.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>Test simple track sizing and grid item layout</title> +<style> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +span { + border: 3px dashed; + margin:3px 5px 7px 11px; +} +.grid { + display: grid; + grid-auto-flow: column; + grid-template-columns: 37px 57px 73px; + grid-auto-rows: 47px; + grid-auto-columns: 53px; +} +span.bg { + background: lime; + border: 0 none; +} +</style> +</head> +<body> +<div class="grid"> + <span style="grid-column: 1; grid-row: 2;" class="bg"></span> + <span style="grid-column: 1; grid-row: 2;">1</span> + <span style="grid-column: 2; grid-row: 1;" class="bg"></span> + <span style="grid-column: 2; grid-row: 1;">2</span> + <span style="grid-column: 3; grid-row: 1;" class="bg"></span> + <span style="grid-column: 3; grid-row: 1; margin:0">3</span> + <span style="grid-column: 1 / span 2; margin-top:0; width:500px" class="bg">4</span> + <span style="grid-column: 1 / span 2; margin:0; height:10px;" class="bg">5</span> +</div> +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-sizing-002-ref.html b/layout/reftests/css-grid/grid-track-sizing-002-ref.html new file mode 100644 index 0000000000..3db89b9867 --- /dev/null +++ b/layout/reftests/css-grid/grid-track-sizing-002-ref.html @@ -0,0 +1,243 @@ +<!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: freezing tracks in step 2.5 of the Track Sizing Algorithm</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1225368"> + <style> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: block; + float: left; + grid-template-rows: 20px; + justify-items: start; + margin-right: 5px; +} + +x { + display: block; + min-width: 0; + width: 30px; + height: 20px; + background: grey; +} +.grid div { + grid-column:1/span 2; + min-width: 0; + width: 100px; + height: 20px; + background: black; +} +div div:nth-child(2n+1) { + background: grey; +} +.grid.c3 div { + margin-right: 30px; +} +y { display: block; width: 130px; } +</style> +</head> +<body> + +<div class="grid"> + <x></x> + <div></div> +</div> + +<div class="grid"> + <x></x> + <div></div> + <div></div> +</div> + +<div class="grid"> + <x></x> + <div></div> + <div></div> + <div></div> +</div> + +<div class="grid"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> +</div> + +<div class="grid" style="grid-auto-columns: minmax(0,auto)"> + <x></x> + <div></div> + <div></div> + <div></div> + <div></div> +</div> + +<div class="grid" style="grid-auto-columns: minmax(0,auto)"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(0,auto) 0"> + <x></x> + <div></div> +</div> + +<br clear=all> + +<div class="grid" style="grid-template-columns: minmax(0,auto) 0"> + <x></x> + <div></div> + <div></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(0,auto) 0"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(0,auto) 0"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto"> + <x></x> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto"> + <x></x> + <div></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto"> + <x></x> + <div style="width:80px"></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> +</div> + +<br clear=all> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto"> + <x></x> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto"> + <x></x> + <div></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto"> + <x></x> + <div style="width:80px"></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto"> + <x></x> + <div></div> + <y></y> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto"> + <x></x> + <div></div> + <div></div> + <y></y> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto"> + <x></x> + <div style="width:80px"></div> + <div></div> + <y></y> +</div> + +<br clear=all> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> + <y></y> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div style="grid-row:2; grid-column:span 2"></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div style="width:80px"></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div style="width:80px"></div> + <div style="grid-column:span 2"></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div style="grid-row:2; grid-column:span 2; width:80px"></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-sizing-002.html b/layout/reftests/css-grid/grid-track-sizing-002.html new file mode 100644 index 0000000000..e09818fb20 --- /dev/null +++ b/layout/reftests/css-grid/grid-track-sizing-002.html @@ -0,0 +1,238 @@ +<!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: freezing tracks in step 2.5 of the Track Sizing Algorithm</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1225368"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content"> + <link rel="match" href="grid-track-sizing-002-ref.html"> + <style> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + float: left; + grid-template-rows: 20px; + justify-items: start; + margin-right: 5px; +} + +x { + min-width: 0; + width: 30px; + background: grey; +} +.grid div { + grid-column:1/span 2; + min-width: 0; + width: 100px; + height: 20px; + background: black; +} +div div:nth-child(2n+1) { + background: grey; +} +.grid.c3 div { + grid-column:1/span 3; +} +</style> +</head> +<body> + +<div class="grid"> + <x></x> + <div></div> +</div> + +<div class="grid"> + <x></x> + <div></div> + <div></div> +</div> + +<div class="grid"> + <x></x> + <div></div> + <div></div> + <div></div> +</div> + +<div class="grid"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> +</div> + +<div class="grid" style="grid-auto-columns: minmax(0,auto)"> + <x></x> + <div></div> + <div></div> + <div></div> + <div></div> +</div> + +<div class="grid" style="grid-auto-columns: minmax(0,auto)"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(0,auto) 0"> + <x></x> + <div></div> +</div> + +<br clear=all> + +<div class="grid" style="grid-template-columns: minmax(0,auto) 0"> + <x></x> + <div></div> + <div></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(0,auto) 0"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(0,auto) 0"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto"> + <x></x> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto"> + <x></x> + <div></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto"> + <x></x> + <div style="width:80px"></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> +</div> + +<br clear=all> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto"> + <x></x> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto"> + <x></x> + <div></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto"> + <x></x> + <div style="width:80px"></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto"> + <x></x> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto"> + <x></x> + <div></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto"> + <x></x> + <div style="width:80px"></div> + <div></div> +</div> + +<br clear=all> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div style="grid-row:2; grid-column:span 2"></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div style="width:80px"></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div style="width:80px"></div> + <div style="grid-column:span 2"></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div style="grid-row:2; grid-column:span 2; width:80px"></div> + <div></div> +</div> + +<div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto"> + <x></x> + <div style="width:80px"></div> + <div></div> + <div></div> + <div></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-whitespace-handling-1-ref.xhtml b/layout/reftests/css-grid/grid-whitespace-handling-1-ref.xhtml new file mode 100644 index 0000000000..31ac18bda8 --- /dev/null +++ b/layout/reftests/css-grid/grid-whitespace-handling-1-ref.xhtml @@ -0,0 +1,52 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + Reference case, with inline-blocks instead of grid/grid items, + with positioning done using margins. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; } + div.grid { + border: 1px dashed blue; + width: 200px; + } + div.a { + width: 30px; + background: lightgreen; + display: inline-block; + } + div.b { + width: 20px; + background: lightblue; + display: inline-block; + } + img { + width: 40px; + height: 100%; + } + </style> + </head> + <body> + <div class="grid"> + <div class="a" style="margin-left: 85px"/> + </div> + + <div class="grid"> + <div class="a" style="margin-left: 37.5px" + /><div class="b" style="margin-left: 75px"/> + </div> + + <div class="grid"> + <img src="support/solidblue.png" style="margin-left: 30px" + /><img src="support/solidblue.png" style="margin-left: 60px"/> + </div> + </body> +</html> + diff --git a/layout/reftests/css-grid/grid-whitespace-handling-1a.xhtml b/layout/reftests/css-grid/grid-whitespace-handling-1a.xhtml new file mode 100644 index 0000000000..01b99a5b3e --- /dev/null +++ b/layout/reftests/css-grid/grid-whitespace-handling-1a.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test verifies that we don't create anonymous grid items around + runs of inline content that are _purely_ whitespace. + + The test uses "white-space: pre", to try to tempt us into honoring + that whitespace. (but we should resist that temptation). + + The test also uses 'justify-content: space-around' to be sure we can + tell whether anonymous grid items are being created around the whitespace + (since they'd claim a share of the packing space if they were there). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Test that anonymous grid items aren't created for pure-whitespace inline content</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-grid/#grid-items"/> + <link rel="match" href="grid-whitespace-handling-1-ref.xhtml"/> + <style> + div { height: 100px; } + div.grid { + white-space: pre; + border: 1px dashed blue; + width: 200px; + display: grid; + justify-content: space-around; + } + div.a { + width: 30px; + background: lightgreen; + } + div.b { + width: 20px; + background: lightblue; + } + img { width: 40px; } + </style> + </head> + <body> + <!-- whitespace & tab after grid item --> + <div class="grid"><div class="a"/> </div> + + <!-- 2 spaces before grid item --> + <div class="grid"> <div class="a"/><div class="b"/></div> + + <!-- newline & whitespace between grid items --> + <div class="grid"><img src="support/solidblue.png"/> + <img src="support/solidblue.png"/></div> + </body> +</html> + diff --git a/layout/reftests/css-grid/grid-whitespace-handling-1b.xhtml b/layout/reftests/css-grid/grid-whitespace-handling-1b.xhtml new file mode 100644 index 0000000000..cf881795c9 --- /dev/null +++ b/layout/reftests/css-grid/grid-whitespace-handling-1b.xhtml @@ -0,0 +1,48 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test is like the -1a variant, but with the whitespace removed between + grid items (since that whitespace should be ignored anyway, if we're + doing things right). +--> +<!-- XXXdholbert Does this testcase add value? + (Maybe it should be an alternate reference case.) --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Test that grid items are created correctly</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-grid/#grid-items"/> + <link rel="match" href="grid-whitespace-handling-1-ref.xhtml"/> + <style> + div { height: 100px; } + div.grid { + border: 1px dashed blue; + width: 200px; + display: grid; + justify-content: space-around; + } + div.a { + width: 30px; + background: lightgreen; + } + div.b { + width: 20px; + background: lightblue; + } + img { width: 40px; } + </style> + </head> + <body> + <div class="grid"><div class="a"/></div> + + <div class="grid"><div class="a"/><div class="b"/></div> + + <div class="grid" + ><img src="solidblue.png" + /><img src="solidblue.png"/></div> + </body> +</html> + diff --git a/layout/reftests/css-grid/grid-whitespace-handling-2-ref.xhtml b/layout/reftests/css-grid/grid-whitespace-handling-2-ref.xhtml new file mode 100644 index 0000000000..3c120522d0 --- /dev/null +++ b/layout/reftests/css-grid/grid-whitespace-handling-2-ref.xhtml @@ -0,0 +1,52 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This reference case is the same as the testcase, but with an explicit <div> + around each run of content that we expect to turn into an anonymous + grid item (to ensure that the whitespace is included). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="stylesheet" type="text/css" href="support/ahem.css" /> + <style> + div.a, div.b, div.grid { height: 100px; } + div.grid { + white-space: pre; + border: 1px dashed blue; + width: 200px; + display: grid; + justify-content: space-around; + } + div.a { + width: 30px; + background: lightgreen; + } + div.b { + width: 20px; + background: lightblue; + } + </style> + </head> + <body> + <!-- spaces around inline content at the beginning of grid --> + <div class="grid"><div> abc</div><div class="a"/></div> + <div class="grid"><div>abc </div><div class="a"/></div> + <div class="grid"><div> abc </div><div class="a"/></div> + + <!-- spaces around inline content at the end of grid --> + <div class="grid"><div class="a"/><div> abc</div></div> + <div class="grid"><div class="a"/><div>abc </div></div> + <div class="grid"><div class="a"/><div> abc </div></div> + + <!-- whitespace around inline content in between grid items --> + <div class="grid"><div class="a"/><div> abc</div><div class="b"/></div> + <div class="grid"><div class="a"/><div>abc </div><div class="b"/></div> + <div class="grid"><div class="a"/><div> abc </div><div class="b"/></div> + </body> +</html> + diff --git a/layout/reftests/css-grid/grid-whitespace-handling-2.xhtml b/layout/reftests/css-grid/grid-whitespace-handling-2.xhtml new file mode 100644 index 0000000000..324ab30d44 --- /dev/null +++ b/layout/reftests/css-grid/grid-whitespace-handling-2.xhtml @@ -0,0 +1,53 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test verifies that we preserve whitespace at the beginning & end of + anonymous grid items (using "white-space: pre" so that it actually + occupies space and affects the rendering). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Test that whitespace is preserved at the edges of anonymous grid items if 'white-space: pre' is set</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-grid/#grid-items"/> + <link rel="match" href="grid-whitespace-handling-2-ref.xhtml"/> + <link rel="stylesheet" type="text/css" href="support/ahem.css" /> + <style> + div { height: 100px; } + div.grid { + white-space: pre; + border: 1px dashed blue; + width: 200px; + display: grid; + justify-content: space-around; + } + div.a { + width: 30px; + background: lightgreen; + } + div.b { + width: 20px; + background: lightblue; + } + </style> + </head> + <body> + <!-- spaces around inline content at the beginning of grid --> + <div class="grid"> abc<div class="a"/></div> + <div class="grid">abc <div class="a"/></div> + <div class="grid"> abc <div class="a"/></div> + + <!-- spaces around inline content at the end of grid --> + <div class="grid"><div class="a"/> abc</div> + <div class="grid"><div class="a"/>abc </div> + <div class="grid"><div class="a"/> abc </div> + + <!-- whitespace around inline content in between grid items --> + <div class="grid"><div class="a"/> abc<div class="b"/></div> + <div class="grid"><div class="a"/>abc <div class="b"/></div> + <div class="grid"><div class="a"/> abc <div class="b"/></div> + </body> +</html> diff --git a/layout/reftests/css-grid/reftest.list b/layout/reftests/css-grid/reftest.list new file mode 100644 index 0000000000..2f90bfd335 --- /dev/null +++ b/layout/reftests/css-grid/reftest.list @@ -0,0 +1,285 @@ +fails == grid-whitespace-handling-1a.xhtml grid-whitespace-handling-1-ref.xhtml +fails == grid-whitespace-handling-1b.xhtml grid-whitespace-handling-1-ref.xhtml +== grid-whitespace-handling-2.xhtml grid-whitespace-handling-2-ref.xhtml +== grid-placement-definite-001.html grid-placement-definite-001-ref.html +== grid-placement-definite-002.html grid-placement-definite-002-ref.html +== grid-placement-definite-003.html grid-placement-definite-003-ref.html +== grid-placement-negative-lines-001.html grid-placement-negative-lines-001-ref.html +== grid-placement-auto-row-sparse-001.html grid-placement-auto-row-sparse-001-ref.html +== grid-placement-auto-row-dense-001.html grid-placement-auto-row-dense-001-ref.html +== grid-placement-auto-col-sparse-001.html grid-placement-auto-col-sparse-001-ref.html +== grid-placement-auto-col-dense-001.html grid-placement-auto-col-dense-001-ref.html +== grid-placement-implicit-named-areas-001.html grid-placement-implicit-named-areas-001-ref.html +== grid-placement-named-lines-001.html grid-placement-named-lines-001-ref.html +== grid-placement-named-lines-002.html grid-placement-named-lines-002-ref.html +== grid-placement-named-lines-003.html grid-placement-named-lines-003-ref.html +== grid-track-sizing-001.html grid-track-sizing-001-ref.html +== grid-track-sizing-002.html grid-track-sizing-002-ref.html +== grid-abspos-items-001.html grid-abspos-items-001-ref.html +fuzzy(0-180,0-3) == grid-abspos-items-002.html grid-abspos-items-002-ref.html # flattening differences +== grid-abspos-items-003.html grid-abspos-items-003-ref.html +== grid-abspos-items-004.html grid-abspos-items-004-ref.html +== grid-abspos-items-005.html grid-abspos-items-005-ref.html +== grid-abspos-items-006.html grid-abspos-items-006-ref.html +== grid-abspos-items-007.html grid-abspos-items-007-ref.html +== grid-abspos-items-008.html grid-abspos-items-008-ref.html +== grid-abspos-items-009.html grid-abspos-items-009-ref.html +== grid-abspos-items-010.html grid-abspos-items-010-ref.html +== grid-abspos-items-011.html grid-abspos-items-011-ref.html +== grid-abspos-items-012.html grid-abspos-items-012-ref.html +== grid-abspos-items-013.html grid-abspos-items-013-ref.html +== grid-abspos-items-014.html grid-abspos-items-014-ref.html +== grid-abspos-items-015.html grid-abspos-items-015-ref.html +fails == grid-abspos-items-016.html grid-abspos-items-015-ref.html +== grid-order-abspos-items-001.html grid-order-abspos-items-001-ref.html +== grid-order-placement-auto-001.html grid-order-placement-auto-001-ref.html +fuzzy(0-1,0-200) == grid-order-placement-definite-001.html grid-order-placement-definite-001-ref.html +== grid-placement-definite-implicit-001.html grid-placement-definite-implicit-001-ref.html +== grid-placement-definite-implicit-002.html grid-placement-definite-implicit-002-ref.html +fuzzy(0-64,0-1) skip-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)) == grid-placement-auto-implicit-001.html grid-placement-auto-implicit-001-ref.html # win10: bug 1507154 +== grid-placement-abspos-implicit-001.html grid-placement-abspos-implicit-001-ref.html +== rtl-grid-placement-definite-001.html rtl-grid-placement-definite-001-ref.html +== rtl-grid-placement-auto-row-sparse-001.html rtl-grid-placement-auto-row-sparse-001-ref.html +== vlr-grid-placement-auto-row-sparse-001.html vlr-grid-placement-auto-row-sparse-001-ref.html +== vrl-grid-placement-auto-row-sparse-001.html vrl-grid-placement-auto-row-sparse-001-ref.html +== grid-relpos-items-001.html grid-relpos-items-001-ref.html +== grid-item-sizing-percent-001.html grid-item-sizing-percent-001-ref.html +fails == grid-item-sizing-percent-002.html grid-item-sizing-percent-002-ref.html # bug 1434397 +== grid-item-sizing-percent-003.html grid-item-sizing-percent-003-ref.html +== grid-item-sizing-percent-004.html grid-item-sizing-percent-004-ref.html +== grid-item-sizing-px-001.html grid-item-sizing-percent-001-ref.html +== grid-item-dir-001.html grid-item-dir-001-ref.html +fuzzy-if(winWidget,0-70,0-130) fuzzy-if(cocoaWidget,0-85,0-180) == grid-col-max-sizing-max-content-001.html grid-col-max-sizing-max-content-001-ref.html +fuzzy-if(winWidget,0-70,0-130) fuzzy-if(cocoaWidget,0-85,0-180) == grid-col-max-sizing-max-content-002.html grid-col-max-sizing-max-content-002-ref.html +== grid-min-max-content-sizing-001.html grid-min-max-content-sizing-001-ref.html +== grid-min-max-content-sizing-002.html grid-min-max-content-sizing-002-ref.html +fuzzy-if(winWidget,0-1,0-36) == grid-auto-min-sizing-definite-001.html grid-auto-min-sizing-definite-001-ref.html +== grid-auto-min-sizing-intrinsic-001.html grid-auto-min-sizing-intrinsic-001-ref.html +== grid-auto-min-sizing-intrinsic-002.html grid-auto-min-sizing-intrinsic-002-ref.html +== grid-auto-min-sizing-intrinsic-003.html grid-auto-min-sizing-intrinsic-003-ref.html +== grid-auto-min-sizing-intrinsic-004.html grid-auto-min-sizing-intrinsic-004-ref.html +== grid-auto-min-sizing-transferred-size-001.html grid-auto-min-sizing-transferred-size-001-ref.html +== grid-auto-min-sizing-transferred-size-002.html grid-auto-min-sizing-transferred-size-002-ref.html +== grid-auto-min-sizing-transferred-size-003.html grid-auto-min-sizing-transferred-size-003-ref.html +== grid-auto-min-sizing-transferred-size-004.html grid-auto-min-sizing-transferred-size-004-ref.html +== grid-auto-min-sizing-min-content-min-size-001.html grid-auto-min-sizing-min-content-min-size-001-ref.html +== grid-auto-min-sizing-min-content-min-size-002.html grid-auto-min-sizing-min-content-min-size-002-ref.html +== grid-auto-min-sizing-min-content-min-size-003.html grid-auto-min-sizing-min-content-min-size-003-ref.html +== grid-auto-min-sizing-min-content-min-size-004.html grid-auto-min-sizing-min-content-min-size-004-ref.html +== grid-min-content-min-sizing-transferred-size-001.html grid-min-content-min-sizing-transferred-size-001-ref.html +== grid-min-content-min-sizing-transferred-size-002.html grid-min-content-min-sizing-transferred-size-002-ref.html +== grid-min-content-min-sizing-transferred-size-003.html grid-min-content-min-sizing-transferred-size-003-ref.html +== grid-min-content-min-sizing-transferred-size-004.html grid-min-content-min-sizing-transferred-size-004-ref.html +== grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-percent-001-ref.html +== grid-track-intrinsic-sizing-001.html grid-track-intrinsic-sizing-001-ref.html +fuzzy-if(winWidget,0-1,0-75) == grid-track-intrinsic-sizing-002.html grid-track-intrinsic-sizing-002-ref.html +fuzzy-if(winWidget,0-1,0-75) == grid-track-intrinsic-sizing-003.html grid-track-intrinsic-sizing-003-ref.html +== grid-track-intrinsic-sizing-004.html grid-track-intrinsic-sizing-004-ref.html +== grid-track-percent-sizing-001.html grid-track-percent-sizing-001-ref.html +== grid-track-fit-content-sizing-001.html grid-track-fit-content-sizing-001-ref.html +== grid-track-fit-content-sizing-002.html grid-track-fit-content-sizing-002-ref.html +== grid-max-sizing-flex-001.html grid-max-sizing-flex-001-ref.html +fuzzy(0-2,0-100) == grid-max-sizing-flex-002.html grid-max-sizing-flex-002-ref.html +fuzzy-if(winWidget,0-1,0-10) == grid-max-sizing-flex-003.html grid-max-sizing-flex-003-ref.html +== grid-max-sizing-flex-004.html grid-max-sizing-flex-004-ref.html +== grid-max-sizing-flex-005.html grid-max-sizing-flex-005-ref.html +== grid-max-sizing-flex-006.html grid-max-sizing-flex-006-ref.html +== grid-max-sizing-flex-007.html grid-max-sizing-flex-007-ref.html +== grid-max-sizing-flex-008.html grid-max-sizing-flex-008-ref.html +== grid-flex-min-sizing-001.html grid-flex-min-sizing-001-ref.html +== grid-flex-min-sizing-002.html grid-flex-min-sizing-002-ref.html +== grid-item-align-001.html grid-item-align-001-ref.html +== grid-item-align-002.html grid-item-align-002-ref.html +== grid-item-align-003.html grid-item-align-003-ref.html +== grid-item-justify-001.html grid-item-justify-001-ref.html +== grid-item-justify-002.html grid-item-justify-002-ref.html +== grid-item-stretch-001.html grid-item-stretch-001-ref.html +== grid-item-intrinsic-ratio-stretch-001.html grid-item-intrinsic-ratio-stretch-001-ref.html +== grid-item-intrinsic-ratio-stretch-002.html grid-item-intrinsic-ratio-stretch-002-ref.html +== grid-item-intrinsic-ratio-stretch-003.html grid-item-intrinsic-ratio-stretch-003-ref.html +== grid-item-intrinsic-ratio-stretch-004.html grid-item-intrinsic-ratio-stretch-004-ref.html +== grid-item-intrinsic-ratio-stretch-005.html grid-item-intrinsic-ratio-stretch-005-ref.html +== grid-item-intrinsic-ratio-stretch-006.html grid-item-intrinsic-ratio-stretch-006-ref.html +== grid-item-intrinsic-ratio-stretch-007.html grid-item-intrinsic-ratio-stretch-007-ref.html +== grid-item-intrinsic-ratio-normal-001.html grid-item-intrinsic-ratio-normal-001-ref.html +== grid-item-intrinsic-ratio-normal-002.html grid-item-intrinsic-ratio-normal-002-ref.html +== grid-item-intrinsic-ratio-normal-003.html grid-item-intrinsic-ratio-normal-003-ref.html +== grid-item-intrinsic-ratio-normal-004.html grid-item-intrinsic-ratio-normal-004-ref.html +== grid-item-intrinsic-ratio-normal-005.html grid-item-intrinsic-ratio-normal-005-ref.html +== grid-item-intrinsic-size-normal-001.html grid-item-intrinsic-size-normal-001-ref.html +== grid-item-intrinsic-size-normal-002.html grid-item-intrinsic-size-normal-002-ref.html +== grid-item-auto-min-size-clamp-001.html grid-item-auto-min-size-clamp-001-ref.html +== grid-item-auto-min-size-clamp-002.html grid-item-auto-min-size-clamp-002-ref.html +== grid-item-auto-min-size-clamp-003.html grid-item-auto-min-size-clamp-003-ref.html +# == grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html # bug 1421976 +== grid-item-auto-min-size-clamp-005.html grid-item-auto-min-size-clamp-005-ref.html +# == grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html # bug 1421976 +== grid-item-auto-min-size-clamp-007.html grid-item-auto-min-size-clamp-007-ref.html +== grid-item-overflow-stretch-001.html grid-item-overflow-stretch-001-ref.html +== grid-item-overflow-stretch-002.html grid-item-overflow-stretch-002-ref.html +== grid-item-overflow-stretch-003.html grid-item-overflow-stretch-003-ref.html +== grid-item-overflow-stretch-004.html grid-item-overflow-stretch-004-ref.html +== grid-item-overflow-stretch-005.html grid-item-overflow-stretch-005-ref.html +== grid-item-overflow-stretch-006.html grid-item-overflow-stretch-006-ref.html +== grid-item-canvas-001.html grid-item-canvas-001-ref.html +== grid-item-button-001.html grid-item-button-001-ref.html +== grid-item-table-stretch-001.html grid-item-table-stretch-001-ref.html +== grid-item-table-stretch-002.html grid-item-table-stretch-002-ref.html +== grid-item-table-stretch-004.html grid-item-table-stretch-004-ref.html +== grid-item-fieldset-stretch-001.html grid-item-fieldset-stretch-001-ref.html +skip-if(Android) == grid-item-video-stretch-001.html grid-item-video-stretch-001-ref.html # Huh, Android doesn't have webm support? +skip-if(Android) fuzzy-if(appleSilicon,0-255,0-92666) fuzzy-if(winWidget,0-1,0-181) == grid-item-video-stretch-002.html grid-item-video-stretch-002-ref.html # Huh, Android doesn't have webm support? +== grid-item-input-stretch-001.html grid-item-input-stretch-001-ref.html +== grid-align-content-001.html grid-align-content-001-ref.html +== grid-justify-content-001.html grid-justify-content-001-ref.html +== grid-justify-content-002.html grid-justify-content-002-ref.html +== grid-justify-content-003.html grid-justify-content-003-ref.html +skip-if(!gtkWidget) == grid-container-baselines-001.html grid-container-baselines-001-ref.html +skip-if(!gtkWidget) == grid-container-baselines-002.html grid-container-baselines-002-ref.html +skip-if(!gtkWidget) == grid-container-baselines-003.html grid-container-baselines-003-ref.html +== grid-container-baselines-004.html grid-container-baselines-004-ref.html +== grid-container-synthesized-baseline-001.html grid-container-synthesized-baseline-001-ref.html +== grid-column-gap-001.html grid-column-gap-001-ref.html +== grid-column-gap-002.html grid-column-gap-002-ref.html +fuzzy(0-2,0-60) == grid-column-gap-003.html grid-column-gap-003-ref.html +== grid-column-gap-004.html grid-column-gap-004-ref.html +== grid-row-gap-001.html grid-row-gap-001-ref.html +== grid-percent-grid-gap-001.html grid-percent-grid-gap-001-ref.html +== grid-row-gap-002.html grid-row-gap-002-ref.html +== grid-row-gap-003.html grid-row-gap-003-ref.html +== grid-row-gap-004.html grid-row-gap-004-ref.html +== grid-row-gap-005.html grid-row-gap-005-ref.html +== grid-container-overflow-001.html grid-container-overflow-001-ref.html +== grid-item-margin-left-auto-001.html grid-item-margin-left-auto-001-ref.html +== grid-item-margin-left-auto-002.html grid-item-margin-left-auto-002-ref.html +== grid-item-margin-left-auto-003.html grid-item-margin-left-auto-003-ref.html +== grid-item-margin-left-auto-004.html grid-item-margin-left-auto-004-ref.html +== grid-item-margin-left-right-auto-001.html grid-item-margin-left-right-auto-001-ref.html +== grid-item-margin-left-right-auto-002.html grid-item-margin-left-right-auto-002-ref.html +== grid-item-margin-left-right-auto-003.html grid-item-margin-left-right-auto-003-ref.html +== grid-item-margin-left-right-auto-004.html grid-item-margin-left-right-auto-004-ref.html +== grid-item-margin-right-auto-001.html grid-item-margin-right-auto-001-ref.html +== grid-item-margin-right-auto-002.html grid-item-margin-right-auto-002-ref.html +== grid-item-margin-right-auto-003.html grid-item-margin-right-auto-003-ref.html +== grid-item-margin-right-auto-004.html grid-item-margin-right-auto-004-ref.html +== grid-container-min-max-width-height-001.html grid-container-min-max-width-height-001-ref.html +== grid-clamping-001.html grid-clamping-001-ref.html +== grid-clamping-002.html grid-clamping-002-ref.html +== grid-repeat-auto-fill-fit-001.html grid-repeat-auto-fill-fit-001-ref.html +== grid-repeat-auto-fill-fit-002.html grid-repeat-auto-fill-fit-002-ref.html +== grid-repeat-auto-fill-fit-003.html grid-repeat-auto-fill-fit-003-ref.html +== grid-repeat-auto-fill-fit-004.html grid-repeat-auto-fill-fit-004-ref.html +== grid-repeat-auto-fill-fit-005.html grid-repeat-auto-fill-fit-005-ref.html +== grid-repeat-auto-fill-fit-006.html grid-repeat-auto-fill-fit-006-ref.html +== grid-repeat-auto-fill-fit-007.html grid-repeat-auto-fill-fit-007-ref.html +test-pref(layout.css.serialize-grid-implicit-tracks,true) == grid-repeat-auto-fill-fit-008.html grid-repeat-auto-fill-fit-008-ref.html +test-pref(layout.css.serialize-grid-implicit-tracks,false) == grid-repeat-auto-fill-fit-008.html?no-implicit grid-repeat-auto-fill-fit-008-ref.html +== grid-repeat-auto-fill-fit-009.html grid-repeat-auto-fill-fit-009-ref.html +== grid-repeat-auto-fill-fit-010.html grid-repeat-auto-fill-fit-010-ref.html +== grid-repeat-auto-fill-fit-011.html grid-repeat-auto-fill-fit-010-ref.html +== grid-repeat-auto-fill-fit-012.html grid-repeat-auto-fill-fit-012-ref.html +== grid-repeat-auto-fill-fit-013.html grid-repeat-auto-fill-fit-013-ref.html +== grid-item-blockifying-001.html grid-item-blockifying-001-ref.html +== grid-fragmentation-001.html grid-fragmentation-001-ref.html +== grid-fragmentation-002.html grid-fragmentation-002-ref.html +== grid-fragmentation-003.html grid-fragmentation-003-ref.html +== grid-fragmentation-004.html grid-fragmentation-004-ref.html +== grid-fragmentation-005.html grid-fragmentation-005-ref.html +== grid-fragmentation-006.html grid-fragmentation-006-ref.html +== grid-fragmentation-007.html grid-fragmentation-007-ref.html +== grid-fragmentation-008.html grid-fragmentation-008-ref.html +== grid-fragmentation-009.html grid-fragmentation-009-ref.html +== grid-fragmentation-010.html grid-fragmentation-010-ref.html +== grid-fragmentation-011.html grid-fragmentation-011-ref.html +== grid-fragmentation-012.html grid-fragmentation-012-ref.html +pref(layout.display-list.improve-fragmentation,true) == grid-fragmentation-013.html grid-fragmentation-013-ref.html +== grid-fragmentation-014.html grid-fragmentation-014-ref.html +asserts(0-10) == grid-fragmentation-015.html grid-fragmentation-015-ref.html # bug 1144852 (due to vertical writing-mode) +== grid-fragmentation-016.html grid-fragmentation-016-ref.html +fuzzy-if(winWidget,0-1,0-5) == grid-fragmentation-017.html grid-fragmentation-017-ref.html +== grid-fragmentation-018.html grid-fragmentation-018-ref.html +== grid-fragmentation-019.html grid-fragmentation-019-ref.html +== grid-fragmentation-020.html grid-fragmentation-020-ref.html +== grid-fragmentation-021.html grid-fragmentation-021-ref.html +== grid-fragmentation-022.html grid-fragmentation-007-ref.html +== grid-fragmentation-023.html grid-fragmentation-023-ref.html +fuzzy-if(winWidget,0-1,0-5) == grid-fragmentation-024.html grid-fragmentation-024-ref.html +== grid-fragmentation-025.html grid-fragmentation-025-ref.html +fuzzy-if(swgl,0-2,0-200) == grid-fragmentation-026.html grid-fragmentation-026-ref.html +fuzzy-if(winWidget,0-1,0-5) == grid-fragmentation-027.html grid-fragmentation-025-ref.html +== grid-fragmentation-028.html grid-fragmentation-028-ref.html +== grid-fragmentation-029.html grid-fragmentation-029-ref.html +== grid-fragmentation-030.html grid-fragmentation-030-ref.html +== grid-fragmentation-031.html grid-fragmentation-031-ref.html + +# Fragmentation tests that does dynamic content removal/insertions. +# They should give the same result as the corresponding static test. +== grid-fragmentation-dyn3-001.html grid-fragmentation-001-ref.html +== grid-fragmentation-dyn4-001.html grid-fragmentation-001-ref.html +== grid-fragmentation-dyn1-002.html grid-fragmentation-002-ref.html +== grid-fragmentation-dyn3-002.html grid-fragmentation-002-ref.html +== grid-fragmentation-dyn3-003.html grid-fragmentation-003-ref.html +== grid-fragmentation-dyn4-004.html grid-fragmentation-004-ref.html +== grid-fragmentation-dyn4-005.html grid-fragmentation-005-ref.html +== grid-fragmentation-dyn5-005.html grid-fragmentation-005-ref.html +== grid-fragmentation-dyn1-006.html grid-fragmentation-006-ref.html +== grid-fragmentation-dyn3-007.html grid-fragmentation-007-ref.html +== grid-fragmentation-dyn5-007.html grid-fragmentation-007-ref.html +== grid-fragmentation-dyn5-008.html grid-fragmentation-008-ref.html +== grid-fragmentation-dyn3-009.html grid-fragmentation-009-ref.html +== grid-fragmentation-dyn4-015.html grid-fragmentation-015-ref.html +== grid-fragmentation-dyn1-015.html grid-fragmentation-015-ref.html +== grid-fragmentation-dyn1-016.html grid-fragmentation-016-ref.html +== grid-fragmentation-dyn5-016.html grid-fragmentation-016-ref.html +== grid-fragmentation-dyn3-017.html grid-fragmentation-017-ref.html +== grid-fragmentation-dyn2-018.html grid-fragmentation-018-ref.html +== grid-fragmentation-dyn1-019.html grid-fragmentation-019-ref.html +== grid-fragmentation-dyn2-019.html grid-fragmentation-019-ref.html +== grid-fragmentation-dyn3-019.html grid-fragmentation-019-ref.html +== grid-fragmentation-dyn4-019.html grid-fragmentation-019-ref.html +== grid-fragmentation-dyn5-019.html grid-fragmentation-019-ref.html +== grid-fragmentation-dyn1-020.html grid-fragmentation-020-ref.html +== grid-fragmentation-dyn2-020.html grid-fragmentation-020-ref.html +== grid-fragmentation-dyn1-021.html grid-fragmentation-021-ref.html +== grid-fragmentation-dyn2-021.html grid-fragmentation-021-ref.html +== grid-fragmentation-dyn3-021.html grid-fragmentation-021-ref.html +== grid-fragmentation-dyn4-021.html grid-fragmentation-021-ref.html +== grid-fragmentation-dyn5-021.html grid-fragmentation-021-ref.html +== grid-fragmentation-dyn2-022.html grid-fragmentation-007-ref.html +== grid-fragmentation-dyn1-023.html grid-fragmentation-023-ref.html +== grid-fragmentation-dyn2-023.html grid-fragmentation-023-ref.html +== grid-fragmentation-dyn3-023.html grid-fragmentation-023-ref.html +== grid-fragmentation-dyn4-023.html grid-fragmentation-023-ref.html +== grid-fragmentation-dyn5-023.html grid-fragmentation-023-ref.html +== grid-fragmentation-dyn1-024.html grid-fragmentation-024-ref.html +== grid-fragmentation-dyn2-025.html grid-fragmentation-025-ref.html +== grid-fragmentation-dyn1-026.html grid-fragmentation-026-ref.html +== grid-fragmentation-dyn2-026.html grid-fragmentation-026-ref.html +== grid-fragmentation-dyn3-026.html grid-fragmentation-026-ref.html +== grid-fragmentation-dyn4-026.html grid-fragmentation-026-ref.html +== grid-fragmentation-dyn5-026.html grid-fragmentation-026-ref.html +== grid-fragmentation-dyn1-027.html grid-fragmentation-025-ref.html +== grid-fragmentation-dyn2-027.html grid-fragmentation-025-ref.html +== grid-fragmentation-dyn3-027.html grid-fragmentation-025-ref.html +== grid-fragmentation-dyn4-027.html grid-fragmentation-025-ref.html +== grid-fragmentation-dyn5-027.html grid-fragmentation-025-ref.html +== grid-fragmentation-dyn1-028.html grid-fragmentation-028-ref.html +== grid-fragmentation-dyn2-028.html grid-fragmentation-028-ref.html +== grid-fragmentation-dyn3-028.html grid-fragmentation-028-ref.html +== grid-fragmentation-dyn4-028.html grid-fragmentation-028-ref.html +== grid-fragmentation-dyn5-028.html grid-fragmentation-028-ref.html +== grid-fragmentation-dyn1-029.html grid-fragmentation-029-ref.html +== grid-fragmentation-dyn2-029.html grid-fragmentation-029-ref.html +== grid-fragmentation-dyn2-030.html grid-fragmentation-030-ref.html +== grid-fragmentation-dyn2-031.html grid-fragmentation-031-ref.html + +== bug1306106.html bug1306106-ref.html +== bug1349571.html bug1349571-ref.html +== bug1356820.html bug1356820-ref.html +== bug1350925.html bug1350925-ref.html +== grid-percent-intrinsic-sizing-001.html grid-percent-intrinsic-sizing-001-ref.html +== grid-measuring-reflow-resize-static-001.html grid-measuring-reflow-resize-001-ref.html +== grid-measuring-reflow-resize-dynamic-001.html grid-measuring-reflow-resize-001-ref.html +== grid-item-align-dynamic-pos-001.html grid-item-align-dynamic-pos-001-ref.html +== grid-item-align-dynamic-pos-002.html grid-item-align-dynamic-pos-002-ref.html +== grid-item-align-dynamic-pos-003.html grid-item-align-dynamic-pos-003-ref.html diff --git a/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001-ref.html b/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001-ref.html new file mode 100644 index 0000000000..9200835bfd --- /dev/null +++ b/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001-ref.html @@ -0,0 +1,200 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + block-size: 60px; + border: 2px solid green; + position: relative; +} + +span { + position: absolute; + background: lime; + border: 1px solid black; + box-sizing: border-box; + inline-size: 20px; + block-size: 20px; +} + +.test1 .a { + inset-block-start: 0; + inset-inline-start: 20px; + inline-size: 20px; + block-size: 20px; +} +.test1 .b { + inset-block-start: 20px; + inset-inline-start: 20px; + inline-size: 60px; + block-size: 20px; +} +.test1 .c { + inset-block-start: 0; + inset-inline-start: 80px; + inline-size: 60px; + block-size: 40px; +} +.test1 .e { + inset-block-start: 20px; + inset-inline-start: 0px; +} +.test1 .d2 { + inset-block-start: 0px; + inset-inline-start: 40px; +} + +.test2 .a { + inset-block-start: 0; + inset-inline-start: 20px; + inline-size: 60px; + block-size: 20px; +} +.test2 .b { + inset-block-start: 20px; + inset-inline-start: 20px; + inline-size: 20px; + block-size: 20px; +} +.test2 .c { + inset-block-start: 0; + inset-inline-start: 80px; + inline-size: 60px; + block-size: 40px; +} +.test2 .e { + inset-block-start: 20px; + inset-inline-start: 0px; +} +.test2 .d2 { + inset-block-start: 20px; + inset-inline-start: 40px; +} + +.test3 .a { + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 60px; + block-size: 40px; +} +.test3 .b { + inset-block-start: 40px; + inset-inline-start: 20px; + inline-size: 60px; + block-size: 20px; +} +.test3 .c { + inset-block-start: 60px; + inset-inline-start: 0px; + inline-size: 60px; + block-size: 40px; +} +.test3 .d { inset-block-start: 60px; inset-inline-start:60px; } +.test3 .e { + inset-block-start: 20px; + inset-inline-start: 60px; +} +.test3 .d2 { + inset-block-start: 80px; + inset-inline-start: 60px; +} + +.test4 .c { + inset-block-start: 0; + inset-inline-start: 20px; + inline-size: 60px; + block-size: 40px; +} +.test4 .d { inset-block-start: 40px; } +.test4 .e { + inset-block-start: 20px; + inset-inline-start: 0px; +} +.test4 .d2 { + inset-block-start: 40px; + inset-inline-start: 20px; +} + +.test5 .c { + inset-block-start: 20px; + inset-inline-start: 0; + inline-size: 60px; + block-size: 20px; +} +.test5 .e { + inset-block-start: 20px; + inset-inline-start: 60px; +} +.test5 .d2 { + inset-block-start: 0px; + inset-inline-start: 20px; +} + +.test6 { inset-inline-start: 0px; inset-block-start: 20px;} +.test6d2 { + inset-block-start: 20px; + inset-inline-start: 140px; +} +.test6e { + inset-block-start: 20px; + inset-inline-start: 160px; +} + </style> +</head> +<body dir=rtl> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3" style="block-size:100px"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6d2">D</span> +<span class="test6e">e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001.html b/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001.html new file mode 100644 index 0000000000..3fee0d1f4b --- /dev/null +++ b/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001.html @@ -0,0 +1,138 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid { + display: grid; + border: 2px solid green; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-auto-flow: row; + grid-auto-columns: 20px; + grid-auto-rows: 20px; +} + +span { + background: lime; + border: 1px solid; +} + +.test1 .a { + grid-row: 1; + grid-column: 2 / span 1; +} +.test1 .b { + grid-row: 2; + grid-column: 2 / span 3; +} +.test1 .c, .test2 .c { + grid-row: 1 / span 2; + grid-column: auto / span 3; +} + +.test2 .a { + grid-row: 1; + grid-column: 2 / span 3; +} +.test2 .b { + grid-row: 2; + grid-column: 2 / span 1; +} + +.test3 { + grid-template-areas: + 'a a a . ' + 'a a a . ' + '. b b . ' + ; +} +.test3 .a { + grid-area: a; +} +.test3 .b { + grid-column: 2 / span 3; + grid-row: b; +} +.test3 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test4 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test5 .c { + grid-row-start: 2; + grid-column: auto / span 3; +} + +.test6 { + grid-row-start: 2; + grid-column: auto / span X; +} + +.e { + grid-row-start: 2; + grid-column: auto / span 1; +} + </style> +</head> +<body dir=rtl> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6">D</span> +<span class="e">e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html b/layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html new file mode 100644 index 0000000000..70287b3ab7 --- /dev/null +++ b/layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html @@ -0,0 +1,69 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid1, .grid2 { + block-size: 60px; + border: 2px solid green; + position: relative; +} + +.grid2 { + border-width: 20px; +} + +span { + position: absolute; + background: lime; + border: 1px solid black; + box-sizing: border-box; +} + +.a { + inset-inline-start: 40px; + inset-block-start: 0px; + inline-size: 60px; + block-size: 40px; +} +.b { + inset-inline-start: 20px; + inset-block-start: 40px; + inline-size: 60px; + block-size: 20px; +} +.c { + inset-inline-start: 80px; + inset-block-start: 40px; + inline-size: 60px; + block-size: 20px; +} +.d { + inset-inline-start: 0px; + inset-block-start: 0px; + inline-size: 20px; + block-size: 60px; +} + </style> +</head> +<body dir=rtl> + +<div class=grid1> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +</div> + +<div class=grid2> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/rtl-grid-placement-definite-001.html b/layout/reftests/css-grid/rtl-grid-placement-definite-001.html new file mode 100644 index 0000000000..4551915128 --- /dev/null +++ b/layout/reftests/css-grid/rtl-grid-placement-definite-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } + +.grid1, .grid2 { + display: grid; + grid-template-areas: + '. . a a a .' + '. . a a a .' + '. b b . . .' + ; + border: 2px solid green; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-auto-flow: column dense; + grid-auto-columns: 20px; + grid-auto-rows: 20px; +} + +.grid2 { + border-width: 20px; +} + +span { + background: lime; + border: 1px solid black; +} + +.a { + grid-area: a; +} +.b { + grid-column: 2 / span 3; + grid-row: b; +} +.c { + grid-column: span 3; +} +.d { + grid-row: span 3; +} + </style> +</head> +<body dir=rtl> + +<div class=grid1> +<span class=a>a</span> +<span class=b>b</span> +<span class=c>c</span> +<span class=d>d</span> +</div> + +<div class=grid2> +<span class=a>a</span> +<span class=b>b</span> +<span class=c>c</span> +<span class=d>d</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/support/ahem.css b/layout/reftests/css-grid/support/ahem.css new file mode 100644 index 0000000000..5cea74d04f --- /dev/null +++ b/layout/reftests/css-grid/support/ahem.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Ahem"; + src: url(../../fonts/Ahem.ttf); +} diff --git a/layout/reftests/css-grid/support/colors-16x8.webm b/layout/reftests/css-grid/support/colors-16x8.webm Binary files differnew file mode 100644 index 0000000000..701341fc2a --- /dev/null +++ b/layout/reftests/css-grid/support/colors-16x8.webm diff --git a/layout/reftests/css-grid/support/dyn.js b/layout/reftests/css-grid/support/dyn.js new file mode 100644 index 0000000000..816a6f9b61 --- /dev/null +++ b/layout/reftests/css-grid/support/dyn.js @@ -0,0 +1,127 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- + * vim: sw=2 ts=2 sts=2 et filetype=javascript + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +function loadURL(url,callback) { + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (xhttp.readyState == 4 && xhttp.status == 200) { + callback(xhttp.responseText); + } + }; + xhttp.open("GET", url, true); + xhttp.send(); +} + +function dyn1(selector) { + // get an array of elements matching |selector| + var elems = Array.prototype.slice.call(document.querySelectorAll(selector)) + + // remove the first item in each grid + var removed = elems.map(function(e) { + var child = e.children[0]; + if (child) { + var next = child.nextSibling; + e.removeChild(child); + return [ e, child, next ]; + } else { + return null; + } + }); + + document.body.style.display = 'block'; + document.body.offsetHeight; + + // insert the removed item + removed.map(function(a) { + if (a) { + a[0].insertBefore(a[1],a[2]); + } + }); +} + +function dyn2(selector) { + // get an array of elements matching |selector| + var elems = Array.prototype.slice.call(document.querySelectorAll(selector)) + + // inject a new first item in each grid + var inserted = elems.map(function(e) { + var child = document.createElement('span'); + e.insertBefore(child, e.firstChild); + return [ e, child ]; + }); + + document.body.style.display = 'block'; + document.body.offsetHeight; + + // remove the inserted item + inserted.map(function(a) { + a[0].removeChild(a[1]); + }); +} + +function dyn3(selector) { + // get an array of elements matching |selector| + var elems = Array.prototype.slice.call(document.querySelectorAll(selector)) + + // remove the second item in each grid + var removed = elems.map(function(e) { + var child = e.children[1]; + if (child) { + var next = child.nextSibling; + e.removeChild(child); + return [ e, child, next ]; + } else { + return null; + } + }); + + document.body.style.display = 'block'; + document.body.offsetHeight; + + // insert the removed items + removed.map(function(a) { + if (a) { + a[0].insertBefore(a[1],a[2]); + } + }); +} + +function dyn4(selector) { + dyn3(selector); + dyn2(selector); +} + +function dyn5(selector) { + // get an array of elements matching |selector| + var elems = Array.prototype.slice.call(document.querySelectorAll(selector)) + + // inject 20 new items in each grid + var inserted = elems.map(function(e) { + var a = new Array; + for (var i = 0; i < 20; ++i) { + var child = document.createElement('span'); + e.insertBefore(child, e.firstChild); + a.push(child); + } + return [ e, a ]; + }); + + document.body.style.display = 'block'; + document.body.offsetHeight; + + // remove the inserted item + inserted.map(function(a) { + a[1].forEach(function(child) { + a[0].removeChild(child); + }); + }); +} + +function dynamicTest(url, callback) { + document.body.style.display=''; + document.body.offsetHeight; + loadURL(url,callback); +} diff --git a/layout/reftests/css-grid/support/lime-24x2.png b/layout/reftests/css-grid/support/lime-24x2.png Binary files differnew file mode 100644 index 0000000000..b9ce5e2461 --- /dev/null +++ b/layout/reftests/css-grid/support/lime-24x2.png diff --git a/layout/reftests/css-grid/support/lime-25x1.png b/layout/reftests/css-grid/support/lime-25x1.png Binary files differnew file mode 100644 index 0000000000..31e1c4087a --- /dev/null +++ b/layout/reftests/css-grid/support/lime-25x1.png diff --git a/layout/reftests/css-grid/support/lime-2x24.png b/layout/reftests/css-grid/support/lime-2x24.png Binary files differnew file mode 100644 index 0000000000..a1524d46b4 --- /dev/null +++ b/layout/reftests/css-grid/support/lime-2x24.png diff --git a/layout/reftests/css-grid/support/solidblue-20x32.png b/layout/reftests/css-grid/support/solidblue-20x32.png Binary files differnew file mode 100644 index 0000000000..bba5504d98 --- /dev/null +++ b/layout/reftests/css-grid/support/solidblue-20x32.png diff --git a/layout/reftests/css-grid/support/solidblue.png b/layout/reftests/css-grid/support/solidblue.png Binary files differnew file mode 100644 index 0000000000..a64b6a4255 --- /dev/null +++ b/layout/reftests/css-grid/support/solidblue.png diff --git a/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001-ref.html b/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001-ref.html new file mode 100644 index 0000000000..4a1e6f81e0 --- /dev/null +++ b/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001-ref.html @@ -0,0 +1,204 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } +html { + writing-mode: vertical-lr; + text-orientation: sideways-right; +} + +.grid { + block-size: 60px; + border: 2px solid green; + position: relative; +} + +span { + position: absolute; + background: lime; + border: 1px solid black; + box-sizing: border-box; + inline-size: 20px; + block-size: 20px; +} + +.test1 .a { + inset-block-start: 0; + inset-inline-start: 20px; + inline-size: 20px; + block-size: 20px; +} +.test1 .b { + inset-block-start: 20px; + inset-inline-start: 20px; + inline-size: 60px; + block-size: 20px; +} +.test1 .c { + inset-block-start: 0; + inset-inline-start: 80px; + inline-size: 60px; + block-size: 40px; +} +.test1 .e { + inset-block-start: 20px; + inset-inline-start: 0px; +} +.test1 .d2 { + inset-block-start: 0px; + inset-inline-start: 40px; +} + +.test2 .a { + inset-block-start: 0; + inset-inline-start: 20px; + inline-size: 60px; + block-size: 20px; +} +.test2 .b { + inset-block-start: 20px; + inset-inline-start: 20px; + inline-size: 20px; + block-size: 20px; +} +.test2 .c { + inset-block-start: 0; + inset-inline-start: 80px; + inline-size: 60px; + block-size: 40px; +} +.test2 .e { + inset-block-start: 20px; + inset-inline-start: 0px; +} +.test2 .d2 { + inset-block-start: 20px; + inset-inline-start: 40px; +} + +.test3 .a { + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 60px; + block-size: 40px; +} +.test3 .b { + inset-block-start: 40px; + inset-inline-start: 20px; + inline-size: 60px; + block-size: 20px; +} +.test3 .c { + inset-block-start: 60px; + inset-inline-start: 0px; + inline-size: 60px; + block-size: 40px; +} +.test3 .d { inset-block-start: 60px; inset-inline-start:60px; } +.test3 .e { + inset-block-start: 20px; + inset-inline-start: 60px; +} +.test3 .d2 { + inset-block-start: 80px; + inset-inline-start: 60px; +} + +.test4 .c { + inset-block-start: 0; + inset-inline-start: 20px; + inline-size: 60px; + block-size: 40px; +} +.test4 .d { inset-block-start: 40px; } +.test4 .e { + inset-block-start: 20px; + inset-inline-start: 0px; +} +.test4 .d2 { + inset-block-start: 40px; + inset-inline-start: 20px; +} + +.test5 .c { + inset-block-start: 20px; + inset-inline-start: 0; + inline-size: 60px; + block-size: 20px; +} +.test5 .e { + inset-block-start: 20px; + inset-inline-start: 60px; +} +.test5 .d2 { + inset-block-start: 0px; + inset-inline-start: 20px; +} + +.test6 { inset-inline-start: 0px; inset-block-start: 20px;} +.test6d2 { + inset-block-start: 20px; + inset-inline-start: 140px; +} +.test6e { + inset-block-start: 20px; + inset-inline-start: 160px; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3" style="block-size:100px"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6d2">D</span> +<span class="test6e">e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001.html b/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001.html new file mode 100644 index 0000000000..872d35d07f --- /dev/null +++ b/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001.html @@ -0,0 +1,142 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } +html { + writing-mode: vertical-lr; + text-orientation: sideways-right; +} + +.grid { + display: grid; + border: 2px solid green; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-auto-flow: row; + grid-auto-columns: 20px; + grid-auto-rows: 20px; +} + +span { + background: lime; + border: 1px solid; +} + +.test1 .a { + grid-row: 1; + grid-column: 2 / span 1; +} +.test1 .b { + grid-row: 2; + grid-column: 2 / span 3; +} +.test1 .c, .test2 .c { + grid-row: 1 / span 2; + grid-column: auto / span 3; +} + +.test2 .a { + grid-row: 1; + grid-column: 2 / span 3; +} +.test2 .b { + grid-row: 2; + grid-column: 2 / span 1; +} + +.test3 { + grid-template-areas: + 'a a a . ' + 'a a a . ' + '. b b . ' + ; +} +.test3 .a { + grid-area: a; +} +.test3 .b { + grid-column: 2 / span 3; + grid-row: b; +} +.test3 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test4 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test5 .c { + grid-row-start: 2; + grid-column: auto / span 3; +} + +.test6 { + grid-row-start: 2; + grid-column: auto / span X; +} + +.e { + grid-row-start: 2; + grid-column: auto / span 1; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6">D</span> +<span class="e">e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001-ref.html b/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001-ref.html new file mode 100644 index 0000000000..a495cceffc --- /dev/null +++ b/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001-ref.html @@ -0,0 +1,222 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } +html { + writing-mode: vertical-rl; + text-orientation: sideways-right; +} + +.grid { + block-size: 60px; + border: 2px solid green; + position: relative; +} + +span { + position: absolute; + background: lime; + border: 1px solid black; + box-sizing: border-box; + inline-size: 20px; + block-size: 20px; +} + +.test1 .a { + inset-block-start: 0; + inset-inline-start: 20px; + inline-size: 20px; + block-size: 20px; +} +.test1 .b { + inset-block-start: 20px; + inset-inline-start: 20px; + inline-size: 60px; + block-size: 20px; +} +.test1 .c { + inset-block-start: 0; + inset-inline-start: 80px; + inline-size: 60px; + block-size: 40px; +} +.test1 .d { + inset-block-start: 0; + inset-inline-start: 0; +} +.test1 .e { + inset-block-start: 20px; + inset-inline-start: 0; +} +.test1 .d2 { + inset-block-start: 0; + inset-inline-start: 40px; +} + +.test2 .a { + inset-block-start: 0; + inset-inline-start: 20px; + inline-size: 60px; + block-size: 20px; +} +.test2 .b { + inset-block-start: 20px; + inset-inline-start: 20px; + inline-size: 20px; + block-size: 20px; +} +.test2 .c { + inset-block-start: 0; + inset-inline-start: 80px; + inline-size: 60px; + block-size: 40px; +} +.test2 .d { + inset-block-start: 0; + inset-inline-start: 0; +} +.test2 .e { + inset-block-start: 20px; + inset-inline-start: 0; +} +.test2 .d2 { + inset-block-start: 20px; + inset-inline-start: 40px; +} + +.test3 .a { + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 60px; + block-size: 40px; +} +.test3 .b { + inset-block-start: 40px; + inset-inline-start: 20px; + inline-size: 60px; + block-size: 20px; +} +.test3 .c { + inset-block-start: 60px; + inset-inline-start: 0; + inline-size: 60px; + block-size: 40px; +} +.test3 .d { inset-block-start: 60px; inset-inline-start:60px; } +.test3 .e { + inset-block-start: 20px; + inset-inline-start: 60px; +} +.test3 .d2 { + inset-block-start: 80px; + inset-inline-start: 60px; +} + +.test4 .c { + inset-block-start: 0; + inset-inline-start: 20px; + inline-size: 60px; + block-size: 40px; +} +.test4 .d { + inset-block-start: 40px; + inset-inline-start: 0; +} +.test4 .e { + inset-block-start: 20px; + inset-inline-start: 0px; +} +.test4 .d2 { + inset-block-start: 40px; + inset-inline-start: 20px; +} + +.test5 .c { + inset-block-start: 20px; + inset-inline-start: 0; + inline-size: 60px; + block-size: 20px; +} +.test5 .d { + inset-block-start: 0; + inset-inline-start: 0; +} +.test5 .e { + inset-block-start: 20px; + inset-inline-start: 60px; +} +.test5 .d2 { + inset-block-start: 0; + inset-inline-start: 20px; +} + +.test6 { + inset-inline-start: 0; + inset-block-start: 20px; +} +.test6d2 { + inset-block-start: 20px; + inset-inline-start: 140px; +} +.test6e { + inset-block-start: 20px; + inset-inline-start: 160px; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3" style="block-size:100px"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d2">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6d2">D</span> +<span class="test6e">e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001.html b/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001.html new file mode 100644 index 0000000000..51354b562e --- /dev/null +++ b/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001.html @@ -0,0 +1,142 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> +body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } +html { + writing-mode: vertical-rl; + text-orientation: sideways-right; +} + +.grid { + display: grid; + border: 2px solid green; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-auto-flow: row; + grid-auto-columns: 20px; + grid-auto-rows: 20px; +} + +span { + background: lime; + border: 1px solid; +} + +.test1 .a { + grid-row: 1; + grid-column: 2 / span 1; +} +.test1 .b { + grid-row: 2; + grid-column: 2 / span 3; +} +.test1 .c, .test2 .c { + grid-row: 1 / span 2; + grid-column: auto / span 3; +} + +.test2 .a { + grid-row: 1; + grid-column: 2 / span 3; +} +.test2 .b { + grid-row: 2; + grid-column: 2 / span 1; +} + +.test3 { + grid-template-areas: + 'a a a . ' + 'a a a . ' + '. b b . ' + ; +} +.test3 .a { + grid-area: a; +} +.test3 .b { + grid-column: 2 / span 3; + grid-row: b; +} +.test3 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test4 .c { + grid-row: auto / span 2; + grid-column: auto / span 3; +} + +.test5 .c { + grid-row-start: 2; + grid-column: auto / span 3; +} + +.test6 { + grid-row-start: 2; + grid-column: auto / span X; +} + +.e { + grid-row-start: 2; + grid-column: auto / span 1; +} + </style> +</head> +<body> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test2"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test3"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test4"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test5"> +<span class="c">c</span> +<span class="d">d</span> +<span class="d">D</span> +<span class="e">e</span> +</div> + +<div class="grid test1"> +<span class="a">a</span> +<span class="b">b</span> +<span class="c">c</span> +<span class="test6">d</span> +<span class="test6">D</span> +<span class="e">e</span> +</div> + +</body> +</html> |
