grid-order-placement-definite-001-ref.html (1504B)
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 definite placement of grid items with 'order'</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } 12 13 .grid { 14 /*display: grid;*/ 15 position: relative; 16 grid-template-columns: 20px 20px 20px 20px; 17 grid-auto-flow: row; 18 grid-auto-columns: 23px; 19 grid-auto-rows: 17px; 20 padding: 17px 7px 11px 11px; 21 width: 100px; 22 height: 25px; 23 } 24 25 .a { left:73px; right:3px; background:lime; } 26 .b { left:53px; right:3px; background:pink; } 27 .c { left:33px; right:3px; background:yellow; } 28 .d { left:13px; right:3px; background:silver; } 29 30 span { 31 position:absolute; 32 border: 1px solid; 33 height: 18px; 34 } 35 36 x { background:black; order:99; float:right; } 37 .f2 { background:white; } 38 .f2 span { opacity: 0.5; } 39 </style> 40 </head> 41 <body> 42 43 <f> 44 45 <div class="grid"> 46 <span class="d">d</span> 47 <span class="c">c</span> 48 <span class="b">b</span> 49 <span class="a">a</span> 50 </div> 51 52 <div class="grid"> 53 <span class="d">d</span> 54 <span class="c">c</span> 55 <span class="b">b</span> 56 <span class="a">a</span> 57 </div> 58 59 </f> 60 61 <script> 62 var f = document.querySelector('f'); 63 var f2 = f.cloneNode(true); 64 f2.className = 'f2'; 65 document.body.appendChild(f2); 66 </script> 67 68 </body> 69 </html>