Unreviewed, rolling out r185492.
[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 #gridWithHorizontalRectangle {
79     -webkit-grid-template-areas: "a a a"
80                                  "a a a";
81 }
82
83 #gridWithVerticalRectangle {
84     -webkit-grid-template-areas: "a a"
85                                  "a a"
86                                  "a a";
87 }
88
89 </style>
90 <script src="../../resources/js-test-pre.js"></script>
91 </head>
92 <body>
93 <div class="grid" id="gridWithDefaultTemplate"></div>
94 <div class="grid" id="gridWithSingleStringTemplate"></div>
95 <div class="grid" id="gridWithTwoColumnsTemplate"></div>
96 <div class="grid" id="gridWithTwoRowsTemplate"></div>
97 <div class="grid" id="gridWithSpanningColumnsTemplate"></div>
98 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div>
99 <div class="grid" id="gridWithSpanningRowsDotsTemplate"></div>
100 <div class="grid" id="gridWithDotColumn"></div>
101 <div class="grid" id="gridWithDotsColumn"></div>
102 <div class="grid" id="gridWithDotCells"></div>
103 <div class="grid" id="gridWithDotsCells"></div>
104 <div class="grid" id="gridWithComplexDotAreas"></div>
105 <div class="grid" id="gridWithComplexDotsAreas"></div>
106 <div class="grid" id="gridWithMixedDotAndDotsAreas"></div>
107 <div class="grid" id="gridWithHorizontalRectangle"></div>
108 <div class="grid" id="gridWithVerticalRectangle"></div>
109 <script>
110     description("This test checks that grid-template-areas is properly parsed.");
111
112     function testGridTemplateAreas(gridItemID, expectedResult) {
113         shouldBeEqualToString("getComputedStyle(" + gridItemID + ").getPropertyValue('-webkit-grid-template-areas')", expectedResult);
114     }
115
116     function testJSGridTemplateAreas(element, expectedResult) {
117         this.element = element;
118         shouldBeEqualToString("getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas')", expectedResult);
119     }
120
121     debug("Test getting grid-template-areas set through CSS.");
122     testGridTemplateAreas("gridWithDefaultTemplate", "none");
123     testGridTemplateAreas("gridWithSingleStringTemplate", '"area"');
124     testGridTemplateAreas("gridWithTwoColumnsTemplate", '"first second"');
125     testGridTemplateAreas("gridWithTwoRowsTemplate", '"first" "second"');
126     testGridTemplateAreas("gridWithSpanningColumnsTemplate", '"span span"');
127     testGridTemplateAreas("gridWithSpanningRowsDotTemplate", '"span" "."');
128     testGridTemplateAreas("gridWithSpanningRowsDotsTemplate", '"span" "."');
129     testGridTemplateAreas("gridWithDotColumn", '"header ." "footer ."');
130     testGridTemplateAreas("gridWithDotsColumn", '"header ." "footer ."');
131     testGridTemplateAreas("gridWithDotCells", '"first ." ". second"');
132     testGridTemplateAreas("gridWithDotsCells", '"first ." ". second"');
133     testGridTemplateAreas("gridWithComplexDotAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"');
134     testGridTemplateAreas("gridWithComplexDotsAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"');
135     testGridTemplateAreas("gridWithMixedDotAndDotsAreas", '". title ." ". main main" "nav . aside" ". footer ."');
136     testGridTemplateAreas("gridWithHorizontalRectangle", '"a a a" "a a a"');
137     testGridTemplateAreas("gridWithVerticalRectangle", '"a a" "a a" "a a"');
138
139     debug("Test grid-template-areas: initial");
140     var element = document.createElement("div");
141     document.body.appendChild(element);
142     element.style.webkitGridTemplateAreas = "'foobar'";
143     testJSGridTemplateAreas(element, '"foobar"');
144     element.style.webkitGridTemplateAreas = "initial";
145     testJSGridTemplateAreas(element, 'none');
146     element.style.webkitGridTemplateAreas = "'foobar'";
147     testJSGridTemplateAreas(element, '"foobar"');
148     element.style.webkitGridTemplateAreas = "none";
149     testJSGridTemplateAreas(element, 'none');
150     document.body.removeChild(element);
151
152     debug("Test grid-template-areas: inherit");
153     var parentElement = document.createElement("div");
154     document.body.appendChild(parentElement);
155     parentElement.style.webkitGridTemplateAreas = "'foo bar'";
156     shouldBeEqualToString("getComputedStyle(parentElement).getPropertyValue('-webkit-grid-template-areas')", '"foo bar"');
157
158     var element = document.createElement("div");
159     parentElement.appendChild(element);
160     element.style.webkitGridTemplateAreas = "inherit";
161     testJSGridTemplateAreas(element, '"foo bar"');
162     document.body.removeChild(parentElement);
163
164     debug("Test invalid grid-template-areas values.");
165     var element = document.createElement("div");
166     document.body.appendChild(element);
167
168     // 'nav' is not a rectangular definition.
169     element.style.webkitGridTemplateAreas = "'nav head' 'nav nav'";
170     testJSGridTemplateAreas(element, "none");
171
172     // 'nav' is not contiguous in the column direction.
173     element.style.webkitGridTemplateAreas = "'nav head nav'";
174     testJSGridTemplateAreas(element, "none");
175
176     // 'nav' is not contiguous in the row direction.
177     element.style.webkitGridTemplateAreas = "'nav head' 'middle middle' 'nav footer'";
178     testJSGridTemplateAreas(element, "none");
179
180     // The rows don't have the same number of columns.
181     element.style.webkitGridTemplateAreas = "'nav head' 'foot'";
182     testJSGridTemplateAreas(element, "none");
183
184     // Empty rows.
185     element.style.webkitGridTemplateAreas = "'' ''";
186     testJSGridTemplateAreas(element, "none");
187
188     debug("");
189     debug("FIXME: We currently don't validate that the named grid areas are &lt;indent&gt;.");
190     // <ident> only allows a leading '-'.
191     element.style.webkitGridTemplateAreas = "'nav-up'";
192     testJSGridTemplateAreas(element, "none");
193 </script>
194 <script src="../../resources/js-test-post.js"></script>
195 </body>
196 </html>