src/third_party/WebKit/LayoutTests/compositing/squashing/squash-compositing-hover.html

   1 <!DOCTYPE html>
   2 <head>
   3 <style>
   4 .composited {
   5 transform: translatez(0);
   6 }
   7
   8 .box {
   9   width: 100px;
  10   height: 100px;
  11 }
  12
  13 .behind {
  14   position: absolute;
  15   z-index: 1;
  16   top: 100px;
  17   left: 100px;
  18   background-color: blue;
  19 }
  20
  21 .middle {
  22   position: absolute;
  23   z-index: 1;
  24   top: 180px;
  25   left: 180px;
  26   background-color: lime;
  27 }
  28
  29 .middle2 {
  30   position: absolute;
  31   z-index: 1;
  32   top: 260px;
  33   left: 260px;
  34   background-color: magenta;
  35 }
  36
  37 .top {
  38   position: absolute;
  39   z-index: 1;
  40   top: 340px;
  41   left: 340px;
  42   background-color: cyan;
  43 }
  44
  45 div:hover {
  46   background-color: green;
  47   transform:translatez(0);
  48 }
  49
  50 </style>
  51 <script>
  52     if (window.testRunner)
  53         testRunner.dumpAsText();
  54
  55     if (window.internals)
  56         internals.settings.setLayerSquashingEnabled(true);
  57
  58     function runTest()
  59     {
  60         if (!window.internals)
  61             return;
  62
  63         document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document);
  64
  65         hoverOverMiddleDiv();
  66         document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document);
  67
  68         hoverOverMiddle2Div();
  69         document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document);
  70
  71         hoverOverTopDiv();
  72         document.getElementById('Case4').textContent = window.internals.layerTreeAsText(document);
  73
  74         hoverAtZero();
  75         document.getElementById('Case5').textContent = window.internals.layerTreeAsText(document);
  76
  77         document.getElementById('testTitle').style.display = '';
  78         document.getElementById('testResults').style.display = '';
  79     }
  80
  81     function hoverAtZero()
  82     {
  83         internals.setIsCursorVisible(document, true);
  84         eventSender.mouseMoveTo(0, 0);
  85     }
  86
  87     function hoverOverMiddleDiv()
  88     {
  89         internals.setIsCursorVisible(document, true);
  90         eventSender.mouseMoveTo(190, 190);
  91     }
  92
  93     function hoverOverMiddle2Div()
  94     {
  95         internals.setIsCursorVisible(document, true);
  96         eventSender.mouseMoveTo(270, 270);
  97     }
  98
  99     function hoverOverTopDiv()
 100     {
 101         internals.setIsCursorVisible(document, true);
 102         eventSender.mouseMoveTo(350, 350);
 103     }
 104 </script>
 105 </head>
 106 <body onload="runTest()">
 107   <div class="composited box behind"></div>
 108   <div class="box middle"></div>
 109   <div class="box middle2"></div>
 110   <div class="box top"></div>
 111
 112   <p id="testTitle" style="display:none">Test overlap is rendered correctly when hovering over elements</p>
 113
 114   <div class="composited"></div>
 115   <div id="A" class="overlap1"></div>
 116   <div id="B" class="overlap2"></div>
 117   <div id="C" class="overlap3"></div>
 118
 119   <div id="testResults" style="display:none">
 120     Case 1, original layer tree:
 121     <pre id="Case1"></pre>
 122     Case 2: hovering over the "middle" element (causes that div to become its own composited layer)
 123     <pre id="Case2"></pre>
 124     Case 3: hovering over the "middle2" element (causes that div to become its own composited layer)
 125     <pre id="Case3"></pre>
 126     Case 4: hovering over the "top" element (causes that div to become its own composited layer)
 127     <pre id="Case4"></pre>
 128     Case 5: back to situation in case 1
 129     <pre id="Case5"></pre>
 130   </div>
 131
 132 </body>
 133 </body>