view-timeline-animation-range-update.tentative.html (2473B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <title>Change animation-range after creation</title> 6 <link rel="help" src="https://www.w3.org/TR/scroll-animations-1/#named-range-animation-declaration"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/web-animations/testcommon.js"></script> 10 <script src="support/testcommon.js"></script> 11 <style> 12 @keyframes anim { 13 from { z-index: 0; background-color: skyblue;} 14 to { z-index: 100; background-color: coral; } 15 } 16 #scroller { 17 border: 10px solid lightgray; 18 overflow-y: scroll; 19 width: 200px; 20 height: 200px; 21 } 22 /* Reset specificity to allow animation-range-* from .restrict-range to win. */ 23 :where(#target) { 24 margin: 800px 0px; 25 width: 100px; 26 height: 100px; 27 z-index: -1; 28 background-color: green; 29 animation: anim auto both linear; 30 animation-timeline: --t1; 31 view-timeline: --t1 block; 32 } 33 .restrict-range { 34 animation-range-start: contain 0%; 35 animation-range-end: contain 100%; 36 } 37 </style> 38 <body> 39 <div id=scroller> 40 <div id=target></div> 41 </div> 42 </body> 43 <script type="text/javascript"> 44 setup(assert_implements_animation_timeline); 45 46 async function scrollTop(e, value) { 47 e.scrollTop = value; 48 await waitForNextFrame(); 49 } 50 async function waitForAnimationReady(target) { 51 await waitForNextFrame(); 52 await Promise.all(target.getAnimations().map(x => x.promise)); 53 } 54 async function assertValueAt(scroller, target, position, expected) { 55 await waitForAnimationReady(target); 56 await scrollTop(scroller, position); 57 assert_equals(getComputedStyle(target).zIndex, expected.toString()); 58 } 59 60 promise_test(async t => { 61 const scroller = document.getElementById('scroller'); 62 const target = document.getElementById('target'); 63 waitForAnimationReady(target); 64 65 await assertValueAt(scroller, target, 600, 0); 66 await assertValueAt(scroller, target, 700, 33); 67 await assertValueAt(scroller, target, 750, 50); 68 await assertValueAt(scroller, target, 800, 67); 69 70 target.classList.toggle('restrict-range'); 71 await waitForNextFrame(); 72 73 await assertValueAt(scroller, target, 700, 0); 74 await assertValueAt(scroller, target, 750, 50); 75 await assertValueAt(scroller, target, 800, 100); 76 }, 'Ensure that animation is updated on a style change'); 77 </script> 78 </html>