grid-item-blockifying-001-ref.html (5172B)
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: Grid item blockifying</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1185140"> 10 <style type="text/css"> 11 html,body { 12 color:black; background-color:white; font-size:16px; padding:0; margin:0; 13 } 14 15 .grid { 16 display: grid; 17 grid-auto-columns: 100px; 18 grid-auto-rows: 2px; 19 justify-content: start; 20 border: 1px solid blue; 21 } 22 23 x { 24 grid-column: span 2; 25 border:1px solid; 26 } 27 28 .itable { display:inline-table; } 29 .table { display:table; } 30 .caption { display: block; } 31 .cell { display: block; } 32 .row { display: block; } 33 .rowg { display: block; } 34 .head { display: block; } 35 .foot { display: block; } 36 .col { display: block; } 37 .colg { display: block; } 38 39 .flex { display:flex; } 40 .iflex { display:flex; } 41 42 .bgrid { display:grid; } 43 .igrid { display:grid; } 44 45 .list { display:list-item; } 46 47 .r { display: block; } 48 .rb { display: block; } 49 .rt { display: block; } 50 .rbc { display: block; } 51 .rtc { display: block; } 52 53 </style> 54 </head> 55 <body> 56 57 <!-- These should produce two display:block grid items --> 58 59 <div class="grid"> 60 <x class="cell"></x> 61 <x class="cell"></x> 62 </div> 63 64 <div class="grid"> 65 <div style="display:contents"> 66 <x class="cell"></x> 67 <x class="cell"></x> 68 </div> 69 </div> 70 71 <div class="grid"> 72 <x class="cell"></x> 73 <x class="row"></x> 74 </div> 75 76 <div class="grid"> 77 <div style="display:contents"> 78 <x class="row"></x> 79 <x class="row"></x> 80 </div> 81 </div> 82 83 <div class="grid"> 84 <x class="row"></x> 85 <x class="row"></x> 86 </div> 87 88 <div class="grid"> 89 <x class="rowg"></x> 90 <x class="rowg"></x> 91 </div> 92 93 <div class="grid"> 94 <x class="head"></x> 95 <x class="rowg"></x> 96 </div> 97 98 <div class="grid"> 99 <x class="col"></x> 100 <x class="col"></x> 101 </div> 102 103 <div class="grid"> 104 <x class="col"></x> 105 <x class="colg"></x> 106 </div> 107 108 <div class="grid"> 109 <x class="colg"></x> 110 <x class="colg"></x> 111 </div> 112 113 <div class="grid"> 114 <x class="cell"></x> 115 <x class="col"></x> 116 </div> 117 118 <div class="grid"> 119 <div style="display:contents"> 120 <x class="caption"></x> 121 <x class="caption"></x> 122 </div> 123 </div> 124 125 <div class="grid"> 126 <x class="caption"></x> 127 <x class="caption"></x> 128 </div> 129 130 <div class="grid"> 131 <x class="caption"></x> 132 <x class="cell"></x> 133 </div> 134 135 <div class="grid"> 136 <x></x> 137 <x></x> 138 </div> 139 140 <!-- These should produce two display:table grid items --> 141 142 <div class="grid"> 143 <x class="table"></x> 144 <x class="table"></x> 145 </div> 146 147 <div class="grid"> 148 <x class="itable"></x> 149 <x class="itable"></x> 150 </div> 151 152 <div class="grid"> 153 <div style="display:contents"> 154 <x class="table"></x> 155 <x class="itable"></x> 156 </div> 157 </div> 158 159 <!-- These should produce one display:table grid item and one display:block grid item --> 160 161 <div class="grid"> 162 <x class="table"></x> 163 <x class="cell"></x> 164 </div> 165 166 <div class="grid"> 167 <x class="cell"></x> 168 <x class="table"></x> 169 </div> 170 171 <div class="grid"> 172 <x class="itable"></x> 173 <x class="cell"></x> 174 </div> 175 176 <div class="grid"> 177 <x class="table"></x> 178 <x class="rowg"></x> 179 </div> 180 181 <div class="grid"> 182 <x class="itable"></x> 183 <x class="rowg"></x> 184 </div> 185 186 <div class="grid"> 187 <x class="rowg"></x> 188 <x class="itable"></x> 189 </div> 190 191 <!-- These should produce two display:flex grid items --> 192 193 <div class="grid"> 194 <x class="flex"></x> 195 <x class="iflex"></x> 196 </div> 197 198 <div class="grid"> 199 <x class="iflex"></x> 200 <x class="iflex"></x> 201 </div> 202 203 <div class="grid"> 204 <div style="display:contents"> 205 <x class="flex"></x> 206 <x class="flex"></x> 207 </div> 208 </div> 209 210 <!-- This should produce one display:flex grid item and one display:block --> 211 212 <div class="grid"> 213 <x class="iflex"></x> 214 <x class="cell"></x> 215 </div> 216 217 <!-- These should produce two display:grid grid items --> 218 219 <div class="grid"> 220 <x class="bgrid"></x> 221 <x class="igrid"></x> 222 </div> 223 224 <div class="grid"> 225 <x class="igrid"></x> 226 <x class="igrid"></x> 227 </div> 228 229 <div class="grid"> 230 <div style="display:contents"> 231 <x class="bgrid"></x> 232 <x class="bgrid"></x> 233 </div> 234 </div> 235 236 <!-- This should produce one display:grid grid item and one display:block --> 237 238 <div class="grid"> 239 <x class="igrid"></x> 240 <x class="cell"></x> 241 </div> 242 243 <!-- This should produce one display:list-item grid item and one display:block --> 244 <div class="grid"> 245 <x class="list"></x> 246 <x></x> 247 </div> 248 249 <!-- Various Ruby tests --> 250 251 <div class="grid"> 252 <x class="r"></x> 253 <x class="r"></x> 254 </div> 255 256 <div class="grid"> 257 <x class="rb"></x> 258 <x class="rb"></x> 259 </div> 260 261 <div class="grid"> 262 <x class="rt"></x> 263 <x class="rt"></x> 264 </div> 265 266 <div class="grid"> 267 <x class="rbc"></x> 268 <x class="rbc"></x> 269 </div> 270 271 <div class="grid"> 272 <x class="rtc"></x> 273 <x class="rtc"></x> 274 </div> 275 276 <div class="grid"> 277 <div style="display:contents"> 278 <x class="r"></x> 279 <x class="r"></x> 280 </div> 281 </div> 282 283 <div class="grid"> 284 <div style="display:contents"> 285 <x class="rb"></x> 286 <x class="rb"></x> 287 </div> 288 </div> 289 290 <div class="grid"> 291 <div style="display:contents"> 292 <x class="rt"></x> 293 <x class="rt"></x> 294 </div> 295 </div> 296 297 <div class="grid"> 298 <div style="display:contents"> 299 <x class="rbc"></x> 300 <x class="rbc"></x> 301 </div> 302 </div> 303 304 <div class="grid"> 305 <div style="display:contents"> 306 <x class="rtc"></x> 307 <x class="rtc"></x> 308 </div> 309 </div> 310 311 </body> 312 </html>