third_party/WebKit/LayoutTests/fast/overflow/child-100percent-height-inside-fixed-container-with-overflow-auto.html

   1 <html>
   2 <head>
   3 <style type="text/css">
   4 #container {
   5         width: 200px;
   6         height: 100px;
   7         overflow: auto;
   8 }
   9 #innerBox {
  10         width: 200%;
  11         height: 100%;
  12 }
  13 </style>
  14 <script src="../../resources/js-test.js"></script>
  15 </head>
  16 <body>
  17 <div id="container">
  18         <div id="innerBox" style="background:green"></div>
  19 </div>
  20 <script>
  21 description('Testcase for bug <a href="https://bugs.webkit.org/show_bug.cgi?id=11355">https://bugs.webkit.org/show_bug.cgi?id=11355</a>. \
  22 When a container having overflow:auto has a horizontal scrollbar, \
  23 the scrollbar is to be placed between the inner border edge and the outer padding edge. \
  24 Thus the content height of a child inside the container must not include the height of the horizontal scollbars.');
  25
  26 debug('The height of the inner element box should be 100% of the containers height minus the height of horizontal scrollbar. \
  27 There should be no vertical scrollable content in the container<br>');
  28 shouldBeTrue('document.getElementById("container").scrollHeight == document.getElementById("container").clientHeight');
  29 debug('Container height = Inner Box height + scrollbar height');
  30 shouldBeTrue('document.getElementById("container").offsetHeight > document.getElementById("innerBox").offsetHeight');
  31 document.body.removeChild(document.getElementById('container'));
  32 </script>
  33 <div id="description"></div>
  34 <div id="console"></div>
  35 </body>
  36 </html>