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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-place-items.html

Issue 2737843003: [css-align] Implement place-items alignment shorthand (Closed)
Patch Set: Created 3 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
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/css/CSSProperties.json5 » ('j') | no next file with comments »
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 #placeItemsNormal {
6 place-items: normal;
meade_UTC10 2017/03/09 05:39:36 nit: please use 2-indenting for html, css and js.
7 }
8 #placeItemsCenterAuto {
9 place-items: center auto;
10 }
11 #placeItemsBaseline {
12 place-items: baseline;
13 }
14 #placeItemsStart {
15 place-items: start;
16 }
17 #placeItemsFlexStart {
18 place-items: flex-start;
19 }
20 #placeItemsEnd {
21 place-items: end;
22 }
23 #placeItemsSelfStart {
24 place-items: self-start;
25 }
26 #placeItemsStretch {
27 place-items: stretch;
28 }
29 #placeItemsStartEnd {
30 place-items: start end;
31 }
32 #placeItemsStartSelfEnd {
33 place-items: start self-end;
34 }
35 #placeItemsStartBaseline {
36 place-items: start baseline;
37 }
38
39 <!-- Invalid CSS cases -->
40 #placeItemsEmpty {
41 place-items:;
42 }
43 #placeItemsAuto {
44 place-items: auto;
45 }
46 #placeItemsNone {
47 place-items: none;
48 }
49 #placeItemsSafe {
50 place-items: safe;
51 }
52 #placeItemsStartSafe {
53 place-items: start safe;
54 }
55 #placeItemsStartEndLeft {
56 place-items: start end left;
57 }
58 </style>
59 <script src="../../resources/testharness.js"></script>
60 <script src="../../resources/testharnessreport.js"></script>
61 <script src="resources/alignment-parsing-utils-th.js"></script>
62 </head>
63 <body>
64 <p>Test to verify that the new place-items alignment shorthand is parsed as expected and correctly sets the longhand values.</p>
65 <div id="log"></div>
66
67 <div id="placeItemsNormal"></div>
68 <div id="placeItemsCenterAuto"></div>
69 <div id="placeItemsBaseline"></div>
70 <div id="placeItemsStart"></div>
71 <div id="placeItemsFlexStart"></div>
72 <div id="placeItemsEnd"></div>
73 <div id="placeItemsSelfStart"></div>
74 <div id="placeItemsStretch"></div>
75 <div id="placeItemsStartEnd"></div>
76 <div id="placeItemsStartSelfEnd"></div>
77 <div id="placeItemsStartBaseline"></div>
78
79 <div id="placeItemsEmpty"></div>
80 <div id="placeItemsAuto"></div>
81 <div id="placeItemsNone"></div>
82 <div id="placeItemsSafe"></div>
83 <div id="placeItemsStartSafe"></div>
84 <div id="placeItemsBaselineSafe"></div>
85 <div id="placeItemsStartEndLeft"></div>
86 <script>
87 function checkPlaceItemsValues(element, value, alignValue, justifyValue)
meade_UTC10 2017/03/09 05:39:37 nit: Inconsistent use of opening brackets on same
88 {
89 var res = value.split(" ");
90 if (res.length < 2)
91 res[1] = res[0];
92 checkValues(element, "alignItems", "align-items", res[0], alignValue);
93 checkValues(element, "justifyItems", "justify-items", res[1], justifyValue) ;
94 }
95
96 function checkPlaceItemsValuesJS(value, alignValue, justifyValue)
97 {
98 element = document.createElement("div");
99 document.body.appendChild(element);
100 element.style.placeItems = value;
101 checkValues(element, "placeItems", "place-items", value, alignValue + ' ' + j ustifyValue)
102 checkPlaceItemsValues(element, value, alignValue, justifyValue)
103 }
104
105 function checkPlaceItemsValuesBadJS(value)
106 {
107 element.style.placeItems = "";
108 element.style.placeItems = value;
109 checkPlaceItemsValues(element, "", "normal", "normal")
110 }
111
112 function checkPlaceItemsInitialValue()
113 {
114 element = document.createElement("div");
115 document.body.appendChild(element);
116 checkValues(element, "placeItems", "place-items", "", "normal normal");
117 element.style.placeItems = "center";
118 checkPlaceItemsValues(element, "center", "center", "center");
119 element.style.placeItems = "initial";
120 checkValues(element, "placeItems", "place-items", "initial", "normal normal") ;
121 checkPlaceItemsValues(element, "initial", "normal", "normal");
122 }
123
124 function checkPlaceItemsInheritValue()
125 {
126 document.body.style.placeItems = "start";
127 var anotherElement = document.createElement("div");
128 document.body.appendChild(anotherElement);
129 checkPlaceItemsValues(anotherElement, "", "normal", "normal");
130 anotherElement.style.placeItems = "inherit";
131 checkPlaceItemsValues(anotherElement, "inherit", "start", "start");
132 }
133
134
135 test(function() {
136 checkValues(placeItemsNormal, "placeItems", "place-items", "", "normal norma l");
137 checkPlaceItemsValues(placeItemsNormal, "", "normal", "normal");
138 }, "Test getting the Computed Value of place-items's longhand properties when se tting 'normal' value through CSS.");
139
140 test(function() {
141 checkValues(placeItemsCenterAuto, "placeItems", "place-items", "", "center n ormal");
142 checkPlaceItemsValues(placeItemsCenterAuto, "", "center", "normal");
143 }, "Test getting the Computed Value of place-items's longhand properties when se tting 'center auto' value through CSS.");
144
145 test(function() {
146 checkValues(placeItemsBaseline, "placeItems", "place-items", "", "baseline b aseline");
147 checkPlaceItemsValues(placeItemsBaseline, "", "baseline", "baseline");
148 }, "Test getting the Computed Value of place-items's longhand properties when se tting 'baseline' value through CSS.");
149
150 test(function() {
151 checkValues(placeItemsStart, "placeItems", "place-items", "", "start start") ;
152 checkPlaceItemsValues(placeItemsStart, "", "start", "start");
153 }, "Test getting the Computed Value of place-items's longhand properties when se tting 'start' value through CSS.");
154
155 test(function() {
156 checkValues(placeItemsFlexStart, "placeItems", "place-items", "", "flex-star t flex-start");
157 checkPlaceItemsValues(placeItemsFlexStart, "", "flex-start", "flex-start");
158 }, "Test getting the Computed Value of place-items's longhand properties when se tting 'flex-start' value through CSS.");
159
160 test(function() {
161 checkValues(placeItemsEnd, "placeItems", "place-items", "", "end end");
162 checkPlaceItemsValues(placeItemsEnd, "", "end", "end");
163 }, "Test getting the Computed Value of place-items's longhand properties when se tting 'end' value through CSS.");
164
165 test(function() {
166 checkValues(placeItemsSelfStart, "placeItems", "place-items", "", "self-star t self-start");
167 checkPlaceItemsValues(placeItemsSelfStart, "", "self-start", "self-start");
168 }, "Test getting the Computed Value of place-items's longhand properties when se tting 'self-start' value through CSS.");
169
170 test(function() {
171 checkValues(placeItemsStretch, "placeItems", "place-items", "", "stretch str etch");
172 checkPlaceItemsValues(placeItemsStretch, "", "stretch", "stretch");
173 }, "Test getting the Computed Value of place-items's longhand properties when se tting 'stretch' value through CSS.");
174
175 test(function() {
176 checkValues(placeItemsStartEnd, "placeItems", "place-items", "", "start end" );
177 checkPlaceItemsValues(placeItemsStartEnd, "", "start", "end");
178 }, "Test getting the Computed Value of place-items's longhand properties when se tting 'start end' value through CSS.");
179
180 test(function() {
181 checkValues(placeItemsStartSelfEnd, "placeItems", "place-items", "", "start self-end");
182 checkPlaceItemsValues(placeItemsStartSelfEnd, "", "start", "self-end");
183 }, "Test getting the Computed Value of place-items's longhand properties when se tting 'start self-end' value through CSS.");
184
185 test(function() {
186 checkValues(placeItemsStartBaseline, "placeItems", "place-items", "", "start baseline");
187 checkPlaceItemsValues(placeItemsStartBaseline, "", "start", "baseline");
188 }, "Test getting the Computed Value of place-items's longhand properties when se tting 'start baseline' value through CSS.");
189
190 test(function() {
191 checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal" );
192 checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal");
193 }, "Test setting '' as incorrect value through CSS.");
194
195 test(function() {
196 checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal" );
197 checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal");
198 }, "Test setting 'auto' as incorrect value through CSS.");
199
200 test(function() {
201 checkValues(placeItemsNone, "placeItems", "place-items", "", "normal normal" );
202 checkPlaceItemsValues(placeItemsNone, "", "normal", "normal");
203 }, "Test setting 'none' as incorrect value through CSS.");
204
205 test(function() {
206 checkValues(placeItemsSafe, "placeItems", "place-items", "", "normal normal" );
207 checkPlaceItemsValues(placeItemsSafe, "", "normal", "normal");
208 }, "Test setting 'safe' as incorrect value through CSS.");
209
210 test(function() {
211 checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal no rmal");
212 checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal");
213 }, "Test setting 'start safe' as incorrect value through CSS.");
214
215 test(function() {
216 checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal no rmal");
217 checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal");
218 }, "Test setting 'baseline safe' as incorrect value through CSS.");
219
220 test(function() {
221 checkValues(placeItemsStartEndLeft, "placeItems", "place-items", "", "normal normal");
222 checkPlaceItemsValues(placeItemsStartEndLeft, "", "normal", "normal");
223 }, "Test setting 'start end left' as incorrect value through CSS.");
224
225 test(function() {
226 checkPlaceItemsValuesJS("center", "center", "center");
227 checkPlaceItemsValuesJS("center start", "center", "start");
228 checkPlaceItemsValuesJS("self-start end", "self-start", "end");
229 checkPlaceItemsValuesJS("normal end", "normal", "end");
230 }, "Test setting values through JS.");
231
232 test(function() {
233 checkPlaceItemsValuesBadJS("auto normal", "normal", "normal");
234 checkPlaceItemsValuesBadJS("space-between", "normal", "normal");
235 checkPlaceItemsValuesBadJS("center safe", "normal", "normal");
236 checkPlaceItemsValuesBadJS("center self-start center", "normal", "normal");
237 checkPlaceItemsValuesBadJS("asrt", "normal", "normal");
238 checkPlaceItemsValuesBadJS("auto", "normal", "normal");
239 checkPlaceItemsValuesBadJS("10px", "normal", "normal");
240 checkPlaceItemsValuesBadJS("stretch safe", "normal", "normal");
241 checkPlaceItemsValuesBadJS("self-start start end", "normal", "normal");
242 checkPlaceItemsValuesBadJS("", "normal", "normal");
243 }, "Test setting incorrect values through JS.");
244
245 test(function() {
246 checkPlaceItemsInitialValue();
meade_UTC10 2017/03/09 05:39:37 This function is only used here, why not put the l
247 }, "Test the 'initial' value of the place-items shorthand and its longhand prope rties' Computed value");
248
249 test(function() {
250 checkPlaceItemsInheritValue();
meade_UTC10 2017/03/09 05:39:37 ditto
251 }, "Test the 'inherit' value of the place-items shorthand and its longhand prope rties' Computed value");
252
253
254 </script>
255 </body>
256 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/css/CSSProperties.json5 » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698