third_party/WebKit/LayoutTests/fast/css/nested-percent-height-on-replaced.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/check-layout.js"></script>
   3 <body>
   4
   5 <div style="overflow: scroll; height: 200px; width: 400px; background-color: salmon">
   6     <div style="overflow: scroll; height: 100%; background-color: purple">
   7         <div style="overflow: scroll; height: 100%; background-color: purple">
   8             <div style="border: 0; height: 100%; width: 100%; background-color: orange"></div>
   9         </div>
  10     </div>
  11 </div>
  12
  13 <div style="overflow: scroll; height: 200px; width: 400px; background-color: salmon">
  14     <div style="overflow: scroll; height: 100%; background-color: purple">
  15         <div style="overflow: scroll; height: 100%; background-color: purple;line-height: 0">
  16             <iframe style="border: 0; height: 100%; width: 100%; background-color: orange"></iframe>
  17         </div>
  18     </div>
  19 </div>
  20
  21 <script>
  22 var dummy = document.createElement('div');
  23 dummy.style.overflow = "scroll";
  24 document.body.appendChild(dummy);
  25 var scrollbarWidth = dummy.offsetWidth - dummy.clientWidth;
  26 document.body.removeChild(dummy);
  27
  28 function setExpected(node, width, height)
  29 {
  30     node.setAttribute('data-expected-width', width);
  31     node.setAttribute('data-expected-height', height);
  32 }
  33
  34 var containers = document.querySelectorAll('body > div');
  35 for (var i = 0; i < containers.length; i++) {
  36     var width = containers[i].offsetWidth;
  37     var height = containers[i].offsetHeight;
  38
  39     width -= scrollbarWidth;
  40     height -= scrollbarWidth;
  41     var first = containers[i].querySelector('div');
  42     setExpected(first, width, height);
  43
  44     width -= scrollbarWidth;
  45     height -= scrollbarWidth;
  46     var second = first.querySelector('div');
  47     setExpected(second, width, height);
  48
  49     width -= scrollbarWidth;
  50     height -= scrollbarWidth;
  51     var third = second.querySelector('*');
  52     setExpected(third, width, height);
  53 }
  54
  55 checkLayout('body > div')
  56 </script>
  57
  58 </body>