timeline-offset-keyframes-hidden-subject.html (4279B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range"> 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 <script src="/web-animations/resources/keyframe-utils.js"></script> 11 <title>Animation range and delay</title> 12 </head> 13 <style type="text/css"> 14 @keyframes anim { 15 cover 0% { 16 margin-left: 0px; 17 } 18 50% { 19 opacity: 0.5; 20 } 21 cover 100% { 22 margin-right: 0px; 23 } 24 } 25 26 #scroller { 27 border: 10px solid lightgray; 28 overflow-y: scroll; 29 overflow-x: hidden; 30 width: 300px; 31 height: 200px; 32 timeline-scope: --t1; 33 } 34 #block { 35 margin-top: 800px; 36 margin-left: 10px; 37 margin-right: 10px; 38 width: 100px; 39 height: 50px; 40 background-color: blue; 41 view-timeline: --t1; 42 } 43 #target { 44 margin-bottom: 800px; 45 margin-left: 10px; 46 margin-right: 10px; 47 width: 100px; 48 height: 100px; 49 z-index: -1; 50 background-color: green; 51 animation: anim auto both linear; 52 animation-range-start: contain 0%; 53 animation-range-end: contain 100%; 54 animation-timeline: --t1; 55 } 56 </style> 57 <body> 58 <div id="scroller"> 59 <div id="block"></div> 60 <div id="target"></div> 61 </div> 62 </body> 63 <script type="text/javascript"> 64 async function runTest() { 65 promise_test(async t => { 66 await waitForNextFrame(); 67 const anims = document.getAnimations(); 68 assert_equals(anims.length, 1, 69 "Should have one animation attached to the view-timeline"); 70 const anim = anims[0]; 71 await anim.ready; 72 await waitForNextFrame(); 73 74 let frames = anim.effect.getKeyframes(); 75 let expected_resolved_offsets = [ 76 { offset: 0, computedOffset: 0, easing: "linear", composite: "replace", 77 marginRight: "10px", opacity: "1" }, 78 { offset: 1/2, computedOffset: 1/2, easing: "linear", 79 composite: "auto", opacity: "0.5" }, 80 { offset: 1, computedOffset: 1, easing: "linear", composite: "replace", 81 marginLeft: "10px", opacity: "1" }, 82 { offset: { rangeName: "cover", offset: CSS.percent(0) }, 83 computedOffset: -1/3, easing: "linear", 84 composite: "auto", marginLeft: "0px" }, 85 { offset: { rangeName: "cover", offset: CSS.percent(100) }, 86 computedOffset: 4/3, easing: "linear", composite: "auto", 87 marginRight: "0px" }, 88 ]; 89 assert_frame_lists_equal(frames, expected_resolved_offsets, 90 'Initial keyframes with active view-timeline'); 91 92 block.style.display = 'none'; 93 // View-timeline becomes inactive. Keyframes with timeline offsets must be 94 // ignored. 95 frames = anim.effect.getKeyframes(); 96 let expected_unresolved_offsets = [ 97 { offset: 0, computedOffset: 0, marginRight: "10px", opacity: "1", easing: "linear", 98 composite: "replace" }, 99 { offset: 0.5, computedOffset: 0.5, opacity: "0.5", easing: "linear", 100 composite: "auto", }, 101 { offset: 1, computedOffset: 1, marginLeft: "10px", opacity: "1", easing: "linear", 102 composite: "replace" }, 103 { offset: { rangeName: 'cover', offset: CSS.percent(0) }, 104 computedOffset: null, easing: "linear", 105 composite: "auto", marginLeft: "0px" }, 106 { offset: { rangeName: 'cover', offset: CSS.percent(100) }, 107 computedOffset: null, easing: "linear", composite: "auto", 108 marginRight: "0px" } 109 ]; 110 assert_frame_lists_equal(frames, expected_unresolved_offsets, 111 'Keyframes with invalid view timeline'); 112 113 block.style.display = 'block'; 114 // Timeline remains inactive until next frame. 115 await waitForNextFrame(); 116 117 // Ensure that keyframes with timeline-offsets are restored. 118 frames = anim.effect.getKeyframes(); 119 120 assert_frame_lists_equal(frames, expected_resolved_offsets, 121 'Keyframes with restored view timeline'); 122 }, 'Keyframes with timeline-offsets ignored when timeline is inactive'); 123 } 124 125 window.onload = runTest; 126 </script>