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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 363133003: [CSS Grid Layout] Adapting align-self, align-items and justify-self to the last CSS 3 spec. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Resolve grid and flex cases during cascade, the rest will wait for layout. Created 6 years, 4 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 | « LayoutTests/css3/flexbox/css-properties-expected.txt ('k') | LayoutTests/fast/alignment/parse-align-items-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style> 4 <style>
5 #alignItemsBaseline { 5 #alignItemsBaseline {
6 align-items: baseline; 6 align-items: baseline;
7 } 7 }
8 8
esprehn 2014/07/31 00:50:28 This test is way way too big, please break it into
jfernandez 2014/07/31 10:29:53 Acknowledged.
9 #alignItemsLastBaseline {
10 align-items: last-baseline;
11 }
12
9 #alignItemsStretch { 13 #alignItemsStretch {
10 align-items: stretch; 14 align-items: stretch;
11 } 15 }
12 16
13 #alignItemsStart { 17 #alignItemsStart {
14 align-items: start; 18 align-items: start;
15 } 19 }
16 20
17 #alignItemsEnd { 21 #alignItemsEnd {
18 align-items: end; 22 align-items: end;
19 } 23 }
20 24
21 #alignItemsCenter { 25 #alignItemsCenter {
22 align-items: center; 26 align-items: center;
23 } 27 }
24 28
25 #alignItemsItemsStart { 29 #alignItemsSelfStart {
26 align-items: self-start; 30 align-items: self-start;
27 } 31 }
28 32
29 #alignItemsItemsEnd { 33 #alignItemsSelfEnd {
30 align-items: self-end; 34 align-items: self-end;
31 } 35 }
32 36
33 #alignItemsLeft { 37 #alignItemsLeft {
34 align-items: left; 38 align-items: left;
35 } 39 }
36 40
37 #alignItemsRight { 41 #alignItemsRight {
38 align-items: right; 42 align-items: right;
39 } 43 }
40 44
45 #alignItemsFlexStart {
46 align-items: flex-start;
47 }
48
49 #alignItemsFlexEnd {
50 align-items: flex-end;
51 }
52
41 #alignItemsEndTrue { 53 #alignItemsEndTrue {
42 align-items: end true; 54 align-items: end true;
43 } 55 }
44 56
45 #alignItemsCenterTrue { 57 #alignItemsCenterTrue {
46 align-items: center true; 58 align-items: center true;
47 } 59 }
48 60
49 #alignItemsItemsEndSafe { 61 #alignItemsSelfEndSafe {
50 align-items: self-end safe; 62 align-items: self-end safe;
51 } 63 }
52 64
53 #alignItemsItemsStartSafe { 65 #alignItemsSelfStartSafe {
54 align-items: self-start safe; 66 align-items: self-start safe;
55 } 67 }
56 68
57 #alignItemsRightSafe { 69 #alignItemsRightSafe {
58 align-items: right safe; 70 align-items: right safe;
59 } 71 }
60 72
61 #alignItemsLeftTrue { 73 #alignItemsLeftTrue {
62 align-items: left true; 74 align-items: left true;
63 } 75 }
76
77 #alignItemsFlexStartTrue {
78 align-items: flex-start true;
79 }
80
81 #alignItemsFlexEndSafe {
82 align-items: flex-end safe;
83 }
84
64 </style> 85 </style>
65 <script src="../../resources/js-test.js"></script> 86 <script src="../../resources/js-test.js"></script>
66 </head> 87 </head>
67 <body> 88 <body>
68 <div id="alignItemsBaseline"></div> 89 <div id="alignItemsBaseline"></div>
90 <div id="alignItemsLastBaseline"></div>
69 <div id="alignItemsStretch"></div> 91 <div id="alignItemsStretch"></div>
70 <div id="alignItemsStart"></div> 92 <div id="alignItemsStart"></div>
71 <div id="alignItemsEnd"></div> 93 <div id="alignItemsEnd"></div>
72 <div id="alignItemsCenter"></div> 94 <div id="alignItemsCenter"></div>
73 <div id="alignItemsItemsStart"></div> 95 <div id="alignItemsSelfStart"></div>
74 <div id="alignItemsItemsEnd"></div> 96 <div id="alignItemsSelfEnd"></div>
75 <div id="alignItemsLeft"></div> 97 <div id="alignItemsLeft"></div>
76 <div id="alignItemsRight"></div> 98 <div id="alignItemsRight"></div>
99 <div id="alignItemsFlexStart"></div>
100 <div id="alignItemsFlexEnd"></div>
77 101
78 <div id="alignItemsEndTrue"></div> 102 <div id="alignItemsEndTrue"></div>
79 <div id="alignItemsCenterTrue"></div> 103 <div id="alignItemsCenterTrue"></div>
80 <div id="alignItemsItemsEndSafe"></div> 104 <div id="alignItemsSelfEndSafe"></div>
81 <div id="alignItemsItemsStartSafe"></div> 105 <div id="alignItemsSelfStartSafe"></div>
82 <div id="alignItemsRightSafe"></div> 106 <div id="alignItemsRightSafe"></div>
83 <div id="alignItemsLeftTrue"></div> 107 <div id="alignItemsLeftTrue"></div>
108 <div id="alignItemsFlexStartTrue"></div>
109 <div id="alignItemsFlexEndSafe"></div>
110 <script src="resources/alignment-parsing-utils.js"></script>
84 <script> 111 <script>
85 description('Test that setting and getting align-items works as expected'); 112 description('Test that setting and getting align-items works as expected');
86 113
87 debug("Test getting align-items set through CSS"); 114 debug("Test getting align-items set through CSS");
88 var alignItemsBaseline = document.getElementById("alignItemsBaseline"); 115 var alignItemsBaseline = document.getElementById("alignItemsBaseline");
89 shouldBe("getComputedStyle(alignItemsBaseline, '').getPropertyValue('align-items ')", "'baseline'"); 116 shouldBe("getComputedStyle(alignItemsBaseline, '').getPropertyValue('align-items ')", "'baseline'");
90 117
118 var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline");
119 shouldBe("getComputedStyle(alignItemsLastBaseline, '').getPropertyValue('align-i tems')", "'last-baseline'");
120
91 var alignItemsStretch = document.getElementById("alignItemsStretch"); 121 var alignItemsStretch = document.getElementById("alignItemsStretch");
92 shouldBe("getComputedStyle(alignItemsStretch, '').getPropertyValue('align-items' )", "'stretch'"); 122 shouldBe("getComputedStyle(alignItemsStretch, '').getPropertyValue('align-items' )", "'stretch'");
93 123
94 var alignItemsStart = document.getElementById("alignItemsStart"); 124 var alignItemsStart = document.getElementById("alignItemsStart");
95 shouldBe("getComputedStyle(alignItemsStart, '').getPropertyValue('align-items')" , "'start'"); 125 shouldBe("getComputedStyle(alignItemsStart, '').getPropertyValue('align-items')" , "'start'");
96 126
97 var alignItemsEnd = document.getElementById("alignItemsEnd"); 127 var alignItemsEnd = document.getElementById("alignItemsEnd");
98 shouldBe("getComputedStyle(alignItemsEnd, '').getPropertyValue('align-items')", "'end'"); 128 shouldBe("getComputedStyle(alignItemsEnd, '').getPropertyValue('align-items')", "'end'");
99 129
100 var alignItemsCenter = document.getElementById("alignItemsCenter"); 130 var alignItemsCenter = document.getElementById("alignItemsCenter");
101 shouldBe("getComputedStyle(alignItemsCenter, '').getPropertyValue('align-items') ", "'center'"); 131 shouldBe("getComputedStyle(alignItemsCenter, '').getPropertyValue('align-items') ", "'center'");
102 132
103 var alignItemsItemsEnd = document.getElementById("alignItemsItemsEnd"); 133 var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd");
104 shouldBe("getComputedStyle(alignItemsItemsEnd, '').getPropertyValue('align-items ')", "'self-end'"); 134 shouldBe("getComputedStyle(alignItemsSelfEnd, '').getPropertyValue('align-items' )", "'self-end'");
105 135
106 var alignItemsItemsStart = document.getElementById("alignItemsItemsStart"); 136 var alignItemsSelfStart = document.getElementById("alignItemsSelfStart");
107 shouldBe("getComputedStyle(alignItemsItemsStart, '').getPropertyValue('align-ite ms')", "'self-start'"); 137 shouldBe("getComputedStyle(alignItemsSelfStart, '').getPropertyValue('align-item s')", "'self-start'");
108 138
109 var alignItemsLeft = document.getElementById("alignItemsLeft"); 139 var alignItemsLeft = document.getElementById("alignItemsLeft");
110 shouldBe("getComputedStyle(alignItemsLeft, '').getPropertyValue('align-items')", "'left'"); 140 shouldBe("getComputedStyle(alignItemsLeft, '').getPropertyValue('align-items')", "'left'");
111 141
112 var alignItemsRight = document.getElementById("alignItemsRight"); 142 var alignItemsRight = document.getElementById("alignItemsRight");
113 shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('align-items')" , "'right'"); 143 shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('align-items')" , "'right'");
114 144
145 var alignItemsFlexStart = document.getElementById("alignItemsFlexStart");
146 shouldBe("getComputedStyle(alignItemsFlexStart, '').getPropertyValue('align-item s')", "'flex-start'");
147
148 var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");
149 shouldBe("getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('align-items' )", "'flex-end'");
150
115 var alignItemsEndTrue = document.getElementById("alignItemsEndTrue"); 151 var alignItemsEndTrue = document.getElementById("alignItemsEndTrue");
116 shouldBe("getComputedStyle(alignItemsEndTrue, '').getPropertyValue('align-items' )", "'end true'"); 152 shouldBe("getComputedStyle(alignItemsEndTrue, '').getPropertyValue('align-items' )", "'end true'");
117 153
118 var alignItemsCenterTrue = document.getElementById("alignItemsCenterTrue"); 154 var alignItemsCenterTrue = document.getElementById("alignItemsCenterTrue");
119 shouldBe("getComputedStyle(alignItemsCenterTrue, '').getPropertyValue('align-ite ms')", "'center true'"); 155 shouldBe("getComputedStyle(alignItemsCenterTrue, '').getPropertyValue('align-ite ms')", "'center true'");
120 156
121 var alignItemsItemsEndSafe = document.getElementById("alignItemsItemsEndSafe"); 157 var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe");
122 shouldBe("getComputedStyle(alignItemsItemsEndSafe, '').getPropertyValue('align-i tems')", "'self-end safe'"); 158 shouldBe("getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('align-it ems')", "'self-end safe'");
123 159
124 var alignItemsItemsStartSafe = document.getElementById("alignItemsItemsStartSafe "); 160 var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe") ;
125 shouldBe("getComputedStyle(alignItemsItemsStartSafe, '').getPropertyValue('align -items')", "'self-start safe'"); 161 shouldBe("getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('align- items')", "'self-start safe'");
126 162
127 var alignItemsRightSafe = document.getElementById("alignItemsRightSafe"); 163 var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");
128 shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('align-item s')", "'right safe'"); 164 shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('align-item s')", "'right safe'");
129 165
130 var alignItemsLeftTrue = document.getElementById("alignItemsLeftTrue"); 166 var alignItemsLeftTrue = document.getElementById("alignItemsLeftTrue");
131 shouldBe("getComputedStyle(alignItemsLeftTrue, '').getPropertyValue('align-items ')", "'left true'"); 167 shouldBe("getComputedStyle(alignItemsLeftTrue, '').getPropertyValue('align-items ')", "'left true'");
132 168
169 var alignItemsFlexStartTrue = document.getElementById("alignItemsFlexStartTrue") ;
170 shouldBe("getComputedStyle(alignItemsFlexStartTrue, '').getPropertyValue('align- items')", "'flex-start true'");
171
172 var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe");
173 shouldBe("getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('align-it ems')", "'flex-end safe'");
174
133 debug(""); 175 debug("");
134 debug("Test initial value of align-items through JS"); 176 debug("Test initial value of align-items through JS");
135 element = document.createElement("div"); 177 element = document.createElement("div");
136 document.body.appendChild(element); 178 document.body.appendChild(element);
137 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'"); 179 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'star t'");
138 180
139 debug(""); 181 debug("");
140 debug("Test getting and setting align-items through JS"); 182 debug("Test getting and setting align-items through JS");
141 element = document.createElement("div"); 183 element = document.createElement("div");
142 document.body.appendChild(element); 184 document.body.appendChild(element);
143 element.style.alignItems = "center"; 185 element.style.alignItems = "center";
144 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'cent er'"); 186 checkValues(element, "alignItems", "align-items", "center", "center");
145 187
188 element.style.alignItems = "true start";
189 checkValues(element, "alignItems", "align-items", "start true", "start true");
190
191 element.style.alignItems = "flex-end safe";
192 checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-end sa fe");
193
194 element.style.alignItems = "right";
195 checkValues(element, "alignItems", "align-items", "right", "right");
196
197 element.style.alignItems = "center";
198 checkValues(element, "alignItems", "align-items", "center", "center");
199
200 element.style.alignItems = "self-start";
201 checkValues(element, "alignItems", "align-items", "self-start", "self-start");
202
203 element.style.alignItems = "auto";
204 checkValues(element, "alignItems", "align-items", "auto", "start");
205
206 element.style.display = "flex";
207 element.style.alignItems = "auto";
208 checkValues(element, "alignItems", "align-items", "auto", "stretch");
209
210 element.style.display = "grid";
211 element.style.alignItems = "auto";
212 checkValues(element, "alignItems", "align-items", "auto", "stretch");
213
214 element.style.alignItems = "self-end";
215 checkValues(element, "alignItems", "align-items", "self-end", "self-end");
216
217 debug("");
218 debug("Test bad combinations of align-items");
146 element = document.createElement("div"); 219 element = document.createElement("div");
147 document.body.appendChild(element); 220 document.body.appendChild(element);
148 element.style.alignItems = "true start";
149 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'star t true'");
150 221
151 element.style.alignItems = "auto"; 222 checkBadValues(element, "alignItems", "align-items", "true auto");
152 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'auto '"); 223 checkBadValues(element, "alignItems", "align-items", "auto safe");
153 224 checkBadValues(element, "alignItems", "align-items", "auto left");
154 debug(""); 225 checkBadValues(element, "alignItems", "align-items", "baseline safe");
155 debug("Test bad combinaisons of align-items"); 226 checkBadValues(element, "alignItems", "align-items", "baseline center");
156 element = document.createElement("div"); 227 checkBadValues(element, "alignItems", "align-items", "stretch true");
157 document.body.appendChild(element); 228 checkBadValues(element, "alignItems", "align-items", "stretch right");
158 element.style.alignItems = "true auto"; 229 checkBadValues(element, "alignItems", "align-items", "true true");
159 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'"); 230 checkBadValues(element, "alignItems", "align-items", "true safe");
160 231 checkBadValues(element, "alignItems", "align-items", "center start");
161 element.style.alignItems = "auto safe"; 232 checkBadValues(element, "alignItems", "align-items", "stretch true");
162 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'"); 233 checkBadValues(element, "alignItems", "align-items", "safe stretch");
163 234 checkBadValues(element, "alignItems", "align-items", "baseline safe");
164 element.style.alignItems = "auto left"; 235 checkBadValues(element, "alignItems", "align-items", "true baseline");
165 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'"); 236 checkBadValues(element, "alignItems", "align-items", "true safe left");
166 237 checkBadValues(element, "alignItems", "align-items", "true left safe");
167 element.style.alignItems = "baseline safe"; 238 checkBadValues(element, "alignItems", "align-items", "left safe true safe");
168 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'"); 239 checkBadValues(element, "alignItems", "align-items", "legacy start");
169 240 checkBadValues(element, "alignItems", "align-items", "legacy end");
170 element.style.alignItems = "baseline center"; 241 checkBadValues(element, "alignItems", "align-items", "legacy right true");
171 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'"); 242 checkBadValues(element, "alignItems", "align-items", "legacy auto");
172 243 checkBadValues(element, "alignItems", "align-items", "legacy stretch");
173 element.style.alignItems = "stretch true"; 244 checkBadValues(element, "alignItems", "align-items", "legacy");
174 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'"); 245 checkBadValues(element, "alignItems", "align-items", "legacy left right");
175
176 element.style.alignItems = "stretch right";
177 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");
178
179 element.style.alignItems = "true true";
180 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");
181
182 element.style.alignItems = "true safe";
183 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");
184
185 element.style.alignItems = "center start";
186 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");
187
188 element.style.alignItems = "stretch true";
189 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");
190
191 element.style.alignItems = "safe stretch";
192 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");
193
194 element.style.alignItems = "baseline safe";
195 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");
196
197 element.style.alignItems = "true baseline";
198 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");
199
200 element.style.alignItems = "true safe";
201 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");
202
203 element.style.alignItems = "true safe left";
204 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");
205
206 element.style.alignItems = "true left safe";
207 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");
208
209 element.style.alignItems = "left safe true safe";
210 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'");
211 246
212 debug(""); 247 debug("");
213 debug("Test the value 'initial'"); 248 debug("Test the value 'initial'");
214 element.style.alignItems = "center"; 249 element.style.display = "";
215 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'cent er'"); 250 checkInitialValues(element, "alignItems", "align-items", "center", "start");
216 element.style.alignItems = "initial"; 251
217 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'stre tch'"); 252 debug("");
253 debug("Test the value 'initial' for grid containers");
254 element.style.display = "grid";
255 checkInitialValues(element, "alignItems", "align-items", "left safe", "stretch") ;
256
257 debug("");
258 debug("Test the value 'initial' for flex containers");
259 element.style.display = "flex";
260 checkInitialValues(element, "alignItems", "align-items", "right true", "stretch" );
218 261
219 debug(""); 262 debug("");
220 debug("Test the value 'inherit'"); 263 debug("Test the value 'inherit'");
221 parentElement = document.createElement("div"); 264 checkInheritValues("alignItems", "align-items", "end");
222 document.body.appendChild(parentElement); 265 checkInheritValues("alignItems", "align-items", "left safe");
223 parentElement.style.alignItems = "end"; 266 checkInheritValues("alignItems", "align-items", "center true");
224 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('align-items')", "'end'");
225 267
226 element = document.createElement("div");
227 parentElement.appendChild(element);
228 element.style.alignItems = "inherit";
229 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'end' ");
230 </script> 268 </script>
231 </body> 269 </body>
232 </html> 270 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/css-properties-expected.txt ('k') | LayoutTests/fast/alignment/parse-align-items-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698