overlay-transition-dialog.html (777B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel=author href="mailto:jarhar@chromium.org"> 4 <link rel=help href="https://drafts.csswg.org/css-position-4/#overlay"> 5 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1451910"> 6 <link rel=help href="https://github.com/whatwg/html/pull/9387"> 7 <link rel=match href="overlay-transition-dialog-ref.html"> 8 9 <dialog>dialog</dialog> 10 11 <style> 12 dialog.animate { 13 transition: overlay 2s allow-discrete, display 2s allow-discrete; 14 } 15 </style> 16 17 <script> 18 const dialog = document.querySelector('dialog'); 19 dialog.showModal(); 20 dialog.classList.add('animate'); 21 dialog.close(); 22 requestAnimationFrame(() => { 23 requestAnimationFrame(() => { 24 document.documentElement.classList.remove('reftest-wait'); 25 }); 26 }); 27 </script>