grid-fragmentation-020-ref.html (6245B)
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>Reference: Fragmentation with forced break propagation</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096"> 10 <style type="text/css"> 11 html,body { 12 color:black; background-color:white; font-size:16px; padding:0; margin:0; 13 } 14 body { overflow:hidden; } 15 16 .columns { 17 position:relative; 18 -ms-columns: 5; 19 -webkit-columns: 5; 20 columns: 5; 21 -ms-column-fill: auto; 22 -webkit-column-fill: auto; 23 column-fill: auto; 24 border: 2px solid salmon; 25 margin-bottom: 5px; 26 } 27 .no-border { border-style:none; } 28 29 .grid { 30 display: grid; 31 grid-template-columns: 30px; 32 grid-auto-rows: 10px; 33 grid-gap: 2px; 34 border:5px solid; 35 height: 20px; /* create Class C break opportunities at both ends */ 36 align-content: center; 37 } 38 .start { 39 align-content: start; 40 } 41 42 span { background:lime; border:1px solid black; } 43 .bb { border-bottom-width:6px; } 44 x { display:block; height: 40px; } 45 .t { border-bottom-width:0; } 46 .b { border-top-width:0; } 47 .m { border:5px solid; border-top-width:0; border-bottom-width:0; } 48 .br1 { height:34px; border-width:5px; border-top-style:solid; } 49 .br2 { height:4px; } 50 .br3 { height:39px; } 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="br1"></div> 71 <div class="grid b"> 72 <span class="avoid-break"><x></x></span> 73 </div></div></div> 74 75 <div class="columns" style="height:40px"> 76 <div style="background:grey"> 77 <div class="grid start"> 78 <span class="avoid-break"><x></x></span> 79 </div></div></div> 80 81 <div class="columns" style="height:40px"> 82 <div style="padding-top:1px; background:grey"> 83 <div class="br3"></div> 84 <div class="grid"> 85 <span class="break-before"></span> 86 </div></div></div> 87 88 <div class="columns" style="height:40px"> 89 <div style="padding-top:1px; background:grey"> 90 <div class="br3"></div> 91 <div class="grid start"> 92 <span class="break-before"></span> 93 </div></div></div> 94 95 <div class="columns" style="height:40px"> 96 <div style="padding-top:1px; background:grey"> 97 <div class="br1"></div> 98 <div class="grid b"> 99 <span class="avoid-break"><x></x></span> 100 </div></div></div> 101 102 <div class="columns" style="height:40px"> 103 <div style="padding-top:1px; background:grey"> 104 <div class="grid start"> 105 <span class="avoid-break"><x></x></span> 106 </div></div></div> 107 108 <div class="columns" style="height:16px"> 109 <div style="background:grey"> 110 <div class="grid" style="height:10px"> 111 <span class="break-before"></span> 112 </div></div></div> 113 114 <div class="columns" style="height:16px"> 115 <div style="padding-top:1px; background:grey"> 116 <div class="br2"></div> 117 <div class="grid" style="height:10px"> 118 <span class="break-before"></span> 119 </div></div></div> 120 121 <div class="columns" style="height:10px"> 122 <div style="background:grey"> 123 <div class="grid" style="height:10px"> 124 <span class="break-before"></span> 125 </div></div></div> 126 127 <div class="columns" style="height:10px"> 128 <div style="padding-top:1px; background:grey"> 129 <div class="br2"></div> 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"> 135 <div style="background:grey"> 136 <div class="grid" style="height:10px"> 137 <span class="break-before"></span> 138 </div></div></div> 139 140 <div class="columns" style="height:0px; margin-top:20px"> 141 <div style="background:grey"> 142 <div style="height:1px; overflow:hidden"></div> 143 <div class="grid" style="height:10px"> 144 <span class="break-before"></span> 145 </div></div></div> 146 147 <div class="columns no-border" style="height:0px; margin-top:20px"> 148 <div style="height:1px; overflow:hidden"></div> 149 <div style="height:5px; overflow:hidden; background:black; "></div> 150 <div class="grid m" style="height:10px;grid-auto-rows: 0px; align-content:start;"> 151 <span class="bb"></span> 152 </div></div> 153 154 <div class="columns no-border" style="height:0px; margin-top:20px"> 155 <div style=""> 156 <div style="height:1px; overflow:hidden"></div> 157 <div style="height:5px; overflow:hidden; background:black; "></div> 158 </div> 159 <div style="height:7px; width:30px; margin-left:5px; overflow:hidden; background:black;"></div> 160 <div class="grid m" style="height:10px;grid-auto-rows: 0px; align-content:start;"> 161 <span class="bb"></span> 162 </div></div> 163 164 <div class="columns no-border" style="height:0px; margin-top:20px"> 165 <div style="height:1px; overflow:hidden; position:relative"></div> 166 <div style="border:5px solid; height:1px; overflow:hidden; "> 167 <div style="height:7px; width:30px; overflow:hidden; position:absolute; background:black;"></div> 168 </div> 169 </div> 170 </div> 171 172 <div class="columns no-border" style="height:0px; margin-top:20px"> 173 <div style="padding-top:1px; "> 174 <div style="height:1px; overflow:hidden"></div> 175 <div class="grid" style="height:1px;grid-auto-rows: 1px;"> 176 <span class="break-before bb"></span> 177 <span class="break-before bb"></span> 178 </div></div></div> 179 180 <div class="columns no-border" style="height:0px; margin-top:20px"> 181 <div style="padding-top:1px; "> 182 <div style="height:1px; overflow:hidden"></div> 183 <div class="grid" style="height:1px;grid-auto-rows: 11px;"> 184 <span class="break-before bb"></span> 185 <span class="break-before bb"></span> 186 </div></div></div> 187 188 <div class="columns no-border" style="height:0px; margin-top:20px"> 189 <div style="padding-top:1px; "> 190 <div style="height:1px; overflow:hidden"></div> 191 <div class="grid" style="height:1px;grid-auto-rows: 11px;"> 192 <span class="break-before bb" style="grid-row:span 2"></span> 193 <span class="break-before bb"></span> 194 </div></div></div> 195 196 197 <div class="columns no-border" style="height:0px; margin-top:20px"> 198 <div style="padding-top:1px; "> 199 <div style="height:1px; overflow:hidden"></div> 200 <div class="grid" style="height:1px;grid-auto-rows: 11px;"> 201 <span class="break-before bb"></span> 202 <span class="break-before bb" style="grid-row:span 2"></span> 203 </div></div></div> 204 205 </body> 206 </html>