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-quirks-mode.html - WPT Dashboard Interop Dashboard
<html>
<title>The scroll() timeline source in quirks mode with a scrollable <body> in quirks mode</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, document.body);
}, `CSS animation correctly uses the <body> element as the source for the ${data.keyword} scroll() timeline in quirks mode`);
};
timelineSourceTest({ index: 0, keyword: "self" });
timelineSourceTest({ index: 1, keyword: "nearest" });
timelineSourceTest({ index: 1, keyword: "root" });
</script>
</body>