src/third_party/WebKit/LayoutTests/compositing/overflow/scroll-parent-with-non-stacking-context-composited-ancestor.html

   1 <!DOCTYPE HTML>
   2 <!--
   3 This test checks that when overlay scrollbars are repositioned due to
   4 accelerated overflow scrolling, that their position accounts for any
   5 intervening, composited ancestors. The test is working correctly if the
   6 scrollbars are correctly positioned on top of the scroller and the scrolled
   7 contents.
   8 -->
   9 <style>
  10 #scroller {
  11     overflow: scroll;
  12     width: 100px;
  13     height: 100px;
  14     border: 1px solid black;
  15 }
  16
  17 .scrolled {
  18     background: blue;
  19     width: 60px;
  20     height: 40px;
  21     margin: 4px;
  22     position: relative;
  23 }
  24
  25 #fixed {
  26     background: green;
  27     position: fixed;
  28     left: 60px;
  29     top: 60px;
  30     width: 80px;
  31     height: 80px;
  32 }
  33
  34 #intervening {
  35     background: papayawhip;
  36     width: 300px;
  37     height: 300px;
  38     -webkit-backface-visibility: hidden;
  39     margin: 90px;
  40 }
  41 </style>
  42 <div id="intervening">
  43     <div id="scroller">
  44         <div id="fixed"></div>
  45         <div class="scrolled"></div>
  46         <div class="scrolled"></div>
  47         <div class="scrolled"></div>
  48         <div class="scrolled"></div>
  49     </div>
  50 </div>
  51 <script>
  52 if (window.internals) {
  53     window.internals.settings.setOverlayScrollbarsEnabled(true);
  54     window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  55 }
  56
  57 if (window.testRunner)
  58     window.testRunner.dumpAsTextWithPixelResults();
  59
  60 onload = function() {
  61     if (window.internals && window.testRunner)
  62         window.testRunner.setCustomTextOutput(window.internals.layerTreeAsText(document));
  63 };
  64 </script>