| |
| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <link rel=author href="mailto:masonf@chromium.org"> |
| <link rel=help href="https://open-ui.org/components/popup.research.explainer"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script src="resources/popover-utils.js"></script> |
| <script src="/common/gc.js"></script> |
| |
| <dialog>I am a dialog</dialog> |
| |
| <style> |
| [popover].animation { |
| left: 0px; |
| } |
| [popover].animation:open { |
| animation: move 1000s; |
| } |
| @keyframes move { |
| from { left: 0px; } |
| to { left: 200px; } |
| } |
| |
| [popover].transition { |
| opacity: 0; |
| transition: opacity 5s; |
| } |
| [popover].transition:open { |
| opacity: 1; |
| } |
| |
| [popover] { |
| top: 200px; |
| } |
| [popover]::backdrop { |
| background-color: rgba(255,0,0,0.2); |
| } |
| </style> |
| |
| <script> |
| function rAF() { |
| return new Promise(resolve => requestAnimationFrame(resolve)); |
| } |
| function addPopover(classname) { |
| const popover = document.createElement('div'); |
| popover.popover = 'auto'; |
| popover.classList = classname; |
| popover.textContent = 'This is a popover'; |
| document.body.appendChild(popover); |
| return popover; |
| } |
| promise_test(async () => { |
| let popover = addPopover("animation"); |
| let dialog = document.querySelector('dialog'); |
| popover.showPopover(); // No animations here |
| await rAF(); |
| popover.hidePopover(); // Start animations |
| await rAF(); |
| popover.remove(); |
| await garbageCollect(); |
| await rAF(); |
| // This test passes if it does not crash. |
| },'Ensure no crashes if running animations are immediately cancelled (document removal)'); |
| |
| promise_test(async (t) => { |
| let popover = addPopover("animation"); |
| let dialog = document.querySelector('dialog'); |
| popover.showPopover(); // No animations here |
| await rAF(); |
| popover.hidePopover(); // Start animations |
| await rAF(); |
| dialog.showModal(); // Immediately hide popover |
| t.add_cleanup(() => dialog.close()); |
| await rAF(); |
| popover.remove(); |
| await garbageCollect(); |
| await rAF(); |
| // This test passes if it does not crash. |
| },'Ensure no crashes if running animations are immediately cancelled (dialog showModal)'); |
| |
| promise_test(async (t) => { |
| let popover = addPopover("transition"); |
| let dialog = document.querySelector('dialog'); |
| let button = document.createElement('button'); |
| t.add_cleanup(() => {popover.remove();button.remove();}); |
| document.body.appendChild(button); |
| button.addEventListener('click',() => dialog.show()); |
| popover.showPopover(); // No animations here |
| await rAF(); |
| await clickOn(button); |
| await rAF(); |
| // This test passes if it does not crash. |
| },'Ensure no crashes if running transitions are immediately cancelled (button click)'); |
| </script> |