third_party/WebKit/LayoutTests/compositing/squashing/invalidations-with-large-negative-margin-inline-content.html

   1 <!DOCTYPE html>
   2 <div style="height:200px;width:600px;overflow:scroll">
   3   <div style="position:relative; top: 100px">
   4     <div style="height:400px;margin-bottom:-400px;position:relative">
   5       <div style="width:50px;height:50px;position:absolute;margin:0;left: 400px">
   6         <div id="chip" style="height: 20px; width: 20px; background: lightgray"></span>
   7       </div>
   8     </div>
   9   </div>
  10 </div>
  11
  12 <pre id="output" style="display:none"></pre>
  13 <script>
  14 // Test that updating the position of a LayoutObject that is squashed relative to its squashing container,
  15 // but does not have a Layer, issues the correct repaint rects.
  16 if (window.testRunner) {
  17     testRunner.dumpAsText();
  18     testRunner.waitUntilDone();
  19 }
  20 var updateFunction = function() {
  21     if (window.internals)
  22         window.internals.startTrackingRepaints(document);
  23
  24     document.getElementById('chip').style.backgroundColor = "blue";
  25
  26     if (window.internals) {
  27         // Repaint should be at x=400px, since that is the position relative to the squashing layer.
  28         var data = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  29         window.internals.stopTrackingRepaints(document);
  30
  31         var output = document.getElementById('output');
  32         output.textContent = data;
  33         output.style.display = "block";
  34     }
  35
  36     if (window.testRunner)
  37         testRunner.notifyDone();
  38 };
  39
  40 // Wait two frames before updating the chip's style, so that the document is painted and squashed first.
  41 window.requestAnimationFrame(function() {
  42     window.requestAnimationFrame(updateFunction);
  43 });
  44 </script>