third_party/WebKit/LayoutTests/compositing/iframes/overlapped-nested-iframes.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6     body {
   7         height: 1500px;
   8         margin: 0;
   9     }
  10     #banner {
  11         position: fixed;
  12         top: 0;
  13         width: 100%;
  14         height: 120px;
  15         background-color: rgba(0, 0, 0, 0.5);
  16     }
  17     iframe {
  18         display: block;
  19         margin: 20px;
  20         height: 200px;
  21         width: 280px;
  22     }
  23   </style>
  24   <script type="text/javascript" charset="utf-8">
  25     if (window.testRunner) {
  26         testRunner.dumpAsText();
  27     }
  28
  29     function doTest()
  30     {
  31       window.scrollTo(0, 100);
  32       if (window.testRunner) {
  33           document.getElementById('layers').innerHTML = window.internals.layerTreeAsText(document);
  34       }
  35     }
  36
  37     window.addEventListener('load', doTest, false);
  38   </script>
  39 </head>
  40 <body>
  41     <div id="banner"></div>
  42
  43     <!-- Tests that when scrolled so that one iframe is overlapped, both iframes
  44         and their contents become composited. -->
  45     <iframe style="margin-top: 150px;" src="resources/intermediate-frame.html"></iframe>
  46     <iframe src="resources/intermediate-frame.html"></iframe>
  47
  48     <pre id="layers">Layer tree appears here in DRT.</pre>
  49 </body>
  50 </html>