third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set.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   .gridNoLineNames {
  14       grid-template-columns: 50px 100px 200px;
  15       grid-template-rows: 50px 100px 200px;
  16   }
  17
  18   .gridUniqueNames {
  19       grid-template-columns: [a] 50px [b b-start] 100px [c] 200px [d];
  20       grid-template-rows: [e] 50px [f] 100px [g g-start] 200px [h];
  21   }
  22
  23   .gridWithNamedLineBeforeGridArea {
  24       grid-template-columns: [a-start c-start] 50px [d-start] 100px 200px;
  25       grid-template-rows: [c-start] 50px [d-start] 100px 200px;
  26   }
  27
  28   .gridWithNamedLineAfterGridArea {
  29       grid-template-columns: 50px 100px [a-start] 200px;
  30       grid-template-rows: 50px 100px [c-start] 200px;
  31   }
  32
  33   .gridWithEndLines {
  34       grid-template-columns: 50px 100px [a-end] 200px [c-end];
  35       grid-template-rows: 50px [c-end] 100px [d-end] 200px;
  36   }
  37
  38   .gridRepeatedNames {
  39       grid-template-columns: [d-start] 50px [d-start] 100px [d-start] 200px;
  40       grid-template-rows: 50px [c-end] 100px [c-end] 200px [c-end];
  41   }
  42
  43 </style>
  44 <script src="../../resources/js-test.js"></script>
  45 </head>
  46 <body>
  47 <div style="position: relative">
  48   <div class="grid gridUniqueNames">
  49     <div class="sizedToGridArea" style="grid-column: b;" id="GridUniqueColumnB"></div>
  50     <div class="sizedToGridArea" style="grid-row: e;" id="GridUniqueRowE"></div>
  51     <div class="sizedToGridArea" style="grid-column: b-start;" id="GridUniqueColumnBStart"></div>
  52     <div class="sizedToGridArea" style="grid-row: g-start;" id="GridUniqueRowGStart"></div>
  53   </div>
  54 </div>
  55
  56 <div style="position: relative">
  57   <div class="grid gridUniqueNames">
  58     <div class="sizedToGridArea" style="grid-column: b / d;" id="GridUniqueColumnBD"></div>
  59     <div class="sizedToGridArea" style="grid-row: g / h;" id="GridUniqueRowGH"></div>
  60     <div class="sizedToGridArea" style="grid-column: c; grid-row: f;" id="GridUniqueColumnCRowF"></div>
  61   </div>
  62 </div>
  63
  64 <!-- Check positioning using unique grid-line names mixed with integers -->
  65 <div style="position: relative">
  66   <div class="grid gridUniqueNames">
  67     <div class="sizedToGridArea" style="grid-column: b / 4;" id="GridUniqueColumnBInteger"></div>
  68     <div class="sizedToGridArea" style="grid-row: 3 / h;" id="GridUniqueRowIntegerH"></div>
  69     <div class="sizedToGridArea" style="grid-column: 2; grid-row: g;" id="GridUniqueColumnIntegerRowG"></div>
  70     <div class="sizedToGridArea" style="grid-column: a; grid-row: 2;" id="GridUniqueColumnARowInteger"></div>
  71   </div>
  72 </div>
  73
  74 <!-- Check that without named gridAreas there are no implicit grid-line names defined -->
  75 <div style="position: relative">
  76   <div class="grid gridUniqueNames">
  77     <div class="sizedToGridArea" style="grid-column: c-start;" id="GridUniqueColumnCStart"></div>
  78     <div class="sizedToGridArea" style="grid-row: f-start;" id="GridUniqueRowFStart"></div>
  79     <div class="sizedToGridArea" style="grid-column: c-start; grid-row: f-end" id="GridUniqueColumnCStartRowFEnd"></div>
  80     <div class="sizedToGridArea" style="grid-column: b-end; grid-row: h-start" id="GridUniqueColumnBEndRowHStart"></div>
  81   </div>
  82 </div>
  83
  84 <!-- Check that gridArea's implicit names are well defined -->
  85 <div style="position: relative">
  86   <div class="grid gridAreas gridNoLineNames">
  87     <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d-start;" id="GridAreasNoNamesColumnAStartRowDStart"></div>
  88     <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d;" id="GridAreasNoNamesColumnAStartRowD"></div>
  89     <div class="sizedToGridArea" style="grid-column: d-start; grid-row: c-start;"id="GridAreasNoNamesColumnDStartRowCStart"></div>
  90   </div>
  91 </div>
  92
  93 <!-- Check positioning using grid areas -->
  94 <div style="position: relative">
  95   <div class="grid gridAreas gridNoLineNames">
  96     <div class="sizedToGridArea" style="grid-column: d;" id="GridAreasNoNamesColumnD"></div>
  97     <div class="sizedToGridArea" style="grid-row: d;" id="GridAreasNoNamesRowD"></div>
  98     <div class="sizedToGridArea" style="grid-column: c;" id="GridAreasNoNamesColumnC"></div>
  99     <div class="sizedToGridArea" style="grid-row: c;" id="GridAreasNoNamesRowC"></div>
 100   </div>
 101 </div>
 102
 103 <div style="position: relative">
 104   <div class="grid gridAreas gridNoLineNames">
 105     <div class="sizedToGridArea" style="grid-column: a;" id="GridAreasNoNamesColumnA"></div>
 106     <div class="sizedToGridArea" style="grid-row: a;" id="GridAreasNoNamesRowA"></div>
 107     <div class="sizedToGridArea" style="grid-column: a; grid-row: a;" id="GridAreasNoNamesColumnARowA"></div>
 108   </div>
 109 </div>
 110
 111 <!-- Use grid area's implicit line names if defined before explicitly named grid lines -->
 112 <div style="position: relative">
 113   <div class="grid gridAreas gridWithNamedLineAfterGridArea">
 114     <div class="sizedToGridArea" style="grid-column: d;" id="GridAreasNamedLineAfterColumnD"></div>
 115     <div class="sizedToGridArea" style="grid-row: d;" id="GridAreasNamedLineAfterRowD"></div>
 116     <div class="sizedToGridArea" style="grid-column: c;" id="GridAreasNamedLineAfterColumnC"></div>
 117     <div class="sizedToGridArea" style="grid-row: c;" id="GridAreasNamedLineAfterRowC"></div>
 118   </div>
 119 </div>
 120
 121 <div style="position: relative">
 122   <div class="grid gridAreas gridWithNamedLineAfterGridArea">
 123     <div class="sizedToGridArea" style="grid-column-start: a-start;" id="GridAreasNamedLineAfterColumnStartAStart"></div>
 124     <div class="sizedToGridArea" style="grid-row-start: c-start;" id="GridAreasNamedLineAfterRowStartCStart"></div>
 125   </div>
 126 </div>
 127
 128 <div style="position: relative">
 129   <div class="grid gridAreas gridWithNamedLineAfterGridArea">
 130     <div class="sizedToGridArea" style="grid-column: a;" id="GridAreasNamedLineAfterColumnA"></div>
 131     <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" id="GridAreasNamedLineAfterColumnARowD"></div>
 132   </div>
 133 </div>
 134
 135 <!-- Use explicitly named grid lines if they're defined before the grid area -->
 136 <div style="position: relative">
 137   <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
 138     <div class="sizedToGridArea" style="grid-column: d;" id="GridAreasNamedLineBeforeColumnD"></div>
 139     <div class="sizedToGridArea" style="grid-row: d;" id="GridAreasNamedLineBeforeRowD"></div>
 140     <div class="sizedToGridArea" style="grid-column: c;" id="GridAreasNamedLineBeforeColumnC"></div>
 141     <div class="sizedToGridArea" style="grid-row: c;" id="GridAreasNamedLineBeforeRowC"></div>
 142   </div>
 143 </div>
 144
 145 <div style="position: relative">
 146   <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
 147     <div class="sizedToGridArea" style="grid-column-start: d-start;" id="GridAreasNamedLineBeforeColumnStartDStart"></div>
 148     <div class="sizedToGridArea" style="grid-row-start: d-start;" id="GridAreasNamedLineBeforeRowStartDStart"></div>
 149   </div>
 150 </div>
 151
 152 <div style="position: relative">
 153   <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
 154     <div class="sizedToGridArea" style="grid-column: a;" id="GridAreasNamedLineBeforeColumnA"></div>
 155     <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" id="GridAreasNamedLineBeforeColumnARowD"></div>
 156   </div>
 157 </div>
 158
 159 <!-- 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 -->
 160 <div style="position: relative">
 161   <div class="grid gridAreas gridNoLineNames">
 162     <div class="sizedToGridArea" style="grid-column: a / a-start; grid-row: d-start;" id="GridAreasNoNamesColumnAAStartRowDStart"></div>
 163     <div class="sizedToGridArea" style="grid-column: d / d-start; grid-row: c-start;" id="GridAreasNoNamesColumnDDStartRowCStart"></div>
 164     <div class="sizedToGridArea" style="grid-column: c; grid-row: a / a-start;" id="GridAreasNoNamesColumnCRowAAStart"></div>
 165     <div class="sizedToGridArea" style="grid-column: d; grid-row: c / c-start;" id="GridAreasNoNamesColumnDRowCCStart"></div>
 166   </div>
 167 </div>
 168
 169 <!-- Check that we propertly resolve explicit "-end" lines inside grid areas -->
 170 <div style="position: relative">
 171   <div class="grid gridAreas gridWithEndLines">
 172     <div class="sizedToGridArea" style="grid-column: a" id="GridAreasEnd"></div>
 173     <div class="sizedToGridArea" style="grid-column: a; grid-row: c" id="GridAreasEndColumnARowC"></div>
 174     <div class="sizedToGridArea" style="grid-row: d;" id="GridAreasEndRowD"></div>
 175     <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" id="GridAreasEndColumnARowD"></div>
 176   </div>
 177 </div>
 178
 179 <!-- Check that we always pick the first definition when multiple grid lines have the same name -->
 180 <div style="position: relative">
 181   <div class="grid gridAreas gridRepeatedNames">
 182     <div class="sizedToGridArea" style="grid-column: d; grid-row: c" id="GridAreasRepeatColumnDRowC"></div>
 183     <div class="sizedToGridArea" style="grid-column: d-start / d-end; grid-row: c-start / c-end" id="GridAreasRepeatColumnDStartDEndRowCStartCEnd"></div>
 184     <div class="sizedToGridArea" style="grid-column: c; grid-row: d" id="GridAreasRepeatColumnCRowD"></div>
 185   </div>
 186 </div>
 187
 188 <script src="resources/grid-item-column-row-parsing-utils.js"></script>
 189 <script>
 190   testColumnRowCSSParsing("GridUniqueColumnB", "b / b", "auto / auto");
 191   testColumnRowCSSParsing("GridUniqueRowE", "auto / auto", "e / e");
 192   testColumnRowCSSParsing("GridUniqueColumnBStart", "b-start / b-start", "auto / auto");
 193   testColumnRowCSSParsing("GridUniqueRowGStart", "auto / auto", "g-start / g-start");
 194
 195   testColumnRowCSSParsing("GridUniqueColumnBD", "b / d", "auto / auto");
 196   testColumnRowCSSParsing("GridUniqueRowGH", "auto / auto", "g / h");
 197   testColumnRowCSSParsing("GridUniqueColumnCRowF", "c / c", "f / f");
 198
 199   testColumnRowCSSParsing("GridUniqueColumnBInteger", "b / 4", "auto / auto");
 200   testColumnRowCSSParsing("GridUniqueRowIntegerH", "auto / auto", "3 / h");
 201   testColumnRowCSSParsing("GridUniqueColumnIntegerRowG", "2 / auto", "g / g");
 202   testColumnRowCSSParsing("GridUniqueColumnARowInteger", "a / a", "2 / auto");
 203
 204   testColumnRowCSSParsing("GridUniqueColumnCStart", "c-start / c-start", "auto / auto");
 205   testColumnRowCSSParsing("GridUniqueRowFStart", "auto / auto", "f-start / f-start");
 206   testColumnRowCSSParsing("GridUniqueColumnCStartRowFEnd", "c-start / c-start", "f-end / f-end");
 207   testColumnRowCSSParsing("GridUniqueColumnBEndRowHStart", "b-end / b-end", "h-start / h-start");
 208
 209   testColumnRowCSSParsing("GridAreasNoNamesColumnAStartRowDStart", "a-start / a-start", "d-start / d-start");
 210   testColumnRowCSSParsing("GridAreasNoNamesColumnAStartRowD", "a-start / a-start", "d / d");
 211   testColumnRowCSSParsing("GridAreasNoNamesColumnDStartRowCStart", "d-start / d-start", "c-start / c-start");
 212
 213   testColumnRowCSSParsing("GridAreasNoNamesColumnD", "d / d", "auto / auto");
 214   testColumnRowCSSParsing("GridAreasNoNamesRowD", "auto / auto", "d / d");
 215   testColumnRowCSSParsing("GridAreasNoNamesColumnC", "c / c", "auto / auto");
 216   testColumnRowCSSParsing("GridAreasNoNamesRowC", "auto / auto", "c / c");
 217
 218   testColumnRowCSSParsing("GridAreasNoNamesColumnA", "a / a", "auto / auto");
 219   testColumnRowCSSParsing("GridAreasNoNamesRowA", "auto / auto", "a / a");
 220   testColumnRowCSSParsing("GridAreasNoNamesColumnARowA", "a / a", "a / a");
 221
 222   testColumnRowCSSParsing("GridAreasNamedLineAfterColumnD", "d / d", "auto / auto");
 223   testColumnRowCSSParsing("GridAreasNamedLineAfterRowD", "auto / auto", "d / d");
 224   testColumnRowCSSParsing("GridAreasNamedLineAfterColumnC", "c / c", "auto / auto");
 225   testColumnRowCSSParsing("GridAreasNamedLineAfterRowC", "auto / auto", "c / c");
 226
 227   testColumnRowCSSParsing("GridAreasNamedLineAfterColumnStartAStart", "a-start / auto", "auto / auto");
 228   testColumnRowCSSParsing("GridAreasNamedLineAfterRowStartCStart", "auto / auto", "c-start / auto");
 229
 230   testColumnRowCSSParsing("GridAreasNamedLineAfterColumnA", "a / a", "auto / auto");
 231   testColumnRowCSSParsing("GridAreasNamedLineAfterColumnARowD", "a / a", "d / d");
 232
 233   testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnD", "d / d", "auto / auto");
 234   testColumnRowCSSParsing("GridAreasNamedLineBeforeRowD", "auto / auto", "d / d");
 235   testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnC", "c / c", "auto / auto");
 236   testColumnRowCSSParsing("GridAreasNamedLineBeforeRowC", "auto / auto", "c / c");
 237
 238   testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnStartDStart", "d-start / auto", "auto / auto");
 239   testColumnRowCSSParsing("GridAreasNamedLineBeforeRowStartDStart", "auto / auto", "d-start / auto");
 240
 241   testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnA", "a / a", "auto / auto");
 242   testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnARowD", "a / a", "d / d");
 243
 244   testColumnRowCSSParsing("GridAreasNoNamesColumnAAStartRowDStart", "a / a-start", "d-start / d-start");
 245   testColumnRowCSSParsing("GridAreasNoNamesColumnDDStartRowCStart", "d / d-start", "c-start / c-start");
 246   testColumnRowCSSParsing("GridAreasNoNamesColumnCRowAAStart", "c / c", "a / a-start");
 247   testColumnRowCSSParsing("GridAreasNoNamesColumnDRowCCStart", "d / d", "c / c-start");
 248
 249   testColumnRowCSSParsing("GridAreasEnd", "a / a", "auto / auto");
 250   testColumnRowCSSParsing("GridAreasEndColumnARowC", "a / a", "c / c");
 251   testColumnRowCSSParsing("GridAreasEndRowD", "auto / auto", "d / d");
 252   testColumnRowCSSParsing("GridAreasEndColumnARowD", "a / a", "d / d");
 253
 254   testColumnRowCSSParsing("GridAreasRepeatColumnDRowC", "d / d", "c / c");
 255   testColumnRowCSSParsing("GridAreasRepeatColumnDStartDEndRowCStartCEnd", "d-start / d-end", "c-start / c-end");
 256   testColumnRowCSSParsing("GridAreasRepeatColumnCRowD", "c / c", "d / d");
 257 </script>
 258 </body>
 259 </html>