grid-item-blockifying-001.html (7412B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html class="reftest-wait"><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 <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items"> 11 <link rel="match" href="grid-item-blockifying-001-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 17 .grid { 18 display: grid; 19 grid-auto-columns: 100px; 20 grid-auto-rows: 2px; 21 justify-content: start; 22 border: 1px solid blue; 23 } 24 25 x { 26 grid-column: span 2; 27 border:1px solid; 28 } 29 30 .itable { display:inline-table; } 31 .table { display:table; } 32 .caption { display:table-caption; } 33 .cell { display:table-cell; } 34 .row { display:table-row; } 35 .rowg { display:table-row-group; } 36 .head { display:table-header-group; } 37 .foot { display:table-footer-group; } 38 .col { display:table-column; } 39 .colg { display:table-column-group; } 40 41 .flex { display:flex; } 42 .iflex { display:inline-flex; } 43 44 .bgrid { display:grid; } 45 .igrid { display:inline-grid; } 46 47 .list { display:list-item; } 48 49 .r { display: ruby; } 50 .rb { display: ruby-base; } 51 .rt { display: ruby-text; } 52 .rbc { display: ruby-base-container; } 53 .rtc { display: ruby-text-container; } 54 55 </style> 56 </head> 57 <body> 58 59 <!-- These should produce two display:block grid items --> 60 61 <div class="grid"> 62 <x class="cell"></x> 63 <x class="cell"></x> 64 </div> 65 66 <div class="grid"> 67 <div style="display:contents"> 68 <x class="cell"></x> 69 <x class="cell"></x> 70 </div> 71 </div> 72 73 <div class="grid"> 74 <x class="cell"></x> 75 <x class="row"></x> 76 </div> 77 78 <div class="grid"> 79 <div style="display:contents"> 80 <x class="row"></x> 81 <x class="row"></x> 82 </div> 83 </div> 84 85 <div class="grid"> 86 <x class="row"></x> 87 <x class="row"></x> 88 </div> 89 90 <div class="grid"> 91 <x class="rowg"></x> 92 <x class="rowg"></x> 93 </div> 94 95 <div class="grid"> 96 <x class="head"></x> 97 <x class="rowg"></x> 98 </div> 99 100 <div class="grid"> 101 <x class="col"></x> 102 <x class="col"></x> 103 </div> 104 105 <div class="grid"> 106 <x class="col"></x> 107 <x class="colg"></x> 108 </div> 109 110 <div class="grid"> 111 <x class="colg"></x> 112 <x class="colg"></x> 113 </div> 114 115 <div class="grid"> 116 <x class="cell"></x> 117 <x class="col"></x> 118 </div> 119 120 <div class="grid"> 121 <div style="display:contents"> 122 <x class="caption"></x> 123 <x class="caption"></x> 124 </div> 125 </div> 126 127 <div class="grid"> 128 <x class="caption"></x> 129 <x class="caption"></x> 130 </div> 131 132 <div class="grid"> 133 <x class="caption"></x> 134 <x class="cell"></x> 135 </div> 136 137 <div class="grid"> 138 <x></x> 139 <x></x> 140 </div> 141 142 <!-- These should produce two display:table grid items --> 143 144 <div class="grid"> 145 <x class="table"></x> 146 <x class="table"></x> 147 </div> 148 149 <div class="grid"> 150 <x class="itable"></x> 151 <x class="itable"></x> 152 </div> 153 154 <div class="grid"> 155 <div style="display:contents"> 156 <x class="table"></x> 157 <x class="itable"></x> 158 </div> 159 </div> 160 161 <!-- These should produce one display:table grid item and one display:block grid item --> 162 163 <div class="grid"> 164 <x class="table"></x> 165 <x class="cell"></x> 166 </div> 167 168 <div class="grid"> 169 <x class="cell"></x> 170 <x class="table"></x> 171 </div> 172 173 <div class="grid"> 174 <x class="itable"></x> 175 <x class="cell"></x> 176 </div> 177 178 <div class="grid"> 179 <x class="table"></x> 180 <x class="rowg"></x> 181 </div> 182 183 <div class="grid"> 184 <x class="itable"></x> 185 <x class="rowg"></x> 186 </div> 187 188 <div class="grid"> 189 <x class="rowg"></x> 190 <x class="itable"></x> 191 </div> 192 193 <!-- These should produce two display:flex grid items --> 194 195 <div class="grid"> 196 <x class="flex"></x> 197 <x class="iflex"></x> 198 </div> 199 200 <div class="grid"> 201 <x class="iflex"></x> 202 <x class="iflex"></x> 203 </div> 204 205 <div class="grid"> 206 <div style="display:contents"> 207 <x class="flex"></x> 208 <x class="flex"></x> 209 </div> 210 </div> 211 212 <!-- This should produce one display:flex grid item and one display:block --> 213 214 <div class="grid"> 215 <x class="iflex"></x> 216 <x class="cell"></x> 217 </div> 218 219 <!-- These should produce two display:grid grid items --> 220 221 <div class="grid"> 222 <x class="bgrid"></x> 223 <x class="igrid"></x> 224 </div> 225 226 <div class="grid"> 227 <x class="igrid"></x> 228 <x class="igrid"></x> 229 </div> 230 231 <div class="grid"> 232 <div style="display:contents"> 233 <x class="bgrid"></x> 234 <x class="bgrid"></x> 235 </div> 236 </div> 237 238 <!-- This should produce one display:grid grid item and one display:block --> 239 240 <div class="grid"> 241 <x class="igrid"></x> 242 <x class="cell"></x> 243 </div> 244 245 <!-- This should produce one display:list-item grid item and one display:block --> 246 <div class="grid"> 247 <x class="list"></x> 248 <x></x> 249 </div> 250 251 <!-- Various Ruby tests --> 252 253 <div class="grid"> 254 <x class="r"></x> 255 <x class="r"></x> 256 </div> 257 258 <div class="grid"> 259 <x class="rb"></x> 260 <x class="rb"></x> 261 </div> 262 263 <div class="grid"> 264 <x class="rt"></x> 265 <x class="rt"></x> 266 </div> 267 268 <div class="grid"> 269 <x class="rbc"></x> 270 <x class="rbc"></x> 271 </div> 272 273 <div class="grid"> 274 <x class="rtc"></x> 275 <x class="rtc"></x> 276 </div> 277 278 <div class="grid"> 279 <div style="display:contents"> 280 <x class="r"></x> 281 <x class="r"></x> 282 </div> 283 </div> 284 285 <div class="grid"> 286 <div style="display:contents"> 287 <x class="rb"></x> 288 <x class="rb"></x> 289 </div> 290 </div> 291 292 <div class="grid"> 293 <div style="display:contents"> 294 <x class="rt"></x> 295 <x class="rt"></x> 296 </div> 297 </div> 298 299 <div class="grid"> 300 <div style="display:contents"> 301 <x class="rbc"></x> 302 <x class="rbc"></x> 303 </div> 304 </div> 305 306 <div class="grid"> 307 <div style="display:contents"> 308 <x class="rtc"></x> 309 <x class="rtc"></x> 310 </div> 311 </div> 312 313 <script> 314 var expected = [ 315 "block block", 316 "contents", 317 "block block", 318 "contents", 319 "block block", 320 "block block", 321 "block block", 322 "block block", 323 "block block", 324 "block block", 325 "block block", 326 "contents", 327 "block block", 328 "block block", 329 "block block", 330 "table table", 331 "table table", 332 "contents", 333 "table block", 334 "block table", 335 "table block", 336 "table block", 337 "table block", 338 "block table", 339 "flex flex", 340 "flex flex", 341 "contents", 342 "flex block", 343 "grid grid", 344 "grid grid", 345 "contents", 346 "grid block", 347 "list-item block", 348 "block ruby block ruby", 349 "block block", 350 "block block", 351 "block block", 352 "block block", 353 "contents", 354 "contents", 355 "contents", 356 "contents", 357 "contents", 358 ]; 359 var expected2 = [ /* results for display:contents children */ 360 "block block", 361 "block block", 362 "block block", 363 "table table", 364 "flex flex", 365 "grid grid", 366 "block ruby block ruby", 367 "block block", 368 "block block", 369 "block block", 370 "block block", 371 ]; 372 373 function is(elem, got, expected) { 374 if (got != expected) { 375 var err = elem.innerHTML + '\n' + 376 'got: ' + got + '\n' + 377 'expected: ' + expected; 378 document.body.appendChild(document.createTextNode(err)); 379 } 380 } 381 function checkDisplayTypes() { 382 var grids = Array.prototype.slice.call(document.querySelectorAll('.grid')) 383 var i2 = 0; 384 for (var i = 0; i < grids.length; ++i) { 385 var items = Array.prototype.slice.call(grids[i].children) 386 var s = items.map((e) => getComputedStyle(e).display).join(' '); 387 is(grids[i], s, expected[i]); 388 items.map(function(e) { 389 if (getComputedStyle(e).display == "contents") { 390 items = Array.prototype.slice.call(e.children) 391 s = items.map((e) => getComputedStyle(e).display).join(' '); 392 is(grids[i], s, expected2[i2]); 393 i2++; 394 } 395 }); 396 } 397 } 398 399 function runTests() { 400 checkDisplayTypes(); 401 document.documentElement.removeAttribute("class"); 402 } 403 404 runTests(); 405 406 </script> 407 408 </body> 409 </html>