box-decoration-painting-ref.html (803B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="title" content="Scoped VT: border and box shadow root painting (ref)"> 4 <meta name="author" content="mailto:vmpstr@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 6 7 <style> 8 #target { 9 position: relative; 10 top: 30px; 11 left: 30px; 12 13 width: 200px; 14 height: 300px; 15 16 background: blue; 17 border-width: 5px 10px 15px 20px; 18 border-style: solid; 19 border-color: yellow; 20 21 box-shadow: 10px 5px 0px 20px black; 22 } 23 </style> 24 25 <div id=target></div> 26 27 <script> 28 failIfNot(target.startViewTransition, "Missing element.startViewTransition"); 29 30 function runTest() { 31 target.startViewTransition(() => { 32 target.classList.add("after"); 33 }).ready.then(takeScreenshot); 34 } 35 36 waitForCompositorReady().then(runTest); 37 </script>