src/third_party/WebKit/LayoutTests/compositing/iframes/become-composited-nested-iframes.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <script src="../../resources/run-after-display.js"></script>
   6   <style type="text/css" media="screen">
   7     body {
   8         height: 1500px;
   9         margin: 0;
  10     }
  11
  12     #box {
  13         height: 100px;
  14         width: 100px;
  15         background-color: blue;
  16     }
  17
  18     .composited {
  19         transform: translateZ(0);
  20     }
  21
  22     iframe {
  23         display: block;
  24         margin: 20px;
  25         height: 200px;
  26         width: 280px;
  27     }
  28   </style>
  29   <script type="text/javascript" charset="utf-8">
  30     if (window.testRunner) {
  31         testRunner.dumpAsText();
  32         testRunner.waitUntilDone();
  33     }
  34
  35     function doTest()
  36     {
  37         if (window.testRunner) {
  38             runAfterDisplay(function() {
  39               document.getElementById('box').className = 'composited';
  40               document.getElementById('layers').innerHTML = window.internals.layerTreeAsText(document);
  41               testRunner.notifyDone();
  42             });
  43         }
  44     }
  45
  46     window.addEventListener('load', doTest, false);
  47   </script>
  48 </head>
  49 <body>
  50     <div id="box"></div>
  51
  52     <!-- Tests that when the main document becomes composited, all iframes containing
  53         any composited content become composited -->
  54     <iframe src="resources/intermediate-frame.html"></iframe>
  55     <iframe src="resources/intermediate-frame.html"></iframe>
  56
  57     <pre id="layers">Layer tree appears here in DRT.</pre>
  58 </body>
  59 </html>