Google Git
Sign in
webkit / WebKit / 9e9f82894faa7708e8af1f05e9d485cbe8db52f4 / . / LayoutTests / fast / css-grid-layout / named-grid-lines-with-named-grid-areas-get-set.html
blob: 1cfe30a19db453076d9348b3e2e93fe7cb7138e6 [file] [log] [blame]
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]1<!DOCTYPE html>
2<html>
3<head>
4<link href="resources/grid.css" rel="stylesheet">
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]5<style type="text/css">
6
7 .gridAreas {
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]8 grid-template-areas: ". a a"
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]9 "c a a"
10 ". . d";
11 }
12
13 .gridNoLineNames {
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]14 grid-template-columns: 50px 100px 200px;
15 grid-template-rows: 50px 100px 200px;
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]16 }
17
18 .gridUniqueNames {
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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];
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]21 }
22
23 .gridWithNamedLineBeforeGridArea {
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]24 grid-template-columns: (a-start c-start) 50px (d-start) 100px 200px;
25 grid-template-rows: (c-start) 50px (d-start) 100px 200px;
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]26 }
27
28 .gridWithNamedLineAfterGridArea {
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]29 grid-template-columns: 50px 100px (a-start) 200px;
30 grid-template-rows: 50px 100px (c-start) 200px;
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]31 }
32
33 .gridWithEndLines {
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]34 grid-template-columns: 50px 100px (a-end) 200px (c-end);
35 grid-template-rows: 50px (c-end) 100px (d-end) 200px;
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]36 }
37
38 .gridRepeatedNames {
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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);
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]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">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]53 </div>
54</div>
55
56<div style="position: relative">
57 <div class="grid gridUniqueNames">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]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">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]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">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]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">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]90 </div>
91</div>
92
93<!-- Check positioning using grid areas -->
94<div style="position: relative">
95 <div class="grid gridAreas gridNoLineNames">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]100 </div>
101</div>
102
103<div style="position: relative">
104 <div class="grid gridAreas gridNoLineNames">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]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">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]118 </div>
119</div>
120
121<div style="position: relative">
122 <div class="grid gridAreas gridWithNamedLineAfterGridArea">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]125 </div>
126</div>
127
128<div style="position: relative">
129 <div class="grid gridAreas gridWithNamedLineAfterGridArea">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]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">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]142 </div>
143</div>
144
145<div style="position: relative">
146 <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]149 </div>
150</div>
151
152<div style="position: relative">
153 <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]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">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]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">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]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">
rego@igalia.com92508232016-05-06 08:17:12 +0000[diff] [blame]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>
svillar@igalia.comb1c61b92014-03-26 16:45:21 +0000[diff] [blame]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>