clipper-non-containing-block.html (1134B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <meta name="title" content="Test that a clipper clips the view transition"> 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="clipper-non-containing-block-ref.html"> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="/web-animations/testcommon.js"></script> 10 <style> 11 .clipper { 12 overflow: clip; 13 width: 100px; 14 height: 100px; 15 } 16 #target { 17 width: 200px; 18 height: 300px; 19 background: blue; 20 } 21 ::view-transition-group(*) { 22 animation-play-state: paused; 23 } 24 ::view-transition-old(*) { 25 animation: unset; 26 opacity: 1; 27 } 28 ::view-transition-new(*) { 29 animation: unset; 30 opacity: 0; 31 } 32 #target.after { 33 background: red; 34 } 35 </style> 36 37 <div class=clipper> 38 <div id=target></div> 39 </div> 40 41 <script> 42 failIfNot(target.startViewTransition, "Missing element.startViewTransition"); 43 44 function runTest() { 45 target.startViewTransition(() => { 46 target.classList.add("after"); 47 }).ready.then(takeScreenshot); 48 } 49 50 waitForCompositorReady().then(runTest); 51 </script>