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