view-timeline-get-set-range.html (5059B)
1 <!DOCTYPE html> 2 <html id="top"> 3 <meta charset="utf-8"> 4 <title>View timeline delay</title> 5 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface"> 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="/scroll-animations/scroll-timelines/testcommon.js"></script> 10 <script src="/scroll-animations/view-timelines/testcommon.js"></script> 11 <script src="/css/css-typed-om/resources/testhelper.js"></script> 12 <style> 13 #container { 14 border: 10px solid lightgray; 15 overflow-x: scroll; 16 height: 200px; 17 width: 200px; 18 } 19 #content { 20 display: flex; 21 flex-flow: row nowrap; 22 justify-content: flex-start; 23 width: 1800px; 24 margin: 0; 25 } 26 .spacer { 27 width: 800px; 28 display: inline-block; 29 } 30 #target { 31 background-color: green; 32 height: 100px; 33 width: 100px; 34 display: inline-block; 35 font-size: 10px; 36 } 37 </style> 38 <body> 39 <div id="container"> 40 <div id="content"> 41 <div class="spacer"></div> 42 <div id="target"></div> 43 <div class="spacer"></div> 44 </div> 45 </div> 46 </body> 47 <script type="text/javascript"> 48 function assert_timeline_offset(actual, expected, errorMessage) { 49 assert_equals(actual.rangeName, expected.rangeName, errorMessage); 50 assert_style_value_equals(actual.offset, expected.offset); 51 } 52 53 promise_test(async t => { 54 const timeline = new ViewTimeline({ subject: target, axis: 'inline' }); 55 const anim = target.animate({ opacity: [0, 1 ] }, { timeline: timeline }); 56 t.add_cleanup(() => { 57 anim.cancel(); 58 }); 59 await anim.ready; 60 61 await runAndWaitForFrameUpdate(() => { 62 container.scrollLeft = 750; 63 }); 64 65 // normal ==> cover 0% to cover 100% 66 // cover 0% @ 600px 67 // cover 100% @ 900px 68 // expected opacity = (750 - 600) / (900 - 600) = 0.5 69 assert_equals(anim.rangeStart, 'normal', 'Initial value for rangeStart'); 70 assert_equals(anim.rangeEnd, 'normal', 'Initial value for rangeEnd'); 71 assert_equals(getComputedStyle(target).opacity, '0.5', 72 'Opacity with range set to [normal, normal]'); 73 74 // contain 0% @ 700px 75 // cover 100% @ 900px 76 // expected opacity = (750 - 700) / (900 - 700) = 0.25 77 await runAndWaitForFrameUpdate(() => { 78 anim.rangeStart = "contain 0%"; 79 anim.rangeEnd = "cover 100%"; 80 }); 81 82 assert_timeline_offset( 83 anim.rangeStart, 84 { rangeName: 'contain', offset: CSS.percent(0) }, 85 'rangeStart set to contain 0%'); 86 assert_timeline_offset( 87 anim.rangeEnd, 88 { rangeName: 'cover', offset: CSS.percent(100) }, 89 'rangeEnd set to cover 100%'); 90 assert_equals(getComputedStyle(target).opacity, '0.25', 91 'opacity with range set to [contain 0%, cover 100%]'); 92 93 // entry -20px @ 580px 94 // exit-crossing 10% @ 810px 95 // expected opacity = (750 - 580) / (810 - 580) = 0.739130 96 await runAndWaitForFrameUpdate(() => { 97 anim.rangeStart = { rangeName: 'entry', offset: CSS.px(-20), }; 98 anim.rangeEnd = { rangeName: 'exit-crossing', offset: CSS.percent(10) }; 99 }); 100 assert_timeline_offset( 101 anim.rangeStart, 102 { rangeName: 'entry', offset: CSS.px(-20) }, 103 'rangeStart set to entry -20px'); 104 assert_timeline_offset( 105 anim.rangeEnd, 106 { rangeName: 'exit-crossing', offset: CSS.percent(10) }, 107 'rangeEnd set to exit-crossing 10%'); 108 assert_approx_equals( 109 parseFloat(getComputedStyle(target).opacity), 0.739130, 1e-6, 110 'opacity with range set to [entry -20px, exit-crossing 10%]'); 111 112 // normal [start] @ 600px 113 // contain 100% @ 800px 114 // expected opacity = (750 - 600) / (800 - 600) = 0.75 115 await runAndWaitForFrameUpdate(() => { 116 anim.rangeStart = "normal"; 117 anim.rangeEnd = "contain calc(60% + 40%)"; 118 }); 119 assert_equals(anim.rangeStart, 'normal','rangeStart set to normal'); 120 assert_timeline_offset( 121 anim.rangeEnd, 122 { rangeName: 'contain', offset: CSS.percent(100) }, 123 'rangeEnd set to contain 100%'); 124 assert_equals(getComputedStyle(target).opacity, '0.75', 125 'opacity with range set to [normal, contain 100%]'); 126 127 // scroll 10% @ 160px 128 // scroll 90% @ 1440px 129 // expected opacity = (750 - 160) / (1440 - 160) = 0.4609375 130 await runAndWaitForFrameUpdate(() => { 131 anim.rangeStart = "scroll 10%"; 132 anim.rangeEnd = "scroll 90%"; 133 }); 134 assert_timeline_offset( 135 anim.rangeStart, 136 { rangeName: 'scroll', offset: CSS.percent(10) }, 137 'rangeStart set to scroll 10%'); 138 assert_timeline_offset( 139 anim.rangeEnd, 140 { rangeName: 'scroll', offset: CSS.percent(90) }, 141 'rangeEnd set to scroll 90%'); 142 assert_approx_equals( 143 parseFloat(getComputedStyle(target).opacity), 0.4609375, 1e-6, 144 'opacity with range set to [scroll 10%, scroll 90%]'); 145 }, 'Getting and setting the animation range'); 146 </script> 147 </html>