paint-order.html (1543B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="match" href="paint-order-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <style> 9 10 #scope { 11 position: relative; width: 200px; height: 100px; 12 background: white; contain: strict; 13 view-transition-name: none; 14 } 15 #part { 16 position: absolute; top: 10px; left: 10px; 17 width: 50px; height: 50px; background: #8cf; 18 z-index: 1; view-transition-name: foo; 19 } 20 #higher-nonpart { 21 position: absolute; top: 20px; left: 30px; 22 z-index: 2; width: 50px; height: 50px; background: #f88; 23 } 24 #lower-nonpart { 25 position: absolute; top: 40px; left: 20px; 26 z-index: -1; width: 50px; height: 50px; background: #a4f; 27 } 28 ::view-transition { background: rgba(0, 0, 0, 0.1); } 29 ::view-transition-group(*) { animation-play-state: paused; } 30 ::view-transition-new(*) { 31 animation: unset; opacity: 1; 32 transform: translateX(40px) translateY(20px); 33 } 34 ::view-transition-old(*) { animation: unset; opacity: 0; } 35 36 </style> 37 </head> 38 <body> 39 <div id=scope> 40 <div id=part></div> 41 <div id=higher-nonpart></div> 42 <div id=lower-nonpart></div> 43 </div> 44 <script> 45 46 const scope = document.querySelector("#scope"); 47 failIfNot(scope.startViewTransition, "Missing element.startViewTransition"); 48 49 async function runTest() { 50 await waitForCompositorReady(); 51 scope.startViewTransition(() => requestAnimationFrame(takeScreenshot)); 52 } 53 onload = () => runTest(); 54 55 </script> 56 </body> 57 </html>