grid-order-abspos-items-001.html (3493B)
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 layout and painting of abs.pos. grid items with 'order'</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786"> 10 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> 11 <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property"> 12 <link rel="match" href="grid-order-abspos-items-001-ref.html"> 13 <style type="text/css"> 14 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } 15 16 .grid { 17 display: grid; 18 position: relative; 19 grid-template-columns: 20px 20px 20px 20px; 20 grid-auto-flow: row; 21 grid-auto-columns: 23px; 22 grid-auto-rows: 17px; 23 padding: 17px 7px 11px 13px; 24 width: 100px; 25 height: 25px; 26 } 27 28 .a { order:4; grid-column-start:4; background:lime; } 29 .b { order:3; grid-column-start:3; background:pink; } 30 .c { order:2; grid-column-start:2; background:yellow; } 31 .d { order:1; grid-column-start:1; background:silver; } 32 .e { order:1; grid-column-start:1; background:red; } 33 34 .abs { 35 position: absolute; 36 top:3px; left:1px; right:5px; bottom:1px; 37 } 38 39 span { 40 background: lime; 41 border: 1px solid; 42 } 43 44 .z-1 { z-index:-1; } 45 .z1 { z-index:1; } 46 .z2 { z-index:2; } 47 .z3 { z-index:3; } 48 .z4 { z-index:4; } 49 x { background:black; order:99; float:right; } 50 f { float:left; } 51 .f2 { background:white; } 52 .f2 span { opacity: 0.5; } 53 .f2 span.e { z-index:-1; } 54 </style> 55 </head> 56 <body> 57 58 <f> 59 60 <div class="grid"> 61 <span class="abs a">a</span> 62 <span class="abs b">b</span> 63 <span class="abs c">c</span> 64 <span class="abs e">FAIL<x>x</x></span> 65 <span class="abs d">d<x>x</x></span> 66 </div> 67 68 <div class="grid"> 69 <div style="order:2"> 70 <span class="abs a">a</span> 71 <span class="abs b">b</span> 72 </div> 73 <div style="order:1"> 74 <span class="abs c">c</span> 75 <span class="abs e">FAIL<x>x</x></span> 76 <span class="abs d">d<x>x</x></span> 77 </div> 78 </div> 79 80 <div class="grid"> 81 <div style="display:grid; order:2"> 82 <div style="order:2"> 83 <span class="abs a">a</span> 84 </div> 85 <div style="order:1"> 86 <span class="abs c">c</span> 87 </div> 88 </div> 89 <div style="display:grid; order:1"> 90 <div style="order:2"> 91 <span class="abs b">b</span> 92 </div> 93 <div style="order:1"> 94 <span class="abs e">FAIL<x>x</x></span> 95 <span class="abs d">d<x>x</x></span> 96 </div> 97 </div> 98 </div> 99 100 <div class="grid"> 101 <span class="abs a">a</span> 102 <span class="abs z1 b">b</span> 103 <span class="abs z2 c">c</span> 104 <span class="abs e">FAIL<x>x</x></span> 105 <span class="abs d">d<x>x</x></span> 106 </div> 107 108 <div class="grid"> 109 <div style="order:2"> 110 <span class="abs a">a</span> 111 <span class="abs z1 b">b</span> 112 </div> 113 <div style="order:1"> 114 <span class="abs z1 c">c</span> 115 <span class="abs e">FAIL<x>x</x></span> 116 <span class="abs d">d<x>x</x></span> 117 </div> 118 </div> 119 120 <div class="grid"> 121 <div style="display:grid; order:2"> 122 <div style="order:2"> 123 <span class="abs a">a</span> 124 </div> 125 <div style="order:1"> 126 <span class="abs z2 c">c</span> 127 </div> 128 </div> 129 <div style="display:grid; order:1"> 130 <div style="order:2"> 131 <span class="abs z1 b">b</span> 132 </div> 133 <div style="order:1"> 134 <span class="abs z-1 d">FAIL<x>x</x></span> 135 <span class="abs z1 d">d<x>x</x></span> 136 </div> 137 </div> 138 </div> 139 140 </f> 141 142 <script> 143 var f = document.querySelector('f'); 144 var f2 = f.cloneNode(true); 145 f2.className = 'f2'; 146 document.body.appendChild(f2); 147 </script> 148 149 </body> 150 </html>