content-visibility-animation-with-scroll-timeline-in-auto-subtree.html (2603B)
1 <!DOCTYPE html> 2 <meta charset=utf8> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <title>Test getComputedStyle on a CSS animation with scroll timeline in a content visibility subtree using content-visibility: auto</title> 5 <link rel="help" href="https://drafts.csswg.org/css-contain-2/"> 6 <script src="/web-animations/testcommon.js"></script> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 #container { 11 content-visibility: auto; 12 } 13 14 #scrollContainer { 15 height: 100vh; 16 overflow-y: scroll; 17 scroll-timeline-name: --targetTimeline; 18 } 19 #innerspacer { 20 height: 300vh; 21 } 22 @keyframes fade { 23 from { opacity: 1; } 24 to { opacity: 0; } 25 } 26 #target { 27 background: green; 28 height: 100px; 29 width: 100px; 30 } 31 .animate { 32 animation-name: fade; 33 animation-duration: 1ms; 34 animation-direction: alternate; 35 animation-timeline: --targetTimeline; 36 } 37 38 </style> 39 <body> 40 <div id="log"></div> 41 <div id="spacer"></div> 42 <div id="scrollContainer"> 43 <div id="container"></div> 44 <div id="innerspacer"></div> 45 </div> 46 47 </body> 48 <script> 49 "use strict"; 50 51 function createAnimatingElement(test, name) { 52 const container = document.getElementById('container'); 53 const target = document.createElement('div'); 54 container.appendChild(target); 55 target.id = 'target'; 56 target.className = name; 57 return target; 58 } 59 60 promise_test(async t => { 61 const container = document.getElementById('container'); 62 const target = createAnimatingElement(t, 'animate'); 63 scrollContainer.scrollTop = 10000; 64 const animation = target.getAnimations()[0]; 65 await animation.ready; 66 await waitForAnimationFrames(1); 67 let expectedOpacity = parseFloat(getComputedStyle(target).opacity); 68 assert_approx_equals(expectedOpacity, 0, 0.1, 'scrollContainer scrolls to bottom, so the opacity should be 0'); 69 document.getElementById('spacer').style.height = '300vh'; 70 await waitForAnimationFrames(1); 71 assert_equals(parseFloat(getComputedStyle(target).opacity), expectedOpacity, 'Opacity does not change when it is hidden by c-v'); 72 73 scrollContainer.scrollTop = 0; 74 assert_equals(parseFloat(getComputedStyle(target).opacity), expectedOpacity, 'The animation is hidden by c-v, so opacity does not change even if scrollTop changes'); 75 76 await waitForAnimationFrames(2); 77 78 document.getElementById('spacer').style.height = '0vh'; 79 await waitForAnimationFrames(2); 80 assert_equals(getComputedStyle(target).opacity, '1', 'Now that the animation is visible, opacity should be updated'); 81 }, 'Animation with scroll-timeline should be affected c-v'); 82 83 </script>