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