content-with-child-with-transparent-background.html (1794B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: element with child 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-child-with-transparent-background-ref.html"> 7 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 .shared { 11 width: 50px; 12 height: 50px; 13 background: grey; 14 position: fixed; 15 top: 25px; 16 left: 25px; 17 view-transition-name: shared; 18 } 19 .target { 20 width: 100px; 21 height: 100px; 22 background: rgba(0,0,0,0); 23 will-change: opacity; 24 position: relative; 25 top: 50px; 26 left: 50px; 27 } 28 29 .embedded { 30 width: 25%; 31 height: 50%; 32 position: absolute; 33 top: 0px; 34 will-change: opacity; 35 } 36 37 #one{ 38 left: 25%; 39 background: lightblue; 40 } 41 #two { 42 left: 50%; 43 background: lightgreen; 44 } 45 46 .hidden { 47 width: 10px; 48 height: 10px; 49 background: grey; 50 view-transition-name: hidden; 51 } 52 53 html::view-transition-group(hidden) { animation-duration: 300s; } 54 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; } 55 56 html::view-transition-group(shared) { animation: unset; } 57 html::view-transition-old(shared) { animation: unset; opacity: 1; } 58 html::view-transition-new(shared) { animation: unset; opacity: 0; } 59 60 </style> 61 <div class="shared"> 62 <div class="target"> 63 <div class="embedded" id="one"></div> 64 <div class="embedded" id="two"></div> 65 </div> 66 </div> 67 <div id=hidden class=hidden></div> 68 69 <script> 70 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 71 72 async function runTest() { 73 document.startViewTransition().ready.then(requestAnimationFrame(takeScreenshot)); 74 } 75 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 76 </script>