dialog-in-rtl-iframe-child.html (1065B)
1 <!DOCTYPE html> 2 <html dir="rtl"> 3 <head> 4 <style> 5 body { 6 /* We need a background due to https://crbug.com/1414158. */ 7 background-color: white; 8 height: 200vh; 9 } 10 11 ::view-transition-new(*) { 12 animation: unset; 13 opacity: 1; 14 } 15 ::view-transition-old(*) { 16 animation-duration: 30s; 17 opacity: 0; 18 } 19 20 dialog { 21 width: 50dvw; 22 height: 50dvh; 23 box-sizing: border-box; 24 background-color: limegreen; 25 border: 1px solid black; 26 outline: none; 27 } 28 29 </style> 30 <script> 31 function show() { 32 document.getElementById('dialog').showModal(); 33 } 34 function startTransition() { 35 window.transition = document.startViewTransition(() => { 36 show(); 37 }); 38 } 39 40 const params = new URLSearchParams(window.location.search); 41 if (params.has('show')) { 42 addEventListener('load', show); 43 } 44 </script> 45 </head> 46 <body> 47 <dialog id="dialog"> 48 </dialog> 49 </body> 50 </html>