third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .gridWithoutRepeat {
   7     grid-template-columns: [a] 50px [b] 100px [c] 200px [d];
   8     grid-template-rows: [e] 50px [f] 100px [g] 200px [h];
   9 }
  10
  11 .gridWithRepeat {
  12     grid-template-columns: [b] 50px [b] 100px [b] 200px [b];
  13     grid-template-rows: [g] 50px [g] 100px [g] 200px [g];
  14 }
  15
  16 .gridFromSpecs {
  17     grid-template-columns: [A] 10px [B] 20px [C] 30px [A] 40px [B] 50px [C] 60px [A] 70px [B] 80px [C];
  18     grid-template-rows: 100px;
  19 }
  20
  21 .gridItemBToD {
  22     grid-column: b / d;
  23     grid-row: 1;
  24 }
  25
  26 .gridItemGToH {
  27     grid-column: 1;
  28     grid-row: g / h;
  29 }
  30
  31 .gridItemInvalidNegativeGridLine {
  32     grid-column: 1 / -1 nonexistent;
  33     grid-row: span 2 / -10 nonexistent;
  34 }
  35
  36 .gridItemAToSpanC {
  37     grid-column: a / span c;
  38     grid-row: 1;
  39 }
  40
  41 .gridItemFToSpanH {
  42     grid-column: 1;
  43     grid-row: f span / h;
  44 }
  45
  46 .gridItem2BSpan2B {
  47     grid-column: 2 b / span 2 b;
  48     grid-row: 1;
  49 }
  50
  51 .gridItemSpan2GNegativeG {
  52     grid-column: 1;
  53     grid-row: span 2 g / -1 g;
  54 }
  55 </style>
  56 <script src="../../resources/check-layout.js"></script>
  57 </head>
  58 <body onload="checkLayout('.grid')">
  59
  60 <p>This test checks that we resolve named grid line per the specification.</p>
  61
  62 <div style="position: relative">
  63     <div class="grid gridWithoutRepeat">
  64         <div class="sizedToGridArea gridItemBToD" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
  65     </div>
  66 </div>
  67
  68 <div style="position: relative">
  69     <div class="grid gridWithoutRepeat">
  70         <div class="sizedToGridArea gridItemGToH" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
  71     </div>
  72 </div>
  73
  74
  75 <div style="position: relative">
  76     <div class="grid gridWithRepeat">
  77         <div class="sizedToGridArea gridItemBToD" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  78     </div>
  79 </div>
  80
  81 <div style="position: relative">
  82     <div class="grid gridWithRepeat">
  83         <div class="sizedToGridArea gridItemGToH" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  84     </div>
  85 </div>
  86
  87 <div style="position: relative">
  88     <div class="grid gridWithoutRepeat">
  89         <div class="sizedToGridArea gridItemInvalidNegativeGridLine" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300"></div>
  90     </div>
  91 </div>
  92 </div>
  93
  94 <div style="position: relative">
  95     <div class="grid gridWithoutRepeat">
  96         <div class="sizedToGridArea gridItemAToSpanC" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
  97     </div>
  98 </div>
  99
 100 <div style="position: relative">
 101     <div class="grid gridWithoutRepeat">
 102         <div class="sizedToGridArea gridItemFToSpanH" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
 103     </div>
 104 </div>
 105
 106 <div style="position: relative">
 107     <div class="grid gridWithoutRepeat">
 108         <!-- There is only one 'b' so we should pick this one. Also span 2 'b' should resolve to the same 'b'.
 109             Thus being actually 'b' / span 1. -->
 110         <div class="sizedToGridArea gridItem2BSpan2B" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 111     </div>
 112 </div>
 113
 114 <div style="position: relative">
 115     <div class="grid gridWithoutRepeat">
 116         <!-- There is only one 'g' so we should pick this one. Also both initial and final position are equal so
 117             this is resolved as span 1 / 'g'. -->
 118         <div class="sizedToGridArea gridItemSpan2GNegativeG" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
 119     </div>
 120 </div>
 121
 122 <div style="position: relative">
 123     <div class="grid gridWithRepeat">
 124         <!-- There is no 'a' or 'c' so it should default to auto / auto. -->
 125         <div class="sizedToGridArea gridItemAToSpanC" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 126     </div>
 127 </div>
 128
 129 <div style="position: relative">
 130     <div class="grid gridWithRepeat">
 131         <!-- There is no 'f' or 'h' so it should default to auto / auto. -->
 132         <div class="sizedToGridArea gridItemFToSpanH" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 133     </div>
 134 </div>
 135
 136 <div style="position: relative">
 137     <div class="grid gridWithRepeat">
 138         <div class="sizedToGridArea gridItem2BSpan2B" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
 139     </div>
 140 </div>
 141
 142 <div style="position: relative">
 143     <div class="grid gridWithRepeat">
 144         <div class="sizedToGridArea gridItemSpan2GNegativeG" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
 145     </div>
 146 </div>
 147
 148 <div style="position: relative">
 149     <div class="grid gridFromSpecs">
 150       <div class="sizedToGridArea" style="grid-column: 4 / auto;" data-offset-x="60" data-expected-width="40"></div>
 151     </div>
 152 </div>
 153
 154 <div style="position: relative">
 155     <div class="grid gridFromSpecs">
 156       <div class="sizedToGridArea" style="grid-column: auto / 6;" data-offset-x="100" data-expected-width="50"></div>
 157     </div>
 158 </div>
 159
 160 <div style="position: relative">
 161     <div class="grid gridFromSpecs">
 162       <div class="sizedToGridArea" style="grid-column: C / C -1;" data-offset-x="30" data-expected-width="330"></div>
 163     </div>
 164 </div>
 165
 166 <div style="position: relative">
 167     <div class="grid gridFromSpecs">
 168       <div class="sizedToGridArea" style="grid-column: C / span C;" data-offset-x="30" data-expected-width="120"></div>
 169     </div>
 170 </div>
 171
 172 <div style="position: relative">
 173     <div class="grid gridFromSpecs">
 174       <div class="sizedToGridArea" style="grid-column: span C / C -1;" data-offset-x="150" data-expected-width="210"></div>
 175     </div>
 176 </div>
 177
 178 <div style="position: relative">
 179     <div class="grid gridFromSpecs">
 180       <div class="sizedToGridArea" style="grid-column: span C / span C;" data-offset-x="0" data-expected-width="10"></div>
 181     </div>
 182 </div>
 183
 184 <div style="position: relative">
 185     <div class="grid gridFromSpecs">
 186       <div class="sizedToGridArea" style="grid-column: 5 / C -1;" data-offset-x="100" data-expected-width="260"></div>
 187     </div>
 188 </div>
 189
 190 <div style="position: relative">
 191     <div class="grid gridFromSpecs">
 192       <div class="sizedToGridArea" style="grid-column: 5 / span C;" data-offset-x="100" data-expected-width="50"></div>
 193     </div>
 194 </div>
 195
 196 <div style="position: relative">
 197     <div class="grid gridFromSpecs">
 198       <div class="sizedToGridArea" style="grid-column: 8 / 8;" data-offset-x="280" data-expected-width="80"></div>
 199     </div>
 200 </div>
 201
 202 <div style="position: relative">
 203     <div class="grid gridFromSpecs">
 204       <div class="sizedToGridArea" style="grid-column: B 2 / span 1;" data-offset-x="100" data-expected-width="50"></div>
 205     </div>
 206 </div>
 207
 208 </body>
 209 </html>