[CSS Grid Layout] Remove runtime feature
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-template-areas-get-set.html
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
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 #gridWithDotColumn {
29     -webkit-grid-template-areas: "header ."
30                                  "footer .";
31 }
32
33 #gridWithHorizontalRectangle {
34     -webkit-grid-template-areas: "a a a"
35                                  "a a a";
36 }
37
38 #gridWithVerticalRectangle {
39     -webkit-grid-template-areas: "a a"
40                                  "a a"
41                                  "a a";
42 }
43
44 </style>
45 <script src="../../resources/js-test-pre.js"></script>
46 </head>
47 <body>
48 <div class="grid" id="gridWithDefaultTemplate"></div>
49 <div class="grid" id="gridWithSingleStringTemplate"></div>
50 <div class="grid" id="gridWithTwoColumnsTemplate"></div>
51 <div class="grid" id="gridWithTwoRowsTemplate"></div>
52 <div class="grid" id="gridWithSpanningColumnsTemplate"></div>
53 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div>
54 <div class="grid" id="gridWithDotColumn"></div>
55 <div class="grid" id="gridWithHorizontalRectangle"></div>
56 <div class="grid" id="gridWithVerticalRectangle"></div>
57 <script>
58     description("This test checks that grid-template-areas is properly parsed.");
59
60     function testGridTemplateAreas(gridItemID, expectedResult) {
61         shouldBeEqualToString("getComputedStyle(" + gridItemID + ").getPropertyValue('-webkit-grid-template-areas')", expectedResult);
62     }
63
64     function testJSGridTemplateAreas(element, expectedResult) {
65         this.element = element;
66         shouldBeEqualToString("getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas')", expectedResult);
67     }
68
69     debug("Test getting grid-template-areas set through CSS.");
70     testGridTemplateAreas("gridWithDefaultTemplate", "none");
71     testGridTemplateAreas("gridWithSingleStringTemplate", '"area"');
72     testGridTemplateAreas("gridWithTwoColumnsTemplate", '"first second"');
73     testGridTemplateAreas("gridWithTwoRowsTemplate", '"first" "second"');
74     testGridTemplateAreas("gridWithSpanningColumnsTemplate", '"span span"');
75     testGridTemplateAreas("gridWithSpanningRowsDotTemplate", '"span" "."');
76     testGridTemplateAreas("gridWithDotColumn", '"header ." "footer ."');
77     testGridTemplateAreas("gridWithHorizontalRectangle", '"a a a" "a a a"');
78     testGridTemplateAreas("gridWithVerticalRectangle", '"a a" "a a" "a a"');
79
80     debug("Test grid-template-areas: initial");
81     var element = document.createElement("div");
82     document.body.appendChild(element);
83     element.style.webkitGridTemplateAreas = "'foobar'";
84     testJSGridTemplateAreas(element, '"foobar"');
85     element.style.webkitGridTemplateAreas = "initial";
86     document.body.removeChild(element);
87
88     debug("Test grid-template-areas: inherit");
89     var parentElement = document.createElement("div");
90     document.body.appendChild(parentElement);
91     parentElement.style.webkitGridTemplateAreas = "'foo bar'";
92     shouldBeEqualToString("getComputedStyle(parentElement).getPropertyValue('-webkit-grid-template-areas')", '"foo bar"');
93
94     var element = document.createElement("div");
95     parentElement.appendChild(element);
96     element.style.webkitGridTemplateAreas = "inherit";
97     testJSGridTemplateAreas(element, '"foo bar"');
98     document.body.removeChild(parentElement);
99
100     debug("Test invalid grid-template-areas values.");
101     var element = document.createElement("div");
102     document.body.appendChild(element);
103
104     // 'nav' is not a rectangular definition.
105     element.style.webkitGridTemplateAreas = "'nav head' 'nav nav'";
106     testJSGridTemplateAreas(element, "none");
107
108     // 'nav' is not contiguous in the column direction.
109     element.style.webkitGridTemplateAreas = "'nav head nav'";
110     testJSGridTemplateAreas(element, "none");
111
112     // 'nav' is not contiguous in the row direction.
113     element.style.webkitGridTemplateAreas = "'nav head' 'middle middle' 'nav footer'";
114     testJSGridTemplateAreas(element, "none");
115
116     // The rows don't have the same number of columns.
117     element.style.webkitGridTemplateAreas = "'nav head' 'foot'";
118     testJSGridTemplateAreas(element, "none");
119
120     // Empty rows.
121     element.style.webkitGridTemplateAreas = "'' ''";
122     testJSGridTemplateAreas(element, "none");
123
124     debug("");
125     debug("FIXME: We currently don't validate that the named grid areas are &lt;indent&gt;.");
126     // <ident> only allows a leading '-'.
127     element.style.webkitGridTemplateAreas = "'nav-up'";
128     testJSGridTemplateAreas(element, "none");
129 </script>
130 <script src="../../resources/js-test-post.js"></script>
131 </body>
132 </html>