layout/reftests/css-grid/grid-placement-definite-implicit-002-ref.html

   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>