grid-placement-definite-implicit-001.html (3382B)
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 Test: Testing placement of grid items outside the explicit grid</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051"> 10 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo"> 11 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#overlarge-grids"> 12 <link rel="match" href="grid-placement-definite-implicit-001-ref.html"> 13 <style type="text/css"> 14 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } 15 16 .grid { 17 display: grid; 18 grid-template-columns: 20px 20px 20px 20px; 19 grid-template-rows: 20px; 20 grid-auto-columns: 3px; 21 grid-auto-rows: 20px; 22 border: 1px solid blue; 23 justify-items: stretch; 24 } 25 26 .a { grid-area: 1 / 2; background:lime; } 27 .b { grid-column: span 1 / 2; grid-row: 1; background:pink; } 28 .c { grid-row: 2; background:yellow; } 29 .d { grid-row: 2; grid-column: 1 / span 20000; background:cyan; } 30 31 span { 32 border: 1px solid; 33 line-height: 18px; 34 min-width: 0; 35 } 36 37 </style> 38 </head> 39 <body style="overflow:hidden"> 40 41 <div class="grid"> 42 <span class="a">a</span><span class="b">b</span><span class="c">c</span> 43 </div> 44 45 <div class="grid"> 46 <span class="a">a</span><span class="b" span="2">b</span><span class="c">c</span> 47 </div> 48 <div class="grid"> 49 <span class="a">a</span><span class="b" span="3">b</span><span class="c">c</span> 50 </div> 51 <div class="grid"> 52 <span class="a">a</span><span class="b" span="4">b</span><span class="c">c</span> 53 </div> 54 <div class="grid"> 55 <span class="a">a</span><span class="b" span="100">b</span><span class="c">c</span> 56 </div> 57 <div class="grid"> 58 <span class="a">a</span><span class="b" span="9998">b</span> 59 </div> 60 <div class="grid"> 61 <span class="a">a</span><span class="b" span="9999">b</span> 62 </div> 63 <div class="grid"> 64 <span class="a">a</span><span class="b" span="10000">b</span> 65 </div> 66 <div class="grid"> 67 <span class="a">a</span><span class="b" span="12345">b</span> 68 </div> 69 <div class="grid"> 70 <span class="a">a</span><span class="b" span="10000">b</span><span class="d">d</span> 71 </div> 72 <div class="grid"> 73 <span class="a">a</span><span class="b" span="2">b</span><span class="d">d</span> 74 </div> 75 <div class="grid"> 76 <span class="b" style="grid-column: 9997 / span 1000; margin-left:-30000px; ">b</span> 77 </div> 78 79 <div class="grid cols" style="margin-left:-30000px;"> 80 <span class="b" style="grid-column: span 1 / a;">b</span> 81 <span class="c" style="grid-column: a;">c</span> 82 </div> 83 <div class="grid rows" style="grid-auto-rows:3px; grid-auto-cols:20px; margin-top:-30000px; border:none"> 84 <span class="b" style="grid-row: span 1 / a;"></span> 85 </div> 86 87 <script> 88 var elms = document.querySelectorAll("[span]"); 89 for (i=0; i < elms.length; ++i) { 90 var e = elms[i]; 91 e.style.gridColumnStart = "span " + e.getAttribute("span"); 92 } 93 var cols = '"'; 94 for (j = 0; j < 10010; ++j) { 95 cols += "a " 96 } 97 cols += '"'; 98 var rows = ''; 99 for (j = 0; j < 10010; ++j) { 100 rows += '"a" ' 101 } 102 103 var style = document.createElement('style'); 104 style.appendChild(document.createTextNode( 105 ".cols { grid-template-areas: " + cols + "; }" + 106 ".rows { grid-template-areas: " + rows + "; }")); 107 var head = document.querySelector("head"); 108 head.appendChild(style) 109 </script> 110 111 </body> 112 </html>