content-with-transparent-background.html (1600B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: element with transparent background</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <link rel="match" href="content-with-transparent-background-ref.html"> 7 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 .target { 11 width: 100px; 12 height: 100px; 13 view-transition-name: target; 14 position: fixed; 15 top: 25px; 16 left: 25px; 17 background: rgba(0,0,0,0); 18 } 19 20 .embedded { 21 width: 25%; 22 height: 50%; 23 position: absolute; 24 top: 0px; 25 will-change: opacity; 26 } 27 28 #one{ 29 left: 25%; 30 background: lightblue; 31 } 32 #two { 33 left: 50%; 34 background: lightgreen; 35 } 36 37 .hidden { 38 width: 10px; 39 height: 10px; 40 background: grey; 41 view-transition-name: hidden; 42 } 43 44 html::view-transition-group(hidden) { animation-duration: 300s; } 45 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; } 46 47 html::view-transition-group(target) { animation: unset; } 48 html::view-transition-old(target) { animation: unset; opacity: 1; } 49 html::view-transition-new(target) { animation: unset; opacity: 0; } 50 51 </style> 52 <div class="target"> 53 <div class="embedded" id="one"></div> 54 <div class="embedded" id="two"></div> 55 </div> 56 <div id=hidden class=hidden></div> 57 58 <script> 59 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 60 61 async function runTest() { 62 document.startViewTransition().ready.then(requestAnimationFrame(takeScreenshot)); 63 } 64 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 65 </script>