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

   1 <!DOCTYPE html>
   2 <head>
   3 <script src="../../resources/run-after-layout-and-paint.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.testRunner) {
  59         testRunner.dumpAsText();
  60         testRunner.waitUntilDone();
  61     }
  62
  63     function runTest()
  64     {
  65         runAfterLayoutAndPaint(executeTestCases);
  66     }
  67
  68     function executeTestCases()
  69     {
  70         window.internals.startTrackingRepaints(document);
  71         document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  72         window.internals.stopTrackingRepaints(document);
  73
  74         eventSender.mouseMoveTo(0, 0);
  75         window.internals.startTrackingRepaints(document);
  76         hoverOverOuterDiv();
  77         document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  78         window.internals.stopTrackingRepaints(document);
  79
  80         eventSender.mouseMoveTo(0, 0);
  81         window.internals.startTrackingRepaints(document);
  82         hoverOverInnerDiv();
  83         document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  84         window.internals.stopTrackingRepaints(document);
  85
  86         // Display the test results only after test is done so that it does not affect repaint rect results.
  87         document.getElementById('testResults').style.display = "block";
  88
  89         if (window.testRunner)
  90             testRunner.notifyDone();
  91     }
  92
  93     function hoverOverOuterDiv()
  94     {
  95         internals.setIsCursorVisible(document, true);
  96         eventSender.mouseMoveTo(10, 65);
  97
  98     }
  99
 100     function hoverOverInnerDiv()
 101     {
 102         internals.setIsCursorVisible(document, true);
 103         eventSender.mouseMoveTo(40, 65);
 104
 105     }
 106 </script>
 107 </head>
 108 <body onload="runTest()">
 109   <div class="composited box behind"></div>
 110
 111   <div class="box middle">
 112     <div class="smallbox"></div>
 113   </div>
 114
 115   <div class="box top"></div>
 116
 117   <div id="testResults" style="display:none">
 118     CASE 1, original layer tree
 119     <pre id="Case1"></pre>
 120
 121     CASE 2, hovering over the outer div
 122     <pre id="Case2"></pre>
 123
 124     CASE 3, hovering over the inner div
 125     <pre id="Case3"></pre>
 126   </div>
 127 </body>