view-timeline-used-values.html (3019B)
1 <!DOCTYPE html> 2 <title>Used values of view-timeline properties</title> 3 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis"> 4 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-name"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="support/testcommon.js"></script> 9 <style> 10 @keyframes anim { 11 from { z-index: 0; } 12 to { z-index: 100; } 13 } 14 .scroller { 15 overflow: hidden; 16 width: 100px; 17 height: 100px; 18 } 19 .scroller > div { 20 width: 300px; 21 height: 300px; 22 z-index: -1; 23 } 24 </style> 25 <main id=main></main> 26 <script> 27 setup(assert_implements_animation_timeline); 28 29 function inflate(t, template) { 30 t.add_cleanup(() => main.replaceChildren()); 31 main.append(template.content.cloneNode(true)); 32 } 33 async function scrollTop(e, value) { 34 e.scrollTop = value; 35 await waitForNextFrame(); 36 } 37 async function scrollLeft(e, value) { 38 e.scrollLeft = value; 39 await waitForNextFrame(); 40 } 41 </script> 42 43 <template id=omitted_axis> 44 <style> 45 #target { 46 view-timeline-name: --t1, --t2; /* Two items */ 47 view-timeline-axis: inline; /* One item */ 48 animation: anim 1s linear; 49 animation-timeline: --t2; 50 } 51 </style> 52 <div id=scroller class=scroller> 53 <div id=target></div> 54 </div> 55 </template> 56 <script> 57 promise_test(async (t) => { 58 inflate(t, omitted_axis); 59 assert_equals(getComputedStyle(target).zIndex, '-1'); 60 61 // enter 0% is at scrollTop/Left = -100 62 // exit 100% is at scrollTop/Left = 300 63 // This means that at scrollTop/Left=0, the animation is at 25%. 64 65 await scrollTop(scroller, 0); 66 await scrollLeft(scroller, 0); 67 assert_equals(getComputedStyle(target).zIndex, '25'); 68 69 // The timeline should be inline-axis: 70 await scrollTop(scroller, 100); // 50% 71 await scrollLeft(scroller, 40); // 35% 72 assert_equals(getComputedStyle(target).zIndex, '35'); 73 }, 'Use the last value from view-timeline-axis if omitted'); 74 </script> 75 76 <template id=omitted_inset> 77 <style> 78 #target { 79 view-timeline-name: --t1, --t2; /* Two items */ 80 view-timeline-inset: 100px; /* One item */ 81 animation: anim 1s linear; 82 animation-timeline: --t2; 83 } 84 </style> 85 <div id=scroller class=scroller> 86 <div id=target></div> 87 </div> 88 </template> 89 <script> 90 promise_test(async (t) => { 91 inflate(t, omitted_inset); 92 assert_equals(getComputedStyle(target).zIndex, '-1'); 93 94 // 0% is normally at at scrollTop = -100 95 // 100% is normally at scrollTop/Left = 300 96 // However, we have a 100px inset in both ends, which makes the 97 // range [0, 200]. 98 99 await scrollTop(scroller, 0); 100 assert_equals(getComputedStyle(target).zIndex, '0'); 101 await scrollTop(scroller, 100); // 50% 102 assert_equals(getComputedStyle(target).zIndex, '50'); 103 }, 'Use the last value from view-timeline-inset if omitted'); 104 </script>