[CSS Grid Layout] Implementation of the grid-template shorthand.
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-template-shorthand-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 #gridTemplateWithNone {
11     -webkit-grid-template: none;
12 }
13 #gridTemplateSimpleForm {
14     -webkit-grid-template: 10px / 15px;
15 }
16 #gridTemplateSimpleFormWithNoneColumns {
17     -webkit-grid-template: none / 15px;
18 }
19 #gridTemplateSimpleFormWithNoneRows {
20     -webkit-grid-template: 10px / none;
21 }
22 #gridTemplateSimpleFormWithNone {
23     -webkit-grid-template: none / none;
24 }
25 #gridTemplateComplexForm {
26     -webkit-grid-template: 10px / "a" 15px;
27 }
28 #gridTemplateComplexFormWithLineNames {
29     -webkit-grid-template: 10px / (head) "a" 15px (tail);
30 }
31 #gridTemplateComplexFormWithLineNamesMultipleColumns {
32     -webkit-grid-template: 10px / (head) "a b" 15px (tail)
33 }
34 #gridTemplateComplexFormWithLineNamesMultipleRows {
35     -webkit-grid-template: 10px / (head1) "a" 15px (tail1)
36                           (head2) "b" 20px (tail2);
37 }
38 #gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns {
39     -webkit-grid-template: (first) 10px repeat(2, (nav nav2) 15px) /       "a b c" 100px (nav)
40                                                             (nav2) "d e f" 25px  (nav)
41                                                             (nav2) "g h i" 25px  (last);
42 }
43 #gridTemplateComplexFormWithAuto {
44     -webkit-grid-template: 10px / "a";
45 }
46 #gridTemplateComplexFormOnlyAreas {
47     -webkit-grid-template: "a";
48 }
49
50 /* Bad values. */
51
52 #gridTemplateMultipleSlash {
53     -webkit-grid-template: 10px / 20px / 30px;
54 }
55 #gridTemplateSimpleFormJustColumns {
56     -webkit-grid-template: 10px;
57 }
58 #gridTemplateSimpleFormNoRows {
59     -webkit-grid-template: 10px /;
60 }
61 #gridTemplateSimpleFormNoColumns {
62     -webkit-grid-template: / 10px;
63 }
64 #gridTemplateSimpleFormNoColumnSize {
65     -webkit-grid-template: (line) / 10px;
66 }
67 #gridTemplateSimpleFormWithFitContent {
68     -webkit-grid-template: -webkit-fit-content / 10px;
69 }
70 #gridTemplateSimpleFormWithWrongRepeat {
71     -webkit-grid-template: repeat(2, 50% (title) a) / 10px;
72 }
73 #gridTemplateSimpleFormWithMisplacedNone1 {
74     -webkit-grid-template: 10px / none 20px;
75 }
76 #gridTemplateSimpleFormWithMisplacedNone2 {
77     -webkit-grid-template: 10px / 20px none;
78 }
79 #gridTemplateSimpleFormWithMisplacedNone3 {
80     -webkit-grid-template: none 10px / 20px;
81 }
82 #gridTemplateSimpleFormWithMisplacedNone4 {
83     -webkit-grid-template: 10px none / 20px;
84 }
85 #gridTemplateComplexFormWithRepeat {
86     -webkit-grid-template: 10px / "a" repeat(2, 50% (title));
87 }
88 #gridTemplateComplexFormWithWrongRepeat {
89     -webkit-grid-template: repeat(2, 50% (title) a) / "a";
90 }
91 #griTemplateComplexFormdWithFitAvailable {
92     -webkit-grid-template: -webkit-fit-available / "a";
93 }
94 #gridTemplateComplexFormNoColumnSize {
95     -webkit-grid-template: (line) / "a";
96 }
97 #gridTemplateComplexFormMisplacedRowsSize1 {
98     -webkit-grid-template: 25px / 10px "a";
99 }
100 #gridTemplateComplexFormMisplacedRowsSize2 {
101     -webkit-grid-template: 25px / "a" (name) 10px;
102 }
103 #gridTemplateComplexFormColumnsNotParsing1 {
104     -webkit-grid-template: a / "a" (name) 10px;
105 }
106 #gridTemplateComplexFormColumnsNotParsing2 {
107     -webkit-grid-template: "B" / "a" (name) 10px;
108 }
109 #gridTemplateComplexFormWithNoneColumns {
110     -webkit-grid-template: none / "a" (name) 10px;
111 }
112
113 </style>
114 <script src="../../resources/js-test.js"></script>
115 </head>
116 <body>
117 <div class="grid" id="gridTemplateWithNone"></div>
118 <div class="grid" id="gridTemplateSimpleForm"></div>
119 <div class="grid" id="gridTemplateSimpleFormWithNoneColumns"></div>
120 <div class="grid" id="gridTemplateSimpleFormWithNoneRows"></div>
121 <div class="grid" id="gridTemplateSimpleFormWithNone"></div>
122 <div class="grid" id="gridTemplateComplexForm"></div>
123 <div class="grid" id="gridTemplateComplexFormWithLineNames"></div>
124 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleColumns"></div>
125 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRows"></div>
126 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns"></div>
127 <div class="grid" id="gridTemplateComplexFormWithAuto"></div>
128 <div class="grid" id="gridTemplateComplexFormOnlyAreas"></div>
129 <div class="grid" id="gridTemplateMultipleSlash"></div>
130 <div class="grid" id="gridTemplateSimpleFormJustColumns"></div>
131 <div class="grid" id="gridTemplateSimpleFormNoRows"></div>
132 <div class="grid" id="gridTemplateSimpleFormNoColumns"></div>
133 <div class="grid" id="gridTemplateSimpleFormNoColumnSize"></div>
134 <div class="grid" id="gridTemplateSimpleFormWithFitContent"></div>
135 <div class="grid" id="gridTemplateSimpleFormWithWrongRepeat"></div>
136 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone1"></div>
137 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone2"></div>
138 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone3"></div>
139 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone4"></div>
140 <div class="grid" id="gridTemplateComplexFormWithRepeat"></div>
141 <div class="grid" id="gridTemplateComplexFormWithWrongRepeat"></div>
142 <div class="grid" id="griTemplateComplexFormdWithFitAvailable"></div>
143 <div class="grid" id="gridTemplateComplexFormNoColumnSize"></div>
144 <div class="grid" id="gridTemplateComplexFormMisplacedRowsSize1"></div>
145 <div class="grid" id="gridTemplateComplexFormMisplacedRowsSize2"></div>
146 <div class="grid" id="gridTemplateComplexFormColumnsNotParsing1"></div>
147 <div class="grid" id="gridTemplateComplexFormColumnsNotParsing2"></div>
148 <div class="grid" id="gridTemplateComplexFormWithNoneColumns"></div>
149 <script src="resources/grid-template-shorthand-parsing-utils.js"></script>
150 <script>
151     description("This test checks that the 'grid-template' shorthand is properly parsed and the longhand properties correctly assigned.");
152
153     debug("Test getting grid-template-areas set through CSS.");
154     testGridDefinitionsValues(document.getElementById("gridTemplateWithNone"), "none", "none", "none");
155     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleForm"), "10px", "15px", "none");
156     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithNoneColumns"), "none", "15px", "none");
157     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithNoneRows"), "10px", "none", "none");
158     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithNone"), "none", "none", "none");
159     testGridDefinitionsValues(document.getElementById("gridTemplateComplexForm"), "10px", "15px", '"a"');
160     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNames"), "10px", "(head) 15px (tail)", '"a"');
161     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumns"), "10px", "(head) 15px (tail)", '"a b"');
162     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRows"), "10px", "(head1) 15px (tail1 head2) 20px (tail2)", '"a" "b"');
163     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns"), "(first) 10px (nav nav2) 15px (nav nav2) 15px", "100px (nav nav2) 25px (nav nav2) 25px (last)", '"a b c" "d e f" "g h i"');
164     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithAuto"), "10px", "0px", '"a"');
165     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormOnlyAreas"), "none", "0px", '"a"');
166
167     debug("");
168     debug("Test getting wrong values for grid-template shorthand through CSS (they should resolve to the default: 'none')");
169     testGridDefinitionsValues(document.getElementById("gridTemplateMultipleSlash"), "none", "none", "none");
170     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormJustColumns"), "none", "none", "none");
171     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoRows"), "none", "none", "none");
172     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoColumns"), "none", "none", "none");
173     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoColumnSize"), "none", "none", "none");
174     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithFitContent"), "none", "none", "none");
175     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithWrongRepeat"), "none", "none", "none");
176     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithMisplacedNone1"), "none", "none", "none");
177     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithMisplacedNone2"), "none", "none", "none");
178     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithMisplacedNone3"), "none", "none", "none");
179     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithMisplacedNone4"), "none", "none", "none");
180     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithRepeat"), "none", "none", "none");
181     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithWrongRepeat"), "none", "none", "none");
182     testGridDefinitionsValues(document.getElementById("griTemplateComplexFormdWithFitAvailable"), "none", "none", "none");
183     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormNoColumnSize"), "none", "none", "none");
184     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize1"), "none", "none", "none");
185     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize2"), "none", "none", "none");
186     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormColumnsNotParsing1"), "none", "none", "none");
187     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormColumnsNotParsing2"), "none", "none", "none");
188     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithNoneColumns"), "none", "none", "none");
189
190     debug("");
191     debug("Test the initial value");
192     var element = document.createElement("div");
193     document.body.appendChild(element);
194     testGridDefinitionsValues(element, "none", "none", "none");
195     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'none'");
196     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'none'");
197     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas')", "'none'");
198
199     debug("");
200     debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
201     testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "10px", "(line) 20px", "\"a\"");
202     testGridDefinitionsSetJSValues("none", "none", "none", "none");
203
204     debug("");
205     debug("Test getting and setting grid-template shorthand through JS");
206     testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none");
207     testGridDefinitionsSetJSValues("10px / (head) 'a' 15px (tail)", "10px", "(head) 15px (tail)", "\"a\"");
208     testGridDefinitionsSetJSValues("'a'", "none", "0px", "\"a\"", "none", "auto");
209
210     debug("");
211     debug("Test setting grid-template shorthand to bad values through JS");
212     testGridDefinitionsSetBadJSValues("none / 'a'");
213     testGridDefinitionsSetBadJSValues("25px / 'a' (name) 10px");
214     testGridDefinitionsSetBadJSValues("'a' / 'b'");
215     testGridDefinitionsSetBadJSValues("15px");
216     testGridDefinitionsSetBadJSValues("15px / 20px none");
217     testGridDefinitionsSetBadJSValues("25px / 10px 'a'");
218
219 </script>
220 </body>
221 </html>