48 lines
1.2 KiB
HTML
48 lines
1.2 KiB
HTML
<html>
|
|
<title>The scroll() timeline source in quirks mode with a scrollable <body> in quirks mode</title>
|
|
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation">
|
|
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
|
|
<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>
|