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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/alignment/parse-justify-items.html

Issue 333423005: [CSS Grid Layout] Implement 'justify-items' parsing (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Modifying computed value resolution. Created 6 years, 6 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
« no previous file with comments | « no previous file | LayoutTests/fast/alignment/parse-justify-items-expected.txt » ('j') | Source/build/scripts/templates/StyleBuilderFunctions.cpp.tmpl » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 #justifyItemsBaseline {
6 justify-items: baseline;
Julien - ping for review 2014/06/24 19:04:56 I think we should test last-baseline as it's a val
jfernandez 2014/06/26 12:58:43 Done.
7 }
8
9 #justifyItemsStretch {
10 justify-items: stretch;
11 }
12
13 #justifyItemsStart {
14 justify-items: start;
15 }
16
17 #justifyItemsEnd {
18 justify-items: end;
19 }
20
21 #justifyItemsCenter {
22 justify-items: center;
23 }
24
25 #justifyItemsItemsStart {
26 justify-items: self-start;
27 }
28
29 #justifyItemsItemsEnd {
30 justify-items: self-end;
31 }
32
33 #justifyItemsLeft {
34 justify-items: left;
35 }
36
37 #justifyItemsRight {
38 justify-items: right;
39 }
40
Julien - ping for review 2014/06/24 19:04:56 I don't see any testing for flex-start / flex-end
jfernandez 2014/06/26 12:58:43 Done.
41 #justifyItemsEndTrue {
42 justify-items: end true;
43 }
44
45 #justifyItemsCenterTrue {
46 justify-items: center true;
47 }
48
49 #justifyItemsItemsEndSafe {
50 justify-items: self-end safe;
51 }
52
53 #justifyItemsItemsStartSafe {
54 justify-items: self-start safe;
55 }
56
57 #justifyItemsRightSafe {
58 justify-items: right safe;
59 }
60
61 #justifyItemsLeftTrue {
62 justify-items: left true;
63 }
64
65 #justifyItemsLegacyLeft {
66 justify-items: legacy left;
67 }
68
69 #justifyItemsLegacyCenter {
70 justify-items: legacy center;
71 }
72
73 #justifyItemsLegacyRight {
74 justify-items: legacy right;
75 }
76 </style>
77 <script src="../../resources/js-test.js"></script>
78 </head>
79 <body>
80 <div id="justifyItemsBaseline"></div>
81 <div id="justifyItemsStretch"></div>
82 <div id="justifyItemsStart"></div>
83 <div id="justifyItemsEnd"></div>
84 <div id="justifyItemsCenter"></div>
85 <div id="justifyItemsItemsStart"></div>
86 <div id="justifyItemsItemsEnd"></div>
87 <div id="justifyItemsLeft"></div>
88 <div id="justifyItemsRight"></div>
89
90 <div id="justifyItemsEndTrue"></div>
91 <div id="justifyItemsCenterTrue"></div>
92 <div id="justifyItemsItemsEndSafe"></div>
93 <div id="justifyItemsItemsStartSafe"></div>
94 <div id="justifyItemsRightSafe"></div>
95 <div id="justifyItemsLeftTrue"></div>
96 <div id="justifyItemsLegacyLeft"></div>
97 <div id="justifyItemsLegacyCenter"></div>
98 <div id="justifyItemsLegacyRight"></div>
99 <script>
100 description('Test that setting and getting justify-items works as expected');
101
102 debug("Test getting justify-items set through CSS");
103 var justifyItemsBaseline = document.getElementById("justifyItemsBaseline");
104 shouldBe("getComputedStyle(justifyItemsBaseline, '').getPropertyValue('justify-i tems')", "'baseline'");
105
106 var justifyItemsStretch = document.getElementById("justifyItemsStretch");
107 shouldBe("getComputedStyle(justifyItemsStretch, '').getPropertyValue('justify-it ems')", "'stretch'");
108
109 var justifyItemsStart = document.getElementById("justifyItemsStart");
110 shouldBe("getComputedStyle(justifyItemsStart, '').getPropertyValue('justify-item s')", "'start'");
111
112 var justifyItemsEnd = document.getElementById("justifyItemsEnd");
113 shouldBe("getComputedStyle(justifyItemsEnd, '').getPropertyValue('justify-items' )", "'end'");
114
115 var justifyItemsCenter = document.getElementById("justifyItemsCenter");
116 shouldBe("getComputedStyle(justifyItemsCenter, '').getPropertyValue('justify-ite ms')", "'center'");
117
118 var justifyItemsItemsEnd = document.getElementById("justifyItemsItemsEnd");
119 shouldBe("getComputedStyle(justifyItemsItemsEnd, '').getPropertyValue('justify-i tems')", "'self-end'");
120
121 var justifyItemsItemsStart = document.getElementById("justifyItemsItemsStart");
122 shouldBe("getComputedStyle(justifyItemsItemsStart, '').getPropertyValue('justify -items')", "'self-start'");
123
124 var justifyItemsLeft = document.getElementById("justifyItemsLeft");
125 shouldBe("getComputedStyle(justifyItemsLeft, '').getPropertyValue('justify-items ')", "'left'");
126
127 var justifyItemsRight = document.getElementById("justifyItemsRight");
128 shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-item s')", "'right'");
129
130 var justifyItemsEndTrue = document.getElementById("justifyItemsEndTrue");
131 shouldBe("getComputedStyle(justifyItemsEndTrue, '').getPropertyValue('justify-it ems')", "'end true'");
132
133 var justifyItemsCenterTrue = document.getElementById("justifyItemsCenterTrue");
134 shouldBe("getComputedStyle(justifyItemsCenterTrue, '').getPropertyValue('justify -items')", "'center true'");
135
136 var justifyItemsItemsEndSafe = document.getElementById("justifyItemsItemsEndSafe ");
137 shouldBe("getComputedStyle(justifyItemsItemsEndSafe, '').getPropertyValue('justi fy-items')", "'self-end safe'");
138
139 var justifyItemsItemsStartSafe = document.getElementById("justifyItemsItemsStart Safe");
140 shouldBe("getComputedStyle(justifyItemsItemsStartSafe, '').getPropertyValue('jus tify-items')", "'self-start safe'");
141
142 var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe");
143 shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify- items')", "'right safe'");
144
145 var justifyItemsLeftTrue = document.getElementById("justifyItemsLeftTrue");
146 shouldBe("getComputedStyle(justifyItemsLeftTrue, '').getPropertyValue('justify-i tems')", "'left true'");
147
148 var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft");
149 shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify -items')", "'legacy left'");
150
151 var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter ");
152 shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justi fy-items')", "'legacy center'");
153
154 var justifyItemsLegacyRight = document.getElementById("justifyItemsLegacyRight") ;
155 shouldBe("getComputedStyle(justifyItemsLegacyRight, '').getPropertyValue('justif y-items')", "'legacy right'");
156
157 debug("");
158 debug("Test initial value of justify-items through JS");
159 element = document.createElement("div");
160 document.body.appendChild(element);
161 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
162
163 debug("");
164 debug("Test getting and setting justify-items through JS");
165 element = document.createElement("div");
166 document.body.appendChild(element);
167 element.style.justifyItems = "center";
168 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'ce nter'");
169
170 element = document.createElement("div");
171 document.body.appendChild(element);
172 element.style.justifyItems = "true start";
173 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art true'");
174
175 element.style.justifyItems = "auto";
176 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
177
178 debug("");
179 debug("Test bad combinaisons of justify-items");
180 element = document.createElement("div");
181 document.body.appendChild(element);
182 element.style.justifyItems = "true auto";
183 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
184
185 element.style.justifyItems = "auto safe";
186 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
187
188 element.style.justifyItems = "auto left";
189 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
190
191 element.style.justifyItems = "baseline safe";
192 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
193
194 element.style.justifyItems = "baseline center";
195 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
196
197 element.style.justifyItems = "stretch true";
198 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
199
200 element.style.justifyItems = "stretch right";
201 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
202
203 element.style.justifyItems = "true true";
204 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
205
206 element.style.justifyItems = "true safe";
207 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
208
209 element.style.justifyItems = "center start";
210 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
211
212 element.style.justifyItems = "stretch true";
213 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
214
215 element.style.justifyItems = "safe stretch";
216 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
217
218 element.style.justifyItems = "baseline safe";
219 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
220
221 element.style.justifyItems = "true baseline";
222 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
223
224 element.style.justifyItems = "true safe";
225 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
226
227 element.style.justifyItems = "true safe left";
228 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
229
230 element.style.justifyItems = "true left safe";
231 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
232
233 element.style.justifyItems = "left safe true safe";
234 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
235
236 element.style.justifyItems = "legacy start";
237 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
238
239 element.style.justifyItems = "legacy end";
240 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
241
242 element.style.justifyItems = "legacy right true";
243 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
244
245 element.style.justifyItems = "legacy";
246 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
Julien - ping for review 2014/06/24 19:04:56 Maybe we should test legacy + auto / stretch too.
jfernandez 2014/06/26 12:58:44 Done.
247
248 debug("");
249 debug("Test the value 'initial'");
250 element.style.justifyItems = "center";
251 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'ce nter'");
252 element.style.justifyItems = "initial";
253 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
Julien - ping for review 2014/06/24 19:04:56 Would it be worth checking flex-container too as i
jfernandez 2014/06/26 12:58:43 Done.
254
255 debug("");
256 debug("Test the value 'inherit'");
257 parentElement = document.createElement("div");
258 document.body.appendChild(parentElement);
259 parentElement.style.justifyItems = "end";
260 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('justify-items')" , "'end'");
261
262 element = document.createElement("div");
263 parentElement.appendChild(element);
264 element.style.justifyItems = "inherit";
265 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'en d'");
Julien - ping for review 2014/06/24 19:04:56 That's awesome that you cover getComputedStyle wit
jfernandez 2014/06/26 12:58:43 Done.
266 </script>
267 </body>
268 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/alignment/parse-justify-items-expected.txt » ('j') | Source/build/scripts/templates/StyleBuilderFunctions.cpp.tmpl » ('J')

Powered by Google App Engine
This is Rietveld 408576698