third_party/WebKit/LayoutTests/fast/block/dynamic-padding-border.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 .red {
   6     background-color: red;
   7 }
   8 .green {
   9     background-color: green;
  10 }
  11 </style>
  12 </head>
  13 <body>
  14 <p>This test passes if there is no red showing.</p>
  15
  16 <div class="container" style="width: 100px">
  17     <div id="test1" class="red" style="padding-left: 50px" data-expected-width="100">
  18         <div class="green" style="height: 20px" data-expected-width="100"></div>
  19     </div>
  20 </div>
  21
  22 <div class="container" style="-webkit-writing-mode: vertical-rl; height: 100px">
  23     <div id="test2" class="red" style="padding-top: 50px" data-expected-height="100">
  24         <div class="green" style="width: 20px" data-expected-height="100"></div>
  25     </div>
  26 </div>
  27
  28 <div class="container" style="width: 100px; -webkit-writing-mode: horizontal-bt;">
  29     <div id="test3" class="red" style="border-left: 50px solid red" data-expected-width="100">
  30         <div class="green" style="height: 20px" data-expected-width="100"></div>
  31     </div>
  32 </div>
  33
  34 <div class="container" style="-webkit-writing-mode: vertical-lr; height: 100px">
  35     <div id="test4" class="red" style="border-top: 50px solid red" data-expected-height="100">
  36         <div class="green" style="width: 20px" data-expected-height="100"></div>
  37     </div>
  38 </div>
  39
  40 <script src="../../resources/check-layout.js"></script>
  41 <script>
  42 document.body.offsetLeft;
  43 document.getElementById("test1").style.paddingLeft = "0";
  44 document.getElementById("test2").style.paddingTop = "0";
  45 document.getElementById("test3").style.borderWidth = "0";
  46 document.getElementById("test4").style.borderWidth = "0";
  47 checkLayout(".container");
  48 </script>
  49 </body>
  50 </html>