| <!DOCTYPE html> |
| <html> |
| <style> |
| body { margin: 0; } |
| iframe { |
| width: 300px; |
| height: 200px; |
| } |
| #overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| |
| z-index: 10; |
| opacity: 0.8; |
| will-change: opacity; |
| |
| background-color: #333; |
| } |
| #nested { |
| will-change: transform; |
| } |
| |
| </style> |
| <script src="../resources/ui-helper.js"></script> |
| <body> |
| <section id="test"> |
| <div> |
| <button>button</button> |
| </div> |
| <iframe></iframe> |
| <div id="overlay"> |
| <a href="#">link</a> |
| <div id="nested">layered content</div> |
| </div> |
| </div> |
| |
| </section> |
| |
| <pre id="results"></pre> |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| |
| window.onload = async function () { |
| if (!window.internals) |
| return; |
| |
| await UIHelper.animationFrame(); |
| document.querySelector("iframe").srcdoc = "<div style='cursor:pointer;width:100%;height:200px'; onclick='click()'>tappable</div>"; |
| |
| await UIHelper.ensureStablePresentationUpdate(); |
| results.textContent = await UIHelper.getCALayerTree(); |
| document.getElementById('test').remove(); |
| |
| testRunner.notifyDone(); |
| }; |
| </script> |
| </body> |
| </html> |
| |
