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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-justify-self.html

Issue 1497403002: [css-align] Overflow alignment value 'true' renamed to 'unsafe' (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fixed repaint tests issues. Created 5 years 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 | « third_party/WebKit/LayoutTests/fast/alignment/parse-justify-items-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/alignment/parse-justify-self-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 #justifySelfBaseline { 5 #justifySelfBaseline {
6 justify-self: baseline; 6 justify-self: baseline;
7 } 7 }
8 8
9 #justifySelfLastBaseline { 9 #justifySelfLastBaseline {
10 justify-self: last-baseline; 10 justify-self: last-baseline;
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
43 } 43 }
44 44
45 #justifySelfFlexStart { 45 #justifySelfFlexStart {
46 justify-self: flex-start; 46 justify-self: flex-start;
47 } 47 }
48 48
49 #justifySelfFlexEnd { 49 #justifySelfFlexEnd {
50 justify-self: flex-end; 50 justify-self: flex-end;
51 } 51 }
52 52
53 #justifySelfEndTrue { 53 #justifySelfEndUnsafe {
54 justify-self: end true; 54 justify-self: end unsafe;
55 } 55 }
56 56
57 #justifySelfCenterTrue { 57 #justifySelfCenterUnsafe {
58 justify-self: center true; 58 justify-self: center unsafe;
59 } 59 }
60 60
61 #justifySelfSelfEndSafe { 61 #justifySelfSelfEndSafe {
62 justify-self: self-end safe; 62 justify-self: self-end safe;
63 } 63 }
64 64
65 #justifySelfSelfStartSafe { 65 #justifySelfSelfStartSafe {
66 justify-self: self-start safe; 66 justify-self: self-start safe;
67 } 67 }
68 68
69 #justifySelfRightSafe { 69 #justifySelfRightSafe {
70 justify-self: right safe; 70 justify-self: right safe;
71 } 71 }
72 72
73 #justifySelfLeftTrue { 73 #justifySelfLeftUnsafe {
74 justify-self: left true; 74 justify-self: left unsafe;
75 } 75 }
76 76
77 #justifySelfFlexStartTrue { 77 #justifySelfFlexStartUnsafe {
78 justify-self: flex-start true; 78 justify-self: flex-start unsafe;
79 } 79 }
80 80
81 #justifySelfFlexEndSafe { 81 #justifySelfFlexEndSafe {
82 justify-self: flex-end safe; 82 justify-self: flex-end safe;
83 } 83 }
84 </style> 84 </style>
85 <script src="../../resources/js-test.js"></script> 85 <script src="../../resources/js-test.js"></script>
86 </head> 86 </head>
87 <body> 87 <body>
88 <div id="justifySelfBaseline"></div> 88 <div id="justifySelfBaseline"></div>
89 <div id="justifySelfLastBaseline"></div> 89 <div id="justifySelfLastBaseline"></div>
90 <div id="justifySelfStretch"></div> 90 <div id="justifySelfStretch"></div>
91 <div id="justifySelfStart"></div> 91 <div id="justifySelfStart"></div>
92 <div id="justifySelfEnd"></div> 92 <div id="justifySelfEnd"></div>
93 <div id="justifySelfCenter"></div> 93 <div id="justifySelfCenter"></div>
94 <div id="justifySelfSelfStart"></div> 94 <div id="justifySelfSelfStart"></div>
95 <div id="justifySelfSelfEnd"></div> 95 <div id="justifySelfSelfEnd"></div>
96 <div id="justifySelfLeft"></div> 96 <div id="justifySelfLeft"></div>
97 <div id="justifySelfRight"></div> 97 <div id="justifySelfRight"></div>
98 <div id="justifySelfFlexStart"></div> 98 <div id="justifySelfFlexStart"></div>
99 <div id="justifySelfFlexEnd"></div> 99 <div id="justifySelfFlexEnd"></div>
100 100
101 <div id="justifySelfEndTrue"></div> 101 <div id="justifySelfEndUnsafe"></div>
102 <div id="justifySelfCenterTrue"></div> 102 <div id="justifySelfCenterUnsafe"></div>
103 <div id="justifySelfSelfEndSafe"></div> 103 <div id="justifySelfSelfEndSafe"></div>
104 <div id="justifySelfSelfStartSafe"></div> 104 <div id="justifySelfSelfStartSafe"></div>
105 <div id="justifySelfRightSafe"></div> 105 <div id="justifySelfRightSafe"></div>
106 <div id="justifySelfLeftTrue"></div> 106 <div id="justifySelfLeftUnsafe"></div>
107 <div id="justifySelfFlexStartTrue"></div> 107 <div id="justifySelfFlexStartUnsafe"></div>
108 <div id="justifySelfFlexEndSafe"></div> 108 <div id="justifySelfFlexEndSafe"></div>
109 <script src="resources/alignment-parsing-utils.js"></script> 109 <script src="resources/alignment-parsing-utils.js"></script>
110 <script> 110 <script>
111 description('Test that setting and getting justify-self works as expected'); 111 description('Test that setting and getting justify-self works as expected');
112 112
113 debug("Test getting justify-self set through CSS"); 113 debug("Test getting justify-self set through CSS");
114 var justifySelfBaseline = document.getElementById("justifySelfBaseline"); 114 var justifySelfBaseline = document.getElementById("justifySelfBaseline");
115 shouldBe("getComputedStyle(justifySelfBaseline, '').getPropertyValue('justify-se lf')", "'baseline'"); 115 shouldBe("getComputedStyle(justifySelfBaseline, '').getPropertyValue('justify-se lf')", "'baseline'");
116 116
117 var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseline") ; 117 var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseline") ;
(...skipping 22 matching lines...) Expand all
140 140
141 var justifySelfRight = document.getElementById("justifySelfRight"); 141 var justifySelfRight = document.getElementById("justifySelfRight");
142 shouldBe("getComputedStyle(justifySelfRight, '').getPropertyValue('justify-self' )", "'right'"); 142 shouldBe("getComputedStyle(justifySelfRight, '').getPropertyValue('justify-self' )", "'right'");
143 143
144 var justifySelfFlexStart = document.getElementById("justifySelfFlexStart"); 144 var justifySelfFlexStart = document.getElementById("justifySelfFlexStart");
145 shouldBe("getComputedStyle(justifySelfFlexStart, '').getPropertyValue('justify-s elf')", "'flex-start'"); 145 shouldBe("getComputedStyle(justifySelfFlexStart, '').getPropertyValue('justify-s elf')", "'flex-start'");
146 146
147 var justifySelfFlexEnd = document.getElementById("justifySelfFlexEnd"); 147 var justifySelfFlexEnd = document.getElementById("justifySelfFlexEnd");
148 shouldBe("getComputedStyle(justifySelfFlexEnd, '').getPropertyValue('justify-sel f')", "'flex-end'"); 148 shouldBe("getComputedStyle(justifySelfFlexEnd, '').getPropertyValue('justify-sel f')", "'flex-end'");
149 149
150 var justifySelfEndTrue = document.getElementById("justifySelfEndTrue"); 150 var justifySelfEndUnsafe = document.getElementById("justifySelfEndUnsafe");
151 shouldBe("getComputedStyle(justifySelfEndTrue, '').getPropertyValue('justify-sel f')", "'end true'"); 151 shouldBe("getComputedStyle(justifySelfEndUnsafe, '').getPropertyValue('justify-s elf')", "'end unsafe'");
152 152
153 var justifySelfCenterTrue = document.getElementById("justifySelfCenterTrue"); 153 var justifySelfCenterUnsafe = document.getElementById("justifySelfCenterUnsafe") ;
154 shouldBe("getComputedStyle(justifySelfCenterTrue, '').getPropertyValue('justify- self')", "'center true'"); 154 shouldBe("getComputedStyle(justifySelfCenterUnsafe, '').getPropertyValue('justif y-self')", "'center unsafe'");
155 155
156 var justifySelfSelfEndSafe = document.getElementById("justifySelfSelfEndSafe"); 156 var justifySelfSelfEndSafe = document.getElementById("justifySelfSelfEndSafe");
157 shouldBe("getComputedStyle(justifySelfSelfEndSafe, '').getPropertyValue('justify -self')", "'self-end safe'"); 157 shouldBe("getComputedStyle(justifySelfSelfEndSafe, '').getPropertyValue('justify -self')", "'self-end safe'");
158 158
159 var justifySelfSelfStartSafe = document.getElementById("justifySelfSelfStartSafe "); 159 var justifySelfSelfStartSafe = document.getElementById("justifySelfSelfStartSafe ");
160 shouldBe("getComputedStyle(justifySelfSelfStartSafe, '').getPropertyValue('justi fy-self')", "'self-start safe'"); 160 shouldBe("getComputedStyle(justifySelfSelfStartSafe, '').getPropertyValue('justi fy-self')", "'self-start safe'");
161 161
162 var justifySelfRightSafe = document.getElementById("justifySelfRightSafe"); 162 var justifySelfRightSafe = document.getElementById("justifySelfRightSafe");
163 shouldBe("getComputedStyle(justifySelfRightSafe, '').getPropertyValue('justify-s elf')", "'right safe'"); 163 shouldBe("getComputedStyle(justifySelfRightSafe, '').getPropertyValue('justify-s elf')", "'right safe'");
164 164
165 var justifySelfLeftTrue = document.getElementById("justifySelfLeftTrue"); 165 var justifySelfLeftUnsafe = document.getElementById("justifySelfLeftUnsafe");
166 shouldBe("getComputedStyle(justifySelfLeftTrue, '').getPropertyValue('justify-se lf')", "'left true'"); 166 shouldBe("getComputedStyle(justifySelfLeftUnsafe, '').getPropertyValue('justify- self')", "'left unsafe'");
167 167
168 var justifySelfFlexStartTrue = document.getElementById("justifySelfFlexStartTrue "); 168 var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexStartUn safe");
169 shouldBe("getComputedStyle(justifySelfFlexStartTrue, '').getPropertyValue('justi fy-self')", "'flex-start true'"); 169 shouldBe("getComputedStyle(justifySelfFlexStartUnsafe, '').getPropertyValue('jus tify-self')", "'flex-start unsafe'");
170 170
171 var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe"); 171 var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe");
172 shouldBe("getComputedStyle(justifySelfFlexEndSafe, '').getPropertyValue('justify -self')", "'flex-end safe'"); 172 shouldBe("getComputedStyle(justifySelfFlexEndSafe, '').getPropertyValue('justify -self')", "'flex-end safe'");
173 173
174 debug(""); 174 debug("");
175 debug("Test initial value of justify-self through JS"); 175 debug("Test initial value of justify-self through JS");
176 element = document.createElement("div"); 176 element = document.createElement("div");
177 document.body.appendChild(element); 177 document.body.appendChild(element);
178 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'sta rt'"); 178 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'sta rt'");
179 179
180 debug(""); 180 debug("");
181 debug("Test getting and setting justify-self through JS"); 181 debug("Test getting and setting justify-self through JS");
182 container = document.createElement("div"); 182 container = document.createElement("div");
183 element = document.createElement("div"); 183 element = document.createElement("div");
184 container.appendChild(element); 184 container.appendChild(element);
185 document.body.appendChild(container); 185 document.body.appendChild(container);
186 element.style.justifySelf = "center"; 186 element.style.justifySelf = "center";
187 checkValues(element, "justifySelf", "justify-self", "center", "center"); 187 checkValues(element, "justifySelf", "justify-self", "center", "center");
188 188
189 element.style.justifySelf = "true start"; 189 element.style.justifySelf = "unsafe start";
190 checkValues(element, "justifySelf", "justify-self", "start true", "start true") ; 190 checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsa fe");
191 191
192 element.style.justifySelf = "flex-end safe"; 192 element.style.justifySelf = "flex-end safe";
193 checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex-end safe"); 193 checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex-end safe");
194 194
195 element.style.justifySelf = "right"; 195 element.style.justifySelf = "right";
196 checkValues(element, "justifySelf", "justify-self", "right", "right"); 196 checkValues(element, "justifySelf", "justify-self", "right", "right");
197 197
198 element.style.justifySelf = "center"; 198 element.style.justifySelf = "center";
199 checkValues(element, "justifySelf", "justify-self", "center", "center"); 199 checkValues(element, "justifySelf", "justify-self", "center", "center");
200 200
(...skipping 14 matching lines...) Expand all
215 element.style.justifySelf = "self-end"; 215 element.style.justifySelf = "self-end";
216 checkValues(element, "justifySelf", "justify-self", "self-end", "self-end"); 216 checkValues(element, "justifySelf", "justify-self", "self-end", "self-end");
217 217
218 debug(""); 218 debug("");
219 debug("Test bad combinations of justify-self"); 219 debug("Test bad combinations of justify-self");
220 container = document.createElement("div"); 220 container = document.createElement("div");
221 element = document.createElement("div"); 221 element = document.createElement("div");
222 container.appendChild(element); 222 container.appendChild(element);
223 document.body.appendChild(container); 223 document.body.appendChild(container);
224 224
225 checkBadValues(element, "justifySelf", "justify-self", "true auto"); 225 checkBadValues(element, "justifySelf", "justify-self", "unsafe auto");
226 checkBadValues(element, "justifySelf", "justify-self", "auto safe"); 226 checkBadValues(element, "justifySelf", "justify-self", "auto safe");
227 checkBadValues(element, "justifySelf", "justify-self", "auto left"); 227 checkBadValues(element, "justifySelf", "justify-self", "auto left");
228 checkBadValues(element, "justifySelf", "justify-self", "baseline safe"); 228 checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
229 checkBadValues(element, "justifySelf", "justify-self", "baseline center"); 229 checkBadValues(element, "justifySelf", "justify-self", "baseline center");
230 checkBadValues(element, "justifySelf", "justify-self", "stretch true"); 230 checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
231 checkBadValues(element, "justifySelf", "justify-self", "stretch right"); 231 checkBadValues(element, "justifySelf", "justify-self", "stretch right");
232 checkBadValues(element, "justifySelf", "justify-self", "true true"); 232 checkBadValues(element, "justifySelf", "justify-self", "unsafe unsafe");
233 checkBadValues(element, "justifySelf", "justify-self", "true safe"); 233 checkBadValues(element, "justifySelf", "justify-self", "unsafe safe");
234 checkBadValues(element, "justifySelf", "justify-self", "center start"); 234 checkBadValues(element, "justifySelf", "justify-self", "center start");
235 checkBadValues(element, "justifySelf", "justify-self", "stretch true"); 235 checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
236 checkBadValues(element, "justifySelf", "justify-self", "safe stretch"); 236 checkBadValues(element, "justifySelf", "justify-self", "safe stretch");
237 checkBadValues(element, "justifySelf", "justify-self", "baseline safe"); 237 checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
238 checkBadValues(element, "justifySelf", "justify-self", "true baseline"); 238 checkBadValues(element, "justifySelf", "justify-self", "unsafe baseline");
239 checkBadValues(element, "justifySelf", "justify-self", "true safe left"); 239 checkBadValues(element, "justifySelf", "justify-self", "unsafe safe left");
240 checkBadValues(element, "justifySelf", "justify-self", "true left safe"); 240 checkBadValues(element, "justifySelf", "justify-self", "unsafe left safe");
241 checkBadValues(element, "justifySelf", "justify-self", "left safe true safe"); 241 checkBadValues(element, "justifySelf", "justify-self", "left safe unsafe safe") ;
242 checkBadValues(element, "justifySelf", "justify-self", "legacy start"); 242 checkBadValues(element, "justifySelf", "justify-self", "legacy start");
243 checkBadValues(element, "justifySelf", "justify-self", "legacy end"); 243 checkBadValues(element, "justifySelf", "justify-self", "legacy end");
244 checkBadValues(element, "justifySelf", "justify-self", "legacy right true"); 244 checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe");
245 checkBadValues(element, "justifySelf", "justify-self", "legacy auto"); 245 checkBadValues(element, "justifySelf", "justify-self", "legacy auto");
246 checkBadValues(element, "justifySelf", "justify-self", "legacy stretch"); 246 checkBadValues(element, "justifySelf", "justify-self", "legacy stretch");
247 checkBadValues(element, "justifySelf", "justify-self", "legacy"); 247 checkBadValues(element, "justifySelf", "justify-self", "legacy");
248 checkBadValues(element, "justifySelf", "justify-self", "legacy left right"); 248 checkBadValues(element, "justifySelf", "justify-self", "legacy left right");
249 249
250 debug(""); 250 debug("");
251 debug("Test the value 'initial'"); 251 debug("Test the value 'initial'");
252 container.style.display = ""; 252 container.style.display = "";
253 checkInitialValues(element, "justifySelf", "justify-self", "center", "start"); 253 checkInitialValues(element, "justifySelf", "justify-self", "center", "start");
254 254
255 debug(""); 255 debug("");
256 debug("Test the value 'initial' for grid containers"); 256 debug("Test the value 'initial' for grid containers");
257 container.style.display = "grid"; 257 container.style.display = "grid";
258 checkInitialValues(element, "justifySelf", "justify-self", "left safe", "stretch "); 258 checkInitialValues(element, "justifySelf", "justify-self", "left safe", "stretch ");
259 259
260 debug(""); 260 debug("");
261 debug("Test the value 'initial' for flex containers"); 261 debug("Test the value 'initial' for flex containers");
262 container.style.display = "flex"; 262 container.style.display = "flex";
263 checkInitialValues(element, "justifySelf", "justify-self", "right true", "stretc h"); 263 checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "stre tch");
264 264
265 debug(""); 265 debug("");
266 debug("Test the value 'initial' for positioned elements"); 266 debug("Test the value 'initial' for positioned elements");
267 container.style.display = ""; 267 container.style.display = "";
268 element.style.position = "absolute"; 268 element.style.position = "absolute";
269 checkInitialValues(element, "justifySelf", "justify-self", "left", "stretch"); 269 checkInitialValues(element, "justifySelf", "justify-self", "left", "stretch");
270 270
271 debug(""); 271 debug("");
272 debug("Test the value 'initial' for positioned elements in grid containers"); 272 debug("Test the value 'initial' for positioned elements in grid containers");
273 container.style.display = "grid"; 273 container.style.display = "grid";
274 element.style.position = "absolute"; 274 element.style.position = "absolute";
275 checkInitialValues(element, "justifySelf", "justify-self", "right", "stretch"); 275 checkInitialValues(element, "justifySelf", "justify-self", "right", "stretch");
276 276
277 debug(""); 277 debug("");
278 debug("Test the value 'initial' for positioned elements in grid containers"); 278 debug("Test the value 'initial' for positioned elements in grid containers");
279 container.style.display = "flex"; 279 container.style.display = "flex";
280 element.style.position = "absolute"; 280 element.style.position = "absolute";
281 checkInitialValues(element, "justifySelf", "justify-self", "end", "stretch"); 281 checkInitialValues(element, "justifySelf", "justify-self", "end", "stretch");
282 282
283 debug(""); 283 debug("");
284 debug("Test the value 'inherit'"); 284 debug("Test the value 'inherit'");
285 checkInheritValues("justifySelf", "justify-self", "end"); 285 checkInheritValues("justifySelf", "justify-self", "end");
286 checkInheritValues("justifySelf", "justify-self", "left safe"); 286 checkInheritValues("justifySelf", "justify-self", "left safe");
287 checkInheritValues("justifySelf", "justify-self", "center true"); 287 checkInheritValues("justifySelf", "justify-self", "center unsafe");
288 288
289 </script> 289 </script>
290 </body> 290 </body>
291 </html> 291 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/alignment/parse-justify-items-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/alignment/parse-justify-self-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698