grid-fragmentation-020.html (6168B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Grid Test: Fragmentation with forced break propagation</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination"> 11 <link rel="match" href="grid-fragmentation-020-ref.html"> 12 <style type="text/css"> 13 html,body { 14 color:black; background-color:white; font-size:16px; padding:0; margin:0; 15 } 16 body { overflow:hidden; } 17 18 .columns { 19 position:relative; 20 -ms-columns: 5; 21 -webkit-columns: 5; 22 columns: 5; 23 -ms-column-fill: auto; 24 -webkit-column-fill: auto; 25 column-fill: auto; 26 border: 2px solid salmon; 27 margin-bottom: 5px; 28 } 29 .no-border { border-style:none; } 30 31 .grid { 32 display: grid; 33 grid-template-columns: 30px; 34 grid-auto-rows: 10px; 35 grid-gap: 2px; 36 border:5px solid; 37 height: 20px; /* create Class C break opportunities at both ends */ 38 align-content: center; 39 } 40 .start { 41 align-content: start; 42 } 43 44 span { background:lime; border:1px solid black; } 45 .bb { border-bottom-width:6px; } 46 x { display:block; height: 40px; } 47 m { display:block; padding-top:1px; } 48 .break-before { page-break-before:always; break-before:always; } 49 .break-after { page-break-after:always; break-after:always; } 50 .avoid-break { page-break-inside:avoid; break-inside:avoid; } 51 52 </style> 53 </head> 54 <body> 55 56 <div class="columns" style="height:40px"> 57 <div style="background:grey"> 58 <div class="grid"> 59 <span class="break-before"></span> 60 </div></div></div> 61 62 <div class="columns" style="height:40px"> 63 <div style="background:grey"> 64 <div class="grid start"> 65 <span class="break-before"></span> 66 </div></div></div> 67 68 <div class="columns" style="height:40px"> 69 <div style="background:grey"> 70 <div class="grid"> 71 <span class="avoid-break"><x></x></span> 72 </div></div></div> 73 74 <div class="columns" style="height:40px"> 75 <div style="background:grey"> 76 <div class="grid start"> 77 <span class="avoid-break"><x></x></span> 78 </div></div></div> 79 80 <div class="columns" style="height:40px"> 81 <div style="background:grey"><m></m> 82 <div class="grid"> 83 <span class="break-before"></span> 84 </div></div></div> 85 86 <div class="columns" style="height:40px"> 87 <div style="background:grey"><m></m> 88 <div class="grid start"> 89 <span class="break-before"></span> 90 </div></div></div> 91 92 <div class="columns" style="height:40px"> 93 <div style="background:grey"><m></m> 94 <div class="grid"> 95 <span class="avoid-break"><x></x></span> 96 </div></div></div> 97 98 <div class="columns" style="height:40px"> 99 <div style="background:grey"><m></m> 100 <div class="grid start"> 101 <span class="avoid-break"><x></x></span> 102 </div></div></div> 103 104 <div class="columns" style="height:16px"> 105 <div style="background:grey"> 106 <div class="grid" style="height:10px"> 107 <span class="break-before"></span> 108 </div></div></div> 109 110 <div class="columns" style="height:16px"> 111 <div style="background:grey"><m></m> 112 <div class="grid" style="height:10px"> 113 <span class="break-before"></span> 114 </div></div></div> 115 116 <div class="columns" style="height:10px"> 117 <div style="background:grey"> 118 <div class="grid" style="height:10px"> 119 <span class="break-before"></span> 120 </div></div></div> 121 122 <div class="columns" style="height:10px"> 123 <div style="background:grey"><m></m> 124 <div class="grid" style="height:10px"> 125 <span class="break-before"></span> 126 </div></div></div> 127 128 <div class="columns" style="height:0px"> 129 <div style="background:grey"> 130 <div class="grid" style="height:10px"> 131 <span class="break-before"></span> 132 </div></div></div> 133 134 <div class="columns" style="height:0px; margin-top:20px"> 135 <div style="background:grey"><m></m> 136 <div class="grid" style="height:10px;"> 137 <span class="break-before"></span> 138 </div></div></div> 139 140 <div class="columns no-border" style="height:0px; margin-top:20px"> 141 <div><m></m> 142 <div class="grid" style="height:10px;grid-auto-rows: 0px;"> 143 <span class="break-before bb"></span> 144 </div></div></div> 145 146 <div class="columns no-border" style="height:0px; margin-top:20px"> 147 <div><m></m> 148 <div class="grid" style="height:10px;grid-auto-rows: 0px;"> 149 <span class="break-before bb"></span> 150 <span class="break-before bb"></span> 151 </div></div></div> 152 153 <div class="columns no-border" style="height:0px; margin-top:20px"> 154 <div><m></m> 155 <div class="grid" style="height:1px;grid-auto-rows: 1px;"> 156 <span class="break-before bb"></span> 157 </div></div></div> 158 159 <div class="columns no-border" style="height:0px; margin-top:20px"> 160 <div><m></m> 161 <div class="grid" style="height:1px;grid-auto-rows: 1px;"> 162 <span class="break-before bb"></span> 163 <span class="break-before bb"></span> 164 </div></div></div> 165 166 <div class="columns no-border" style="height:0px; margin-top:20px"> 167 <div><m></m> 168 <div class="grid" style="height:1px;grid-auto-rows: 11px;"> 169 <span class="break-before bb"></span> 170 <span class="break-before bb"></span> 171 </div></div></div> 172 173 <div class="columns no-border" style="height:0px; margin-top:20px"> 174 <div><m></m> 175 <div class="grid" style="height:1px;grid-auto-rows: 11px;"> 176 <span class="break-before bb" style="grid-row:span 2"></span> 177 <span class="break-before bb"></span> 178 </div></div></div> 179 180 181 <div class="columns no-border" style="height:0px; margin-top:20px"> 182 <div><m></m> 183 <div class="grid" style="height:1px;grid-auto-rows: 11px;"> 184 <span class="break-before bb"></span> 185 <span class="break-before bb" style="grid-row:span 2"></span> 186 </div></div></div> 187 188 <!-- 189 190 XXX TODO: propagation of break-after on the last row to the container doesn't work. 191 XXX TODO: I'm guessing the block frame code doesn't know how to deal with that b/c 192 XXX TODO: it expects the frame constructor to have created a nsPageBreakFrame... 193 194 <div class="columns" style="height:40px"> 195 <div style="background:grey"> 196 <div class="grid"> 197 <span class="break-after"></span> 198 </div> 199 <div style="border-top:2px solid blue"></div> 200 </div></div> 201 202 <div class="columns" style="height:40px"> 203 <div style="background:grey"> 204 <div class="grid"> 205 <img src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=" class="break-after"></button> 206 </div> 207 <div style="border-top:2px solid blue"></div> 208 </div></div> 209 210 --> 211 212 </body> 213 </html>