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