layout/style/test/test_flexbox_flex_shorthand.html@7e26c7da4463
layout/style/test/test_flexbox_flex_shorthand.html
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
1 <!DOCTYPE HTML>
2 <html>
3 <!--
4 https://bugzilla.mozilla.org/show_bug.cgi?id=696253
5 -->
6 <head>
7 <meta charset="utf-8">
8 <title>Test for Bug 696253</title>
9 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
10 <script type="text/javascript" src="property_database.js"></script>
11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
12 </head>
13 <body>
14 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
15 <div id="display">
16 <div id="content">
17 </div>
18 </div>
19 <pre id="test">
20 <script type="application/javascript;version=1.7">
21 "use strict";
23 /** Test for Bug 696253 **/
24 /* (Testing the 'flex' CSS shorthand property) */
26 // The CSS property name for the shorthand we're testing:
27 const gFlexPropName = "flex";
29 // Info from property_database.js on this property:
30 const gFlexPropInfo = gCSSProperties[gFlexPropName];
32 // The name of the property in the DOM (i.e. in elem.style):
33 // (NOTE: In this case it's actually the same as the CSS property name --
34 // "flex" -- but that's not guaranteed in general.)
35 const gFlexDOMName = gFlexPropInfo.domProp;
37 // Default values for shorthand subproperties, when they're not specified
38 // explicitly in a testcase. This lets the testcases be more concise.
39 //
40 // The values here are from the flexbox spec on the 'flex' shorthand:
41 // "When omitted, [flex-grow and flex-shrink] are set to '1'.
42 // "If omitted, the flex basis defaults to 0%"
43 let gFlexShorthandDefaults = {
44 "flex-grow": "1",
45 "flex-shrink": "1",
46 "flex-basis": "0%"
47 };
49 let gFlexShorthandTestcases = [
50 /*
51 {
52 "flex": "SPECIFIED value for flex shorthand",
54 // Expected Computed Values of Subproperties
55 // Semi-optional -- if unspecified, the expected value is taken
56 // from gFlexShorthandDefaults.
57 "flex-grow": "EXPECTED computed value for flex-grow property",
58 "flex-shrink": "EXPECTED computed value for flex-shrink property",
59 "flex-basis": "EXPECTED computed value for flex-basis property",
60 },
61 */
63 // Initial values of subproperties:
64 // --------------------------------
65 // (checked by another test that uses property_database.js, too, but
66 // might as well check here, too, for thoroughness).
67 {
68 "flex": "",
69 "flex-grow": "0",
70 "flex-shrink": "1",
71 "flex-basis": "auto",
72 },
73 {
74 "flex": "initial",
75 "flex-grow": "0",
76 "flex-shrink": "1",
77 "flex-basis": "auto",
78 },
80 // Special keyword "none" --> "0 0 auto"
81 // -------------------------------------
82 {
83 "flex": "none",
84 "flex-grow": "0",
85 "flex-shrink": "0",
86 "flex-basis": "auto",
87 },
89 // One Value (numeric) --> sets flex-grow
90 // --------------------------------------
91 {
92 "flex": "0",
93 "flex-grow": "0",
94 },
95 {
96 "flex": "5",
97 "flex-grow": "5",
98 },
99 {
100 "flex": "1000",
101 "flex-grow": "1000",
102 },
103 {
104 "flex": "0.0000001",
105 "flex-grow": "1e-7"
106 },
107 {
108 "flex": "20000000",
109 "flex-grow": "2e+7"
110 },
112 // One Value (length or other nonnumeric) --> sets flex-basis
113 // ----------------------------------------------------------
114 {
115 "flex": "0px",
116 "flex-basis": "0px",
117 },
118 {
119 "flex": "0%",
120 "flex-basis": "0%",
121 },
122 {
123 "flex": "25px",
124 "flex-basis": "25px",
125 },
126 {
127 "flex": "5%",
128 "flex-basis": "5%",
129 },
130 {
131 "flex": "auto",
132 "flex-basis": "auto",
133 },
134 {
135 "flex": "-moz-fit-content",
136 "flex-basis": "-moz-fit-content",
137 },
138 {
139 "flex": "calc(5px + 6px)",
140 "flex-basis": "11px",
141 },
142 {
143 "flex": "calc(15% + 30px)",
144 "flex-basis": "calc(30px + 15%)",
145 },
147 // Two Values (numeric) --> sets flex-grow, flex-shrink
148 // ----------------------------------------------------
149 {
150 "flex": "0 0",
151 "flex-grow": "0",
152 "flex-shrink": "0",
153 },
154 {
155 "flex": "0 2",
156 "flex-grow": "0",
157 "flex-shrink": "2",
158 },
159 {
160 "flex": "3 0",
161 "flex-grow": "3",
162 "flex-shrink": "0",
163 },
164 {
165 "flex": "0.5000 2.03",
166 "flex-grow": "0.5",
167 "flex-shrink": "2.03",
168 },
169 {
170 "flex": "300.0 500.0",
171 "flex-grow": "300",
172 "flex-shrink": "500",
173 },
175 // Two Values (numeric & length-ish) --> sets flex-grow, flex-basis
176 // ----------------------------------------------------------------
177 {
178 "flex": "0 0px",
179 "flex-grow": "0",
180 "flex-basis": "0px",
181 },
182 {
183 "flex": "0 0%",
184 "flex-grow": "0",
185 "flex-basis": "0%",
186 },
187 {
188 "flex": "10 30px",
189 "flex-grow": "10",
190 "flex-basis": "30px",
191 },
192 {
193 "flex": "99px 2.3",
194 "flex-grow": "2.3",
195 "flex-basis": "99px",
196 },
197 {
198 "flex": "99% 6",
199 "flex-grow": "6",
200 "flex-basis": "99%",
201 },
202 {
203 "flex": "auto 5",
204 "flex-grow": "5",
205 "flex-basis": "auto",
206 },
207 {
208 "flex": "5 -moz-fit-content",
209 "flex-grow": "5",
210 "flex-basis": "-moz-fit-content",
211 },
212 {
213 "flex": "calc(5% + 10px) 3",
214 "flex-grow": "3",
215 "flex-basis": "calc(10px + 5%)",
216 },
218 // Three Values --> Sets all three subproperties
219 // ---------------------------------------------
220 {
221 "flex": "0 0 0",
222 "flex-grow": "0",
223 "flex-shrink": "0",
224 "flex-basis": "0px",
225 },
226 {
227 "flex": "0.0 0.00 0px",
228 "flex-grow": "0",
229 "flex-shrink": "0",
230 "flex-basis": "0px",
231 },
232 {
233 "flex": "0% 0 0",
234 "flex-grow": "0",
235 "flex-shrink": "0",
236 "flex-basis": "0%",
237 },
238 {
239 "flex": "10px 3 2",
240 "flex-grow": "3",
241 "flex-shrink": "2",
242 "flex-basis": "10px",
243 },
244 ];
246 function runFlexShorthandTest(aFlexShorthandTestcase)
247 {
248 let content = document.getElementById("content");
250 let elem = document.createElement("div");
252 elem.style[gFlexDOMName] = aFlexShorthandTestcase[gFlexPropName];
253 content.appendChild(elem);
255 gFlexPropInfo.subproperties.forEach(function(aSubPropName) {
256 var expectedVal = aSubPropName in aFlexShorthandTestcase ?
257 aFlexShorthandTestcase[aSubPropName] :
258 gFlexShorthandDefaults[aSubPropName];
260 // Compare computed value against expected computed value (from testcase)
261 is(window.getComputedStyle(elem, null).getPropertyValue(aSubPropName),
262 expectedVal,
263 "Computed value of subproperty \"" + aSubPropName + "\" when we set \"" +
264 gFlexPropName + ": " + aFlexShorthandTestcase[gFlexPropName] + "\"");
265 });
267 // Clean up
268 content.removeChild(elem);
269 }
271 function main() {
272 gFlexShorthandTestcases.forEach(runFlexShorthandTest);
273 }
275 main();
277 </script>
278 </pre>
279 </body>
280 </html>
