LayoutTests/fast/writing-mode/percentage-padding.html

   1 <html>
   2 <head>
   3 <style>
   4 .block
   5 {
   6     width:100px;
   7     height:200px;
   8     padding:50%;
   9     background-color:green;
  10 }
  11 </style>
  12 </head>
  13 <body>
  14 <div style="width:100px;height:200px; -webkit-writing-mode:vertical-lr">
  15 <div id="test" class="block"></div>
  16 </div>
  17 <div id="console"></div>
  18 <script>
  19 if (window.layoutTestController)
  20     window.layoutTestController.dumpAsText();
  21 test = document.getElementById("test");
  22 rect = test.getBoundingClientRect();
  23 width = rect.right - rect.left;
  24 height = rect.bottom - rect.top;
  25 if (width != 300 || height != 400) {
  26   document.getElementById('console').innerHTML = "FAIL: The block should be 300x400 pixels in size.";
  27   test.style.backgroundColor = 'red';
  28 } else
  29   document.getElementById('console').innerHTML = "PASS: The block is the correct size.";
  30 </script>
  31 </body>
  32 </html>