src/third_party/WebKit/LayoutTests/compositing/squashing/squash-transform-repainting-child.html

   1 <!DOCTYPE html>
   2 <head>
   3 <script src="../../resources/run-after-display.js"></script>
   4 <style>
   5 .composited {
   6 transform: translatez(0);
   7 }
   8
   9 .box {
  10   width: 100px;
  11   height: 100px;
  12 }
  13
  14 .behind {
  15   position: absolute;
  16   z-index: 1;
  17   top: 100px;
  18   left: 100px;
  19   background-color: blue;
  20 }
  21
  22 .middle {
  23   position: absolute;
  24   z-index: 1;
  25   top: 20px;
  26   left: 20px;
  27   background-color: lime;
  28   transform: rotate(45deg);
  29 }
  30
  31 .top {
  32   position: absolute;
  33   z-index: 1;
  34   top: 180px;
  35   left: 180px;
  36   background-color: cyan;
  37 }
  38
  39 .smallbox {
  40   position: absolute;
  41   top: 25px;
  42   left: 20px;
  43   width: 50px;
  44   height: 50px;
  45   background-color: magenta;
  46 }
  47
  48 div:hover {
  49   background-color: green;
  50 }
  51
  52 .smallbox:hover {
  53   background-color: lime;
  54 }
  55
  56 </style>
  57 <script>
  58     if (window.internals)
  59         internals.settings.setLayerSquashingEnabled(true);
  60     if (window.testRunner) {
  61         testRunner.dumpAsText();
  62         testRunner.waitUntilDone();
  63     }
  64
  65     function runTest()
  66     {
  67         runAfterDisplay(executeTestCases);
  68     }
  69
  70     function executeTestCases()
  71     {
  72         window.internals.startTrackingRepaints(document);
  73         document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  74         window.internals.stopTrackingRepaints(document);
  75
  76         eventSender.mouseMoveTo(0, 0);
  77         window.internals.startTrackingRepaints(document);
  78         hoverOverOuterDiv();
  79         document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  80         window.internals.stopTrackingRepaints(document);
  81
  82         eventSender.mouseMoveTo(0, 0);
  83         window.internals.startTrackingRepaints(document);
  84         hoverOverInnerDiv();
  85         document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  86         window.internals.stopTrackingRepaints(document);
  87
  88         // Display the test results only after test is done so that it does not affect repaint rect results.
  89         document.getElementById('testResults').style.display = "block";
  90
  91         if (window.testRunner)
  92             testRunner.notifyDone();
  93     }
  94
  95     function hoverOverOuterDiv()
  96     {
  97         internals.setIsCursorVisible(document, true);
  98         eventSender.mouseMoveTo(10, 65);
  99
 100     }
 101
 102     function hoverOverInnerDiv()
 103     {
 104         internals.setIsCursorVisible(document, true);
 105         eventSender.mouseMoveTo(40, 65);
 106
 107     }
 108 </script>
 109 </head>
 110 <body onload="runTest()">
 111   <div class="composited box behind"></div>
 112
 113   <div class="box middle">
 114     <div class="smallbox"></div>
 115   </div>
 116
 117   <div class="box top"></div>
 118
 119   <div id="testResults" style="display:none">
 120     CASE 1, original layer tree
 121     <pre id="Case1"></pre>
 122
 123     CASE 2, hovering over the outer div
 124     <pre id="Case2"></pre>
 125
 126     CASE 3, hovering over the inner div
 127     <pre id="Case3"></pre>
 128   </div>
 129 </body>