Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 9 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].activationRangeStart, "normal", "default rangeStart is normal");
assert_equals(trigger.ranges[0].activationRangeEnd, "normal", "default rangeEnd is normal");
assert_equals(trigger.ranges[0].activeRangeStart, "auto",
"default exitRangeStart is normal");
assert_equals(trigger.ranges[0].activeRangeEnd, "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,
activationRangeStart: "contain 10%",
activationRangeEnd: "contain 90%",
activeRangeStart: "cover 10%",
activeRangeEnd: "cover 90%"
}]);
assert_equals(trigger.ranges[0].timeline, scroll_timeline,
"timeline is supplied scroll timeline.");
assert_equals(trigger.ranges[0].activationRangeStart, "contain 10%",
"rangeStart is supplied value");
assert_equals(trigger.ranges[0].activationRangeEnd, "contain 90%",
"rangeEnd is supplied value");
assert_equals(trigger.ranges[0].activeRangeStart, "cover 10%",
"exitRangeStart is supplied value");
assert_equals(trigger.ranges[0].activeRangeEnd, "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,
activationRangeStart: "contain 10%",
activationRangeEnd: "contain 90%",
activeRangeStart: "cover 10%",
activeRangeEnd: "cover 90%"
}]);
assert_equals(trigger.ranges[0].timeline, view_timeline,
"timeline is supplied scroll timeline.");
assert_equals(trigger.ranges[0].activationRangeStart, "contain 10%",
"activationRangeStart is supplied value");
assert_equals(trigger.ranges[0].activationRangeEnd, "contain 90%",
"activationRangeEnd is supplied value");
assert_equals(trigger.ranges[0].activeRangeStart, "cover 10%",
"activeRangeStart is supplied value");
assert_equals(trigger.ranges[0].activeRangeEnd, "cover 90%",
"activeRangeEnd is supplied value");
}, "All values supplied (view timeline).");
test(t => {
const view_timeline = new ViewTimeline();
const trigger = new TimelineTrigger([{
timeline: view_timeline,
activationRangeStart: "contain 10%",
activationRangeEnd: "contain 90%",
}]);
assert_equals(trigger.ranges[0].timeline, view_timeline,
"timeline is supplied scroll timeline.");
assert_equals(trigger.ranges[0].activationRangeStart, "contain 10%",
"activationRangeStart is supplied value");
assert_equals(trigger.ranges[0].activationRangeEnd, "contain 90%",
"activationRangeEnd is supplied value");
assert_equals(trigger.ranges[0].activeRangeStart, "contain 10%",
"activeRangeStart is copied from activationRangeStart");
assert_equals(trigger.ranges[0].activeRangeEnd, "contain 90%",
"activeRangeEnd is is copied from activationRangeEnd");
}, "Entry range supplied; active copied from entry");
test(t => {
const view_timeline = new ViewTimeline();
const trigger = new TimelineTrigger([{
timeline: view_timeline,
activeRangeStart: "contain 10%",
activeRangeEnd: "contain 90%",
}]);
assert_equals(trigger.ranges[0].timeline, view_timeline,
"timeline is supplied scroll timeline.");
assert_equals(trigger.ranges[0].activationRangeStart, "contain 10%",
"rangeStart is supplied value");
assert_equals(trigger.ranges[0].activationRangeEnd, "contain 90%",
"rangeEnd is supplied value");
assert_equals(trigger.ranges[0].activeRangeStart, "contain 10%",
"exitRangeStart is supplied value");
assert_equals(trigger.ranges[0].activeRangeEnd, "contain 90%",
"exitRangeEnd is supplied value");
}, "Active range supplied; entry copied from active");
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,
activationRangeStart: "contain 10%",
activationRangeEnd: "contain 90%",
activeRangeStart: "cover 10%",
activeRangeEnd: "cover 90%"
};
assert_throws_js(TypeError, () => {
const trigger = new TimelineTrigger([range, range]);
});
}, "Multiple timelines not supported");
</script>