author | Mats Palmgren <mats@mozilla.com> |
Fri, 11 Mar 2016 17:39:28 +0100 | |
changeset 288318 | 552aabbcd11631edd38087a55e8730db1384bdfc |
parent 288317 | 5e3e2675488c1b089e82a442dfeee46da1152cf1 |
child 288319 | 50c03319c341910196103c4451f17299eb144313 |
push id | 30079 |
push user | ryanvm@gmail.com |
push date | Sat, 12 Mar 2016 20:24:19 +0000 |
treeherder | mozilla-central@d1d47ba19ce9 [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
bugs | 1144096 |
milestone | 48.0a1 |
first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-001-ref.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>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-001.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>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-002-ref.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>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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> + +<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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-002.html @@ -0,0 +1,110 @@ +<!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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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> + +<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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-003-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 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-003.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</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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-004-ref.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>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-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: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-005-ref.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>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-005.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>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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> + +<div class="columns" style="height: 140px/*trigger NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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> + +<div class="columns" style="height: 140px/*trigger NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-007-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> + <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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-007.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: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-008-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, 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-008.html @@ -0,0 +1,95 @@ +<!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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-009-ref.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>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-009.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>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /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-print"><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>
new file mode 100644 --- /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-print"><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>
new file mode 100644 --- /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-print"><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>
new file mode 100644 --- /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-print"><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>
new file mode 100644 --- /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-print"><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>
new file mode 100644 --- /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-print"><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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-013-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html lang="en-US" class="reftest-print"><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; + 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:1in; background:grey"> + <div class="grid t"> + <span class="t"><x style="height:auto"></x></span> + </div> + <div class="grid b" style="border-color:transparent; grid-auto-rows: 0;"> + <span class="b"><x style="height:0.04in"></x></span> + </div> +</div> + +<div style="padding-top:0.91in; background:grey;"> + <div class="grid t" style="height:0.9in"> + <span class="t" style="height:0.86in"><x></x></span> + </div> +</div> + <div class="grid b" style="border-color:transparent; grid-auto-rows: 0;"> + <span class="b"><x style="height:0.04in"></x></span> + </div> + +</body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-013.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-print"><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; +} +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>
new file mode 100644 --- /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-print"><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>
new file mode 100644 --- /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-print"><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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-015-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: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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="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></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; 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></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:-moz-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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-015.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: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-016-ref.html @@ -0,0 +1,167 @@ +<!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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-016.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: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-017-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>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-017.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: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-018-ref.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>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-018.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: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-019-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: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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> +<span class=b style="grid-column:3; height:0"></span> +</div> +</div></div> + +</body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-019.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 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-020-ref.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>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-020.html @@ -0,0 +1,215 @@ +<!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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-021-ref.html @@ -0,0 +1,188 @@ +<!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; + -moz-columns: 3; + -ms-columns: 3; + -webkit-columns: 3; + columns: 3; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-021.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>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; + -moz-columns: 3; + -ms-columns: 3; + -webkit-columns: 3; + columns: 3; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-022.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: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-023-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 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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> +
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-023.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 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-024-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 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-024.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 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-025-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: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-025.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 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-026-ref.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>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-026.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: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-027.html @@ -0,0 +1,127 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-028-ref.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>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-028.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-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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-029-ref.html @@ -0,0 +1,207 @@ +<!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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-029.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: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-030-ref.html @@ -0,0 +1,111 @@ +<!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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-030.html @@ -0,0 +1,114 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-031-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: 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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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: 22px;"><span></span></div> +</div></div> + +<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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: 22px;"><span></span></div> +</div></div> + +<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /dev/null +++ b/layout/reftests/css-grid/grid-fragmentation-031.html @@ -0,0 +1,114 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>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; + -moz-columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + -moz-column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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 NS_INLINE_IS_BREAK_BEFORE 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>
new file mode 100644 --- /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>
new file mode 100644 --- /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>
new file mode 100644 --- /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>
new file mode 100644 --- /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>
new file mode 100644 --- /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>
new file mode 100644 --- /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">