grid-order-placement-auto-001-ref.html (3056B)
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 automatic 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 .grid { 12 height: 60px; 13 border: 1px solid green; 14 position: relative; 15 font-size: 12px; 16 } 17 18 span { 19 position: absolute; 20 background: lime; 21 border: 1px solid black; 22 box-sizing: border-box; 23 width: 20px; 24 height: 20px; 25 } 26 27 .test1 .a { 28 top: 0; 29 left: 20px; 30 width: 20px; 31 height: 20px; 32 } 33 .test1 .b { 34 top: 20px; 35 left: 20px; 36 width: 60px; 37 height: 20px; 38 } 39 .test1 .c { 40 top: 0; 41 left: 80px; 42 width: 60px; 43 height: 40px; 44 } 45 .test1 .e { 46 top: 20px; 47 left: 0px; 48 } 49 .test1 .d2 { 50 top: 0px; 51 left: 40px; 52 } 53 54 .test2 .a { 55 top: 0; 56 left: 20px; 57 width: 60px; 58 height: 20px; 59 } 60 .test2 .b { 61 top: 20px; 62 left: 20px; 63 width: 20px; 64 height: 20px; 65 } 66 .test2 .c { 67 top: 0; 68 left: 80px; 69 width: 60px; 70 height: 40px; 71 } 72 .test2 .e { 73 top: 20px; 74 left: 0px; 75 } 76 .test2 .d2 { 77 top: 20px; 78 left: 40px; 79 } 80 81 .test3 .a { 82 top: 0; 83 left: 0; 84 width: 60px; 85 height: 40px; 86 } 87 .test3 .b { 88 top: 40px; 89 left: 20px; 90 width: 60px; 91 height: 20px; 92 } 93 .test3 .c { 94 top: 60px; 95 left: 0px; 96 width: 60px; 97 height: 40px; 98 } 99 .test3 .d { top: 0px; left:60px; } 100 .test3 .e { 101 top: 20px; 102 left: 60px; 103 } 104 .test3 .d2 { 105 top: 40px; 106 left: 0px; 107 } 108 109 .test4 .c { 110 top: 20px; 111 left: 20px; 112 width: 60px; 113 height: 40px; 114 } 115 .test4 .d { top: 0px; } 116 .test4 .e { 117 top: 20px; 118 left: 0px; 119 } 120 .test4 .d2 { 121 top: 0px; 122 left: 20px; 123 } 124 125 .test5 .c { 126 top: 20px; 127 left: 20px; 128 width: 60px; 129 height: 20px; 130 } 131 .test5 .e { 132 top: 20px; 133 left: 0px; 134 } 135 .test5 .d2 { 136 top: 0px; 137 left: 20px; 138 } 139 140 .test6 { left: 0px; top: 20px;} 141 .test6d2 { 142 top: 20px; 143 left: 140px; 144 } 145 .test6e { 146 top: 20px; 147 left: 160px; 148 } 149 </style> 150 </head> 151 <body> 152 153 <div class="grid test1"> 154 <span class="a">a</span> 155 <span class="b">b</span> 156 <span class="c">c</span> 157 <span class="d">d</span> 158 <span class="d2">D</span> 159 <span class="e">e</span> 160 </div> 161 162 <div class="grid test2"> 163 <span class="a">a</span> 164 <span class="b">b</span> 165 <span class="c">c</span> 166 <span class="d">d</span> 167 <span class="d2">D</span> 168 <span class="e">e</span> 169 </div> 170 171 <div class="grid test3" style="height:100px"> 172 <span class="a">a</span> 173 <span class="b">b</span> 174 <span class="c">c</span> 175 <span class="d">d</span> 176 <span class="d2">D</span> 177 <span class="e">e</span> 178 </div> 179 180 <div class="grid test4"> 181 <span class="c">c</span> 182 <span class="d">d</span> 183 <span class="d2">D</span> 184 <span class="e">e</span> 185 </div> 186 187 <div class="grid test5"> 188 <span class="c">c</span> 189 <span class="d">d</span> 190 <span class="d2">D</span> 191 <span class="e">e</span> 192 </div> 193 194 <div class="grid test1"> 195 <span class="a">a</span> 196 <span class="b">b</span> 197 <span class="c">c</span> 198 <span class="test6">d</span> 199 <span class="test6d2">D</span> 200 <span class="test6e">e</span> 201 </div> 202 203 </body> 204 </html>