third_party/WebKit/LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-box.html

   1
   2 <html>
   3     <head>
   4         <script>
   5             function test()
   6             {
   7                 if (window.testRunner)
   8                     testRunner.dumpAsText();
   9                 var d1 = document.getElementById('d1');
  10                 var d2 = document.getElementById('d2');
  11
  12                 var style = window.getComputedStyle(d1, null);
  13                 var computedWidth = style.getPropertyValue("width");
  14                 var computedHeight = style.getPropertyValue("height");
  15
  16                 var size = "200px";
  17
  18                 if (computedWidth == size && computedHeight == size)
  19                     d1.innerHTML = "Test 1 Passed";
  20                 else
  21                     d1.innerHTML = "Test 1 Failed.  Computed width = " + computedWidth + "<br> Computed height = " + computedHeight;
  22
  23                  style = window.getComputedStyle(d2, null);
  24                 computedWidth = style.getPropertyValue("width");
  25                 computedHeight = style.getPropertyValue("height");
  26                 if (computedWidth == size && computedHeight == size)
  27                     d2.innerHTML = "Test 2 Passed";
  28                 else
  29                     d2.innerHTML = "Test 2 Failed.  Computed width = " + computedWidth + "<br> Computed height = " + computedHeight;
  30             }
  31         </script>
  32         <style>
  33             div {
  34                 width: 200px;
  35                 height: 200px;
  36                 border: 5px solid black;
  37                 padding: 10px;
  38             }
  39             #d1 {
  40                 -moz-box-sizing: border-box;
  41                 -webkit-box-sizing: border-box;
  42             }
  43         </style>
  44     </head>
  45     <body onload="test()">
  46         This tests that getComputedStyle will take box-sizing into account when computing the width and height of a box. <br>
  47         <div id="d1"></div>
  48         <div id="d2"></div>
  49     </body>
  50 </html>