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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/css-properties.html

Issue 1088633002: Unprefix flexbox tests. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: whoops, a > went missing Created 5 years, 8 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 | Annotate | Revision Log
« no previous file with comments | « LayoutTests/css3/flexbox/cross-axis-scrollbar.html ('k') | LayoutTests/css3/flexbox/css-properties-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 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 flex and inline-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 = 'flex';
16 shouldBeEqualToString('flexbox.style.display', '-webkit-flex'); 16 shouldBeEqualToString('flexbox.style.display', '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 = 'inline-flex';
22 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex'); 22 shouldBeEqualToString('flexbox.style.display', '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', '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 flexbox.style.display = 'flex';
31 31
32 var flexitem = document.getElementById("flexitem"); 32 var flexitem = document.getElementById("flexitem");
33 shouldBeEqualToString('flexitem.style.webkitOrder', ''); 33 shouldBeEqualToString('flexitem.style.webkitOrder', '');
34 34
35 flexitem.style.webkitOrder = 2; 35 flexitem.style.webkitOrder = 2;
36 shouldBeEqualToString('flexitem.style.webkitOrder', '2'); 36 shouldBeEqualToString('flexitem.style.webkitOrder', '2');
37 37
38 flexitem.style.webkitOrder = -1; 38 flexitem.style.webkitOrder = -1;
39 shouldBeEqualToString('flexitem.style.webkitOrder', '-1'); 39 shouldBeEqualToString('flexitem.style.webkitOrder', '-1');
40 40
41 flexitem.style.webkitOrder = 0; 41 flexitem.style.webkitOrder = 0;
42 shouldBeEqualToString('flexitem.style.webkitOrder', '0'); 42 shouldBeEqualToString('flexitem.style.webkitOrder', '0');
43 43
44 // -webkit-order must be an integer. 44 // -webkit-order must be an integer.
45 flexitem.style.webkitOrder = 1.5; 45 flexitem.style.webkitOrder = 1.5;
46 shouldBeEqualToString('flexitem.style.webkitOrder', '0'); 46 shouldBeEqualToString('flexitem.style.webkitOrder', '0');
47 47
48 flexitem.style.webkitOrder = "test"; 48 flexitem.style.webkitOrder = "test";
49 shouldBeEqualToString('flexitem.style.webkitOrder', '0'); 49 shouldBeEqualToString('flexitem.style.webkitOrder', '0');
50 50
51 flexitem.style.webkitOrder = ''; 51 flexitem.style.webkitOrder = '';
52 shouldBeEqualToString('flexitem.style.webkitOrder', ''); 52 shouldBeEqualToString('flexitem.style.webkitOrder', '');
53 53
54 54
55 shouldBeEqualToString('flexbox.style.webkitJustifyContent', ''); 55 shouldBeEqualToString('flexbox.style.justifyContent', '');
56 // The initial value is 'flex-start'. 56 // The initial value is 'flex-start'.
57 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'flex-start'); 57 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', ' flex-start');
58 58
59 flexbox.style.webkitJustifyContent = 'foo'; 59 flexbox.style.justifyContent = 'foo';
60 shouldBeEqualToString('flexbox.style.webkitJustifyContent', ''); 60 shouldBeEqualToString('flexbox.style.justifyContent', '');
61 61
62 flexbox.style.webkitJustifyContent = 'flex-start'; 62 flexbox.style.justifyContent = 'flex-start';
63 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'flex-start'); 63 shouldBeEqualToString('flexbox.style.justifyContent', 'flex-start');
64 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'flex-start'); 64 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', ' flex-start');
65 65
66 flexbox.style.webkitJustifyContent = 'flex-end'; 66 flexbox.style.justifyContent = 'flex-end';
67 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'flex-end'); 67 shouldBeEqualToString('flexbox.style.justifyContent', 'flex-end');
68 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'flex-end'); 68 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', ' flex-end');
69 69
70 flexbox.style.webkitJustifyContent = 'center'; 70 flexbox.style.justifyContent = 'center';
71 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'center'); 71 shouldBeEqualToString('flexbox.style.justifyContent', 'center');
72 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'center'); 72 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', ' center');
73 73
74 flexbox.style.webkitJustifyContent = 'space-between'; 74 flexbox.style.justifyContent = 'space-between';
75 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'space-between'); 75 shouldBeEqualToString('flexbox.style.justifyContent', 'space-between');
76 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'space-between'); 76 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', ' space-between');
77 77
78 flexbox.style.webkitJustifyContent = ''; 78 flexbox.style.justifyContent = '';
79 shouldBeEqualToString('flexbox.style.webkitJustifyContent', ''); 79 shouldBeEqualToString('flexbox.style.justifyContent', '');
80 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte nt', 'flex-start'); 80 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', ' flex-start');
81 81
82 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); 82 shouldBeEqualToString('flexbox.style.alignSelf', '');
83 // The initial value is 'auto', which will be resolved depending on parent's sty le (except for the 'document' element). 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).alignSelf', 'start '); 84 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start ');
85 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).a lignSelf', 'start'); 85 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).a lignSelf', 'start');
86 86
87 flexbox.style.webkitAlignSelf = 'foo'; 87 flexbox.style.alignSelf = 'foo';
88 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); 88 shouldBeEqualToString('flexbox.style.alignSelf', '');
89 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start '); 89 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start ');
90 90
91 flexbox.style.webkitAlignSelf = 'auto'; 91 flexbox.style.alignSelf = 'auto';
92 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'auto'); 92 shouldBeEqualToString('flexbox.style.alignSelf', 'auto');
93 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start '); 93 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start ');
94 94
95 flexbox.style.webkitAlignSelf = 'flex-start'; 95 flexbox.style.alignSelf = 'flex-start';
96 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-start'); 96 shouldBeEqualToString('flexbox.style.alignSelf', 'flex-start');
97 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-start'); 97 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'flex- start');
98 98
99 flexbox.style.webkitAlignSelf = 'flex-end'; 99 flexbox.style.alignSelf = 'flex-end';
100 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-end'); 100 shouldBeEqualToString('flexbox.style.alignSelf', 'flex-end');
101 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-end'); 101 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'flex- end');
102 102
103 flexbox.style.webkitAlignSelf = 'center'; 103 flexbox.style.alignSelf = 'center';
104 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'center'); 104 shouldBeEqualToString('flexbox.style.alignSelf', 'center');
105 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'center'); 105 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'cente r');
106 106
107 flexbox.style.webkitAlignSelf = 'stretch'; 107 flexbox.style.alignSelf = 'stretch';
108 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'stretch'); 108 shouldBeEqualToString('flexbox.style.alignSelf', 'stretch');
109 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch'); 109 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'stret ch');
110 110
111 flexbox.style.webkitAlignSelf = 'baseline'; 111 flexbox.style.alignSelf = 'baseline';
112 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'baseline'); 112 shouldBeEqualToString('flexbox.style.alignSelf', 'baseline');
113 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'baseline'); 113 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'basel ine');
114 114
115 flexbox.style.webkitAlignSelf = ''; 115 flexbox.style.alignSelf = '';
116 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); 116 shouldBeEqualToString('flexbox.style.alignSelf', '');
117 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start '); 117 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start ');
118 118
119 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); 119 shouldBeEqualToString('flexbox.style.alignItems', '');
120 shouldBeEqualToString('flexitem.style.alignSelf', ''); 120 shouldBeEqualToString('flexitem.style.alignSelf', '');
121 // The initial value is 'auto', which will be resolved to 'stretch' in case of f lexbox containers. 121 // The initial value is 'auto', which will be resolved to 'stretch' in case of f lexbox containers.
122 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre tch'); 122 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre tch');
123 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre tch'); 123 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre tch');
124 124
125 flexbox.style.webkitAlignItems = 'foo'; 125 flexbox.style.alignItems = 'foo';
126 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); 126 shouldBeEqualToString('flexbox.style.alignItems', '');
127 shouldBeEqualToString('flexitem.style.alignSelf', ''); 127 shouldBeEqualToString('flexitem.style.alignSelf', '');
128 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre tch'); 128 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre tch');
129 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre tch'); 129 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre tch');
130 130
131 flexbox.style.webkitAlignItems = 'auto'; 131 flexbox.style.alignItems = 'auto';
132 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'auto'); 132 shouldBeEqualToString('flexbox.style.alignItems', 'auto');
133 shouldBeEqualToString('flexitem.style.alignSelf', ''); 133 shouldBeEqualToString('flexitem.style.alignSelf', '');
134 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre tch'); 134 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre tch');
135 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre tch'); 135 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre tch');
136 136
137 flexbox.style.webkitAlignItems = 'flex-start'; 137 flexbox.style.alignItems = 'flex-start';
138 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-start'); 138 shouldBeEqualToString('flexbox.style.alignItems', 'flex-start');
139 shouldBeEqualToString('flexitem.style.webkitAlignSelf', ''); 139 shouldBeEqualToString('flexitem.style.alignSelf', '');
140 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-start'); 140 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex -start');
141 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-start'); 141 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'flex -start');
142 142
143 flexbox.style.webkitAlignItems = 'flex-end'; 143 flexbox.style.alignItems = 'flex-end';
144 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-end'); 144 shouldBeEqualToString('flexbox.style.alignItems', 'flex-end');
145 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-end'); 145 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex -end');
146 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-end'); 146 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'flex -end');
147 147
148 flexbox.style.webkitAlignItems = 'center'; 148 flexbox.style.alignItems = 'center';
149 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'center'); 149 shouldBeEqualToString('flexbox.style.alignItems', 'center');
150 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'center'); 150 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'cent er');
151 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'center'); 151 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'cent er');
152 152
153 flexbox.style.webkitAlignItems = 'stretch'; 153 flexbox.style.alignItems = 'stretch';
154 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'stretch'); 154 shouldBeEqualToString('flexbox.style.alignItems', 'stretch');
155 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch'); 155 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre tch');
156 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch'); 156 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre tch');
157 157
158 flexbox.style.webkitAlignItems = 'baseline'; 158 flexbox.style.alignItems = 'baseline';
159 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'baseline'); 159 shouldBeEqualToString('flexbox.style.alignItems', 'baseline');
160 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'baseline'); 160 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'base line');
161 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'baseline'); 161 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'base line');
162 162
163 flexbox.style.webkitAlignItems = ''; 163 flexbox.style.alignItems = '';
164 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); 164 shouldBeEqualToString('flexbox.style.alignItems', '');
165 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch'); 165 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre tch');
166 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch'); 166 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre tch');
167 167
168 flexbox.style.display = 'none'; 168 flexbox.style.display = 'none';
169 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); 169 shouldBeEqualToString('flexbox.style.alignItems', '');
170 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'star t'); 170 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'star t');
171 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'star t'); 171 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'star t');
172 flexbox.style.display = 'flex'; 172 flexbox.style.display = 'flex';
173 173
174 174
175 // 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.
176 var detachedFlexbox = document.createElement('div'); 176 var detachedFlexbox = document.createElement('div');
177 var detachedFlexItem = document.createElement('div'); 177 var detachedFlexItem = document.createElement('div');
178 detachedFlexbox.appendChild(detachedFlexItem); 178 detachedFlexbox.appendChild(detachedFlexItem);
179 shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).webkitAlig nSelf', ''); 179 shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).alignSelf' , '');
180 shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitAli gnSelf', ''); 180 shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).alignSelf ', '');
181 181
182 182
183 shouldBeEqualToString('flexbox.style.webkitFlexDirection', ''); 183 shouldBeEqualToString('flexbox.style.flexDirection', '');
184 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirectio n', 'row'); 184 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'r ow');
185 185
186 flexbox.style.webkitFlexDirection = 'foo'; 186 flexbox.style.flexDirection = 'foo';
187 shouldBeEqualToString('flexbox.style.webkitFlexDirection', ''); 187 shouldBeEqualToString('flexbox.style.flexDirection', '');
188 188
189 flexbox.style.webkitFlexDirection = 'row'; 189 flexbox.style.flexDirection = 'row';
190 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row'); 190 shouldBeEqualToString('flexbox.style.flexDirection', 'row');
191 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirectio n', 'row'); 191 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'r ow');
192 192
193 flexbox.style.webkitFlexDirection = 'row-reverse'; 193 flexbox.style.flexDirection = 'row-reverse';
194 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row-reverse'); 194 shouldBeEqualToString('flexbox.style.flexDirection', 'row-reverse');
195 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirectio n', 'row-reverse'); 195 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'r ow-reverse');
196 196
197 flexbox.style.webkitFlexDirection = 'column'; 197 flexbox.style.flexDirection = 'column';
198 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column'); 198 shouldBeEqualToString('flexbox.style.flexDirection', 'column');
199 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirectio n', 'column'); 199 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'c olumn');
200 200
201 flexbox.style.webkitFlexDirection = 'column-reverse'; 201 flexbox.style.flexDirection = 'column-reverse';
202 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column-reverse'); 202 shouldBeEqualToString('flexbox.style.flexDirection', 'column-reverse');
203 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirectio n', 'column-reverse'); 203 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'c olumn-reverse');
204 204
205 shouldBeEqualToString('flexbox.style.webkitFlexWrap', ''); 205 shouldBeEqualToString('flexbox.style.flexWrap', '');
206 // The initial value is 'nowrap'. 206 // The initial value is 'nowrap'.
207 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', ' nowrap'); 207 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'nowrap ');
208 208
209 flexbox.style.webkitFlexWrap = 'foo'; 209 flexbox.style.flexWrap = 'foo';
210 shouldBeEqualToString('flexbox.style.webkitFlexWrap', ''); 210 shouldBeEqualToString('flexbox.style.flexWrap', '');
211 211
212 flexbox.style.webkitFlexWrap = 'nowrap'; 212 flexbox.style.flexWrap = 'nowrap';
213 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'nowrap'); 213 shouldBeEqualToString('flexbox.style.flexWrap', 'nowrap');
214 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', ' nowrap'); 214 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'nowrap ');
215 215
216 flexbox.style.webkitFlexWrap = 'wrap'; 216 flexbox.style.flexWrap = 'wrap';
217 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap'); 217 shouldBeEqualToString('flexbox.style.flexWrap', 'wrap');
218 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', ' wrap'); 218 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'wrap') ;
219 219
220 flexbox.style.webkitFlexWrap = 'wrap-reverse'; 220 flexbox.style.flexWrap = 'wrap-reverse';
221 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap-reverse'); 221 shouldBeEqualToString('flexbox.style.flexWrap', 'wrap-reverse');
222 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', ' wrap-reverse'); 222 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'wrap-r everse');
223 223
224 flexbox.style.webkitFlexFlow = ''; 224 flexbox.style.flexFlow = '';
225 shouldBeEqualToString('flexbox.style.webkitFlexFlow', ''); 225 shouldBeEqualToString('flexbox.style.flexFlow', '');
226 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', ' row nowrap'); 226 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'row no wrap');
227 227
228 flexbox.style.webkitFlexFlow = 'foo'; 228 flexbox.style.flexFlow = 'foo';
229 shouldBeEqualToString('flexbox.style.webkitFlexFlow', ''); 229 shouldBeEqualToString('flexbox.style.flexFlow', '');
230 230
231 function testFlexFlowValue(value, expected, expectedComputed) 231 function testFlexFlowValue(value, expected, expectedComputed)
232 { 232 {
233 flexbox.style.webkitFlexFlow = value; 233 flexbox.style.flexFlow = value;
234 shouldBeEqualToString('flexbox.style.webkitFlexFlow', expected.replace(/^ /, '').replace(/ $/, '')); 234 shouldBeEqualToString('flexbox.style.flexFlow', expected.replace(/^ /, '').r eplace(/ $/, ''));
235 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow ', expectedComputed); 235 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', exp ectedComputed);
236 } 236 }
237 237
238 var directions = ['', 'row', 'row-reverse', 'column', 'column-reverse']; 238 var directions = ['', 'row', 'row-reverse', 'column', 'column-reverse'];
239 var wraps = ['', 'nowrap', 'wrap', 'wrap-reverse']; 239 var wraps = ['', 'nowrap', 'wrap', 'wrap-reverse'];
240 directions.forEach(function(direction) { 240 directions.forEach(function(direction) {
241 wraps.forEach(function(wrap) { 241 wraps.forEach(function(wrap) {
242 var expectedComputed = (direction || 'row') + ' ' + (wrap || 'nowrap'); 242 var expectedComputed = (direction || 'row') + ' ' + (wrap || 'nowrap');
243 var expected = direction + ' ' + wrap; 243 var expected = direction + ' ' + wrap;
244 testFlexFlowValue(direction + ' ' + wrap, expected, expectedComputed); 244 testFlexFlowValue(direction + ' ' + wrap, expected, expectedComputed);
245 testFlexFlowValue(wrap + ' ' + direction, expected, expectedComputed); 245 testFlexFlowValue(wrap + ' ' + direction, expected, expectedComputed);
246 }); 246 });
247 }); 247 });
248 248
249 flexbox.style.webkitFlexFlow = ''; 249 flexbox.style.flexFlow = '';
250 shouldBeEqualToString('flexbox.style.webkitFlexFlow', ''); 250 shouldBeEqualToString('flexbox.style.flexFlow', '');
251 flexbox.style.webkitFlexFlow = 'wrap wrap-reverse'; 251 flexbox.style.flexFlow = 'wrap wrap-reverse';
252 shouldBeEqualToString('flexbox.style.webkitFlexFlow', ''); 252 shouldBeEqualToString('flexbox.style.flexFlow', '');
253 flexbox.style.webkitFlexFlow = 'column row'; 253 flexbox.style.flexFlow = 'column row';
254 shouldBeEqualToString('flexbox.style.webkitFlexFlow', ''); 254 shouldBeEqualToString('flexbox.style.flexFlow', '');
255 255
256 flexbox.style.webkitFlexFlow = ''; 256 flexbox.style.flexFlow = '';
257 shouldBeEqualToString('flexbox.style.webkitFlexFlow', ''); 257 shouldBeEqualToString('flexbox.style.flexFlow', '');
258 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', ' row nowrap'); 258 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'row no wrap');
259 flexbox.style.webkitFlexDirection = 'column'; 259 flexbox.style.flexDirection = 'column';
260 flexbox.style.webkitFlexWrap = 'initial'; 260 flexbox.style.flexWrap = 'initial';
261 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column'); 261 shouldBeEqualToString('flexbox.style.flexFlow', 'column');
262 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', ' column nowrap'); 262 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'column nowrap');
263 flexbox.style.webkitFlexWrap = 'wrap'; 263 flexbox.style.flexWrap = 'wrap';
264 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column wrap'); 264 shouldBeEqualToString('flexbox.style.flexFlow', 'column wrap');
265 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', ' column wrap'); 265 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'column wrap');
266 flexbox.style.webkitFlexFlow = 'row-reverse wrap-reverse'; 266 flexbox.style.flexFlow = 'row-reverse wrap-reverse';
267 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'row-reverse wrap-reverse' ); 267 shouldBeEqualToString('flexbox.style.flexFlow', 'row-reverse wrap-reverse');
268 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', ' row-reverse wrap-reverse'); 268 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'row-re verse wrap-reverse');
269 269
270 // -webkit-flex-flow is a shorthand, so it shouldn't show up as a computed prope rty. 270 // flex-flow is a shorthand, so it shouldn't show up as a computed property.
271 var computedStyle = getComputedStyle(flexbox); 271 var computedStyle = getComputedStyle(flexbox);
272 var foundFlexFlow = false; 272 var foundFlexFlow = false;
273 for (var i = 0; i < computedStyle.length; ++i) { 273 for (var i = 0; i < computedStyle.length; ++i) {
274 if (computedStyle[i] == 'webkitFlexFlow') 274 if (computedStyle[i] == 'flexFlow')
275 foundFlexFlow = true; 275 foundFlexFlow = true;
276 } 276 }
277 shouldBeFalse('foundFlexFlow'); 277 shouldBeFalse('foundFlexFlow');
278 278
279 // The initial value is 'auto', which will be resolved to 'stretch' in case of f lexbox containers. 279 // The initial value is 'auto', which will be resolved to 'stretch' in case of f lexbox containers.
280 shouldBeEqualToString('flexbox.style.webkitAlignContent', ''); 280 shouldBeEqualToString('flexbox.style.alignContent', '');
281 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'stretch'); 281 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'st retch');
282 282
283 flexbox.style.webkitAlignContent = 'flex-start'; 283 flexbox.style.alignContent = 'flex-start';
284 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'flex-start'); 284 shouldBeEqualToString('flexbox.style.alignContent', 'flex-start');
285 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'flex-start'); 285 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'fl ex-start');
286 286
287 flexbox.style.webkitAlignContent = 'flex-end'; 287 flexbox.style.alignContent = 'flex-end';
288 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'flex-end'); 288 shouldBeEqualToString('flexbox.style.alignContent', 'flex-end');
289 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'flex-end'); 289 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'fl ex-end');
290 290
291 flexbox.style.webkitAlignContent = 'center'; 291 flexbox.style.alignContent = 'center';
292 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'center'); 292 shouldBeEqualToString('flexbox.style.alignContent', 'center');
293 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'center'); 293 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'ce nter');
294 294
295 flexbox.style.webkitAlignContent = 'space-between'; 295 flexbox.style.alignContent = 'space-between';
296 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'space-between'); 296 shouldBeEqualToString('flexbox.style.alignContent', 'space-between');
297 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'space-between'); 297 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'sp ace-between');
298 298
299 flexbox.style.webkitAlignContent = 'space-around'; 299 flexbox.style.alignContent = 'space-around';
300 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'space-around'); 300 shouldBeEqualToString('flexbox.style.alignContent', 'space-around');
301 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'space-around'); 301 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'sp ace-around');
302 302
303 flexbox.style.webkitAlignContent = 'stretch'; 303 flexbox.style.alignContent = 'stretch';
304 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'stretch'); 304 shouldBeEqualToString('flexbox.style.alignContent', 'stretch');
305 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'stretch'); 305 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'st retch');
306 306
307 flexbox.style.webkitAlignContent = ''; 307 flexbox.style.alignContent = '';
308 shouldBeEqualToString('flexbox.style.webkitAlignContent', ''); 308 shouldBeEqualToString('flexbox.style.alignContent', '');
309 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'stretch'); 309 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'st retch');
310 310
311 flexbox.style.webkitAlignContent = 'foo'; 311 flexbox.style.alignContent = 'foo';
312 shouldBeEqualToString('flexbox.style.webkitAlignContent', ''); 312 shouldBeEqualToString('flexbox.style.alignContent', '');
313 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent ', 'stretch'); 313 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'st retch');
314 </script> 314 </script>
315 </body> 315 </body>
316 </html> 316 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/cross-axis-scrollbar.html ('k') | LayoutTests/css3/flexbox/css-properties-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698