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

Side by Side Diff: LayoutTests/css3/flexbox/css-properties.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: Recalc style when alignItems or justifyItems change. Created 6 years, 5 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
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <html> 2 <html>
3 <head> 3 <head>
4 <script src="../../resources/js-test.js"></script> 4 <script src="../../resources/js-test.js"></script>
5 </head> 5 </head>
6 <body> 6 <body>
7 <div id="flexbox"> 7 <div id="flexbox">
8 <div id="flexitem"></div> 8 <div id="flexitem"></div>
9 </div> 9 </div>
10 <script> 10 <script>
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after
71 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'center'); 71 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'center');
72 72
73 flexbox.style.webkitJustifyContent = 'space-between'; 73 flexbox.style.webkitJustifyContent = 'space-between';
74 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'space-between'); 74 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'space-between');
75 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'space-between'); 75 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'space-between');
76 76
77 flexbox.style.webkitJustifyContent = ''; 77 flexbox.style.webkitJustifyContent = '';
78 shouldBeEqualToString('flexbox.style.webkitJustifyContent', ''); 78 shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
79 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'flex-start'); 79 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'flex-start');
80 80
81 flexbox.style.display = '-webkit-flex';
Julien - ping for review 2014/07/22 01:56:59 Let's use the unprefixed version as we support it.
jfernandez 2014/07/23 21:42:26 Acknowledged.
81 82
82 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); 83 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
83 // The initial value is 'stretch'. 84 // The initial value is 'auto', which will be resolved depending on parent's sty le (except for the 'document' element).
84 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch'); 85 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
85 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).w ebkitAlignSelf', 'stretch'); 86 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).w ebkitAlignSelf', 'auto');
Julien - ping for review 2014/07/22 01:56:59 While we touched these lines, I would unprefix the
jfernandez 2014/07/23 21:42:26 Done.
86 87
87 flexbox.style.webkitAlignSelf = 'foo'; 88 flexbox.style.webkitAlignSelf = 'foo';
88 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); 89 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
90 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
89 91
90 flexbox.style.webkitAlignSelf = 'auto'; 92 flexbox.style.webkitAlignSelf = 'auto';
91 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'auto'); 93 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'auto');
92 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch'); 94 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
93 95
94 flexbox.style.webkitAlignSelf = 'flex-start'; 96 flexbox.style.webkitAlignSelf = 'flex-start';
95 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-start'); 97 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-start');
96 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-start'); 98 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-start');
97 99
98 flexbox.style.webkitAlignSelf = 'flex-end'; 100 flexbox.style.webkitAlignSelf = 'flex-end';
99 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-end'); 101 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-end');
100 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-end'); 102 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-end');
101 103
102 flexbox.style.webkitAlignSelf = 'center'; 104 flexbox.style.webkitAlignSelf = 'center';
103 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'center'); 105 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'center');
104 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'center'); 106 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'center');
105 107
106 flexbox.style.webkitAlignSelf = 'stretch'; 108 flexbox.style.webkitAlignSelf = 'stretch';
107 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'stretch'); 109 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'stretch');
108 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch'); 110 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');
109 111
110 flexbox.style.webkitAlignSelf = 'baseline'; 112 flexbox.style.webkitAlignSelf = 'baseline';
111 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'baseline'); 113 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'baseline');
112 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'baseline'); 114 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'baseline');
113 115
114 flexbox.style.webkitAlignSelf = ''; 116 flexbox.style.webkitAlignSelf = '';
115 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); 117 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
116 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch'); 118 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
117 119
118 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); 120 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
119 // The initial value is 'stretch'. 121 shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
122 // The initial value is 'auto', which will be resolved to 'stretch' in case of f lexbox containers.
120 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch'); 123 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
121 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch'); 124 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
122 125
123 flexbox.style.webkitAlignItems = 'foo'; 126 flexbox.style.webkitAlignItems = 'foo';
124 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); 127 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
128 shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
129 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
130 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
125 131
126 flexbox.style.webkitAlignItems = 'auto'; 132 flexbox.style.webkitAlignItems = 'auto';
127 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'auto'); 133 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'auto');
128 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'auto'); 134 shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
129 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'auto'); 135 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
136 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
130 137
131 flexbox.style.webkitAlignItems = 'flex-start'; 138 flexbox.style.webkitAlignItems = 'flex-start';
132 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-start'); 139 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-start');
140 shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
133 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-start'); 141 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-start');
134 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-start'); 142 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-start');
135 143
136 flexbox.style.webkitAlignItems = 'flex-end'; 144 flexbox.style.webkitAlignItems = 'flex-end';
137 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-end'); 145 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-end');
138 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-end'); 146 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-end');
139 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-end'); 147 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-end');
140 148
141 flexbox.style.webkitAlignItems = 'center'; 149 flexbox.style.webkitAlignItems = 'center';
142 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'center'); 150 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'center');
(...skipping 10 matching lines...) Expand all
153 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'baseline'); 161 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'baseline');
154 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'baseline'); 162 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'baseline');
155 163
156 flexbox.style.webkitAlignItems = ''; 164 flexbox.style.webkitAlignItems = '';
157 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); 165 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
158 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch'); 166 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
159 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch'); 167 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
160 168
161 flexbox.style.display = 'none'; 169 flexbox.style.display = 'none';
162 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); 170 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
163 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch'); 171 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'start');
164 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch'); 172 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'start');
165 flexbox.style.display = ''; 173 flexbox.style.display = '';
166 174
167 175
168 // FIXME: This should probably return stretch. See https://bugs.webkit.org/show_ bug.cgi?id=14563. 176 // FIXME: This should probably return stretch. See https://bugs.webkit.org/show_ bug.cgi?id=14563.
169 var detachedFlexbox = document.createElement('div'); 177 var detachedFlexbox = document.createElement('div');
170 var detachedFlexItem = document.createElement('div'); 178 var detachedFlexItem = document.createElement('div');
171 detachedFlexbox.appendChild(detachedFlexItem); 179 detachedFlexbox.appendChild(detachedFlexItem);
172 shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).webkitAlig nSelf', ''); 180 shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).webkitAlig nSelf', '');
173 shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitAli gnSelf', ''); 181 shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitAli gnSelf', '');
174 182
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after
300 flexbox.style.webkitAlignContent = ''; 308 flexbox.style.webkitAlignContent = '';
301 shouldBeEqualToString('flexbox.style.webkitAlignContent', ''); 309 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
302 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'stretch'); 310 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'stretch');
303 311
304 flexbox.style.webkitAlignContent = 'foo'; 312 flexbox.style.webkitAlignContent = 'foo';
305 shouldBeEqualToString('flexbox.style.webkitAlignContent', ''); 313 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
306 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'stretch'); 314 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'stretch');
307 </script> 315 </script>
308 </body> 316 </body>
309 </html> 317 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698