third_party/WebKit/LayoutTests/compositing/squashing/selection-repaint-with-gaps.html

   1 <!DOCTYPE html>
   2 <style>
   3    .overlap {
   4      height: 500px;
   5      width: 300px;
   6      transform: translateZ(0);
   7    }
   8
   9    .item {
  10      height: 50px;
  11      width: 100px;
  12      background: lightgray;
  13      margin: 15px;
  14      position: absolute;
  15      left: 0px;
  16    }
  17    .inline-block {
  18      display: inline-block;
  19      height: 10px;
  20      width: 40px;
  21    }
  22 </style>
  23 <script src="../../resources/run-after-layout-and-paint.js"></script>
  24
  25 <!-- This test checks whether repaint rects for selection on squashed layers is correct. -->
  26
  27 <div class="overlap"></div>
  28 <div style="top: 20px" class="item"><div class="inline-block">lorem ipsum</div></div>
  29 <div style="top: 100px" class="item" id="item1"><div class="inline-block">lorem ipsum</div></div>
  30 <div style="top: 180px" class="item" id="item2"><div class="inline-block">lorem ipsum</div></div>
  31
  32 </div>
  33 <div id="output" style="display: none">
  34     <pre id="case1"></pre>
  35     <pre id="case2"></pre>
  36 </div>
  37 <script>
  38     if (window.testRunner) {
  39         testRunner.dumpAsText();
  40         testRunner.waitUntilDone();
  41     }
  42
  43     runAfterLayoutAndPaint(function()
  44     {
  45         if (window.internals)
  46             window.internals.startTrackingRepaints(document);
  47         var selection = getSelection();
  48
  49         // Case 1: selection that does not have any gaps.
  50         selection.setBaseAndExtent(document.querySelector("#item1"), 0, document.querySelector("#item1"), 1);
  51
  52         if (window.internals) {
  53             document.querySelector('#case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  54             window.internals.stopTrackingRepaints(document);
  55         }
  56
  57         selection.empty();
  58
  59         if (window.internals)
  60             window.internals.startTrackingRepaints(document);
  61
  62         // Case 2: selection with a gap between item1 and item2.
  63         selection.setBaseAndExtent(document.querySelector("#item1"), 0, document.querySelector("#item2"), 1);
  64
  65         if (window.internals) {
  66             document.querySelector('#case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  67             window.internals.stopTrackingRepaints(document);
  68         }
  69
  70         document.querySelector('#output').style.display = 'block';
  71
  72
  73         if (window.testRunner)
  74             testRunner.notifyDone();
  75     });
  76 </script>