Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(564)

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html

Issue 149373004: [CSS Grid Layout] Implementation of the grid-template shorthand. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@grid-template-working
Patch Set: rebased and applied suggested changes. Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
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 grid-template: none;
12 }
13 #gridTemplateSimpleForm {
14 grid-template: 10px / 15px;
15 }
16 #gridTemplateSimpleFormWithNoneColumns {
17 grid-template: none / 15px;
18 }
19 #gridTemplateSimpleFormWithNoneRows {
20 grid-template: 10px / none;
21 }
22 #gridTemplateSimpleFormWithNone {
23 grid-template: none / none;
24 }
25 #gridTemplateComplexForm {
26 grid-template: 10px / "a" 15px;
27 }
28 #gridTemplateComplexFormWithLineNames {
29 grid-template: 10px / (head) "a" 15px (tail);
30 }
31 #gridTemplateComplexFormWithLineNamesMultipleColumns {
32 grid-template: 10px / (head) "a b" 15px (tail)
33 }
34 #gridTemplateComplexFormWithLineNamesMultipleRows {
35 grid-template: 10px / (head1) "a" 15px (tail1)
36 (head2) "b" 20px (tail2);
37 }
38 #gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns {
39 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 grid-template: 10px / "a";
45 }
46 #gridTemplateComplexFormOnlyAreas {
47 grid-template: "a";
48 }
49
50 /* Bad values. */
51
52 #gridTemplateMultipleSlash {
53 grid-template: 10px / 20px / 30px;
54 }
55 #gridTemplateSimpleFormJustColumns {
56 grid-template: 10px;
57 }
58 #gridTemplateSimpleFormNoRows {
59 grid-template: 10px /;
60 }
61 #gridTemplateSimpleFormNoColumns {
62 grid-template: / 10px;
63 }
64 #gridTemplateSimpleFormNoColumnSize {
65 grid-template: (line) / 10px;
66 }
67 #gridTemplateSimpleFormWithFitContent {
68 grid-template: -webkit-fit-content / 10px;
69 }
70 #gridTemplateSimpleFormWithWrongRepeat {
71 grid-template: repeat(2, 50% (title) a) / 10px;
72 }
73 #gridTemplateSimpleFormWithMisplacedNone1 {
74 grid-template: 10px / none 20px;
75 }
76 #gridTemplateSimpleFormWithMisplacedNone2 {
77 grid-template: 10px / 20px none;
78 }
79 #gridTemplateSimpleFormWithMisplacedNone3 {
80 grid-template: none 10px / 20px;
81 }
82 #gridTemplateSimpleFormWithMisplacedNone4 {
83 grid-template: 10px none / 20px;
84 }
85 #gridTemplateComplexFormWithRepeat {
86 grid-template: 10px / "a" repeat(2, 50% (title));
87 }
88 #gridTemplateComplexFormWithWrongRepeat {
89 grid-template: repeat(2, 50% (title) a) / "a";
90 }
91 #griTemplateComplexFormdWithFitAvailable {
92 grid-template: -webkit-fit-available / "a";
93 }
94 #gridTemplateComplexFormNoColumnSize {
95 grid-template: (line) / "a";
96 }
97 #gridTemplateComplexFormMisplacedRowsSize1 {
98 grid-template: 25px / 10px "a";
99 }
100 #gridTemplateComplexFormMisplacedRowsSize2 {
101 grid-template: 25px / "a" (name) 10px;
102 }
103 #gridTemplateComplexFormColumnsNotParsing1 {
104 grid-template: a / "a" (name) 10px;
105 }
106 #gridTemplateComplexFormColumnsNotParsing2 {
107 grid-template: "B" / "a" (name) 10px;
108 }
109 #gridTemplateComplexFormWithNoneColumns {
110 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("gridTemplateSimpleFormWit hNoneColumns"), "none", "15px", "none");
157 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hNoneRows"), "10px", "none", "none");
158 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hNone"), "none", "none", "none");
159 testGridDefinitionsValues(document.getElementById("gridTemplateComplexForm") , "10px", "15px", '"a"');
160 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thLineNames"), "10px", "(head) 15px (tail)", '"a"');
161 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thLineNamesMultipleColumns"), "10px", "(head) 15px (tail)", '"a b"');
162 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thLineNamesMultipleRows"), "10px", "(head1) 15px (tail1 head2) 20px (tail2)", '" a" "b"');
163 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thLineNamesMultipleRowsAndColumns"), "(first) 10px (nav nav2) 15px (nav nav2) 15 px", "100px (nav nav2) 25px (nav nav2) 25px (last)", '"a b c" "d e f" "g h i"');
164 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thAuto"), "10px", "0px", '"a"');
165 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormOn lyAreas"), "none", "0px", '"a"');
166
167 debug("");
168 debug("Test getting wrong values for grid-template shorthand through CSS (th ey should resolve to the default: 'none')");
169 testGridDefinitionsValues(document.getElementById("gridTemplateMultipleSlash "), "none", "none", "none");
170 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormJus tColumns"), "none", "none", "none");
171 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoR ows"), "none", "none", "none");
172 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoC olumns"), "none", "none", "none");
173 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoC olumnSize"), "none", "none", "none");
174 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hFitContent"), "none", "none", "none");
175 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hWrongRepeat"), "none", "none", "none");
176 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hMisplacedNone1"), "none", "none", "none");
177 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hMisplacedNone2"), "none", "none", "none");
178 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hMisplacedNone3"), "none", "none", "none");
179 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hMisplacedNone4"), "none", "none", "none");
180 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thRepeat"), "none", "none", "none");
181 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thWrongRepeat"), "none", "none", "none");
182 testGridDefinitionsValues(document.getElementById("griTemplateComplexFormdWi thFitAvailable"), "none", "none", "none");
183 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormNo ColumnSize"), "none", "none", "none");
184 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMi splacedRowsSize1"), "none", "none", "none");
185 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMi splacedRowsSize2"), "none", "none", "none");
186 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormCo lumnsNotParsing1"), "none", "none", "none");
187 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormCo lumnsNotParsing2"), "none", "none", "none");
188 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thNoneColumns"), "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('grid-template-colu mns')", "'none'");
196 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'");
197 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'");
198
199 debug("");
200 debug("Test setting grid-template-columns and grid-template-rows back to 'no ne' through JS");
201 testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "10px", "(line) 20p x", "\"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", "(he ad) 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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698