third_party/WebKit/LayoutTests/compositing/overflow/avoid-ancestor-clip-for-scroll-children.html

   1 <!DOCTYPE html>
   2 <style>
   3 #container {
   4   position: absolute;
   5   top: 0;
   6   left: 0;
   7   right: 0;
   8   bottom: 0;
   9   overflow: scroll;
  10 }
  11 .translated {
  12   position: absolute;
  13   right: 8px;
  14   left: 8px;
  15   height: 400px;
  16 }
  17 #cards {
  18   width: 400px;
  19   height: 8000px;
  20   position: relative;
  21 }
  22 .scrolled {
  23   position:absolute;
  24   width:100%;
  25   height:100%;
  26   background:green;
  27 }
  28 </style>
  29 <div id="container">
  30   <div id="cards">
  31     <div class="translated">
  32       <div class="scrolled"></div>
  33     </div>
  34     <div class="translated" style="transform: translate(0,430px)">
  35       <div class="scrolled"></div>
  36     </div>
  37   </div>
  38 </div>
  39
  40 <script src='../../resources/js-test.js'></script>
  41
  42 <script>
  43 description('Verifies that scroll children do not create ancestor clipping ' +
  44             'layers in compositor.');
  45
  46 if (window.internals)
  47   internals.settings.setPreferCompositingToLCDTextEnabled(true);
  48
  49 function scrollChildHasNoScrollClip(layer) {
  50   if (layer.children) {
  51     for (var i = 0; i < layer.children.length; i++) {
  52       var child = layer.children[i];
  53       // The only layer that should have a transform in this example is the
  54       // scroll child. If this is not the case, we have a scroll clip.
  55       if (child.transform && child.hasScrollParent)
  56         return true;
  57
  58       if (scrollChildHasNoScrollClip(child))
  59         return true;
  60     }
  61   }
  62   return false;
  63 }
  64
  65 onload = function() {
  66   if (!window.internals)
  67     return;
  68   documentLayerTree = JSON.parse(window.internals.layerTreeAsText(
  69       document, window.internals.LAYER_TREE_INCLUDES_CLIP_AND_SCROLL_PARENTS));
  70   shouldBe('scrollChildHasNoScrollClip(documentLayerTree)', 'true');
  71 };
  72 </script>