mask-image.html (1081B)
1 <!DOCTYPE html> 2 <html class="test-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>Scoped VT with mask-image</title> 7 </head> 8 <style> 9 .block { 10 background-color: red; 11 contain: strict; 12 position: relative; 13 z-index: 0; 14 width: 150px; 15 height: 100px; 16 border: 5px solid black; 17 } 18 .scope1 { 19 view-transition-name: scope1; 20 } 21 .scope2 { 22 view-transition-name: scope2; 23 } 24 .mask { 25 mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); 26 } 27 </style> 28 <body> 29 <div id="target1" class="block scope1 mask"></div> 30 <div id="target2" class="block scope2"></div> 31 </body> 32 <script> 33 async function runTest() { 34 const vt1 = target1.startViewTransition(() => { 35 target1.classList.remove('mask'); 36 }); 37 const vt2 = target2.startViewTransition(() => { 38 target2.classList.add('mask'); 39 }); 40 await Promise.all([vt1.finished, vt2.finished]); 41 document.documentElement.classList.remove('test-wait'); 42 } 43 44 window.onload = runTest(); 45 </script> 46 </html>