third_party/WebKit/LayoutTests/fast/block/borderbox-percent-padding.html

   1 <!DOCTYPE html>
   2 <style>
   3     #border-box {
   4         background-color: #369;
   5         box-sizing: border-box;
   6         max-width: 300px;
   7         padding: 0 5%;
   8     }
   9 </style>
  10 <div id="container" style="width: 400px">
  11     <div id="border-box">
  12         <p id="test" data-expected-client-width="220">Even though the width of 'border-box' stays the same after it reaches 300px, the width available to its children decreases as its padding continues to expand. This tests that we continue to layout the contents of border-box even when its own width remains the same.</p>
  13     </div>
  14 </div>
  15 <script src="../../resources/check-layout.js"></script>
  16 <script>
  17     document.body.offsetLeft;
  18     document.getElementById("container").style.width = "800px";
  19     checkLayout("#test");
  20 </script>
  21