51 lines
1.2 KiB
HTML
51 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<title>The scroll() timeline source</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 }
|
|
}
|
|
|
|
.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>
|