third_party/WebKit/LayoutTests/compositing/layer-creation/fixed-position-nonscrollable-iframes-in-scrollable-page.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     .composited {
   6       transform: translatez(0);
   7     }
   8
   9     .box {
  10       position: absolute;
  11       top: 360px;
  12       left: 50px;
  13       background-color: cyan;
  14       width: 300px;
  15       height: 100px;
  16     }
  17
  18     #iframe1 {
  19       position: absolute;
  20       top: 30px;
  21       left: 10px;
  22       width: 150px;
  23       height: 150px;
  24     }
  25
  26     #iframe2 {
  27       position: absolute;
  28       top: 200px;
  29       left: 10px;
  30       width: 150px;
  31       height: 150px;
  32     }
  33
  34     #iframe3 {
  35       position: absolute;
  36       top: 380px;
  37       left: 10px;
  38       width: 150px;
  39       height: 150px;
  40     }
  41
  42   </style>
  43
  44   <script type="text/javascript">
  45     if (window.internals) {
  46       window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  47     }
  48
  49     if (window.testRunner) {
  50       testRunner.dumpAsText();
  51
  52       window.addEventListener("load", function() {
  53         document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
  54       }, false);
  55     }
  56   </script>
  57
  58 </head>
  59 <body style="height: 4000px;">
  60   <div>In all iframes, the green fixed-position element should not be composited.
  61     <pre id="layertree"></pre>
  62   </div>
  63   <div class="composited box"> Composited box underneath iframe. </div>
  64   <iframe id="iframe1" src="resources/fixed-position-nonscrollable-body.html"></iframe>
  65   <iframe id="iframe2" class="composited" src="resources/fixed-position-nonscrollable-body.html"></iframe>
  66   <iframe id="iframe3" src="resources/fixed-position-nonscrollable-body.html"></iframe>
  67 </body>
  68 </html>