grid-placement-definite-implicit-002-ref.html (12505B)
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 with non-existent line names</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051"> 10 <style type="text/css"> 11 html,body { 12 font-size: 16px; 13 font-family: monospace; 14 padding:0; margin:0; 15 } 16 17 .grid { 18 height: 40px; 19 position: relative; 20 } 21 22 span { 23 position: absolute; 24 top:0; left:0; width:20px; height:20px; 25 background: lime; 26 border: 1px solid black; 27 box-sizing: border-box; 28 } 29 30 .XeN { left: 20px; width: 80px; } 31 .XsN { width: 80px; } .XsN ~ span { top:20px; left:60px; } 32 .NeX { left: 20px; width: 80px; } 33 .NsX { width: 80px; } .NsX ~ span { left: 60px; top: 20px; } 34 .XeA { width: 100px; } .XeA ~ span { top: 20px; } 35 .XsA { width: 60px; } .XsA ~ span { left: 60px; } 36 .XsA2 { width: 80px; } .XsA2 ~ span { left: 60px; top: 20px; } 37 .XsA3 { width: 120px; } .XsA3 ~ span { left: 60px; top: 20px; } 38 .AsX { width: 60px;} .AsX ~ span { left: 60px; } 39 .xsN { } .xsN ~ span { left: 20px; } 40 .x2sN { width: 40px; } .x2sN ~ span { left: 40px; } 41 .xsN2 { width: 40px; } .xsN2 ~ span { left: 20px; top: 20px; } 42 .xXs { } .xXs ~ span { left: 60px;} 43 .aXs { } .aXs ~ span { left: 60px;} 44 .aXe { left: 20px; width: 60px; } 45 .xXe { width: 100px; } .xXe ~ span { left: 20px; top: 20px; } 46 47 .AXe { width: 80px; } .AXe ~ span { top: 20px; } 48 .A2Xe { left: 20px; width: 60px; } 49 .XXe { left: 60px; } 50 .XX3e { left: 60px; width: 40px; } 51 .XbXe { width: 100px; } .XbXe ~ span { top: 20px; left: 40px; } 52 .XX0b { } .XX0b ~ span { left: 60px; } 53 .XX1b { } .XX1b ~ span { left: 60px; } 54 .XX2b { width: 40px; } .XX2b ~ span { left: 60px; } 55 .XbN1 { width: 60px; } .XbN1 ~ span { left: 60px; } 56 .XbN2 { width: 80px; } .XbN2 ~ span { top: 20px; left: 60px; } 57 .Xbb { } .Xbb ~ span { left: 80px; } 58 .Xee { left: 60px; width:40px; } 59 .nX2s { width: 40px; } .nX2s ~ span { left: 80px; } 60 .nXs { width: 40px; } .nXs ~ span { left: 60px; } 61 .nXe { left: 20px; width: 40px; } 62 .nX2e { left: 40px; width: 40px; } 63 64 .nX3e { left: 60px; width: 40px; } 65 .n3Xe { width: 60px; } .n3Xe ~ span { top: 20px; } 66 .n4Xe { width: 80px; } .n4Xe ~ span { top: 20px; left: 20px; } 67 .Xen3 { left: 60px; width: 60px; } 68 .Xea { left: 60px; } 69 .Xea2 { left: 60px; width: 40px; } 70 .Xea3 { left: 60px; width: 60px; } 71 .Xsa { } .Xsa ~ span { left: 20px; } 72 .Xsa2 { width: 40px; } .Xsa2 ~ span { left: 20px; top: 20px; } 73 .Xsa4 { width: 100px; } .Xsa4 ~ span { left: 20px; top: 20px; } 74 .Xs2a { width: 40px; } .Xs2a ~ span { left: 40px; } 75 .Xs2a2 { width: 60px; } .Xs2a2 ~ span { left: 40px; top: 20px; } 76 .Xs2a4 { width: 120px; } .Xs2a4 ~ span { left: 40px; top: 20px; } 77 .Xs3a { width: 60px; } .Xs3a ~ span { left: 60px; } 78 .Xs3a2 { width: 80px; } .Xs3a2 ~ span { left: 60px; top: 20px; } 79 .Xs3a4 { width: 140px; } .Xs3a4 ~ span { left: 60px; top: 20px; } 80 81 .nxe { width: 60px; } .nxe ~ span { top: 20px; } 82 .nx3e { width: 100px; } .nx3e ~ span { top: 20px; } 83 .n2x3e { left: 20px; width: 80px; } 84 .Axe { width: 60px; } .Axe ~ span { top: 20px; } 85 .A2xe { left: 20px; width: 40px; } 86 .Ax3e { width: 100px; } .Ax3e ~ span { top: 20px; } 87 .A2x3e { left: 20px; width: 80px; } 88 .Aa { } .Aa ~ span { top: 20px; } 89 .A2a { left: 20px; width: 40px; } 90 .Aa3 { width: 80px; } .Aa3 ~ span { top: 20px; } 91 .AXs { width: 40px; } .AXs ~ span { left:40px; } 92 .A2Xs { width: 60px; } .A2Xs ~ span { left: 40px; top:20px; } 93 ._Xs { } ._Xs ~ span { left: 60px; } 94 ._Xe { left: 60px; } 95 ._xe { } ._xe ~ span { top: 20px; } 96 ._x3e { } ._x3e ~ span { top: 20px; } 97 98 ._xa { } ._xa ~ span { top: 20px; } 99 ._xa3 { } ._xa3 ~ span { top: 20px; } 100 ._xn3 { width: 60px; } ._xn3 ~ span { top: 20px; } 101 ._xn5 { width: 100px; } ._xn5 ~ span { top: 20px; } 102 .Xs_ { } .Xs_ ~ span { left: 20px; } 103 .X2s_ { } .X2s_ ~ span { left: 40px; } 104 .X2e_ { left: 80px; } 105 .A_ { } .A_ ~ span { top: 20px; } 106 .A2_ { left: 20px; } 107 .x3_ { } .x3_ ~ span { top: 20px; } 108 .a2_ { } .a2_ ~ span { top: 20px; } 109 .a-2_ { } .a-2_ ~ span { top: 20px; } 110 ._n { } ._n ~ span { left: 20px; } 111 ._n2 { } ._n2 ~ span { top: 20px; } 112 .A3Xe { left: 60px; } 113 .asA { } .asA ~ span { left: 20px; } 114 .asA2 { } .asA2 ~ span { top: 20px; } 115 .a2sA2 { width: 40px; } .a2sA2 ~ span { left: 20px; top: 20px; } 116 .as1 { } .as1 ~ span { left: 20px; } 117 .as2 { } .as2 ~ span { top: 20px; } 118 .as3 { left: 20px; } 119 120 .c1 { background:grey; } 121 122 </style> 123 </head> 124 <body> 125 126 127 <div style="float:left; width:140px"> 128 <div class="grid"><span class="XeN" ></span><span class="c1"></span></div> 129 <div class="grid"><span class="XsN" ></span><span class="c1"></span></div> 130 <div class="grid"><span class="NeX" ></span><span class="c1"></span></div> 131 <div class="grid"><span class="NsX" ></span><span class="c1"></span></div> 132 <div class="grid"><span class="XeA" ></span><span class="c1"></span></div> 133 <div class="grid"><span class="XsA" ></span><span class="c1"></span></div> 134 <div class="grid"><span class="XsA2"></span><span class="c1"></span></div> 135 <div class="grid"><span class="XsA3"></span><span class="c1"></span></div> 136 <div class="grid"><span class="AsX" ></span><span class="c1"></span></div> 137 <div class="grid"><span class="xsN" ></span><span class="c1"></span></div> 138 <div class="grid"><span class="x2sN"></span><span class="c1"></span></div> 139 <div class="grid"><span class="xsN2"></span><span class="c1"></span></div> 140 <div class="grid"><span class="xXs" ></span><span class="c1"></span></div> 141 <div class="grid"><span class="aXs" ></span><span class="c1"></span></div> 142 <div class="grid"><span class="aXe" ></span><span class="c1"></span></div> 143 <div class="grid"><span class="xXe" ></span><span class="c1"></span></div> 144 </div> 145 146 <div style="float:left; width:140px"> 147 <div class="grid"><span class="AXe" ></span><span class="c1"></span></div> 148 <div class="grid"><span class="A2Xe"></span><span class="c1"></span></div> 149 <div class="grid"><span class="XXe" ></span><span class="c1"></span></div> 150 <div class="grid"><span class="XX3e"></span><span class="c1"></span></div> 151 <div class="grid"><span class="XbXe"></span><span class="c1"></span></div> 152 <div class="grid"><span class="XX0b"></span><span class="c1"></span></div> 153 <div class="grid"><span class="XX1b"></span><span class="c1"></span></div> 154 <div class="grid"><span class="XX2b"></span><span class="c1"></span></div> 155 <div class="grid"><span class="XbN1"></span><span class="c1"></span></div> 156 <div class="grid"><span class="XbN2"></span><span class="c1"></span></div> 157 <div class="grid"><span class="Xbb" ></span><span class="c1"></span></div> 158 <div class="grid"><span class="Xee" ></span><span class="c1"></span></div> 159 <div class="grid"><span class="nX2s"></span><span class="c1"></span></div> 160 <div class="grid"><span class="nXs" ></span><span class="c1"></span></div> 161 <div class="grid"><span class="nXe" ></span><span class="c1"></span></div> 162 <div class="grid"><span class="nX2e"></span><span class="c1"></span></div> 163 </div> 164 165 <div style="float:left; width:140px"> 166 <div class="grid"><span class="nX3e" ></span><span class="c1"></span></div> 167 <div class="grid"><span class="n3Xe" ></span><span class="c1"></span></div> 168 <div class="grid"><span class="n4Xe" ></span><span class="c1"></span></div> 169 <div class="grid"><span class="Xen3" ></span><span class="c1"></span></div> 170 <div class="grid"><span class="Xea" ></span><span class="c1"></span></div> 171 <div class="grid"><span class="Xea2" ></span><span class="c1"></span></div> 172 <div class="grid"><span class="Xea3" ></span><span class="c1"></span></div> 173 <div class="grid"><span class="Xsa" ></span><span class="c1"></span></div> 174 <div class="grid"><span class="Xsa2" ></span><span class="c1"></span></div> 175 <div class="grid"><span class="Xsa4" ></span><span class="c1"></span></div> 176 <div class="grid"><span class="Xs2a" ></span><span class="c1"></span></div> 177 <div class="grid"><span class="Xs2a2"></span><span class="c1"></span></div> 178 <div class="grid"><span class="Xs2a4"></span><span class="c1"></span></div> 179 <div class="grid"><span class="Xs3a" ></span><span class="c1"></span></div> 180 <div class="grid"><span class="Xs3a2"></span><span class="c1"></span></div> 181 <div class="grid"><span class="Xs3a4"></span><span class="c1"></span></div> 182 </div> 183 184 <div style="float:left; width:140px"> 185 <div class="grid"><span class="nxe" ></span><span class="c1"></span></div> 186 <div class="grid"><span class="nx3e" ></span><span class="c1"></span></div> 187 <div class="grid"><span class="n2x3e"></span><span class="c1"></span></div> 188 <div class="grid"><span class="Axe" ></span><span class="c1"></span></div> 189 <div class="grid"><span class="A2xe" ></span><span class="c1"></span></div> 190 <div class="grid"><span class="Ax3e" ></span><span class="c1"></span></div> 191 <div class="grid"><span class="A2x3e"></span><span class="c1"></span></div> 192 <div class="grid"><span class="Aa" ></span><span class="c1"></span></div> 193 <div class="grid"><span class="A2a" ></span><span class="c1"></span></div> 194 <div class="grid"><span class="Aa3" ></span><span class="c1"></span></div> 195 <div class="grid"><span class="AXs" ></span><span class="c1"></span></div> 196 <div class="grid"><span class="A2Xs" ></span><span class="c1"></span></div> 197 <div class="grid"><span class="_Xs" ></span><span class="c1"></span></div> 198 <div class="grid"><span class="_Xe" ></span><span class="c1"></span></div> 199 <div class="grid"><span class="_xe" ></span><span class="c1"></span></div> 200 <div class="grid"><span class="_x3e" ></span><span class="c1"></span></div> 201 </div> 202 203 <div style="float:left; width:140px"> 204 <div class="grid"><span class="_xa" ></span><span class="c1"></span></div> 205 <div class="grid"><span class="_xa3"></span><span class="c1"></span></div> 206 <div class="grid"><span class="_xn3"></span><span class="c1"></span></div> 207 <div class="grid"><span class="_xn5"></span><span class="c1"></span></div> 208 <div class="grid"><span class="Xs_" ></span><span class="c1"></span></div> 209 <div class="grid"><span class="X2s_"></span><span class="c1"></span></div> 210 <div class="grid"><span class="X2e_"></span><span class="c1"></span></div> 211 <div class="grid"><span class="A_" ></span><span class="c1"></span></div> 212 <div class="grid"><span class="A2_" ></span><span class="c1"></span></div> 213 <div class="grid"><span class="x3_" ></span><span class="c1"></span></div> 214 <div class="grid"><span class="a2_" ></span><span class="c1"></span></div> 215 <div class="grid"><span class="a-2_"></span><span class="c1"></span></div> 216 <div class="grid"><span class="_n" ></span><span class="c1"></span></div> 217 <div class="grid"><span class="_n2" ></span><span class="c1"></span></div> 218 <div class="grid"><span class="A3Xe"></span><span class="c1"></span></div> 219 <div class="grid"><span class="asA"></span><span class="c1"></span></div> 220 </div> 221 222 <div style="float:left; width:140px; clear:both"> 223 <div class="grid"><span class="asA2"></span><span class="c1"></span></div> 224 <div class="grid"><span class="a2sA2"></span><span class="c1"></span></div> 225 <div class="grid"><span class="as1"></span><span class="c1"></span></div> 226 <div class="grid"><span class="as2"></span><span class="c1"></span></div> 227 <div class="grid"><span class="as3"></span><span class="c1"></span></div> 228 </div> 229 230 </body> 231 </html>