grid-fragmentation-004-ref.html (5370B)
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 first grid row at top-of-page and Class C break opportunities</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 28 .block { 29 border:5px solid; 30 border-top-width:0; 31 border-bottom-width:10px; 32 height: 120px; 33 } 34 .grid { 35 display: grid; 36 grid-template-columns: 30px 30px 30px; 37 grid-auto-rows: 50px; 38 grid-gap: 12px; 39 border:5px solid; 40 border-top-width: 0; 41 border-bottom-width: 10px; 42 align-content: center; 43 } 44 span { background:lime; border:1px solid black; } 45 x { display:block; height:20px; } 46 47 .t { border-bottom-width:0; } 48 .b { border-top-width:0; } 49 .m { border-top-width:0; border-bottom-width:0; } 50 .grid.t {padding-top:4px;} 51 52 .br1 { height:1px; } 53 54 </style> 55 </head> 56 <body> 57 58 <div class="columns" style="height: 122px/*fragmentainer ends in the end border*/"> 59 <div style="background:grey"> 60 <div class="grid t" style="height:112px; padding-bottom:4px;"> 61 <span style="grid-row:span 2"><x></x></span> 62 <span style="height:60px; background:cyan"><x></x></span> 63 <span><x></x></span> 64 <span style="align-self:end; background:pink"><x></x></span> 65 <span style="grid-row:1"><x></x></span> 66 </div> 67 <div style="height:2px;"></div> 68 <div class="block" style="border-top-style:none; height:0px;"> 69 </div></div></div> 70 71 <div class="columns" style="height: 122px/*fragmentainer ends in the end border*/"> 72 <div style="background:grey"> 73 <div class="block"> 74 </div></div></div> 75 76 <div class="columns" style="height: 90px/*fragmentainer ends in the last row*/"> 77 <div style="background:grey"> 78 <div class="grid t"> 79 <span class="t"><x></x></span> 80 <span class="t"><x></x></span> 81 <span style="background:cyan" class="t"><x></x></span> 82 </div> 83 <div class="br1"></div> 84 <div class="grid b" style="padding-bottom:16px"> 85 <span class="b"><x></x></span> 86 <span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> 87 <span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> 88 <span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> 89 </div></div></div> 90 91 <div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */"> 92 <div style="background:grey"> 93 <div class="grid t"> 94 <span class="t"><x></x></span> 95 <span class="t"><x></x></span> 96 <span style="background:cyan" class="t"><x></x></span> 97 </div> 98 <div class="grid m" style="padding-bottom:10px"> 99 <span class="b"><x></x></span> 100 <span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> 101 <span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> 102 <span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> 103 </div> 104 <div class="block" style="border-top-style:none; height:6px;"> 105 </div> 106 </div></div> 107 108 <!-- TODO XXX depends on bug 1238294 109 110 <div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px"> 111 <div style="background:grey"> 112 <div class="br1"></div> 113 <div class="grid m"> 114 <span class="t"><x></x></span> 115 <span class="t"><x></x></span> 116 <span style="background:cyan" class="t"><x></x></span> 117 </div> 118 <div class="grid m"> 119 <span class="b"><x></x></span> 120 <span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span> 121 <span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span> 122 <span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span> 123 </div> 124 <div class="block" style="margin-top:-19px; border-top-style:none; height:20px;"> 125 </div> 126 </div></div> 127 128 <div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px"> 129 <div style="background:grey"> 130 <div class="br1"></div> 131 <div class="grid m"> 132 <span class="t"><x></x></span> 133 <span class="t"><x></x></span> 134 <span style="background:cyan" class="t"><x></x></span> 135 </div> 136 <div class="grid m"> 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> 141 </div> 142 <div style="background:black; padding-bottom:10px;"></div> 143 </div></div> 144 145 <div class="columns" style="height: 2px/*fragmentainer ends between the start border but before the first row */"> 146 <div style="background:grey;"> 147 <div class="br1"></div> 148 <div class="grid m"> 149 <span><x></x></span> 150 <span class="t" style="background:cyan"><x></x></span> 151 <span class="t"><x></x></span> 152 </div> 153 <div class="grid m"> 154 <span><x></x></span> 155 <span class="b" style="height:11px; background:cyan"><x></x></span> 156 <span class="b"style=""><x></x></span> 157 </div> 158 <div style="background:black; padding-bottom:10px;"></div> 159 </div></div> 160 161 --> 162 163 </body> 164 </html>