layout/style/test/test_bug365932.html@8bccb770b82d
layout/style/test/test_bug365932.html
Wed, 31 Dec 2014 13:27:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 13:27:57 +0100
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
- permissions
- -rw-r--r--
Ignore runtime configuration files generated during quality assurance.
1 <!DOCTYPE HTML>
2 <html>
3 <!--
4 https://bugzilla.mozilla.org/show_bug.cgi?id=365932
5 -->
6 <head>
7 <title>Test for Bug 365932</title>
8 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
10 <style>
11 #content {
12 width: 800px;
13 height: 800px;
14 padding: 0 200px;
15 border-width: 0 200px;
16 border-style: solid;
17 border-color: transparent
18 }
19 #content2 {
20 display: none;
21 }
22 #content > div, #content2 > div {
23 width: 400px;
24 height: 400px;
25 padding: 0 100px;
26 border-width: 0 100px;
27 border-style: solid;
28 border-color: transparent
29 }
30 #content > div.auto, #content2 > div.auto {
31 width: auto; height: auto;
32 padding: 0 100px;
33 border-width: 0 80px;
34 }
35 </style>
36 </head>
37 <body>
38 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=365932">Mozilla Bug 365932</a>
39 <p id="display"></p>
40 <div id="content">
41 <div id="indent1" style="text-indent: 400px"></div>
42 <div id="indent2" style="text-indent: 50%"></div>
44 <div id="widthheight-1" class="auto"></div>
46 <div id="minwidth1-1" style="min-width: 200px"></div>
47 <div id="minwidth1-2" style="min-width: 25%"></div>
48 <div id="minwidth2-1" style="min-width: 600px"></div>
49 <div id="minwidth2-2" style="min-width: 75%"></div>
50 <div id="minwidth3-1" class="auto" style="min-width: 200px"></div>
51 <div id="minwidth3-2" class="auto" style="min-width: 25%"></div>
52 <div id="minwidth4-1" class="auto" style="min-width: 600px"></div>
53 <div id="minwidth4-2" class="auto" style="min-width: 75%"></div>
55 <div id="maxwidth1-1" style="max-width: 320px"></div>
56 <div id="maxwidth1-2" style="max-width: 40%"></div>
57 <div id="maxwidth2-1" style="max-width: 480px"></div>
58 <div id="maxwidth2-2" style="max-width: 60%"></div>
59 <div id="maxwidth3-1" class="auto" style="max-width: 320px"></div>
60 <div id="maxwidth3-2" class="auto" style="max-width: 40%"></div>
61 <div id="maxwidth4-1" class="auto" style="max-width: 480px"></div>
62 <div id="maxwidth4-2" class="auto" style="max-width: 60%"></div>
64 <div id="minmaxwidth1-1" style="min-width: 200px; max-width: 320px"></div>
65 <div id="minmaxwidth1-2" style="min-width: 200px; max-width: 40%"></div>
66 <div id="minmaxwidth2-1" style="min-width: 25%; max-width: 320px"></div>
67 <div id="minmaxwidth2-2" style="min-width: 25%; max-width: 40%"></div>
68 <div id="minmaxwidth3-1" style="min-width: 600px; max-width: 320px"></div>
69 <div id="minmaxwidth3-2" style="min-width: 600px; max-width: 40%"></div>
70 <div id="minmaxwidth4-1" style="min-width: 75%; max-width: 320px"></div>
71 <div id="minmaxwidth4-2" style="min-width: 75%; max-width: 40%"></div>
72 <div id="minmaxwidth5-1"
73 style="display:none; min-width: 200px; max-width: 320px"></div>
74 <div id="minmaxwidth6-1"
75 style="display: none; min-width: 25%; max-width: 320px"></div>
76 <div id="minmaxwidth7-1"
77 style="display: none; min-width: 600px; max-width: 320px"></div>
78 <div id="minmaxwidth7-2"
79 style="display: none; min-width: 600px; max-width: 40%"></div>
80 <div id="minmaxwidth8-1" class="auto"
81 style="min-width: 200px; max-width: 320px"></div>
82 <div id="minmaxwidth8-2" class="auto"
83 style="min-width: 200px; max-width: 40%"></div>
84 <div id="minmaxwidth9-1" class="auto"
85 style="min-width: 25%; max-width: 320px"></div>
86 <div id="minmaxwidth9-2" class="auto"
87 style="min-width: 25%; max-width: 40%"></div>
88 <div id="minmaxwidth10-1" class="auto"
89 style="min-width: 600px; max-width: 320px"></div>
90 <div id="minmaxwidth10-2" class="auto"
91 style="min-width: 600px; max-width: 40%"></div>
92 <div id="minmaxwidth11-1" class="auto"
93 style="min-width: 75%; max-width: 320px"></div>
94 <div id="minmaxwidth11-2" class="auto"
95 style="min-width: 75%; max-width: 40%"></div>
97 <div id="minheight1-1" style="min-height: 200px"></div>
98 <div id="minheight1-2" style="min-height: 25%"></div>
99 <div id="minheight2-1" style="min-height: 600px"></div>
100 <div id="minheight2-2" style="min-height: 75%"></div>
101 <div id="minheight3-1" class="auto" style="min-height: 200px"></div>
102 <div id="minheight3-2" class="auto" style="min-height: 25%"></div>
103 <div id="minheight4-1" class="auto" style="min-height: 600px"></div>
104 <div id="minheight4-2" class="auto" style="min-height: 75%"></div>
106 <div id="maxheight1-1" style="max-height: 320px"></div>
107 <div id="maxheight1-2" style="max-height: 40%"></div>
108 <div id="maxheight2-1" style="max-height: 480px"></div>
109 <div id="maxheight2-2" style="max-height: 60%"></div>
110 <div id="maxheight3-1" class="auto" style="max-height: 320px"></div>
111 <div id="maxheight3-2" class="auto" style="max-height: 40%"></div>
112 <div id="maxheight4-1" class="auto" style="max-height: 480px"></div>
113 <div id="maxheight4-2" class="auto" style="max-height: 60%"></div>
115 <div id="minmaxheight1-1" style="min-height: 200px; max-height: 320px"></div>
116 <div id="minmaxheight1-2" style="min-height: 200px; max-height: 40%"></div>
117 <div id="minmaxheight2-1" style="min-height: 25%; max-height: 320px"></div>
118 <div id="minmaxheight2-2" style="min-height: 25%; max-height: 40%"></div>
119 <div id="minmaxheight3-1" style="min-height: 600px; max-height: 320px"></div>
120 <div id="minmaxheight3-2" style="min-height: 600px; max-height: 40%"></div>
121 <div id="minmaxheight4-1" style="min-height: 75%; max-height: 320px"></div>
122 <div id="minmaxheight4-2" style="min-height: 75%; max-height: 40%"></div>
123 <div id="minmaxheight5-1"
124 style="display:none; min-height: 200px; max-height: 320px"></div>
125 <div id="minmaxheight6-1"
126 style="display: none; min-height: 25%; max-height: 320px"></div>
127 <div id="minmaxheight7-1"
128 style="display: none; min-height: 600px; max-height: 320px"></div>
129 <div id="minmaxheight7-2"
130 style="display: none; min-height: 600px; max-height: 40%"></div>
131 <div id="minmaxheight8-1" class="auto"
132 style="min-height: 200px; max-height: 320px"></div>
133 <div id="minmaxheight8-2" class="auto"
134 style="min-height: 200px; max-height: 40%"></div>
135 <div id="minmaxheight9-1" class="auto"
136 style="min-height: 25%; max-height: 320px"></div>
137 <div id="minmaxheight9-2" class="auto"
138 style="min-height: 25%; max-height: 40%"></div>
139 <div id="minmaxheight10-1" class="auto"
140 style="min-height: 600px; max-height: 320px"></div>
141 <div id="minmaxheight10-2" class="auto"
142 style="min-height: 600px; max-height: 40%"></div>
143 <div id="minmaxheight11-1" class="auto"
144 style="min-height: 75%; max-height: 320px"></div>
145 <div id="minmaxheight11-2" class="auto"
146 style="min-height: 75%; max-height: 40%"></div>
148 <div id="radius1" style="border-radius: 80px"></div>
149 <div id="radius2" style="border-radius: 10% / 20%"></div>
150 <div id="outlineradius1" style="-moz-outline-radius: 160px"></div>
151 <div id="outlineradius2" style="-moz-outline-radius: 20% / 40%"></div>
152 </div>
153 <div id="content2" style="display: none">
154 <div id="indent3" style="text-indent: 400px"></div>
155 <div id="indent4" style="text-indent: 50%"></div>
157 <div id="minwidth1-3" style="min-width: 200px"></div>
158 <div id="minwidth1-4" style="min-width: 25%"></div>
159 <div id="minwidth2-3" style="min-width: 600px"></div>
160 <div id="minwidth2-4" style="min-width: 75%"></div>
162 <div id="maxwidth1-3" style="max-width: 320px"></div>
163 <div id="maxwidth1-4" style="max-width: 40%"></div>
164 <div id="maxwidth2-3" style="max-width: 480px"></div>
165 <div id="maxwidth2-4" style="max-width: 60%"></div>
167 <div id="minmaxwidth1-3" style="min-width: 200px; max-width: 320px"></div>
168 <div id="minmaxwidth1-4" style="min-width: 200px; max-width: 40%"></div>
169 <div id="minmaxwidth2-3" style="min-width: 25%; max-width: 320px"></div>
170 <div id="minmaxwidth2-4" style="min-width: 25%; max-width: 40%"></div>
171 <div id="minmaxwidth3-3" style="min-width: 600px; max-width: 320px"></div>
172 <div id="minmaxwidth3-4" style="min-width: 600px; max-width: 40%"></div>
173 <div id="minmaxwidth4-3" style="min-width: 75%; max-width: 320px"></div>
174 <div id="minmaxwidth4-4" style="min-width: 75%; max-width: 40%"></div>
176 <div id="minheight1-3" style="min-height: 200px"></div>
177 <div id="minheight1-4" style="min-height: 25%"></div>
178 <div id="minheight2-3" style="min-height: 600px"></div>
179 <div id="minheight2-4" style="min-height: 75%"></div>
181 <div id="maxheight1-3" style="max-height: 320px"></div>
182 <div id="maxheight1-4" style="max-height: 40%"></div>
183 <div id="maxheight2-3" style="max-height: 480px"></div>
184 <div id="maxheight2-4" style="max-height: 60%"></div>
186 <div id="minmaxheight1-3" style="min-height: 200px; max-height: 320px"></div>
187 <div id="minmaxheight1-4" style="min-height: 200px; max-height: 40%"></div>
188 <div id="minmaxheight2-3" style="min-height: 25%; max-height: 320px"></div>
189 <div id="minmaxheight2-4" style="min-height: 25%; max-height: 40%"></div>
190 <div id="minmaxheight3-3" style="min-height: 600px; max-height: 320px"></div>
191 <div id="minmaxheight3-4" style="min-height: 600px; max-height: 40%"></div>
192 <div id="minmaxheight4-3" style="min-height: 75%; max-height: 320px"></div>
193 <div id="minmaxheight4-4" style="min-height: 75%; max-height: 40%"></div>
195 <div id="radius3" style="border-radius: 80px"></div>
196 <div id="radius4" style="border-radius: 10%"></div>
197 <div id="outlineradius3" style="-moz-outline-radius: 160px"></div>
198 <div id="outlineradius4" style="-moz-outline-radius: 20%"></div>
199 </div>
200 <pre id="test">
201 <script class="testbody" type="text/javascript">
203 /** Test for Bug 365932 **/
205 document.body.offsetWidth;
207 doATest("text-indent", "indent", 400, 50);
208 doATest("border-top-left-radius", "radius", 80, 10);
209 doATest("-moz-outline-radius-topleft", "outlineradius", 160, 20);
211 doATest("width", "widthheight-", 440, 0);
212 doATest("height", "widthheight-", 0, 0);
214 doATest("min-width", "minwidth1-", 200, 25);
215 doATest("min-width", "minwidth2-", 600, 75);
216 doATest("max-width", "maxwidth1-", 320, 40);
217 doATest("max-width", "maxwidth2-", 480, 60);
219 // Test that min-width doesn't affect computed max-width
220 doATest("max-width", "minmaxwidth1-", 320, 40);
221 doATest("max-width", "minmaxwidth2-", 320, 40);
222 doATest("max-width", "minmaxwidth3-", 320, 40);
223 doATest("max-width", "minmaxwidth4-", 320, 40);
225 // Test that max and min-width affect computed width correctly
226 doATest("width", "minwidth1-", 400, 0);
227 doATest("width", "minwidth2-", 600, 0);
228 doATest("width", "minwidth3-", 440, 0);
229 doATest("width", "minwidth4-", 600, 0);
230 doATest("width", "maxwidth1-", 320, 0);
231 doATest("width", "maxwidth2-", 400, 0);
232 doATest("width", "maxwidth3-", 320, 0);
233 doATest("width", "maxwidth4-", 440, 0);
234 doATest("width", "minmaxwidth1-", 320, 0);
235 doATest("width", "minmaxwidth2-", 320, 0);
236 doATest("width", "minmaxwidth3-", 600, 0);
237 doATest("width", "minmaxwidth4-", 600, 0);
238 doATest("width", "minmaxwidth5-", 320, 0);
239 doATest("width", "minmaxwidth6-", 320, 0);
240 doATest("width", "minmaxwidth7-", 600, 0);
241 doATest("width", "minmaxwidth8-", 320, 0);
242 doATest("width", "minmaxwidth9-", 320, 0);
243 doATest("width", "minmaxwidth10-", 600, 0);
244 doATest("width", "minmaxwidth11-", 600, 0);
246 doATest("min-height", "minheight1-", 200, 25);
247 doATest("min-height", "minheight2-", 600, 75);
248 doATest("max-height", "maxheight1-", 320, 40);
249 doATest("max-height", "maxheight2-", 480, 60);
251 // Test that min-height doesn't affect computed max-height
252 doATest("max-height", "minmaxheight1-", 320, 40);
253 doATest("max-height", "minmaxheight2-", 320, 40);
254 doATest("max-height", "minmaxheight3-", 320, 40);
255 doATest("max-height", "minmaxheight4-", 320, 40);
257 // Test that max and min-height affect computed height correctly
258 doATest("height", "minheight1-", 400, 0);
259 doATest("height", "minheight2-", 600, 0);
260 doATest("height", "minheight3-", 200, 0);
261 doATest("height", "minheight4-", 600, 0);
262 doATest("height", "maxheight1-", 320, 0);
263 doATest("height", "maxheight2-", 400, 0);
264 doATest("height", "maxheight3-", 0, 0);
265 doATest("height", "maxheight4-", 0, 0);
266 doATest("height", "minmaxheight1-", 320, 0);
267 doATest("height", "minmaxheight2-", 320, 0);
268 doATest("height", "minmaxheight3-", 600, 0);
269 doATest("height", "minmaxheight4-", 600, 0);
270 doATest("height", "minmaxheight5-", 320, 0);
271 doATest("height", "minmaxheight6-", 320, 0);
272 doATest("height", "minmaxheight7-", 600, 0);
273 doATest("height", "minmaxheight8-", 200, 0);
274 doATest("height", "minmaxheight9-", 200, 0);
275 doATest("height", "minmaxheight10-", 600, 0);
276 doATest("height", "minmaxheight11-", 600, 0);
278 function style(id) {
279 return document.defaultView.getComputedStyle($(id), "");
280 }
282 function round(num, decimals) {
283 return Math.round(num * Math.pow(10, decimals))/Math.pow(10, decimals);
284 }
286 function doATest(propName, idBase, coordVal, percentVal)
287 {
288 var cssPropertiesPropName = "";
289 var parts = propName.split("-");
290 ok(parts.length > 0, "prop name", "Empty css prop name");
291 var i;
292 if (parts[0]) {
293 i = 0;
294 } else {
295 is(parts[1], "moz", "Testing an extension property that's not -moz");
296 ok(parts.length > 2, "prop name 2", "Bogus -moz prop name");
297 cssPropertiesPropName = "Moz";
298 i = 2;
299 }
300 for (; i < parts.length; ++i) {
301 var part = parts[i];
302 isnot(part, "", "Must have a nonempty part");
303 if (cssPropertiesPropName) {
304 cssPropertiesPropName += part.charAt(0).toUpperCase() +
305 part.substring(1, part.length);
306 } else {
307 cssPropertiesPropName += part;
308 }
309 }
311 var decl = style(idBase+"1");
312 var prettyName = propName + " of " + idBase+"1";
314 is(decl[cssPropertiesPropName], coordVal+"px", prettyName);
315 is(decl.getPropertyCSSValue(propName).cssValueType,
316 CSSValue.CSS_PRIMITIVE_VALUE, prettyName + " is primitive value");
317 is(decl.getPropertyCSSValue(propName).primitiveType,
318 CSSPrimitiveValue.CSS_PX, prettyName + " is px");
319 is(decl.getPropertyCSSValue(propName).cssText, coordVal + "px",
320 prettyName + " cssText");
321 /* Since floats are only accurate to like 6 decimal places, round to 3 decimal
322 places here. */
323 is(round(decl.getPropertyCSSValue(propName)
324 .getFloatValue(CSSPrimitiveValue.CSS_PX),
325 3), coordVal, prettyName + " as float value");
327 if (!$(idBase+"2")) {
328 // Nothing else to do here
329 return
330 }
332 decl = style(idBase+"2");
333 prettyName = propName + " of " + idBase+"2";
335 is(decl[cssPropertiesPropName], coordVal+"px", prettyName);
336 is(decl.getPropertyCSSValue(propName).cssValueType,
337 CSSValue.CSS_PRIMITIVE_VALUE, prettyName + " is primitive value");
338 is(decl.getPropertyCSSValue(propName).primitiveType,
339 CSSPrimitiveValue.CSS_PX, prettyName + " is px");
340 is(decl.getPropertyCSSValue(propName).cssText, coordVal + "px",
341 prettyName + " cssText");
342 /* Since floats are only accurate to like 6 decimal places, round to 3 decimal
343 places here. */
344 is(round(decl.getPropertyCSSValue(propName)
345 .getFloatValue(CSSPrimitiveValue.CSS_PX),
346 3), coordVal, prettyName + " as float value");
348 if (percentVal) {
349 decl = style(idBase+"3");
350 prettyName = propName + " of " + idBase+"3";
352 is(decl[cssPropertiesPropName], coordVal+"px", prettyName);
353 is(decl.getPropertyCSSValue(propName).cssValueType,
354 CSSValue.CSS_PRIMITIVE_VALUE, prettyName + " is primitive value");
355 is(decl.getPropertyCSSValue(propName).primitiveType,
356 CSSPrimitiveValue.CSS_PX, prettyName + " is px");
357 is(decl.getPropertyCSSValue(propName).cssText, coordVal + "px",
358 prettyName + " cssText");
359 /* Since floats are only accurate to like 6 decimal places, round to 3 decimal
360 places here. */
361 is(round(decl.getPropertyCSSValue(propName)
362 .getFloatValue(CSSPrimitiveValue.CSS_PX),
363 3), coordVal, prettyName + " as float value");
365 decl = style(idBase+"4");
366 prettyName = propName + " of " + idBase+"4";
368 is(decl[cssPropertiesPropName], percentVal+"%", prettyName);
369 is(decl.getPropertyCSSValue(propName).cssValueType,
370 CSSValue.CSS_PRIMITIVE_VALUE, prettyName + " is primitive value");
371 is(decl.getPropertyCSSValue(propName).primitiveType,
372 CSSPrimitiveValue.CSS_PERCENTAGE, prettyName + " is percent");
373 is(decl.getPropertyCSSValue(propName).cssText, percentVal+"%",
374 prettyName + " cssText");
375 /* Since floats are only accurate to like 6 decimal places, round to 3 decimal
376 places here. */
377 is(round(decl.getPropertyCSSValue(propName)
378 .getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE),
379 3), percentVal, prettyName + " as float value");
381 }
382 }
383 </script>
384 </pre>
385 </body>
386 </html>
