third_party/WebKit/LayoutTests/compositing/overflow/selection-gaps.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.internals)
  19     window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  20
  21   onload = function()
  22   {
  23     var selection = getSelection();
  24
  25     var range = document.createRange();
  26     range.selectNode(document.getElementById("selection"));
  27     selection.addRange(range);
  28   }
  29 </script>
  30
  31 This test passes if the highlighted area includes the gaps between scrolled children.
  32
  33 <div class="container">
  34   <div class="scrolled">Lorem Ipsum</div>
  35   <div class="scrolled">Lorem Ipsum</div>
  36   <div class="scrolled" id="selection">Lorem Ipsum</div>
  37   <div class="scrolled">Lorem Ipsum</div>
  38   <div class="scrolled">Lorem Ipsum</div>
  39   <div class="scrolled">Lorem Ipsum</div>
  40   <div class="scrolled">Lorem Ipsum</div>
  41   <div class="scrolled">Lorem Ipsum</div>
  42   <div class="scrolled">Lorem Ipsum</div>
  43   <div class="scrolled">Lorem Ipsum</div>
  44 </div>