box-decoration-painting.html (1365B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <meta name="title" content="Scoped VT: border and box shadow root painting"> 5 <meta name="author" content="mailto:vmpstr@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 7 <link rel="match" href="box-decoration-painting-ref.html"> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="/web-animations/testcommon.js"></script> 10 <style> 11 #target { 12 position: relative; 13 top: 30px; 14 left: 30px; 15 16 width: 200px; 17 height: 300px; 18 19 background: blue; 20 border-width: 5px 10px 15px 20px; 21 border-style: solid; 22 border-color: yellow; 23 24 box-shadow: 10px 5px 0px 20px black; 25 } 26 27 /* This is needed since we inherit from the scope and make the scope 28 not visible in the VT callback 29 */ 30 ::view-transition { visibility: visible; } 31 32 ::view-transition-group(*) { 33 animation-play-state: paused; 34 } 35 ::view-transition-old(*) { 36 animation: unset; 37 opacity: 1; 38 } 39 ::view-transition-new(*) { 40 animation: unset; 41 opacity: 0; 42 } 43 #target.after { 44 visibility: hidden; 45 } 46 </style> 47 48 <div id=target></div> 49 50 <script> 51 failIfNot(target.startViewTransition, "Missing element.startViewTransition"); 52 53 function runTest() { 54 target.startViewTransition(() => { 55 target.classList.add("after"); 56 }).ready.then(takeScreenshot); 57 } 58 59 waitForCompositorReady().then(runTest); 60 </script>