3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>Reference: Fragmentation of height:auto grid, not top-of-page
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
10 <style type=
"text/css">
12 color:black
; background-color:white
; font-size:16px; padding:0; margin:0;
14 body
{ overflow:hidden
; }
21 -ms-column-fill: auto
;
22 -webkit-column-fill: auto
;
24 border: 2px solid salmon
;
33 grid-template-columns: 30px 30px 30px;
34 grid-template-rows: 50px;
35 grid-column-gap: 12px;
38 .t { border-bottom-width:0; }
39 .b { border-top-width:0; }
40 span
{ background:lime
; border:1px solid black
; }
41 x
{ display:block
; height:20px; }
42 br
{ page-break-before:always
; break-before:always
; }
47 <div class=
"columns" style=
"height: 130px/*fragmentainer ends in the end border*/">
48 <div style=
"padding-top:10px; background:grey">
51 <span class=
"t"><x></x></span>
52 <span style=
"background:cyan" class=
"t"><x></x></span>
57 <span class=
"b"><x></x></span>
58 <span class=
"b" style=
"grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
59 <span style=
"grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
62 <div class=
"columns" style=
"height: 18px/*fragmentainer ends in the end border*/">
63 <div style=
"padding-top:10px; background:grey">
67 <div class=
"columns" style=
"height: 20px/*fragmentainer ends in the end border*/">
68 <div style=
"padding-top:10px; background:grey">
69 <div class=
"block" style=
"height:2px/*creates a Class C break opportunity at the end*/">
72 <div class=
"columns" style=
"height: 100px/*fragmentainer ends in the last row*/">
73 <div style=
"padding-top:10px; background:grey">
75 <span class=
"t"><x></x></span>
76 <span class=
"t"><x></x></span>
77 <span style=
"background:cyan" class=
"t"><x></x></span>
81 <span class=
"b"><x></x></span>
82 <span class=
"b" style=
"grid-row:1; grid-column:1; height:11px;"><x></x></span>
83 <span class=
"b" style=
"grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
84 <span style=
"grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
87 <div class=
"columns" style=
"height: 70px/*fragmentainer ends in the grid gap between the rows */">
88 <div style=
"padding-top:10px; background:grey">
90 <span class=
"t"><x></x></span>
91 <span class=
"t"><x></x></span>
92 <span style=
"background:cyan" class=
"t"><x></x></span>
95 <span class=
"b"><x></x></span>
96 <span class=
"b" style=
"grid-row:1; grid-column:1; height:11px;"><x></x></span>
97 <span class=
"b" style=
"grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
98 <span style=
"grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
101 <div class=
"columns" style=
"height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
102 <div style=
"padding-top:10px; background:grey">
104 <span class=
"t"><x></x></span>
105 <span class=
"t"><x></x></span>
106 <span style=
"background:cyan" class=
"t"><x></x></span>
109 <span class=
"b"><x></x></span>
110 <span class=
"b" style=
"grid-row:1; grid-column:1; height:11px;"><x></x></span>
111 <span class=
"b" style=
"grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
112 <span style=
"grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
115 <div class=
"columns" style=
"height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
116 <div style=
"padding-top:10px; background:grey">
118 <span class=
"t"><x></x></span>
119 <span class=
"t"><x></x></span>
120 <span style=
"background:cyan" class=
"t"><x></x></span>
123 <span class=
"b"><x></x></span>
124 <span class=
"b" style=
"grid-row:1; grid-column:1; height:11px;"><x></x></span>
125 <span class=
"b" style=
"grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
126 <span style=
"grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
129 <div class=
"columns" style=
"height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
130 <div style=
"padding-top:10px; background:grey">
132 <span class=
"t"><x></x></span>
133 <span class=
"t"><x></x></span>
134 <span style=
"background:cyan" class=
"t"><x></x></span>
137 <span class=
"b"><x></x></span>
138 <span class=
"b" style=
"grid-row:1; grid-column:1; height:11px;"><x></x></span>
139 <span class=
"b" style=
"grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
140 <span style=
"grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
143 <div class=
"columns" style=
"height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
144 <div style=
"padding-top:10px; background:grey">
146 <span class=
"t"><x></x></span>
147 <span class=
"t"><x></x></span>
148 <span style=
"background:cyan" class=
"t"><x></x></span>
151 <span class=
"b"><x></x></span>
152 <span class=
"b" style=
"grid-row:1; grid-column:1; height:11px;"><x></x></span>
153 <span class=
"b" style=
"grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
154 <span style=
"grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>