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