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