src/third_party/WebKit/LayoutTests/compositing/squashing/squash-transform-repainting-transformed-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(22deg);
  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   transform: rotate(22deg);
  47 }
  48
  49 div:hover {
  50   background-color: green;
  51 }
  52
  53 .smallbox:hover {
  54   background-color: lime;
  55 }
  56
  57 </style>
  58 <script>
  59     if (window.internals)
  60         internals.settings.setLayerSquashingEnabled(true);
  61     if (window.testRunner) {
  62         testRunner.dumpAsText();
  63         testRunner.waitUntilDone();
  64     }
  65
  66     function runTest()
  67     {
  68         runAfterDisplay(executeTestCases);
  69     }
  70
  71     function executeTestCases()
  72     {
  73         window.internals.startTrackingRepaints(document);
  74         document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  75         window.internals.stopTrackingRepaints(document);
  76
  77         eventSender.mouseMoveTo(0, 0);
  78         window.internals.startTrackingRepaints(document);
  79         hoverOverOuterDiv();
  80         document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  81         window.internals.stopTrackingRepaints(document);
  82
  83         eventSender.mouseMoveTo(0, 0);
  84         window.internals.startTrackingRepaints(document);
  85         hoverOverInnerDiv();
  86         document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  87         window.internals.stopTrackingRepaints(document);
  88
  89         // Display the test results only after test is done so that it does not affect repaint rect results.
  90         document.getElementById('testResults').style.display = "block";
  91
  92         if (window.testRunner)
  93             testRunner.notifyDone();
  94     }
  95
  96     function hoverOverOuterDiv()
  97     {
  98         internals.setIsCursorVisible(document, true);
  99         eventSender.mouseMoveTo(20, 90);
 100     }
 101
 102     function hoverOverInnerDiv()
 103     {
 104         internals.setIsCursorVisible(document, true);
 105         eventSender.mouseMoveTo(60, 70);
 106
 107     }
 108 </script>
 109 </head>
 110 <body onload="runTest()">
 111
 112   <div class="composited box behind"></div>
 113
 114   <div class="box middle">
 115     <div class="smallbox"></div>
 116   </div>
 117
 118   <div class="box top"></div>
 119
 120   <div id="testResults" style="display:none">
 121     CASE 1, original layer tree
 122     <pre id="Case1"></pre>
 123
 124     CASE 2, hovering over the outer div
 125     <pre id="Case2"></pre>
 126
 127     CASE 3, hovering over the inner div
 128     <pre id="Case3"></pre>
 129   </div>
 130 </body>