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

Issues Search
    My Issues | Starred     Open | Closed | All

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: 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 | « no previous file | LayoutTests/css3/flexbox/css-properties-expected.txt » ('j') | LayoutTests/fast/alignment/parse-align-items.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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>
11 description('Tests being able to set the display to -webkit-flex and -webkit-inl ine-flex.'); 11 description('Tests being able to set the display to -webkit-flex and -webkit-inl ine-flex.');
12 12
13 var flexbox = document.getElementById("flexbox"); 13 var flexbox = document.getElementById("flexbox");
14 14
15 flexbox.style.display = '-webkit-flex'; 15 flexbox.style.display = '-webkit-flex';
16 shouldBeEqualToString('flexbox.style.display', '-webkit-flex'); 16 shouldBeEqualToString('flexbox.style.display', '-webkit-flex');
17 17
18 flexbox.style.display = 'inline'; 18 flexbox.style.display = 'inline';
19 shouldBeEqualToString('flexbox.style.display', 'inline'); 19 shouldBeEqualToString('flexbox.style.display', 'inline');
20 20
21 flexbox.style.display = '-webkit-inline-flex'; 21 flexbox.style.display = '-webkit-inline-flex';
22 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex'); 22 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex');
23 23
24 flexbox.style.display = 'junk'; 24 flexbox.style.display = 'junk';
25 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex'); 25 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex');
26 26
27 flexbox.style.display = 'block'; 27 flexbox.style.display = 'block';
28 shouldBeEqualToString('flexbox.style.display', 'block'); 28 shouldBeEqualToString('flexbox.style.display', 'block');
29 29
30 flexbox.style.display = 'flex';
30 31
31 var flexitem = document.getElementById("flexitem"); 32 var flexitem = document.getElementById("flexitem");
32 shouldBeEqualToString('flexitem.style.webkitOrder', ''); 33 shouldBeEqualToString('flexitem.style.webkitOrder', '');
33 34
34 flexitem.style.webkitOrder = 2; 35 flexitem.style.webkitOrder = 2;
35 shouldBeEqualToString('flexitem.style.webkitOrder', '2'); 36 shouldBeEqualToString('flexitem.style.webkitOrder', '2');
36 37
37 flexitem.style.webkitOrder = -1; 38 flexitem.style.webkitOrder = -1;
38 shouldBeEqualToString('flexitem.style.webkitOrder', '-1'); 39 shouldBeEqualToString('flexitem.style.webkitOrder', '-1');
39 40
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
71 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'center'); 72 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'center');
72 73
73 flexbox.style.webkitJustifyContent = 'space-between'; 74 flexbox.style.webkitJustifyContent = 'space-between';
74 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'space-between'); 75 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'space-between');
75 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'space-between'); 76 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'space-between');
76 77
77 flexbox.style.webkitJustifyContent = ''; 78 flexbox.style.webkitJustifyContent = '';
78 shouldBeEqualToString('flexbox.style.webkitJustifyContent', ''); 79 shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
79 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'flex-start'); 80 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'flex-start');
80 81
81
82 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); 82 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
83 // The initial value is 'stretch'. 83 // 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'); 84 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start ');
85 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).w ebkitAlignSelf', 'stretch'); 85 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).a lignSelf', 'start');
86 86
87 flexbox.style.webkitAlignSelf = 'foo'; 87 flexbox.style.webkitAlignSelf = 'foo';
88 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); 88 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
89 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start ');
89 90
90 flexbox.style.webkitAlignSelf = 'auto'; 91 flexbox.style.webkitAlignSelf = 'auto';
91 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'auto'); 92 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'auto');
92 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch'); 93 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start ');
93 94
94 flexbox.style.webkitAlignSelf = 'flex-start'; 95 flexbox.style.webkitAlignSelf = 'flex-start';
95 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-start'); 96 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-start');
96 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-start'); 97 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-start');
97 98
98 flexbox.style.webkitAlignSelf = 'flex-end'; 99 flexbox.style.webkitAlignSelf = 'flex-end';
99 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-end'); 100 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-end');
100 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-end'); 101 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-end');
101 102
102 flexbox.style.webkitAlignSelf = 'center'; 103 flexbox.style.webkitAlignSelf = 'center';
103 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'center'); 104 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'center');
104 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'center'); 105 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'center');
105 106
106 flexbox.style.webkitAlignSelf = 'stretch'; 107 flexbox.style.webkitAlignSelf = 'stretch';
107 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'stretch'); 108 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'stretch');
108 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch'); 109 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');
109 110
110 flexbox.style.webkitAlignSelf = 'baseline'; 111 flexbox.style.webkitAlignSelf = 'baseline';
111 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'baseline'); 112 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'baseline');
112 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'baseline'); 113 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'baseline');
113 114
114 flexbox.style.webkitAlignSelf = ''; 115 flexbox.style.webkitAlignSelf = '';
115 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); 116 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
116 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch'); 117 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start ');
117 118
118 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); 119 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
119 // The initial value is 'stretch'. 120 shouldBeEqualToString('flexitem.style.alignSelf', '');
120 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch'); 121 // The initial value is 'auto', which will be resolved to 'stretch' in case of f lexbox containers.
121 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch'); 122 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre tch');
123 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre tch');
122 124
123 flexbox.style.webkitAlignItems = 'foo'; 125 flexbox.style.webkitAlignItems = 'foo';
124 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); 126 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
127 shouldBeEqualToString('flexitem.style.alignSelf', '');
128 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre tch');
129 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre tch');
125 130
126 flexbox.style.webkitAlignItems = 'auto'; 131 flexbox.style.webkitAlignItems = 'auto';
127 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'auto'); 132 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'auto');
128 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'auto'); 133 shouldBeEqualToString('flexitem.style.alignSelf', '');
129 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'auto'); 134 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre tch');
135 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre tch');
130 136
131 flexbox.style.webkitAlignItems = 'flex-start'; 137 flexbox.style.webkitAlignItems = 'flex-start';
132 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-start'); 138 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-start');
139 shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
133 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-start'); 140 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-start');
134 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-start'); 141 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-start');
135 142
136 flexbox.style.webkitAlignItems = 'flex-end'; 143 flexbox.style.webkitAlignItems = 'flex-end';
137 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-end'); 144 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-end');
138 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-end'); 145 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-end');
139 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-end'); 146 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-end');
140 147
141 flexbox.style.webkitAlignItems = 'center'; 148 flexbox.style.webkitAlignItems = 'center';
142 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'center'); 149 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'center');
(...skipping 10 matching lines...) Expand all
153 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'baseline'); 160 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'baseline');
154 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'baseline'); 161 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'baseline');
155 162
156 flexbox.style.webkitAlignItems = ''; 163 flexbox.style.webkitAlignItems = '';
157 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); 164 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
158 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch'); 165 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
159 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch'); 166 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
160 167
161 flexbox.style.display = 'none'; 168 flexbox.style.display = 'none';
162 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); 169 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
163 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch'); 170 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'star t');
164 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch'); 171 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'star t');
165 flexbox.style.display = ''; 172 flexbox.style.display = '';
166 173
167 174
168 // FIXME: This should probably return stretch. See https://bugs.webkit.org/show_ bug.cgi?id=14563. 175 // FIXME: This should probably return stretch. See https://bugs.webkit.org/show_ bug.cgi?id=14563.
169 var detachedFlexbox = document.createElement('div'); 176 var detachedFlexbox = document.createElement('div');
170 var detachedFlexItem = document.createElement('div'); 177 var detachedFlexItem = document.createElement('div');
171 detachedFlexbox.appendChild(detachedFlexItem); 178 detachedFlexbox.appendChild(detachedFlexItem);
172 shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).webkitAlig nSelf', ''); 179 shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).webkitAlig nSelf', '');
173 shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitAli gnSelf', ''); 180 shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitAli gnSelf', '');
174 181
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after
300 flexbox.style.webkitAlignContent = ''; 307 flexbox.style.webkitAlignContent = '';
301 shouldBeEqualToString('flexbox.style.webkitAlignContent', ''); 308 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
302 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'stretch'); 309 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'stretch');
303 310
304 flexbox.style.webkitAlignContent = 'foo'; 311 flexbox.style.webkitAlignContent = 'foo';
305 shouldBeEqualToString('flexbox.style.webkitAlignContent', ''); 312 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
306 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'stretch'); 313 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'stretch');
307 </script> 314 </script>
308 </body> 315 </body>
309 </html> 316 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/css3/flexbox/css-properties-expected.txt » ('j') | LayoutTests/fast/alignment/parse-align-items.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698