third_party/WebKit/LayoutTests/compositing/squashing/do-not-squash-scroll-child-with-composited-descendants.html

   1 <!DOCTYPE HTML>
   2 <style>
   3 #scroller {
   4   width: 200px;
   5   height: 200px;
   6   border: 1px solid black;
   7   overflow: scroll;
   8 }
   9
  10 .scrolled {
  11   width: 100px;
  12   height: 100px;
  13   background: papayawhip;
  14   border: 1px solid black;
  15   margin: 10px;
  16   position: relative;
  17 }
  18
  19 #fixed {
  20   width: 80px;
  21   height: 80px;
  22   background: blue;
  23   will-change: transform;
  24   position: fixed;
  25   top: 0px;
  26   left: 0px;
  27 }
  28
  29 #composited {
  30   width: 20px;
  31   height: 20px;
  32   background: green;
  33   position: relative;
  34   will-change: transform;
  35 }
  36
  37 #unsquashed {
  38   z-index: 1;
  39 }
  40 </style>
  41 <div id="scroller">
  42   <div id="fixed"></div>
  43   <div class="scrolled"></div>
  44   <div class="scrolled"></div>
  45   <div id="unsquashed" class="scrolled">
  46     <div id="composited"></div>
  47   </div>
  48 </div>
  49
  50 <script src='../../resources/js-test.js'></script>
  51
  52
  53 <script>
  54 description('Verifies that scroll children with composited descendants' +
  55             ' do not squash.');
  56
  57 if (window.internals)
  58   internals.settings.setPreferCompositingToLCDTextEnabled(true);
  59
  60 function scrollChildDoesNotSquash(layer) {
  61   if (layer.children) {
  62     for (var i = 0; i < layer.children.length; i++) {
  63       var child = layer.children[i];
  64       if (child.bounds && layer.bounds &&
  65           child.bounds[0] == 20 && child.bounds[1] == 20 &&
  66           layer.bounds[0] == 102 && layer.bounds[1] == 102) {
  67         // If the child's bounds are 20x20, we're the scroll child with the
  68         // composited descendant. We should not have squashed and therefore our
  69         // bounds should remain 102x102 (100x100 plus the 1px border).
  70         return true;
  71       }
  72
  73       if (scrollChildDoesNotSquash(child))
  74         return true;
  75     }
  76   }
  77   return false;
  78 }
  79
  80 onload = function() {
  81   if (!window.internals)
  82     return;
  83   documentLayerTree = JSON.parse(window.internals.layerTreeAsText(document));
  84   shouldBe('scrollChildDoesNotSquash(documentLayerTree)', 'true');
  85 };
  86
  87 </script>