ink-overflow-on-target.html (1195B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 4 <link rel="match" href="ink-overflow-on-target-ref.html"> 5 <head> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width"> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 body { margin: 20px; } 11 #target { 12 width: 200px; 13 height: 100px; 14 border: 20px solid #acf; 15 outline: 10px solid #4ca; 16 padding: 20px; 17 font: 18pt monospace; 18 contain: layout; 19 } 20 ::view-transition-group(*) { 21 animation-duration: 2s; 22 } 23 </style> 24 </head> 25 <body> 26 <div id=target>Hello</div> 27 </body> 28 29 <script> 30 function createTriggeredPromise() { 31 let trigger; 32 const promise = new Promise(resolve => { 33 trigger = resolve; 34 }); 35 promise.notify = trigger; 36 return promise; 37 } 38 39 window.onload = async () => { 40 const callback_promise = createTriggeredPromise(); 41 target.startViewTransition(async () => { 42 target.innerText = "World"; 43 callback_promise.notify(); 44 await new Promise(resolve => {}); 45 }); 46 await callback_promise; 47 takeScreenshot(); 48 }; 49 </script> 50 </html>