| <!DOCTYPE html> |
| <html> |
| <style> |
| body { margin: 0; } |
| #test { |
| will-change: opacity; |
| } |
| |
| 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; |
| } |
| .composited { |
| will-change: transform; |
| } |
| #faded { |
| width: 200px; |
| height: 200px; |
| |
| will-change: opacity; |
| opacity: 0; |
| } |
| #resized { |
| background-color: lightblue; |
| width: 100px; |
| height: 100px; |
| cursor: pointer; |
| } |
| .shape { |
| float: left; |
| background: blue; |
| width: 100px; |
| height: 100px; |
| cursor: pointer; |
| } |
| #radius { |
| border-radius: 16px; |
| } |
| #partial-radius { |
| border-radius: 14px 0 0 14px; |
| } |
| #non-uniform-radius { |
| border-radius: 10px 11px 12px 13px; |
| } |
| |
| </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 class="composited">layered content</div> |
| <div class="composited"> |
| layered content <a href="#">with interactions</a> |
| <div class="composited"> |
| layered content |
| <div class="composited" id="to-hide"> |
| layered content <a href="#">with interactions</a> |
| </div> |
| </div> |
| </div> |
| <div class="composited">layered content</div> |
| </div> |
| <div id="faded"> |
| <a href="#">Faded link</a> |
| </div> |
| <div id="noradius" class="shape"> |
| </div> |
| <div id="radius" class="shape"> |
| </div> |
| <div id="partial-radius" class="shape"> |
| </div> |
| <div id="non-uniform-radius" class="shape"> |
| </div> |
| <div id="resized" onclick="click()"> |
| will be resized |
| </div> |
| </div> |
| |
| </section> |
| |
| <pre id="results"></pre> |
| <script> |
| document.body.addEventListener("click", function(e) { |
| console.log(e, "event delegation"); |
| }); |
| |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| |
| window.onload = async function () { |
| if (!window.internals) |
| return; |
| |
| const testEl = document.getElementById('test'); |
| |
| // Resizing - reuses the layer while maintaining its position in the sublayers array. |
| await UIHelper.animationFrame(); |
| document.getElementById("resized").style.width = "200px"; |
| |
| // Adding - appends a new layer. |
| await UIHelper.animationFrame(); |
| document.querySelector("iframe").srcdoc = "<div style='cursor:pointer;width:100%;height:200px'; onclick='click()'>tappable</div>"; |
| document.getElementById("resized").style.backgroundColor = "blue"; |
| |
| // Removing - moves layers arround. |
| await UIHelper.animationFrame(); |
| document.getElementById("to-hide").style.display = "none"; |
| |
| await UIHelper.ensureStablePresentationUpdate(); |
| results.textContent = await UIHelper.getCALayerTreeForCompositedElement(testEl); |
| testEl.remove(); |
| |
| testRunner.notifyDone(); |
| }; |
| </script> |
| </body> |
| </html> |
| |
