third_party/WebKit/LayoutTests/compositing/overflow/selection-gaps-toggling.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   onload = function()
  25   {
  26     var pre = document.getElementById("console");
  27
  28     pre.innerHTML = '';
  29
  30     if (window.internals) {
  31       var layerTreeAsText = internals.layerTreeAsText(document);
  32       pre.innerHTML += '\n\n*** iteration 1: ***\n\n';
  33       pre.innerHTML += layerTreeAsText;
  34     }
  35
  36     var selection = getSelection();
  37
  38     var range = document.createRange();
  39     range.selectNode(document.getElementById("selection"));
  40     selection.addRange(range);
  41
  42     if (window.internals) {
  43       var layerTreeAsText = internals.layerTreeAsText(document);
  44       pre.innerHTML += '\n\n*** iteration 2: ***\n\n';
  45       pre.innerHTML += layerTreeAsText;
  46     }
  47
  48     selection.removeAllRanges();
  49
  50     if (window.internals) {
  51       var layerTreeAsText = internals.layerTreeAsText(document);
  52       pre.innerHTML += '\n\n*** iteration 3: ***\n\n';
  53       pre.innerHTML += layerTreeAsText;
  54     }
  55   }
  56 </script>
  57
  58 This test passes if the container's scrolling contents layer (the first child of the GraphicsLayer with 4 children)
  59 doesn't draw content at all, and its scrolling block selection layer (the child of the scrolling contents layer)
  60 draws content only on iteration 2. The scrolling block selection layer should also be much smaller than the
  61 scrolling contents layer.
  62
  63 <div class="container">
  64   <div class="scrolled">Lorem Ipsum</div>
  65   <div class="scrolled">Lorem Ipsum</div>
  66   <div class="scrolled" id="selection">Lorem Ipsum</div>
  67   <div class="scrolled">Lorem Ipsum</div>
  68   <div class="scrolled">Lorem Ipsum</div>
  69   <div class="scrolled">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>
  75 <pre id="console"></pre>