| <!DOCTYPE html> |
| <html> |
| <style> |
| body { margin: 0; } |
| div { |
| display: inline-block; |
| margin: 10px; |
| padding: 1em; |
| background: blue; |
| color: white; |
| cursor: pointer; |
| } |
| .uniform { |
| border-radius: 12px; |
| border: 4px black solid; |
| } |
| .half-pill { |
| border-radius: 20px 0 0 20px; |
| } |
| .diagonal { |
| border-radius: 16px 0 16px 0; |
| border: 2px black solid; |
| } |
| .tongue { |
| border-radius: 0 0 10px 10px; |
| } |
| .degenerate { |
| border-radius: 2px 16px 10px 18px; |
| border: 1px black solid; |
| } |
| .big-border { |
| border-radius: 0 16px 18px 0; |
| border: 10px purple solid; |
| border-left: 30px red solid; |
| } |
| .changed { |
| border-radius: 20px; |
| } |
| |
| .default, .explicit { |
| background: transparent; |
| color: black; |
| } |
| .explicit { |
| border-radius: 0; |
| } |
| </style> |
| <script src="../resources/ui-helper.js"></script> |
| <body> |
| <div class="uniform">uniform</div> |
| <div class="half-pill">half pill</div> |
| <div class="diagonal">diagonal</div> |
| <div class="tongue">tongue</div> |
| <div class="degenerate">degenerate</div> |
| <div class="big-border">big border</div> |
| <div class="changing">changing</div> |
| <div class="default">default</div> |
| <div class="explicit">explicit</div> |
| <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 () { |
| await UIHelper.animationFrame(); |
| document.querySelector(".changing").classList.add("changed"); |
| if (window.internals) { |
| results.textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_EVENT_REGION | internals.LAYER_TREE_INCLUDES_ROOT_LAYER_PROPERTIES); |
| testRunner.notifyDone(); |
| } |
| }; |
| </script> |
| </body> |
| </html> |
