third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style type="text/css">
   6
   7   .gridAreas {
   8       grid-template-areas: ". a a"
   9                            "c a a"
  10                            ". . d";
  11   }
  12
  13   .gridAreasSpecial {
  14       grid-template-areas: ". a-start a-start"
  15                            "c a-end a-end"
  16                            ". . d";
  17   }
  18
  19   .gridNoLineNames {
  20       grid-template-columns: 50px 100px 200px;
  21       grid-template-rows: 50px 100px 200px;
  22   }
  23
  24   .gridUniqueNames {
  25       grid-template-columns: [a] 50px [b b-start] 100px [c -start] 200px [d];
  26       grid-template-rows: [e] 50px [f -end] 100px [g g-start] 200px [h];
  27   }
  28
  29   .gridWithNamedLineBeforeGridArea {
  30       grid-template-columns: [a-start c-start] 50px [d-start] 100px 200px;
  31       grid-template-rows: [c-start] 50px [d-start] 100px 200px;
  32   }
  33
  34   .gridWithNamedLineAfterGridArea {
  35       grid-template-columns: 50px 100px [a-start] 200px;
  36       grid-template-rows: 50px 100px [c-start] 200px;
  37   }
  38
  39   .gridWithEndLines {
  40       grid-template-columns: 50px 100px [a-end] 200px [c-end];
  41       grid-template-rows: 50px [c-end] 100px [d-end] 200px;
  42   }
  43
  44   .gridRepeatedNames {
  45       grid-template-columns: [d-start] 50px [d-start] 100px [d-start] 200px;
  46       grid-template-rows: 50px [c-end] 100px [c-end] 200px [c-end];
  47   }
  48
  49   .gridImplicitArea {
  50       grid-template-columns: 50px [z-start] 100px [z-end] 200px;
  51       grid-template-rows: 50px [z-start] 100px 200px [z-end];
  52   }
  53
  54 </style>
  55 <script src="../../resources/check-layout.js"></script>
  56 </head>
  57 <body onload="checkLayout('.grid')">
  58
  59 <p>This test checks that we resolve named grid line per the specification.</p>
  60
  61 <!-- Check positioning using unique grid-line names -->
  62 <div style="position: relative">
  63   <div class="grid gridUniqueNames">
  64     <div class="sizedToGridArea" style="grid-column: b;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  65     <div class="sizedToGridArea" style="grid-row: e;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  66     <div class="sizedToGridArea" style="grid-column: b-start;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
  67     <div class="sizedToGridArea" style="grid-row: g-start;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
  68   </div>
  69 </div>
  70
  71 <div style="position: relative">
  72   <div class="grid gridUniqueNames">
  73     <div class="sizedToGridArea" style="grid-column: b / d;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
  74     <div class="sizedToGridArea" style="grid-row: g / h;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
  75     <div class="sizedToGridArea" style="grid-column: c; grid-row: f;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
  76   </div>
  77 </div>
  78
  79 <!-- Check positioning using unique grid-line names mixed with integers -->
  80 <div style="position: relative">
  81   <div class="grid gridUniqueNames">
  82     <div class="sizedToGridArea" style="grid-column: b / 4;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
  83     <div class="sizedToGridArea" style="grid-row: 3 / h;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
  84     <div class="sizedToGridArea" style="grid-column: 2; grid-row: g;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
  85     <div class="sizedToGridArea" style="grid-column: a; grid-row: 2;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
  86   </div>
  87 </div>
  88
  89 <!-- Check that without named gridAreas there are no implicit grid-line names defined -->
  90 <div style="position: relative">
  91   <div class="grid gridUniqueNames">
  92     <div class="sizedToGridArea" style="grid-column: c-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  93     <div class="sizedToGridArea" style="grid-row: f-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  94     <div class="sizedToGridArea" style="grid-column: c-start; grid-row: f-end" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
  95     <div class="sizedToGridArea" style="grid-column: b-end; grid-row: h-start" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
  96   </div>
  97 </div>
  98
  99 <!-- Check that gridArea's implicit names are well defined -->
 100 <div style="position: relative">
 101   <div class="grid gridAreas gridNoLineNames">
 102     <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d-start;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
 103     <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
 104     <div class="sizedToGridArea" style="grid-column: d-start; grid-row: c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
 105   </div>
 106 </div>
 107
 108 <!-- Check positioning using grid areas -->
 109 <div style="position: relative">
 110   <div class="grid gridAreas gridNoLineNames gridAutoFlowRowDense">
 111     <div class="sizedToGridArea" style="grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
 112     <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
 113     <div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 114     <div class="sizedToGridArea" style="grid-row: c;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
 115   </div>
 116 </div>
 117
 118 <div style="position: relative">
 119   <div class="grid gridAreas gridNoLineNames">
 120     <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
 121     <div class="sizedToGridArea" style="grid-row: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
 122     <div class="sizedToGridArea" style="grid-column: a; grid-row: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="150"></div>
 123   </div>
 124 </div>
 125
 126 <!-- Use grid area's implicit line names if defined before explicitly named grid lines -->
 127 <div style="position: relative">
 128   <div class="grid gridAreas gridWithNamedLineAfterGridArea gridAutoFlowRowDense">
 129     <div class="sizedToGridArea" style="grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
 130     <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
 131     <div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 132     <div class="sizedToGridArea" style="grid-row: c;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
 133   </div>
 134 </div>
 135
 136 <div style="position: relative">
 137   <div class="grid gridAreas gridWithNamedLineAfterGridArea">
 138     <div class="sizedToGridArea" style="grid-column-start: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 139     <div class="sizedToGridArea" style="grid-row-start: c-start;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
 140   </div>
 141 </div>
 142
 143 <div style="position: relative">
 144   <div class="grid gridAreas gridWithNamedLineAfterGridArea">
 145     <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
 146     <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
 147     <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
 148   </div>
 149 </div>
 150
 151 <!-- Use explicitly named grid lines if they're defined before the grid area -->
 152 <div style="position: relative">
 153   <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
 154     <div class="sizedToGridArea" style="grid-column: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
 155     <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
 156     <div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
 157     <div class="sizedToGridArea" style="grid-row: c;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
 158   </div>
 159 </div>
 160
 161 <div style="position: relative">
 162   <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
 163     <div class="sizedToGridArea" style="grid-column-start: d-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 164     <div class="sizedToGridArea" style="grid-row-start: d-start;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
 165   </div>
 166 </div>
 167
 168 <div style="position: relative">
 169   <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
 170     <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
 171     <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="350" data-offset-y="50" data-expected-width="0" data-expected-height="300"></div>
 172     <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300"></div>
 173   </div>
 174 </div>
 175
 176 <!-- Check that a "-start" ident in a end column or a "-end" ident in a start column is not treated as a implicit grid line of a grid area -->
 177 <div style="position: relative">
 178   <div class="grid gridAreas gridNoLineNames">
 179     <div class="sizedToGridArea" style="grid-column: a / a-start; grid-row: d-start;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
 180     <div class="sizedToGridArea" style="grid-column: d / d-start; grid-row: c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
 181     <div class="sizedToGridArea" style="grid-column: c; grid-row: a / a-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 182     <div class="sizedToGridArea" style="grid-column: d; grid-row: c / c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
 183   </div>
 184 </div>
 185
 186 <!-- Check that we propertly resolve explicit "-end" lines inside grid areas -->
 187 <div style="position: relative">
 188   <div class="grid gridAreas gridWithEndLines">
 189     <div class="sizedToGridArea" style="grid-column: a" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 190     <div class="sizedToGridArea" style="grid-column: a; grid-row: c" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
 191     <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
 192     <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
 193   </div>
 194 </div>
 195
 196 <!-- Check that we always pick the first definition when multiple grid lines have the same name -->
 197 <div style="position: relative">
 198   <div class="grid gridAreas gridRepeatedNames">
 199     <div class="sizedToGridArea" style="grid-column: d; grid-row: c" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="100"></div>
 200     <div class="sizedToGridArea" style="grid-column: d-start / d-end; grid-row: c-start / c-end" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="100"></div>
 201     <div class="sizedToGridArea" style="grid-column: c; grid-row: d" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
 202   </div>
 203 </div>
 204
 205 <!-- Check behavior with areas named *-start or *-end -->
 206 <div style="position: relative">
 207   <div class="grid gridAreasSpecial gridNoLineNames">
 208     <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 209     <div class="sizedToGridArea" style="grid-row: a;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 210     <div class="sizedToGridArea" style="grid-column: a; grid-row: a;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
 211   </div>
 212 </div>
 213
 214 <div style="position: relative">
 215   <div class="grid gridAreasSpecial gridNoLineNames">
 216     <div class="sizedToGridArea" style="grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
 217     <div class="sizedToGridArea" style="grid-row: a-end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
 218     <div class="sizedToGridArea" style="grid-column: a-start; grid-row: a-end;" data-offset-x="50" data-offset-y="50" data-expected-width="300" data-expected-height="100"></div>
 219   </div>
 220 </div>
 221
 222 <div style="position: relative">
 223   <div class="grid gridAreasSpecial gridWithNamedLineBeforeGridArea">
 224     <div class="sizedToGridArea" style="grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
 225     <div class="sizedToGridArea" style="grid-row: a-end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
 226     <div class="sizedToGridArea" style="grid-column: a-start; grid-row: a-end;" data-offset-x="50" data-offset-y="50" data-expected-width="300" data-expected-height="100"></div>
 227   </div>
 228 </div>
 229
 230 <div style="position: relative">
 231   <div class="grid gridAreasSpecial gridWithNamedLineAfterGridArea">
 232     <div class="sizedToGridArea" style="grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
 233     <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
 234     <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
 235   </div>
 236 </div>
 237
 238 <!-- Check behavior with lines named *-start or *-end -->
 239 <div style="position: relative">
 240   <div class="grid gridAreasSpecial gridUniqueNames">
 241     <div class="sizedToGridArea" style="grid-column: -start;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
 242     <div class="sizedToGridArea" style="grid-row: -end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
 243     <div class="sizedToGridArea" style="grid-column-end: -start; grid-row-start: -end;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
 244   </div>
 245 </div>
 246
 247 <!-- Check that <custom-ident>-{start|end} named lines define implicit named areas -->
 248 <div style="position: relative">
 249   <div class="grid gridAreas gridImplicitArea">
 250     <div class="sizedToGridArea" style="grid-column: z;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 251     <div class="sizedToGridArea" style="grid-row: z;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
 252     <div class="sizedToGridArea" style="grid-column-end: z; grid-row-start: z;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
 253   </div>
 254 </div>
 255
 256 </body>
 257 </html>