| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <meta charset="utf-8"> |
| <link rel=author href="mailto:masonf@chromium.org"> |
| <link rel=help href="https://open-ui.org/components/popup.research.explainer"> |
| <link rel=match href="popup-animated-hide-finishes-ref.tentative.html"> |
| |
| <div popup>This is a popup</div> |
| <div class=topmost></div> |
| |
| <style> |
| [popup] { |
| width: 100px; |
| height: 100px; |
| margin: 1em; |
| left: 0; |
| /* Immediate transition: */ |
| transition: left 1s -1s; |
| } |
| [popup]:top-layer { |
| left: 200px; |
| } |
| [popup]::backdrop { |
| background-color: red; |
| } |
| .topmost { |
| position:fixed; |
| z-index: 999999; |
| top:0; |
| left:0; |
| width:1000px; |
| height:1000px; |
| background:green; |
| margin:0; |
| padding:0; |
| } |
| </style> |
| |
| <script> |
| window.onload = () => { |
| requestAnimationFrame(() => { |
| requestAnimationFrame(() => { |
| // This will show the popup, hide the popup, and start the hide transition, |
| // which should immediately finish. |
| document.querySelector('[popup]').showPopUp(); |
| document.querySelector('[popup]').hidePopUp(); |
| requestAnimationFrame(() => { |
| requestAnimationFrame(() => { |
| // Take a screenshot now. |
| document.documentElement.classList.remove('reftest-wait'); |
| }); |
| }); |
| }); |
| }); |
| } |
| </script> |
