third_party/WebKit/LayoutTests/compositing/overflow/selection-gaps-toggling-with-scrolling-contents.html

   1 <!DOCTYPE html>
   2 <style>
   3   #container {
   4     height: 500px;
   5     width: 300px;
   6     overflow: scroll;
   7   }
   8
   9   .scrolled {
  10     height: 50px;
  11     width: 100px;
  12     background: orange;
  13     margin: 15px;
  14     transform: translateZ(0);
  15   }
  16 </style>
  17 <script>
  18   if (window.testRunner)
  19     testRunner.dumpAsText();
  20
  21   if (window.internals)
  22     window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  23
  24   var iteration = 1;
  25
  26   function dumpLayerTree() {
  27     var pre = document.getElementById("console");
  28
  29     if (window.internals) {
  30       var layerTreeAsText = internals.layerTreeAsText(document);
  31       pre.innerHTML += '\n\n*** iteration ' + iteration + ': ***\n\n';
  32       pre.innerHTML += layerTreeAsText;
  33     }
  34
  35     iteration++;
  36   }
  37
  38   onload = function()
  39   {
  40     var container = document.getElementById('container');
  41
  42     dumpLayerTree();
  43
  44     container.style.backgroundColor = 'blue';
  45
  46     dumpLayerTree();
  47
  48     var selection = getSelection();
  49     var range = document.createRange();
  50     range.selectNode(document.getElementById("selection"));
  51     selection.addRange(range);
  52
  53     dumpLayerTree();
  54
  55     container.style.backgroundColor = '';
  56
  57     dumpLayerTree();
  58   }
  59 </script>
  60
  61 This test passes if the container's scrolling contents layer (the first child of the GraphicsLayer with 4 children)
  62 draws content only on iterations 2 and 3, and its scrolling block selection layer (the child of the scrolling
  63 contents layer) draws content only on iteration 4. The scrolling block selection layer should also be much smaller
  64 than the scrolling contents layer.
  65
  66 <div id="container">
  67   <div class="scrolled">Lorem Ipsum</div>
  68   <div class="scrolled">Lorem Ipsum</div>
  69   <div class="scrolled" id="selection">Lorem Ipsum</div>
  70   <div class="scrolled">Lorem Ipsum</div>
  71   <div class="scrolled">Lorem Ipsum</div>
  72   <div class="scrolled">Lorem Ipsum</div>
  73   <div class="scrolled">Lorem Ipsum</div>
  74   <div class="scrolled">Lorem Ipsum</div>
  75   <div class="scrolled">Lorem Ipsum</div>
  76   <div class="scrolled">Lorem Ipsum</div>
  77 </div>
  78 <pre id="console"></pre>