src/third_party/WebKit/LayoutTests/compositing/layer-creation/fixed-position-change-out-of-view-in-view.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     #fixed1, #fixed2 {
   7         background-color: silver;
   8     }
   9   </style>
  10   <script type="text/javascript">
  11     if (window.testRunner && window.internals) {
  12       testRunner.dumpAsText();
  13       internals.settings.setAcceleratedCompositingForFixedPositionEnabled(true);
  14       internals.settings.setFixedPositionCreatesStackingContext(true);
  15
  16       addEventListener("load", function() {
  17         document.getElementById("layerTree1").innerText = internals.layerTreeAsText(document);
  18         document.getElementById("fixed1").style.top = "50px";
  19         document.getElementById("fixed2").style.height = "10px";
  20         document.getElementById("layerTree2").innerText = internals.layerTreeAsText(document);
  21         document.getElementById("fixed1").style.top = "-100px";
  22         document.getElementById("fixed2").style.height = "0px";
  23         document.getElementById("layerTree3").innerText = internals.layerTreeAsText(document);
  24       }, false);
  25     }
  26   </script>
  27 </head>
  28
  29 <!-- Fixed position elements may skip compositing without a scrollable
  30 ancestor. To make sure this test covers the intended scenario, we force the
  31 body element to be tall, so that the FrameView is scrolling. -->
  32 <body style="height: 4000px;">
  33   Layer tree when the fixed elements are out-of-view (should be blank):
  34   <pre id="layerTree1"></pre>
  35   Layer tree when the fixed elements are in-view (both fixed elements should have layers):
  36   <pre id="layerTree2"></pre>
  37   Layer tree when the fixed elements are out-of-view again (should be blank):
  38   <pre id="layerTree3"></pre>
  39   <div id="fixed1" style="position: fixed; top: -100px; left: 100px; width: 10px; height: 10px"></div>
  40   <div id="fixed2" style="position: fixed; top: 100px; left: 100px; width: 10px; height: 0px"></div>
  41 </body>
  42 </html>
  43