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.setPreferCompositingToLCDTextEnabled(true);
  14
  15       addEventListener("load", function() {
  16         document.getElementById("layerTree1").innerText = internals.layerTreeAsText(document);
  17         document.getElementById("fixed1").style.top = "50px";
  18         document.getElementById("fixed2").style.height = "10px";
  19         document.getElementById("layerTree2").innerText = internals.layerTreeAsText(document);
  20         document.getElementById("fixed1").style.top = "-100px";
  21         document.getElementById("fixed2").style.height = "0px";
  22         document.getElementById("layerTree3").innerText = internals.layerTreeAsText(document);
  23       }, false);
  24     }
  25   </script>
  26 </head>
  27
  28 <!-- Fixed position elements may skip compositing without a scrollable
  29 ancestor. To make sure this test covers the intended scenario, we force the
  30 body element to be tall, so that the FrameView is scrolling. -->
  31 <body style="height: 4000px;">
  32   Layer tree when the fixed elements are out-of-view (should have just a root layer):
  33   <pre id="layerTree1"></pre>
  34   Layer tree when the fixed elements are in-view (both fixed elements should have layers):
  35   <pre id="layerTree2"></pre>
  36   Layer tree when the fixed elements are out-of-view again (should have just a root layer):
  37   <pre id="layerTree3"></pre>
  38   <div id="fixed1" style="position: fixed; top: -100px; left: 100px; width: 10px; height: 10px"></div>
  39   <div id="fixed2" style="position: fixed; top: 100px; left: 100px; width: 10px; height: 0px"></div>
  40 </body>
  41 </html>
  42