src/third_party/WebKit/LayoutTests/compositing/geometry/ancestor-overflow-change.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6     #container {
   7       position: relative;
   8       height: 50px;
   9       width: 100px;
  10       outline: 2px solid black;
  11       overflow: hidden;
  12     }
  13
  14     #container.changed {
  15       overflow: visible;
  16       height: 100px;
  17     }
  18
  19     .box {
  20       width: 100px;
  21       height: 100px;
  22       background-color: green;
  23       transform: translateZ(1px);
  24     }
  25
  26     #indicator {
  27       position: absolute;
  28       width: 100px;
  29       height: 100px;
  30       background-color: red;
  31     }
  32
  33     #layers {
  34       opacity: 0; /* Hide from pixel results */
  35     }
  36   </style>
  37   <script type="text/javascript" charset="utf-8">
  38     if (window.testRunner) {
  39       testRunner.dumpAsTextWithPixelResults();
  40       testRunner.waitUntilDone();
  41     }
  42
  43     function changeOverflow()
  44     {
  45       document.getElementById('container').className = 'changed';
  46
  47       if (window.testRunner)
  48         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  49
  50       if (window.testRunner)
  51         testRunner.notifyDone();
  52     }
  53
  54     window.addEventListener('load', function() {
  55       window.setTimeout(changeOverflow, 0);
  56     }, false);
  57   </script>
  58 </head>
  59 <body>
  60
  61   <div id="indicator"></div>
  62   <div id="container">
  63     <div class="box"></div>
  64   </div>
  65
  66 <pre id="layers">Layer tree goes here in DRT</pre>
  67 </body>
  68 </html>