grid-placement-definite-implicit-001-ref.html (2528B)
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 <style type="text/css"> 11 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } 12 13 .grid { 14 border: 1px solid blue; 15 } 16 17 .a { background:lime; } 18 .b { background:pink; } 19 .c { width:1px; display: block; background:yellow; } 20 .d { margin-left:3px; width:10000px; display: block; background:cyan; } 21 22 span { 23 display: inline-block; 24 width: 18px; 25 height: 18px; 26 line-height: 18px; 27 border: 1px solid; 28 vertical-align:top; 29 } 30 31 </style> 32 </head> 33 <body style="overflow:hidden"> 34 35 <div class="grid"> 36 <span class="b">b</span><span class="a">a</span><span class="c" style="width:18px">c</span> 37 </div> 38 39 <div class="grid"> 40 <span class="b" span="2">b</span><span class="a">a</span><span class="c">c</span> 41 </div> 42 <div class="grid"> 43 <span class="b" span="3">b</span><span class="a">a</span><span class="c">c</span> 44 </div> 45 <div class="grid"> 46 <span class="b" span="4">b</span><span class="a">a</span><span class="c">c</span> 47 </div> 48 <div class="grid"> 49 <span class="b" span="100">b</span><span class="a">a</span><span class="c">c</span> 50 </div> 51 <div class="grid"> 52 <span class="b" span="9998">b</span> 53 </div> 54 <div class="grid"> 55 <span class="b" span="9999">b</span> 56 </div> 57 <div class="grid"> 58 <span class="b" span="10000">b</span> 59 </div> 60 <div class="grid"> 61 <span class="b" span="12345">b</span> 62 </div> 63 <div class="grid" style="height:40px"> 64 <span class="b" span="10000">b</span> 65 </div> 66 <div class="grid"> 67 <span class="b" span="2">b</span><span class="a">a</span><span class="d">d</span> 68 </div> 69 <div class="grid"> 70 <span class="b" style="margin-left:56px; width:30000px; ">b</span> 71 </div> 72 73 <div class="grid cols" style="margin-left:-30000px;"> 74 <span class="b" style="width:1px; margin-left:30062px">b</span> 75 <span class="c" style="margin-left:29000px; width:1063px;">c</span> 76 </div> 77 <div class="grid rows" style="border:none"> 78 <span class="b" style="margin-top:11px;height:1px;"></span> 79 </div> 80 81 82 <script> 83 var elms = document.querySelectorAll("[span].b"); 84 for (i=0; i < elms.length; ++i) { 85 var e = elms[i]; 86 var span = e.getAttribute("span"); 87 var width = (15 + 3*parseInt((span>10000?10000:span))); 88 e.style.width = width + "px"; 89 } 90 </script> 91 92 </body> 93 </html>