constructor.html (3080B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>TimelineTrigger constructor</title> 4 <link rel="help" 5 href="https://drafts.csswg.org/web-animations-2/#the-animationtrigger-interface"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../../testcommon.js"></script> 9 <body> 10 <script> 11 12 test(t => { 13 const trigger = new TimelineTrigger(); 14 assert_equals(trigger.timeline, document.timeline, 15 "default timeline is document.timeline."); 16 assert_equals(trigger.rangeStart, "normal", "default rangeStart is normal"); 17 assert_equals(trigger.rangeEnd, "normal", "default rangeEnd is normal"); 18 assert_equals(trigger.exitRangeStart, "auto", 19 "default exitRangeStart is normal"); 20 assert_equals(trigger.exitRangeStart, "auto", 21 "default exitRangeEnd is normal"); 22 }, "Default values when no property bag is supplied"); 23 24 test(t => { 25 const trigger = new TimelineTrigger({}); 26 assert_equals(trigger.timeline, document.timeline, 27 "default timeline is document.timeline."); 28 assert_equals(trigger.rangeStart, "normal", "default rangeStart is normal"); 29 assert_equals(trigger.rangeEnd, "normal", "default rangeEnd is normal"); 30 assert_equals(trigger.exitRangeStart, "auto", 31 "default exitRangeStart is normal"); 32 assert_equals(trigger.exitRangeEnd, "auto", 33 "default exitRangeEnd is normal"); 34 }, "Default values when an empty property bag is supplied."); 35 36 test(t => { 37 const scroll_timeline = new ScrollTimeline(); 38 const trigger = new TimelineTrigger({ 39 timeline: scroll_timeline, 40 rangeStart: "contain 10%", 41 rangeEnd: "contain 90%", 42 exitRangeStart: "cover 10%", 43 exitRangeEnd: "cover 90%" 44 }); 45 assert_equals(trigger.timeline, scroll_timeline, 46 "timeline is supplied scroll timeline."); 47 assert_equals(trigger.rangeStart, "contain 10%", 48 "rangeStart is supplied value"); 49 assert_equals(trigger.rangeEnd, "contain 90%", 50 "rangeEnd is supplied value"); 51 assert_equals(trigger.exitRangeStart, "cover 10%", 52 "exitRangeStart is supplied value"); 53 assert_equals(trigger.exitRangeEnd, "cover 90%", 54 "exitRangeEnd is supplied value"); 55 }, "All values supplied (scroll timeline)."); 56 57 test(t => { 58 const view_timeline = new ViewTimeline(); 59 const trigger = new TimelineTrigger({ 60 timeline: view_timeline, 61 rangeStart: "contain 10%", 62 rangeEnd: "contain 90%", 63 exitRangeStart: "cover 10%", 64 exitRangeEnd: "cover 90%" 65 }); 66 assert_equals(trigger.timeline, view_timeline, 67 "timeline is supplied scroll timeline."); 68 assert_equals(trigger.rangeStart, "contain 10%", 69 "rangeStart is supplied value"); 70 assert_equals(trigger.rangeEnd, "contain 90%", 71 "rangeEnd is supplied value"); 72 assert_equals(trigger.exitRangeStart, "cover 10%", 73 "exitRangeStart is supplied value"); 74 assert_equals(trigger.exitRangeEnd, "cover 90%", 75 "exitRangeEnd is supplied value"); 76 }, "All values supplied (view timeline)."); 77 </script>