c3a213379754e5c9d833cc77d3f932e90aaf4e8f
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-template-areas-get-set.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet">
5 <style>
6 #gridWithSingleStringTemplate {
7     -webkit-grid-template-areas: "area";
8 }
9
10 #gridWithTwoColumnsTemplate {
11     -webkit-grid-template-areas: "first second";
12 }
13
14 #gridWithTwoRowsTemplate {
15     -webkit-grid-template-areas: "first"
16                                  "second";
17 }
18
19 #gridWithSpanningColumnsTemplate {
20     -webkit-grid-template-areas: "span span";
21 }
22
23 #gridWithSpanningRowsDotTemplate {
24     -webkit-grid-template-areas: "span"
25                                  ".";
26 }
27
28 #gridWithSpanningRowsDotsTemplate {
29     -webkit-grid-template-areas: "span"
30                                  "....";
31 }
32
33 #gridWithDotColumn {
34     -webkit-grid-template-areas: "header ."
35                                  "footer .";
36 }
37
38 #gridWithDotsColumn {
39     -webkit-grid-template-areas: "header ......"
40                                  "footer ......";
41 }
42
43 #gridWithDotCells {
44     -webkit-grid-template-areas: "first ."
45                                  ". second";
46 }
47
48 #gridWithDotsCells {
49     -webkit-grid-template-areas: "first ......"
50                                  "..... second";
51 }
52
53 #gridWithComplexDotAreas {
54     -webkit-grid-template-areas: ". header header ."
55                                  ". . . ."
56                                  "nav main main aside"
57                                  "nav main main aside"
58                                  ". . . aside"
59                                  ". footer footer aside";
60 }
61
62 #gridWithComplexDotsAreas {
63     -webkit-grid-template-areas: "... header header ....."
64                                  "... ...... ...... ....."
65                                  "nav main   main   aside"
66                                  "nav main   main   aside"
67                                  "... ...... ...... aside"
68                                  "... footer footer aside";
69 }
70
71 #gridWithMixedDotAndDotsAreas {
72     -webkit-grid-template-areas: "... title ."
73                                  "..  main main"
74                                  "nav ................... aside"
75                                  ". footer ......";
76 }
77
78 #gridWithDotsNoSpaceTwoColumns {
79     -webkit-grid-template-areas: "...A"
80                                  ".A"
81                                  "B.."
82                                  "B.";
83 }
84
85 #gridWithDotsNoSpaceThreeColumns {
86     -webkit-grid-template-areas: "...A.."
87                                  ".A."
88                                  "B..C"
89                                  "B.C";
90 }
91
92 #gridWithDotsNoSpaceFourColumns {
93     -webkit-grid-template-areas: "...A..B"
94                                  ".A.B"
95                                  "..A.B"
96                                  ".A...B"
97                                  "C....D....."
98                                  "C.D."
99                                  "C...D."
100                                  "C.D....";
101 }
102
103 #gridWithDotsNoSpaceComplex {
104     -webkit-grid-template-areas: ".title...nav. ..main test"
105                                  "... title.nav... .main test"
106                                  "..title .. nav . .. main test"
107                                  ". title .nav... . main test";
108                                  ".... title ...nav ... ...main test";
109 }
110
111 #gridWithHorizontalRectangle {
112     -webkit-grid-template-areas: "a a a"
113                                  "a a a";
114 }
115
116 #gridWithVerticalRectangle {
117     -webkit-grid-template-areas: "a a"
118                                  "a a"
119                                  "a a";
120 }
121
122 </style>
123 <script src="../../resources/js-test-pre.js"></script>
124 </head>
125 <body>
126 <div class="grid" id="gridWithDefaultTemplate"></div>
127 <div class="grid" id="gridWithSingleStringTemplate"></div>
128 <div class="grid" id="gridWithTwoColumnsTemplate"></div>
129 <div class="grid" id="gridWithTwoRowsTemplate"></div>
130 <div class="grid" id="gridWithSpanningColumnsTemplate"></div>
131 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div>
132 <div class="grid" id="gridWithSpanningRowsDotsTemplate"></div>
133 <div class="grid" id="gridWithDotColumn"></div>
134 <div class="grid" id="gridWithDotsColumn"></div>
135 <div class="grid" id="gridWithDotCells"></div>
136 <div class="grid" id="gridWithDotsCells"></div>
137 <div class="grid" id="gridWithComplexDotAreas"></div>
138 <div class="grid" id="gridWithComplexDotsAreas"></div>
139 <div class="grid" id="gridWithMixedDotAndDotsAreas"></div>
140 <div class="grid" id="gridWithDotsNoSpaceTwoColumns"></div>
141 <div class="grid" id="gridWithDotsNoSpaceThreeColumns"></div>
142 <div class="grid" id="gridWithDotsNoSpaceFourColumns"></div>
143 <div class="grid" id="gridWithDotsNoSpaceComplex"></div>
144 <div class="grid" id="gridWithHorizontalRectangle"></div>
145 <div class="grid" id="gridWithVerticalRectangle"></div>
146 <script>
147     description("This test checks that grid-template-areas is properly parsed.");
148
149     function testGridTemplateAreas(gridItemID, expectedResult) {
150         shouldBeEqualToString("getComputedStyle(" + gridItemID + ").getPropertyValue('-webkit-grid-template-areas')", expectedResult);
151     }
152
153     function testJSGridTemplateAreas(element, expectedResult) {
154         this.element = element;
155         shouldBeEqualToString("getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas')", expectedResult);
156     }
157
158     debug("Test getting grid-template-areas set through CSS.");
159     testGridTemplateAreas("gridWithDefaultTemplate", "none");
160     testGridTemplateAreas("gridWithSingleStringTemplate", '"area"');
161     testGridTemplateAreas("gridWithTwoColumnsTemplate", '"first second"');
162     testGridTemplateAreas("gridWithTwoRowsTemplate", '"first" "second"');
163     testGridTemplateAreas("gridWithSpanningColumnsTemplate", '"span span"');
164     testGridTemplateAreas("gridWithSpanningRowsDotTemplate", '"span" "."');
165     testGridTemplateAreas("gridWithSpanningRowsDotsTemplate", '"span" "."');
166     testGridTemplateAreas("gridWithDotColumn", '"header ." "footer ."');
167     testGridTemplateAreas("gridWithDotsColumn", '"header ." "footer ."');
168     testGridTemplateAreas("gridWithDotCells", '"first ." ". second"');
169     testGridTemplateAreas("gridWithDotsCells", '"first ." ". second"');
170     testGridTemplateAreas("gridWithComplexDotAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"');
171     testGridTemplateAreas("gridWithComplexDotsAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"');
172     testGridTemplateAreas("gridWithMixedDotAndDotsAreas", '". title ." ". main main" "nav . aside" ". footer ."');
173     testGridTemplateAreas("gridWithDotsNoSpaceTwoColumns", '". A" ". A" "B ." "B ."');
174     testGridTemplateAreas("gridWithDotsNoSpaceThreeColumns", '". A ." ". A ." "B . C" "B . C"');
175     testGridTemplateAreas("gridWithDotsNoSpaceFourColumns", '". A . B" ". A . B" ". A . B" ". A . B" "C . D ." "C . D ." "C . D ." "C . D ."');
176     testGridTemplateAreas("gridWithDotsNoSpaceComplex", '". title . nav . . main test" ". title . nav . . main test" ". title . nav . . main test" ". title . nav . . main test"');
177     testGridTemplateAreas("gridWithHorizontalRectangle", '"a a a" "a a a"');
178     testGridTemplateAreas("gridWithVerticalRectangle", '"a a" "a a" "a a"');
179
180     debug("Test grid-template-areas: initial");
181     var element = document.createElement("div");
182     document.body.appendChild(element);
183     element.style.webkitGridTemplateAreas = "'foobar'";
184     testJSGridTemplateAreas(element, '"foobar"');
185     element.style.webkitGridTemplateAreas = "initial";
186     testJSGridTemplateAreas(element, 'none');
187     element.style.webkitGridTemplateAreas = "'foobar'";
188     testJSGridTemplateAreas(element, '"foobar"');
189     element.style.webkitGridTemplateAreas = "none";
190     testJSGridTemplateAreas(element, 'none');
191     document.body.removeChild(element);
192
193     debug("Test grid-template-areas: inherit");
194     var parentElement = document.createElement("div");
195     document.body.appendChild(parentElement);
196     parentElement.style.webkitGridTemplateAreas = "'foo bar'";
197     shouldBeEqualToString("getComputedStyle(parentElement).getPropertyValue('-webkit-grid-template-areas')", '"foo bar"');
198
199     var element = document.createElement("div");
200     parentElement.appendChild(element);
201     element.style.webkitGridTemplateAreas = "inherit";
202     testJSGridTemplateAreas(element, '"foo bar"');
203     document.body.removeChild(parentElement);
204
205     debug("Test invalid grid-template-areas values.");
206     var element = document.createElement("div");
207     document.body.appendChild(element);
208
209     // 'nav' is not a rectangular definition.
210     element.style.webkitGridTemplateAreas = "'nav head' 'nav nav'";
211     testJSGridTemplateAreas(element, "none");
212
213     // 'nav' is not contiguous in the column direction.
214     element.style.webkitGridTemplateAreas = "'nav head nav'";
215     testJSGridTemplateAreas(element, "none");
216
217     // 'nav' is not contiguous in the row direction.
218     element.style.webkitGridTemplateAreas = "'nav head' 'middle middle' 'nav footer'";
219     testJSGridTemplateAreas(element, "none");
220
221     // The rows don't have the same number of columns.
222     element.style.webkitGridTemplateAreas = "'nav head' 'foot'";
223     testJSGridTemplateAreas(element, "none");
224
225     // Empty rows.
226     element.style.webkitGridTemplateAreas = "'' ''";
227     testJSGridTemplateAreas(element, "none");
228
229     debug("");
230     debug("FIXME: We currently don't validate that the named grid areas are &lt;indent&gt;.");
231     // <ident> only allows a leading '-'.
232     element.style.webkitGridTemplateAreas = "'nav-up'";
233     testJSGridTemplateAreas(element, "none");
234 </script>
235 <script src="../../resources/js-test-post.js"></script>
236 </body>
237 </html>