layout/style/test/test_bug365932.html

   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="/MochiKit/MochiKit.js"></script>
   9   <script type="text/javascript" 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=365932">Mozilla Bug 365932</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="-moz-border-radius: 80px"></div>
 150   <div id="radius2" style="-moz-border-radius: 10%"></div>
 151   <div id="outlineradius1" style="-moz-outline-radius: 160px"></div>
 152   <div id="outlineradius2" style="-moz-outline-radius: 20%"></div>
 153 </div>
 154 <div id="content2" style="display: none">
 155   <div id="indent3" style="text-indent: 400px"></div>
 156   <div id="indent4" style="text-indent: 50%"></div>
 157
 158   <div id="minwidth1-3" style="min-width: 200px"></div>
 159   <div id="minwidth1-4" style="min-width: 25%"></div>
 160   <div id="minwidth2-3" style="min-width: 600px"></div>
 161   <div id="minwidth2-4" style="min-width: 75%"></div>
 162
 163   <div id="maxwidth1-3" style="max-width: 320px"></div>
 164   <div id="maxwidth1-4" style="max-width: 40%"></div>
 165   <div id="maxwidth2-3" style="max-width: 480px"></div>
 166   <div id="maxwidth2-4" style="max-width: 60%"></div>
 167
 168   <div id="minmaxwidth1-3" style="min-width: 200px; max-width: 320px"></div>
 169   <div id="minmaxwidth1-4" style="min-width: 200px; max-width: 40%"></div>
 170   <div id="minmaxwidth2-3" style="min-width: 25%; max-width: 320px"></div>
 171   <div id="minmaxwidth2-4" style="min-width: 25%; max-width: 40%"></div>
 172   <div id="minmaxwidth3-3" style="min-width: 600px; max-width: 320px"></div>
 173   <div id="minmaxwidth3-4" style="min-width: 600px; max-width: 40%"></div>
 174   <div id="minmaxwidth4-3" style="min-width: 75%; max-width: 320px"></div>
 175   <div id="minmaxwidth4-4" style="min-width: 75%; max-width: 40%"></div>
 176
 177   <div id="minheight1-3" style="min-height: 200px"></div>
 178   <div id="minheight1-4" style="min-height: 25%"></div>
 179   <div id="minheight2-3" style="min-height: 600px"></div>
 180   <div id="minheight2-4" style="min-height: 75%"></div>
 181
 182   <div id="maxheight1-3" style="max-height: 320px"></div>
 183   <div id="maxheight1-4" style="max-height: 40%"></div>
 184   <div id="maxheight2-3" style="max-height: 480px"></div>
 185   <div id="maxheight2-4" style="max-height: 60%"></div>
 186
 187   <div id="minmaxheight1-3" style="min-height: 200px; max-height: 320px"></div>
 188   <div id="minmaxheight1-4" style="min-height: 200px; max-height: 40%"></div>
 189   <div id="minmaxheight2-3" style="min-height: 25%; max-height: 320px"></div>
 190   <div id="minmaxheight2-4" style="min-height: 25%; max-height: 40%"></div>
 191   <div id="minmaxheight3-3" style="min-height: 600px; max-height: 320px"></div>
 192   <div id="minmaxheight3-4" style="min-height: 600px; max-height: 40%"></div>
 193   <div id="minmaxheight4-3" style="min-height: 75%; max-height: 320px"></div>
 194   <div id="minmaxheight4-4" style="min-height: 75%; max-height: 40%"></div>
 195
 196   <div id="radius3" style="-moz-border-radius: 80px"></div>
 197   <div id="radius4" style="-moz-border-radius: 10%"></div>
 198   <div id="outlineradius3" style="-moz-outline-radius: 160px"></div>
 199   <div id="outlineradius4" style="-moz-outline-radius: 20%"></div>
 200 </div>
 201 <pre id="test">
 202 <script class="testbody" type="text/javascript">
 203
 204 /** Test for Bug 365932 **/
 205
 206 document.body.offsetWidth;
 207
 208 doATest("text-indent", "indent", 400, 50);
 209 doATest("-moz-border-radius-topleft", "radius", 80, 10);
 210 doATest("-moz-outline-radius-topleft", "outlineradius", 160, 20);
 211
 212 doATest("width", "widthheight-", 440, 0);
 213 doATest("height", "widthheight-", 0, 0);
 214
 215 doATest("min-width", "minwidth1-", 200, 25);
 216 doATest("min-width", "minwidth2-", 600, 75);
 217 doATest("max-width", "maxwidth1-", 320, 40);
 218 doATest("max-width", "maxwidth2-", 480, 60);
 219
 220 // Test that min-width doesn't affect computed max-width
 221 doATest("max-width", "minmaxwidth1-", 320, 40);
 222 doATest("max-width", "minmaxwidth2-", 320, 40);
 223 doATest("max-width", "minmaxwidth3-", 320, 40);
 224 doATest("max-width", "minmaxwidth4-", 320, 40);
 225
 226 // Test that max and min-width affect computed width correctly
 227 doATest("width", "minwidth1-", 400, 0);
 228 doATest("width", "minwidth2-", 600, 0);
 229 doATest("width", "minwidth3-", 440, 0);
 230 doATest("width", "minwidth4-", 600, 0);
 231 doATest("width", "maxwidth1-", 320, 0);
 232 doATest("width", "maxwidth2-", 400, 0);
 233 doATest("width", "maxwidth3-", 320, 0);
 234 doATest("width", "maxwidth4-", 440, 0);
 235 doATest("width", "minmaxwidth1-", 320, 0);
 236 doATest("width", "minmaxwidth2-", 320, 0);
 237 doATest("width", "minmaxwidth3-", 600, 0);
 238 doATest("width", "minmaxwidth4-", 600, 0);
 239 doATest("width", "minmaxwidth5-", 320, 0);
 240 doATest("width", "minmaxwidth6-", 320, 0);
 241 doATest("width", "minmaxwidth7-", 600, 0);
 242 doATest("width", "minmaxwidth8-", 320, 0);
 243 doATest("width", "minmaxwidth9-", 320, 0);
 244 doATest("width", "minmaxwidth10-", 600, 0);
 245 doATest("width", "minmaxwidth11-", 600, 0);
 246
 247 doATest("min-height", "minheight1-", 200, 25);
 248 doATest("min-height", "minheight2-", 600, 75);
 249 doATest("max-height", "maxheight1-", 320, 40);
 250 doATest("max-height", "maxheight2-", 480, 60);
 251
 252 // Test that min-height doesn't affect computed max-height
 253 doATest("max-height", "minmaxheight1-", 320, 40);
 254 doATest("max-height", "minmaxheight2-", 320, 40);
 255 doATest("max-height", "minmaxheight3-", 320, 40);
 256 doATest("max-height", "minmaxheight4-", 320, 40);
 257
 258 // Test that max and min-height affect computed height correctly
 259 doATest("height", "minheight1-", 400, 0);
 260 doATest("height", "minheight2-", 600, 0);
 261 doATest("height", "minheight3-", 200, 0);
 262 doATest("height", "minheight4-", 600, 0);
 263 doATest("height", "maxheight1-", 320, 0);
 264 doATest("height", "maxheight2-", 400, 0);
 265 doATest("height", "maxheight3-", 0, 0);
 266 doATest("height", "maxheight4-", 0, 0);
 267 doATest("height", "minmaxheight1-", 320, 0);
 268 doATest("height", "minmaxheight2-", 320, 0);
 269 doATest("height", "minmaxheight3-", 600, 0);
 270 doATest("height", "minmaxheight4-", 600, 0);
 271 doATest("height", "minmaxheight5-", 320, 0);
 272 doATest("height", "minmaxheight6-", 320, 0);
 273 doATest("height", "minmaxheight7-", 600, 0);
 274 doATest("height", "minmaxheight8-", 200, 0);
 275 doATest("height", "minmaxheight9-", 200, 0);
 276 doATest("height", "minmaxheight10-", 600, 0);
 277 doATest("height", "minmaxheight11-", 600, 0);
 278
 279 function style(id) {
 280   return document.defaultView.getComputedStyle($(id), "");
 281 }
 282
 283 function round(num, decimals) {
 284   return Math.round(num * Math.pow(10, decimals))/Math.pow(10, decimals);
 285 }
 286
 287 function doATest(propName, idBase, coordVal, percentVal)
 288 {
 289   var cssPropertiesPropName = "";
 290   var parts = propName.split("-");
 291   ok(parts.length > 0, "prop name", "Empty css prop name");
 292   var i;
 293   if (parts[0]) {
 294     i = 0;
 295   } else {
 296     is(parts[1], "moz", "Testing an extension property that's not -moz");
 297     ok(parts.length > 2, "prop name 2", "Bogus -moz prop name");
 298     cssPropertiesPropName = "Moz";
 299     i = 2;
 300   }
 301   for (; i < parts.length; ++i) {
 302     var part = parts[i];
 303     isnot(part, "", "Must have a nonempty part");
 304     if (cssPropertiesPropName) {
 305       cssPropertiesPropName += part.charAt(0).toUpperCase() +
 306                                part.substring(1, part.length);
 307     } else {
 308       cssPropertiesPropName += part;
 309     }
 310   }
 311
 312   var decl = style(idBase+"1");
 313   var prettyName = propName + " of " + idBase+"1";
 314
 315   is(decl[cssPropertiesPropName], coordVal+"px", prettyName);
 316   is(decl.getPropertyCSSValue(propName).cssValueType,
 317      CSSValue.CSS_PRIMITIVE_VALUE, prettyName + " is primitive value");
 318   is(decl.getPropertyCSSValue(propName).primitiveType,
 319      CSSPrimitiveValue.CSS_PX, prettyName + " is px");
 320   is(decl.getPropertyCSSValue(propName).cssText, coordVal + "px",
 321      prettyName + " cssText");
 322   /* Since floats are only accurate to like 6 decimal places, round to 3 decimal
 323      places here. */
 324   is(round(decl.getPropertyCSSValue(propName)
 325                .getFloatValue(CSSPrimitiveValue.CSS_PX),
 326            3), coordVal, prettyName + " as float value");
 327
 328   if (!$(idBase+"2")) {
 329     // Nothing else to do here
 330     return
 331   }
 332
 333   decl = style(idBase+"2");
 334   prettyName = propName + " of " + idBase+"2";
 335
 336   is(decl[cssPropertiesPropName], coordVal+"px", prettyName);
 337   is(decl.getPropertyCSSValue(propName).cssValueType,
 338      CSSValue.CSS_PRIMITIVE_VALUE, prettyName + " is primitive value");
 339   is(decl.getPropertyCSSValue(propName).primitiveType,
 340      CSSPrimitiveValue.CSS_PX, prettyName + " is px");
 341   is(decl.getPropertyCSSValue(propName).cssText, coordVal + "px",
 342      prettyName + " cssText");
 343   /* Since floats are only accurate to like 6 decimal places, round to 3 decimal
 344      places here. */
 345   is(round(decl.getPropertyCSSValue(propName)
 346                .getFloatValue(CSSPrimitiveValue.CSS_PX),
 347            3), coordVal, prettyName + " as float value");
 348
 349   if (percentVal) {
 350     decl = style(idBase+"3");
 351     prettyName = propName + " of " + idBase+"3";
 352
 353     is(decl[cssPropertiesPropName], coordVal+"px", prettyName);
 354     is(decl.getPropertyCSSValue(propName).cssValueType,
 355        CSSValue.CSS_PRIMITIVE_VALUE, prettyName + " is primitive value");
 356     is(decl.getPropertyCSSValue(propName).primitiveType,
 357        CSSPrimitiveValue.CSS_PX, prettyName + " is px");
 358     is(decl.getPropertyCSSValue(propName).cssText, coordVal + "px",
 359        prettyName + " cssText");
 360     /* Since floats are only accurate to like 6 decimal places, round to 3 decimal
 361        places here. */
 362     is(round(decl.getPropertyCSSValue(propName)
 363                  .getFloatValue(CSSPrimitiveValue.CSS_PX),
 364              3), coordVal, prettyName + " as float value");
 365
 366     decl = style(idBase+"4");
 367     prettyName = propName + " of " + idBase+"4";
 368
 369     is(decl[cssPropertiesPropName], percentVal+"%", prettyName);
 370     is(decl.getPropertyCSSValue(propName).cssValueType,
 371        CSSValue.CSS_PRIMITIVE_VALUE, prettyName + " is primitive value");
 372     is(decl.getPropertyCSSValue(propName).primitiveType,
 373      CSSPrimitiveValue.CSS_PERCENTAGE, prettyName + " is percent");
 374     is(decl.getPropertyCSSValue(propName).cssText, percentVal+"%",
 375        prettyName + " cssText");
 376     /* Since floats are only accurate to like 6 decimal places, round to 3 decimal
 377        places here. */
 378     is(round(decl.getPropertyCSSValue(propName)
 379                  .getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE),
 380              3), percentVal, prettyName + " as float value");
 381
 382   }
 383 }
 384 </script>
 385 </pre>
 386 </body>
 387 </html>
 388