third_party/WebKit/LayoutTests/fast/css/getComputedStyle/getComputedStyle-length-unit.html

   1 <html>
   2 <head>
   3 <script src="../../../resources/js-test.js"></script>
   4 <style>
   5     .visible { position: absolute; }
   6     .hidden { position: relative; display: none; }
   7 </style>
   8 </head>
   9 <body>
  10     <div id="test">Tests that getComputedStyle returns length properties with a unit.</div>
  11     <div id="console"></div>
  12     <script>
  13         var propertiesToCheck = {
  14             "background-position": "10px 10px",
  15             "background-size": "400px 300px",
  16             "-webkit-border-horizontal-spacing": "10px",
  17             "-webkit-border-vertical-spacing": "10px",
  18
  19             "border-top-width": "2px",
  20             "border-right-width": "2px",
  21             "border-bottom-width": "2px",
  22             "border-left-width": "2px",
  23             "border-top-left-radius": "5px",
  24             "border-top-right-radius": "5px",
  25             "border-bottom-left-radius": "5px",
  26             "border-bottom-right-radius": "5px",
  27
  28             "outline-width": "2px",
  29
  30             "-webkit-column-rule-width": "10px",
  31             "-webkit-column-width": "80px",
  32             "-webkit-column-gap": "20px",
  33
  34             "-webkit-mask-position": "10px 10px",
  35             "-webkit-mask-size": "10px 10px",
  36             "-webkit-perspective": "400px",
  37             "-webkit-perspective-origin": "20px 20px",
  38             "-webkit-text-stroke-width": "2px",
  39             "-webkit-transform-origin": "10px 10px",
  40
  41             "left": "20px",
  42             "top": "20px",
  43             "right": "50px",
  44             "bottom": "50px",
  45
  46             "font-size": "20px",
  47             "width": "400px",
  48             "max-width": "900px",
  49             "min-width": "200px",
  50             "height": "250px",
  51             "max-height": "600px",
  52             "min-height": "200px",
  53             "letter-spacing": "2px",
  54             "word-spacing": "10px",
  55
  56             "margin-top": "10px",
  57             "margin-right": "10px",
  58             "margin-bottom": "10px",
  59             "margin-left": "10px",
  60
  61             "padding-top": "10px",
  62             "padding-right": "10px",
  63             "padding-bottom": "10px",
  64             "padding-left": "10px",
  65
  66             "text-indent": "10px"
  67         };
  68
  69         var testElement = document.getElementById('test');
  70         for (var propertyName in propertiesToCheck)
  71             testElement.style[propertyName] = propertiesToCheck[propertyName];
  72
  73         function testPropertyUnit(className, propertyName)
  74         {
  75             if (testElement.className != className)
  76                 testElement.className = className;
  77             var computedStyled = document.defaultView.getComputedStyle(testElement);
  78             var results = /\d+([a-z%]+)/.exec(computedStyled[propertyName]);
  79             return results ? results[1] : '';
  80         }
  81
  82         for (var propertyName in propertiesToCheck)
  83             shouldBe("testPropertyUnit('visible', '" + propertyName + "')", "'px'");
  84         for (var propertyName in propertiesToCheck)
  85             shouldBe("testPropertyUnit('hidden', '" + propertyName + "')", "'px'");
  86
  87         for (var propertyName in propertiesToCheck)
  88             testElement.style[propertyName] = '';
  89     </script>
  90 </body>
  91 </html>