Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 7 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /web-animations/interfaces/TimelineTrigger/constructor.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset=utf-8>
<title>TimelineTrigger constructor</title>
<link rel="help"
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<script>
test(t => {
const trigger = new TimelineTrigger();
assert_equals(trigger.ranges.length, 0);
}, "Empty ranges when no list is supplied.");
test(t => {
const trigger = new TimelineTrigger([]);
assert_equals(trigger.ranges.length, 0);
}, "Empty ranges when empty list is supplied.");
test(t => {
const trigger = new TimelineTrigger([{}]);
assert_equals(trigger.ranges[0].timeline, document.timeline,
"default timeline is document.timeline.");
assert_equals(trigger.ranges[0].rangeStart, "normal", "default rangeStart is normal");
assert_equals(trigger.ranges[0].rangeEnd, "normal", "default rangeEnd is normal");
assert_equals(trigger.ranges[0].exitRangeStart, "auto",
"default exitRangeStart is normal");
assert_equals(trigger.ranges[0].exitRangeEnd, "auto",
"default exitRangeEnd is normal");
}, "Default values when an empty property bag is supplied.");
test(t => {
const scroll_timeline = new ScrollTimeline();
const trigger = new TimelineTrigger([{
timeline: scroll_timeline,
rangeStart: "contain 10%",
rangeEnd: "contain 90%",
exitRangeStart: "cover 10%",
exitRangeEnd: "cover 90%"
}]);
assert_equals(trigger.ranges[0].timeline, scroll_timeline,
"timeline is supplied scroll timeline.");
assert_equals(trigger.ranges[0].rangeStart, "contain 10%",
"rangeStart is supplied value");
assert_equals(trigger.ranges[0].rangeEnd, "contain 90%",
"rangeEnd is supplied value");
assert_equals(trigger.ranges[0].exitRangeStart, "cover 10%",
"exitRangeStart is supplied value");
assert_equals(trigger.ranges[0].exitRangeEnd, "cover 90%",
"exitRangeEnd is supplied value");
}, "All values supplied (scroll timeline).");
test(t => {
const view_timeline = new ViewTimeline();
const trigger = new TimelineTrigger([{
timeline: view_timeline,
rangeStart: "contain 10%",
rangeEnd: "contain 90%",
exitRangeStart: "cover 10%",
exitRangeEnd: "cover 90%"
}]);
assert_equals(trigger.ranges[0].timeline, view_timeline,
"timeline is supplied scroll timeline.");
assert_equals(trigger.ranges[0].rangeStart, "contain 10%",
"rangeStart is supplied value");
assert_equals(trigger.ranges[0].rangeEnd, "contain 90%",
"rangeEnd is supplied value");
assert_equals(trigger.ranges[0].exitRangeStart, "cover 10%",
"exitRangeStart is supplied value");
assert_equals(trigger.ranges[0].exitRangeEnd, "cover 90%",
"exitRangeEnd is supplied value");
}, "All values supplied (view timeline).");
test(t => {
assert_throws_js(TypeError, () => {
const trigger = new TimelineTrigger([{}, {}]);
});
}, "Multiple (empty) timelines not supported");
test(t => {
const view_timeline = new ViewTimeline();
const range = {
timeline: view_timeline,
rangeStart: "contain 10%",
rangeEnd: "contain 90%",
exitRangeStart: "cover 10%",
exitRangeEnd: "cover 90%"
};
assert_throws_js(TypeError, () => {
const trigger = new TimelineTrigger([range, range]);
});
}, "Multiple timelines not supported");
</script>