timeline-range-name-offset-in-keyframes.tentative.html (3478B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>Timeline offset in Animation Keyframes</title> 5 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#named-range-keyframes"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/web-animations/testcommon.js"></script> 9 <script src="support/testcommon.js"></script> 10 <style> 11 @keyframes fade-in-out-animation { 12 entry 0%, exit 100% { opacity: 0 } 13 entry 100%, exit 0% { opacity: 1 } 14 } 15 16 #subject { 17 background-color: rgba(0, 0, 255); 18 height: 200px; 19 width: 200px; 20 view-timeline-name: --foo; 21 animation: linear 1s both fade-in-out-animation; 22 animation-timeline: --foo; 23 } 24 25 #container { 26 border: 5px solid black; 27 height: 400px; 28 width: 400px; 29 overflow-y: scroll; 30 resize: both; 31 } 32 33 .spacer { 34 height: 600px; 35 width: 100%; 36 } 37 </style> 38 <body onload="runTests()"> 39 <div id="container"> 40 <div class="spacer"></div> 41 <div id="subject"></div> 42 <div class="spacer"></div> 43 </div> 44 </body> 45 46 <script type="text/javascript"> 47 setup(assert_implements_animation_timeline); 48 49 function runTests() { 50 promise_test(async t => { 51 await waitForNextFrame(); 52 53 // scrollTop=200 to 400 is the entry range 54 container.scrollTop = 200; 55 await waitForNextFrame(); 56 assert_equals(getComputedStyle(subject).opacity, '0', 57 'Effect at entry 0%'); 58 59 container.scrollTop = 300; 60 await waitForNextFrame(); 61 assert_equals(getComputedStyle(subject).opacity, '0.5', 62 'Effect at entry 50%'); 63 64 container.scrollTop = 400; 65 await waitForNextFrame(); 66 assert_equals(getComputedStyle(subject).opacity, '1', 67 'Effect at entry 100%'); 68 69 // scrollTop=600-800 is the exit range 70 container.scrollTop = 600; 71 await waitForNextFrame(); 72 assert_equals(getComputedStyle(subject).opacity, '1', 73 'Effect at exit 0%'); 74 75 container.scrollTop = 700; 76 await waitForNextFrame(); 77 assert_equals(getComputedStyle(subject).opacity, '0.5', 78 'Effect at exit 50%'); 79 80 container.scrollTop = 800; 81 await waitForNextFrame(); 82 assert_equals(getComputedStyle(subject).opacity, '0', 83 'Effect at exit 100%'); 84 85 // First change scrollTop so that you are at entry 100%, then resize the 86 // container in a way that scrollTop is the same, but now the animation is 87 // at entry 50% and check opacity. After changing the height of container, 88 // scrollTop=300-500 is the entry range 89 container.scrollTop = 400; 90 await waitForNextFrame(); 91 assert_equals(getComputedStyle(subject).opacity, '1', 92 'Effect at entry 100%'); 93 94 // Reducing the viewport by 100px, shifts the keyframe offsets. 95 // The entry range shifts from [200px, 400px] to [300px, 500px]. 96 container.style.height = '300px'; 97 98 await waitForNextFrame(); 99 assert_equals(getComputedStyle(subject).opacity, '0.5', 100 'Effect at entry 50% (post resize)'); 101 102 // After changing the height of container, scrollTop=600-800 is still the 103 // exit range 104 container.scrollTop = 700; 105 await waitForNextFrame(); 106 assert_equals(getComputedStyle(subject).opacity, '0.5', 107 'Effect at exit 50% (post resize)'); 108 }); 109 } 110 </script> 111 </html>