content-with-inline-child.html (1703B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: element with inline child</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="stylesheet" href="/fonts/ahem.css"> 6 <link rel="author" href="mailto:bokan@chromium.org"> 7 <link rel="match" href="content-with-inline-child-ref.html"> 8 <meta name="flags" content="ahem"> 9 10 <script src="/common/reftest-wait.js"></script> 11 <style> 12 13 #target { 14 width: 100px; 15 height: 100px; 16 overflow-clip-margin: 500px; 17 contain: paint; 18 view-transition-name: target; 19 background-color: grey; 20 } 21 22 #child { 23 position: relative; 24 left: 100px; 25 top: 100px; 26 color: lightgreen; 27 background-color: darkgreen; 28 } 29 30 #innerchild { 31 position: relative; 32 left: 100px; 33 } 34 35 html::view-transition-new(root) { 36 opacity: 0; 37 } 38 html::view-transition-old(root) { 39 opacity: 0; 40 } 41 42 html::view-transition-old(target) { 43 animation-duration: 3s; 44 animation-timing-function: steps(1, end); 45 opacity: 1; 46 } 47 html::view-transition-new(target) { animation: unset; opacity: 0; } 48 49 </style> 50 51 <div id="target" style="font: 25px/1 Ahem"> 52 <span id="child">INLINE<br><span id="innerchild">BOX</span></span> 53 </div> 54 55 <script> 56 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 57 58 async function runTest() { 59 document.startViewTransition(() => { 60 // Remove the target to ensure the ref is compared against the snapshot. 61 document.getElementById("target").remove(); 62 63 requestAnimationFrame( 64 () => requestAnimationFrame( 65 () => requestAnimationFrame( 66 () => requestAnimationFrame(takeScreenshot)))); 67 }); 68 } 69 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 70 </script>