3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>Reference: Fragmentation of definite height, not top-of-page, forced breaks
</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
;
30 grid-template-columns: 30px 30px 30px;
35 span
{ background:lime
; border:1px solid black
; }
36 x
{ display:block
; height:20px; }
38 .t { border-bottom-width:0; }
39 .b { border-top-width:0; }
40 .m { border-top-width:0; border-bottom-width:0; }
46 <div class=
"columns" style=
"height: 100px/*two rows would fit in 1st column*/">
47 <div style=
"padding-top:10px; background:grey">
50 <span class=
"t"><x></x></span>
51 <span class=
"t" style=
"background:cyan"><x></x></span>
53 <div style=
"height:40px;"></div>
54 <div class=
"grid b" style=
"height:60px">
55 <span class=
"b"><x></x></span>
56 <span class=
"b" style=
"grid-area:1/3; height:6px; background:cyan"><x></x></span>
57 <span style=
"grid-area:1/3; align-self:end; background:pink"><x></x></span>
58 <span style=
"grid-row:1"><x></x></span>
62 <div class=
"columns" style=
"height:30px">
63 <div style=
"padding-top:10px; background:grey">
64 <div style=
"height:90px;border:5px solid;"></div>
67 <div class=
"columns" style=
"height: 60px/*everything would fit in 1st column*/">
68 <div style=
"padding-top:10px; background:grey">
69 <div style=
"height:50px;"></div>
73 <div style=
"height:60px; border:5px solid; border-top-width:0;">
76 <div class=
"columns" style=
"height: 100px/*everything would fit in 1st column*/">
77 <div style=
"padding-top:10px; background:grey">
79 <span class=
"t"><x></x></span>
80 <span class=
"t"><x></x></span>
81 <span class=
"t" style=
"background:cyan"><x></x></span>
83 <div style=
"height:40px;"></div>
84 <div class=
"grid b" style=
"padding-bottom:30px">
85 <span class=
"b" style=
"grid-area:1/1; height:6px"><x></x></span>
86 <span style=
"align-self:end; grid-area:1/1; background:pink"><x></x></span>
87 <span class=
"b"><x></x></span>
88 <span class=
"b" style=
"height:6px; background:cyan"><x></x></span>
91 <div class=
"columns" style=
"height: 100px/*everything would fit in 1st column*/">
92 <div style=
"padding-top:10px; background:grey">
94 <span class=
"t"><x></x></span>
95 <span class=
"t"><x></x></span>
96 <span class=
"t" style=
"background:cyan"><x></x></span>
98 <div style=
"height:40px;"></div>
99 <div class=
"grid b" style=
"padding-bottom:30px">
100 <span class=
"b" style=
"grid-area:1/1; height:6px"><x></x></span>
101 <span style=
"align-self:end; grid-area:1/1; background:pink"><x></x></span>
102 <span class=
"b"><x></x></span>
103 <span class=
"b" style=
"height:6px; background:cyan"><x></x></span>
106 <div class=
"columns" style=
"height: 100px/*everything would fit in 1st column*/">
107 <div style=
"padding-top:10px; background:grey">
108 <div style=
"height:90px;"></div>
109 <div class=
"grid" style=
"padding-bottom:18px">
110 <span style=
"height:35px"><x></x></span>
111 <span style=
"grid-row:span 2"><x></x></span>
112 <span style=
"height:35px; background:cyan"><x></x></span>
113 <span style=
"grid-area:2/1; align-self:end; background:pink"><x></x></span>
117 <div class=
"columns" style=
"height: 97px/*everything would fit in 1st column, except bottom border*/">
118 <div style=
"padding-top:10px; background:grey">
119 <div style=
"height:87px;"></div>
120 <div class=
"grid t" style=
"padding-bottom:18px">
121 <span style=
"height:35px"><x></x></span>
122 <span style=
"grid-row:span 2"><x></x></span>
123 <span style=
"height:35px; background:cyan"><x></x></span>
124 <span style=
"grid-area:2/1; align-self:end; background:pink"><x></x></span>
126 <div class=
"grid b"></div>
129 <div class=
"columns" style=
"height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
130 <div style=
"padding-top:30px; background:grey">
132 <span class=
"t"><x></x></span>
133 <span class=
"t" style=
"background:cyan"><x></x></span>
136 <span class=
"b" style=
"grid-area:1/1; height:6px"><x></x></span>
137 <span class=
"b" style=
"background:cyan"><x></x></span>
138 <span style=
"grid-area:1/1; align-self:end; background:pink"><x></x></span>
140 <div style=
"height:50px"></div>
146 <div class=
"columns" style=
"height: 160px/*everything would fit in 1st column*/">
147 <div style=
"padding-top:30px; background:grey">
149 <span class=
"t" style=
"grid-row: span 2"><x></x></span>
150 <span style=
"grid-row: span 2"><x></x></span>
152 <div style=
"height:53px"></div>
153 <div style=
"height:18px; border:5px solid; border-top-width:0;">
154 <span class=
"b" style=
"display:block;height:29px;width:28px"></span>