named-element-with-fix-pos-child-old.html (1168B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: element with fixed position descendant</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="named-element-with-fix-pos-child-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 .target { 10 width: 100px; 11 height: 100px; 12 background: blue; 13 view-transition-name: target; 14 } 15 .child { 16 width: 100px; 17 height: 100px; 18 position: fixed; 19 top: 150px; 20 left: 150px; 21 background: grey; 22 } 23 24 html::view-transition-group(target) { animation-duration: 300s; } 25 html::view-transition-new(target) { animation: unset; opacity: 0; } 26 html::view-transition-old(target) { 27 animation: unset; 28 opacity: 1; 29 } 30 </style> 31 32 <div class=target> 33 <div class=child></div> 34 </div> 35 36 <script> 37 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 38 39 async function runTest() { 40 document.startViewTransition(() => 41 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))); 42 } 43 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 44 </script>