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-scrollable-body.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<title>The scroll() timeline source in quirks mode with a scrollable <body></title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes move {
to { margin-left: 100px }
}
html {
height: 100px;
padding: 20px;
}
body {
height: 110vh;
overflow: auto;
animation: 1s move linear, 1s move linear, 1s move linear;
animation-timeline: scroll(self), scroll(nearest), scroll(root);
}
body::after {
content: "";
display: block;
height: 110%;
}
</style>
<body>
<script>
"use strict";
const timelineSourceTest = data => {
test(() => {
assert_equals(document.body.getAnimations()[data.index].timeline.source, data.expectedSource);
}, `CSS animation correctly uses the <${data.expectedSource.localName}> element as the source for the ${data.keyword} scroll() timeline`);
};
timelineSourceTest({ index: 0, keyword: "self", expectedSource: document.body });
timelineSourceTest({ index: 1, keyword: "nearest", expectedSource: document.documentElement });
timelineSourceTest({ index: 1, keyword: "root", expectedSource: document.documentElement });
</script>
</body>