third_party/WebKit/LayoutTests/compositing/overflow/selection-gaps-after-removing-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     container.style.backgroundColor = 'blue';
  42
  43     dumpLayerTree();
  44
  45     var selection = getSelection();
  46     var range = document.createRange();
  47     range.selectNode(document.getElementById("selection"));
  48     selection.addRange(range);
  49
  50     dumpLayerTree();
  51
  52     container.style.backgroundColor = '';
  53
  54     dumpLayerTree();
  55
  56     selection.removeAllRanges();
  57
  58     dumpLayerTree();
  59   }
  60 </script>
  61
  62 This test passes if the container's scrolling contents layer (the first child of the GraphicsLayer with 4 children)
  63 draws content only on iterations 1 and 2, and its scrolling block selection layer (the child of the scrolling
  64 contents layer) draws content only on iteration 3. The scrolling block selection layer should also be much smaller
  65 than the scrolling contents layer.
  66
  67 <div id="container">
  68   <div class="scrolled">Lorem Ipsum</div>
  69   <div class="scrolled">Lorem Ipsum</div>
  70   <div class="scrolled" id="selection">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 class="scrolled">Lorem Ipsum</div>
  78 </div>
  79 <pre id="console"></pre>