| <!DOCTYPE html> |
| <head> |
| <style> |
| .composited { |
| will-change: transform; |
| } |
| |
| .box { |
| width: 100px; |
| height: 100px; |
| } |
| |
| .behind { |
| position: absolute; |
| z-index: 1; |
| top: 100px; |
| left: 100px; |
| background-color: blue; |
| } |
| |
| .middle { |
| position: absolute; |
| z-index: 1; |
| top: 180px; |
| left: 180px; |
| background-color: lime; |
| } |
| |
| .middle2 { |
| position: absolute; |
| z-index: 1; |
| top: 260px; |
| left: 260px; |
| background-color: magenta; |
| } |
| |
| .top { |
| position: absolute; |
| z-index: 1; |
| top: 340px; |
| left: 340px; |
| background-color: cyan; |
| } |
| |
| div:hover { |
| background-color: green; |
| will-change: transform; |
| } |
| |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function runTest() |
| { |
| if (!window.internals) |
| return; |
| |
| document.getElementById('Case1').textContent = internals.layerTreeAsText(document); |
| |
| hoverOverMiddleDiv(); |
| document.getElementById('Case2').textContent = internals.layerTreeAsText(document); |
| |
| hoverOverMiddle2Div(); |
| document.getElementById('Case3').textContent = internals.layerTreeAsText(document); |
| |
| hoverOverTopDiv(); |
| document.getElementById('Case4').textContent = internals.layerTreeAsText(document); |
| |
| hoverAtZero(); |
| document.getElementById('Case5').textContent = internals.layerTreeAsText(document); |
| |
| document.getElementById('testTitle').style.display = ''; |
| document.getElementById('testResults').style.display = ''; |
| } |
| |
| function hoverAtZero() |
| { |
| internals.setIsCursorVisible(document, true); |
| eventSender.mouseMoveTo(0, 0); |
| } |
| |
| function hoverOverMiddleDiv() |
| { |
| internals.setIsCursorVisible(document, true); |
| eventSender.mouseMoveTo(190, 190); |
| } |
| |
| function hoverOverMiddle2Div() |
| { |
| internals.setIsCursorVisible(document, true); |
| eventSender.mouseMoveTo(270, 270); |
| } |
| |
| function hoverOverTopDiv() |
| { |
| internals.setIsCursorVisible(document, true); |
| eventSender.mouseMoveTo(350, 350); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <div class="composited box behind"></div> |
| <div class="box middle"></div> |
| <div class="box middle2"></div> |
| <div class="box top"></div> |
| |
| <p id="testTitle" style="display:none">Test overlap is rendered correctly when hovering over elements</p> |
| |
| <div class="composited"></div> |
| <div id="A" class="overlap1"></div> |
| <div id="B" class="overlap2"></div> |
| <div id="C" class="overlap3"></div> |
| |
| <div id="testResults" style="display:none"> |
| Case 1, original layer tree: |
| <pre id="Case1"></pre> |
| Case 2: hovering over the "middle" element (causes that div to become its own composited layer) |
| <pre id="Case2"></pre> |
| Case 3: hovering over the "middle2" element (causes that div to become its own composited layer) |
| <pre id="Case3"></pre> |
| Case 4: hovering over the "top" element (causes that div to become its own composited layer) |
| <pre id="Case4"></pre> |
| Case 5: back to situation in case 1 |
| <pre id="Case5"></pre> |
| </div> |
| |
| </body> |
| </body> |
