test_bug1292447.html (14675B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 Was for: https://bugzilla.mozilla.org/show_bug.cgi?id=365932 5 Updated for: https://bugzilla.mozilla.org/show_bug.cgi?id=1292447 6 --> 7 <head> 8 <title>Test for Bug 1292447</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 11 <style> 12 #content { 13 width: 800px; 14 height: 800px; 15 padding: 0 200px; 16 border-width: 0 200px; 17 border-style: solid; 18 border-color: transparent 19 } 20 #content2 { 21 display: none; 22 } 23 #content > div, #content2 > div { 24 width: 400px; 25 height: 400px; 26 padding: 0 100px; 27 border-width: 0 100px; 28 border-style: solid; 29 border-color: transparent 30 } 31 #content > div.auto, #content2 > div.auto { 32 width: auto; height: auto; 33 padding: 0 100px; 34 border-width: 0 80px; 35 } 36 </style> 37 </head> 38 <body> 39 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1292447">Mozilla Bug 1292447</a> 40 <p id="display"></p> 41 <div id="content"> 42 <div id="indent1" style="text-indent: 400px"></div> 43 <div id="indent2" style="text-indent: 50%"></div> 44 45 <div id="widthheight-1" class="auto"></div> 46 47 <div id="minwidth1-1" style="min-width: 200px"></div> 48 <div id="minwidth1-2" style="min-width: 25%"></div> 49 <div id="minwidth2-1" style="min-width: 600px"></div> 50 <div id="minwidth2-2" style="min-width: 75%"></div> 51 <div id="minwidth3-1" class="auto" style="min-width: 200px"></div> 52 <div id="minwidth3-2" class="auto" style="min-width: 25%"></div> 53 <div id="minwidth4-1" class="auto" style="min-width: 600px"></div> 54 <div id="minwidth4-2" class="auto" style="min-width: 75%"></div> 55 56 <div id="maxwidth1-1" style="max-width: 320px"></div> 57 <div id="maxwidth1-2" style="max-width: 40%"></div> 58 <div id="maxwidth2-1" style="max-width: 480px"></div> 59 <div id="maxwidth2-2" style="max-width: 60%"></div> 60 <div id="maxwidth3-1" class="auto" style="max-width: 320px"></div> 61 <div id="maxwidth3-2" class="auto" style="max-width: 40%"></div> 62 <div id="maxwidth4-1" class="auto" style="max-width: 480px"></div> 63 <div id="maxwidth4-2" class="auto" style="max-width: 60%"></div> 64 65 <div id="minmaxwidth1-1" style="min-width: 200px; max-width: 320px"></div> 66 <div id="minmaxwidth1-2" style="min-width: 200px; max-width: 40%"></div> 67 <div id="minmaxwidth2-1" style="min-width: 25%; max-width: 320px"></div> 68 <div id="minmaxwidth2-2" style="min-width: 25%; max-width: 40%"></div> 69 <div id="minmaxwidth3-1" style="min-width: 600px; max-width: 320px"></div> 70 <div id="minmaxwidth3-2" style="min-width: 600px; max-width: 40%"></div> 71 <div id="minmaxwidth4-1" style="min-width: 75%; max-width: 320px"></div> 72 <div id="minmaxwidth4-2" style="min-width: 75%; max-width: 40%"></div> 73 <div id="minmaxwidth5-1" 74 style="display:none; min-width: 200px; max-width: 320px"></div> 75 <div id="minmaxwidth6-1" 76 style="display: none; min-width: 25%; max-width: 320px"></div> 77 <div id="minmaxwidth7-1" 78 style="display: none; min-width: 600px; max-width: 320px"></div> 79 <div id="minmaxwidth7-2" 80 style="display: none; min-width: 600px; max-width: 40%"></div> 81 <div id="minmaxwidth8-1" class="auto" 82 style="min-width: 200px; max-width: 320px"></div> 83 <div id="minmaxwidth8-2" class="auto" 84 style="min-width: 200px; max-width: 40%"></div> 85 <div id="minmaxwidth9-1" class="auto" 86 style="min-width: 25%; max-width: 320px"></div> 87 <div id="minmaxwidth9-2" class="auto" 88 style="min-width: 25%; max-width: 40%"></div> 89 <div id="minmaxwidth10-1" class="auto" 90 style="min-width: 600px; max-width: 320px"></div> 91 <div id="minmaxwidth10-2" class="auto" 92 style="min-width: 600px; max-width: 40%"></div> 93 <div id="minmaxwidth11-1" class="auto" 94 style="min-width: 75%; max-width: 320px"></div> 95 <div id="minmaxwidth11-2" class="auto" 96 style="min-width: 75%; max-width: 40%"></div> 97 98 <div id="minheight1-1" style="min-height: 200px"></div> 99 <div id="minheight1-2" style="min-height: 25%"></div> 100 <div id="minheight2-1" style="min-height: 600px"></div> 101 <div id="minheight2-2" style="min-height: 75%"></div> 102 <div id="minheight3-1" class="auto" style="min-height: 200px"></div> 103 <div id="minheight3-2" class="auto" style="min-height: 25%"></div> 104 <div id="minheight4-1" class="auto" style="min-height: 600px"></div> 105 <div id="minheight4-2" class="auto" style="min-height: 75%"></div> 106 107 <div id="maxheight1-1" style="max-height: 320px"></div> 108 <div id="maxheight1-2" style="max-height: 40%"></div> 109 <div id="maxheight2-1" style="max-height: 480px"></div> 110 <div id="maxheight2-2" style="max-height: 60%"></div> 111 <div id="maxheight3-1" class="auto" style="max-height: 320px"></div> 112 <div id="maxheight3-2" class="auto" style="max-height: 40%"></div> 113 <div id="maxheight4-1" class="auto" style="max-height: 480px"></div> 114 <div id="maxheight4-2" class="auto" style="max-height: 60%"></div> 115 116 <div id="minmaxheight1-1" style="min-height: 200px; max-height: 320px"></div> 117 <div id="minmaxheight1-2" style="min-height: 200px; max-height: 40%"></div> 118 <div id="minmaxheight2-1" style="min-height: 25%; max-height: 320px"></div> 119 <div id="minmaxheight2-2" style="min-height: 25%; max-height: 40%"></div> 120 <div id="minmaxheight3-1" style="min-height: 600px; max-height: 320px"></div> 121 <div id="minmaxheight3-2" style="min-height: 600px; max-height: 40%"></div> 122 <div id="minmaxheight4-1" style="min-height: 75%; max-height: 320px"></div> 123 <div id="minmaxheight4-2" style="min-height: 75%; max-height: 40%"></div> 124 <div id="minmaxheight5-1" 125 style="display:none; min-height: 200px; max-height: 320px"></div> 126 <div id="minmaxheight6-1" 127 style="display: none; min-height: 25%; max-height: 320px"></div> 128 <div id="minmaxheight7-1" 129 style="display: none; min-height: 600px; max-height: 320px"></div> 130 <div id="minmaxheight7-2" 131 style="display: none; min-height: 600px; max-height: 40%"></div> 132 <div id="minmaxheight8-1" class="auto" 133 style="min-height: 200px; max-height: 320px"></div> 134 <div id="minmaxheight8-2" class="auto" 135 style="min-height: 200px; max-height: 40%"></div> 136 <div id="minmaxheight9-1" class="auto" 137 style="min-height: 25%; max-height: 320px"></div> 138 <div id="minmaxheight9-2" class="auto" 139 style="min-height: 25%; max-height: 40%"></div> 140 <div id="minmaxheight10-1" class="auto" 141 style="min-height: 600px; max-height: 320px"></div> 142 <div id="minmaxheight10-2" class="auto" 143 style="min-height: 600px; max-height: 40%"></div> 144 <div id="minmaxheight11-1" class="auto" 145 style="min-height: 75%; max-height: 320px"></div> 146 <div id="minmaxheight11-2" class="auto" 147 style="min-height: 75%; max-height: 40%"></div> 148 149 <div id="radius1" style="border-radius: 80px"></div> 150 <div id="radius2" style="border-radius: 20% / 20%"></div> 151 </div> 152 <div id="content2" style="display: none"> 153 <div id="indent3" style="text-indent: 400px"></div> 154 <div id="indent4" style="text-indent: 50%"></div> 155 156 <div id="minwidth1-3" style="min-width: 200px"></div> 157 <div id="minwidth1-4" style="min-width: 25%"></div> 158 <div id="minwidth2-3" style="min-width: 600px"></div> 159 <div id="minwidth2-4" style="min-width: 75%"></div> 160 161 <div id="maxwidth1-3" style="max-width: 320px"></div> 162 <div id="maxwidth1-4" style="max-width: 40%"></div> 163 <div id="maxwidth2-3" style="max-width: 480px"></div> 164 <div id="maxwidth2-4" style="max-width: 60%"></div> 165 166 <div id="minmaxwidth1-3" style="min-width: 200px; max-width: 320px"></div> 167 <div id="minmaxwidth1-4" style="min-width: 200px; max-width: 40%"></div> 168 <div id="minmaxwidth2-3" style="min-width: 25%; max-width: 320px"></div> 169 <div id="minmaxwidth2-4" style="min-width: 25%; max-width: 40%"></div> 170 <div id="minmaxwidth3-3" style="min-width: 600px; max-width: 320px"></div> 171 <div id="minmaxwidth3-4" style="min-width: 600px; max-width: 40%"></div> 172 <div id="minmaxwidth4-3" style="min-width: 75%; max-width: 320px"></div> 173 <div id="minmaxwidth4-4" style="min-width: 75%; max-width: 40%"></div> 174 175 <div id="minheight1-3" style="min-height: 200px"></div> 176 <div id="minheight1-4" style="min-height: 25%"></div> 177 <div id="minheight2-3" style="min-height: 600px"></div> 178 <div id="minheight2-4" style="min-height: 75%"></div> 179 180 <div id="maxheight1-3" style="max-height: 320px"></div> 181 <div id="maxheight1-4" style="max-height: 40%"></div> 182 <div id="maxheight2-3" style="max-height: 480px"></div> 183 <div id="maxheight2-4" style="max-height: 60%"></div> 184 185 <div id="minmaxheight1-3" style="min-height: 200px; max-height: 320px"></div> 186 <div id="minmaxheight1-4" style="min-height: 200px; max-height: 40%"></div> 187 <div id="minmaxheight2-3" style="min-height: 25%; max-height: 320px"></div> 188 <div id="minmaxheight2-4" style="min-height: 25%; max-height: 40%"></div> 189 <div id="minmaxheight3-3" style="min-height: 600px; max-height: 320px"></div> 190 <div id="minmaxheight3-4" style="min-height: 600px; max-height: 40%"></div> 191 <div id="minmaxheight4-3" style="min-height: 75%; max-height: 320px"></div> 192 <div id="minmaxheight4-4" style="min-height: 75%; max-height: 40%"></div> 193 194 <div id="radius3" style="border-radius: 80px"></div> 195 <div id="radius4" style="border-radius: 20%"></div> 196 </div> 197 <pre id="test"> 198 <script class="testbody" type="text/javascript"> 199 200 /** Test for Bug 1292447 */ 201 202 document.body.offsetWidth; 203 204 doATest("text-indent", "indent", 400, 50); 205 doATest("border-top-left-radius", "radius", 80, 20); 206 207 doATest("width", "widthheight-", 440, 0, true); 208 doATest("height", "widthheight-", 0, 0, true); 209 210 doATest("min-width", "minwidth1-", 200, 25); 211 doATest("min-width", "minwidth2-", 600, 75); 212 doATest("max-width", "maxwidth1-", 320, 40); 213 doATest("max-width", "maxwidth2-", 480, 60); 214 215 // Test that min-width doesn't affect computed max-width 216 doATest("max-width", "minmaxwidth1-", 320, 40); 217 doATest("max-width", "minmaxwidth2-", 320, 40); 218 doATest("max-width", "minmaxwidth3-", 320, 40); 219 doATest("max-width", "minmaxwidth4-", 320, 40); 220 221 // Test that max and min-width affect computed width correctly 222 doATest("width", "minwidth1-", 400, 0, true); 223 doATest("width", "minwidth2-", 600, 0, true); 224 doATest("width", "minwidth3-", 440, 0, true); 225 doATest("width", "minwidth4-", 600, 0, true); 226 doATest("width", "maxwidth1-", 320, 0, true); 227 doATest("width", "maxwidth2-", 400, 0, true); 228 doATest("width", "maxwidth3-", 320, 0, true); 229 doATest("width", "maxwidth4-", 440, 0, true); 230 doATest("width", "minmaxwidth1-", 320, 0, true); 231 doATest("width", "minmaxwidth2-", 320, 0, true); 232 doATest("width", "minmaxwidth3-", 600, 0, true); 233 doATest("width", "minmaxwidth4-", 600, 0, true); 234 doATest("width", "minmaxwidth5-", 400, 0, true); 235 doATest("width", "minmaxwidth6-", 400, 0, true); 236 doATest("width", "minmaxwidth7-", 400, 0, true); 237 doATest("width", "minmaxwidth8-", 320, 0, true); 238 doATest("width", "minmaxwidth9-", 320, 0, true); 239 doATest("width", "minmaxwidth10-", 600, 0, true); 240 doATest("width", "minmaxwidth11-", 600, 0, true); 241 242 doATest("min-height", "minheight1-", 200, 25); 243 doATest("min-height", "minheight2-", 600, 75); 244 doATest("max-height", "maxheight1-", 320, 40); 245 doATest("max-height", "maxheight2-", 480, 60); 246 247 // Test that min-height doesn't affect computed max-height 248 doATest("max-height", "minmaxheight1-", 320, 40); 249 doATest("max-height", "minmaxheight2-", 320, 40); 250 doATest("max-height", "minmaxheight3-", 320, 40); 251 doATest("max-height", "minmaxheight4-", 320, 40); 252 253 // Test that max and min-height affect computed height correctly 254 doATest("height", "minheight1-", 400, 0, true); 255 doATest("height", "minheight2-", 600, 0, true); 256 doATest("height", "minheight3-", 200, 0, true); 257 doATest("height", "minheight4-", 600, 0, true); 258 doATest("height", "maxheight1-", 320, 0, true); 259 doATest("height", "maxheight2-", 400, 0, true); 260 doATest("height", "maxheight3-", 0, 0, true); 261 doATest("height", "maxheight4-", 0, 0, true); 262 doATest("height", "minmaxheight1-", 320, 0, true); 263 doATest("height", "minmaxheight2-", 320, 0, true); 264 doATest("height", "minmaxheight3-", 600, 0, true); 265 doATest("height", "minmaxheight4-", 600, 0, true); 266 doATest("height", "minmaxheight5-", 400, 0, true); 267 doATest("height", "minmaxheight6-", 400, 0, true); 268 doATest("height", "minmaxheight7-", 400, 0, true); 269 doATest("height", "minmaxheight8-", 200, 0, true); 270 doATest("height", "minmaxheight9-", 200, 0, true); 271 doATest("height", "minmaxheight10-", 600, 0, true); 272 doATest("height", "minmaxheight11-", 600, 0, true); 273 274 function style(id) { 275 return document.defaultView.getComputedStyle($(id)); 276 } 277 278 function round(num, decimals) { 279 return Math.round(num * Math.pow(10, decimals)) / Math.pow(10, decimals); 280 } 281 282 function coordValueTest(camelProp, decl, coordVal, prettyName) { 283 is(decl[camelProp], coordVal + "px", prettyName); 284 } 285 286 function percentValueTest(camelProp, decl, percentVal, prettyName) { 287 is(decl[camelProp], percentVal + "%", prettyName); 288 } 289 290 function doATest(propName, idBase, coordVal, percentVal, resolveToUsedVal = false) { 291 var cssCamelPropName = ""; 292 var parts = propName.split("-"); 293 ok(parts.length > 0, "CSS prop name should not be empty"); 294 var i; 295 if (parts[0]) { 296 i = 0; 297 } else { 298 is(parts[1], "moz", "Testing an extension property that's not -moz"); 299 ok(parts.length > 2, "-moz prop name should not have more than 2 parts"); 300 cssCamelPropName = "Moz"; 301 i = 2; 302 } 303 for (; i < parts.length; ++i) { 304 var part = parts[i]; 305 isnot(part, "", "Must have a nonempty part"); 306 if (cssCamelPropName) { 307 cssCamelPropName += part.charAt(0).toUpperCase() + 308 part.substring(1, part.length); 309 } else { 310 cssCamelPropName += part; 311 } 312 } 313 314 /* Test $(id)-1 */ 315 coordValueTest(cssCamelPropName, 316 style(idBase + "1"), coordVal, 317 propName + " of " + idBase + "1"); 318 319 if (!$(idBase + "2")) { 320 // Nothing else to do here 321 return 322 } 323 324 /* Test $(id)-2 */ 325 if (resolveToUsedVal) { 326 coordValueTest(cssCamelPropName, 327 style(idBase + "2"), coordVal, 328 propName + " of " + idBase + "2"); 329 } else { 330 percentValueTest(cssCamelPropName, 331 style(idBase + "2"), percentVal, 332 propName + " of " + idBase + "2"); 333 } 334 335 if (percentVal) { 336 /* Test $(id)-3 */ 337 coordValueTest(cssCamelPropName, 338 style(idBase + "3"), coordVal, 339 propName + " of " + idBase + "3"); 340 341 /* Test $(id)-4 */ 342 percentValueTest(cssCamelPropName, 343 style(idBase + "4"), percentVal, 344 propName + " of " + idBase + "4"); 345 } 346 } 347 </script> 348 </pre> 349 </body> 350 </html>