Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 3 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /scroll-animations/css/scroll-timeline-anonymous-source.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<title>The scroll() timeline source</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes move {
to { margin-left: 100px }
}
.animated {
animation: move 1s linear;
}
#default {
animation-timeline: scroll();
}
#root {
animation-timeline: scroll(root);
}
#nearest {
animation-timeline: scroll(nearest);
}
</style>
<div class="animated" id="default"></div>
<div class="animated" id="root"></div>
<div class="animated" id="nearest"></div>
<script>
"use strict";
const timelineSourceTest = type => {
test(() => {
const target = document.getElementById(type);
const animations = target.getAnimations();
assert_equals(animations.length, 1);
assert_equals(animations[0].timeline.source, document.documentElement);
}, `CSS animation correctly uses the <html> element as the source for the ${type} scroll() timeline`);
};
timelineSourceTest("default");
timelineSourceTest("root");
timelineSourceTest("nearest");
</script>