| <!doctype HTML> |
| <title>Page updates correctly after click with transtion transform and complex stacking contexts.</title> |
| <style> |
| #target .child::before { |
| content: ""; |
| position: absolute; |
| height: 30px; |
| width: 30px; |
| will-change: transform; |
| transition: transform ease-out 100ms; |
| background-color: green; |
| } |
| #target.Slider_pressed .child::before { |
| transform: translateZ(0); |
| } |
| </style> |
| <div class="ContextualPopup" style="opacity: 0.9"> |
| <div id=target tabindex="-1" > |
| <div class=child></div> |
| </div> |
| <div style="position: relative; z-index: 0"> |
| <div style=" position: absolute; z-index: -1; will-change: transform;"></div> |
| </div> |
| <div style="position: absolute; height: 30px; width: 30px; left: 100px; background-color: green;"> |
| </div> |
| <script> |
| if (testRunner) |
| testRunner.waitUntilDone(); |
| |
| onload = () => { |
| target.addEventListener("mousedown", () => { |
| target.classList.add("Slider_pressed"); |
| if (testRunner) { |
| setTimeout(() => { |
| testRunner.notifyDone(); |
| }, 200); |
| } |
| }); |
| if (eventSender) { |
| eventSender.mouseMoveTo(10, 10); |
| eventSender.mouseDown(); |
| } |
| }; |
| |
| </script> |
