Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /scroll-animations/css/animation-timeline-scroll-functional-notation.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>The animation-timeline: scroll() notation</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes anim {
from { translate: 50px; }
to { translate: 150px; }
}
html {
min-height: 100vh;
/* This makes the max scrollable ragne be 100px in root element */
padding-bottom: 100px;
}
#container {
width: 300px;
height: 300px;
overflow: scroll;
}
#target {
width: 100px;
/* This makes the max scrollable ragne be 100px in the block direction */
height: 100px;
}
/* large block content */
.block-content {
block-size: 100%;
}
/* large inline content */
.inline-content {
inline-size: 100%;
block-size: 5px;
/* This makes the max scrollable ragne be 100px in the inline direction */
padding-inline-end: 100px;
}
</style>
<body>
<div id="log"></div>
<script>
"use strict";
setup(assert_implements_animation_timeline);
const root = document.scrollingElement;
const createTargetWithStuff = function(t, contentClass) {
let container = document.createElement('div');
container.id = 'container';
let target = document.createElement('div');
target.id = 'target';
let content = document.createElement('div');
content.className = contentClass;
// <div id='container'>
// <div id='target'></div>
// <div class=contentClass></div>
// </div>
document.body.appendChild(container);
container.appendChild(target);
container.appendChild(content);
if (t && typeof t.add_cleanup === 'function') {
t.add_cleanup(() => {
content.remove();
target.remove();
container.remove();
});
}
return [container, target];
};
async function scrollLeft(element, value) {
element.scrollLeft = value;
await waitForNextFrame();
}
async function scrollTop(element, value) {
element.scrollTop = value;
await waitForNextFrame();
}
promise_test(async t => {
let [container, div] = createTargetWithStuff(t, 'block-content');
await runAndWaitForFrameUpdate(() => {
div.style.animation = "anim 10s linear";
div.style.animationTimeline = "scroll(nearest)";
});
await scrollTop(root, 50);
assert_equals(getComputedStyle(div).translate, '50px');
await scrollTop(container, 50);
assert_equals(getComputedStyle(div).translate, '100px');
await scrollTop(root, 0);
}, 'animation-timeline: scroll(nearest)');
promise_test(async t => {
let [container, div] = createTargetWithStuff(t, 'block-content');
await runAndWaitForFrameUpdate(() => {
div.style.animation = "anim 10s linear";
div.style.animationTimeline = "scroll(root)";
});
await scrollTop(container, 50);
assert_equals(getComputedStyle(div).translate, '50px');
await scrollTop(root, 50);
assert_equals(getComputedStyle(div).translate, '100px');
await scrollTop(root, 0);
}, 'animation-timeline: scroll(root)');
promise_test(async t => {
let [container, div] = createTargetWithStuff(t, 'block-content');
await runAndWaitForFrameUpdate(() => {
container.style.animation = "anim 10s linear";
container.style.animationTimeline = "scroll(self)";
});
await scrollTop(container, 50);
assert_equals(getComputedStyle(container).translate, '100px');
}, 'animation-timeline: scroll(self)');
promise_test(async t => {
let [container, div] = createTargetWithStuff(t, 'block-content');
await runAndWaitForFrameUpdate(() => {
div.style.animation = "anim 10s linear";
div.style.animationTimeline = "scroll(self)";
});
await scrollTop(container, 50);
assert_equals(getComputedStyle(div).translate, 'none');
}, 'animation-timeline: scroll(self), on non-scroller');
promise_test(async t => {
let [container, div] = createTargetWithStuff(t, 'inline-content');
await runAndWaitForFrameUpdate(() => {
div.style.animation = "anim 10s linear";
div.style.animationTimeline = "scroll(inline)";
});
await scrollLeft(container, 50);
assert_equals(getComputedStyle(div).translate, '100px');
}, 'animation-timeline: scroll(inline)');
promise_test(async t => {
let [container, div] = createTargetWithStuff(t, 'block-content');
await runAndWaitForFrameUpdate(() => {
container.style.writingMode = 'vertical-lr';
div.style.animation = "anim 10s linear";
div.style.animationTimeline = "scroll(x)";
});
await scrollLeft(container, 50);
assert_equals(getComputedStyle(div).translate, '100px');
}, 'animation-timeline: scroll(x)');
promise_test(async t => {
let [container, div] = createTargetWithStuff(t, 'inline-content');
await runAndWaitForFrameUpdate(() => {
container.style.writingMode = 'vertical-lr';
div.style.animation = "anim 10s linear";
div.style.animationTimeline = "scroll(y)";
});
await scrollTop(container, 50);
assert_equals(getComputedStyle(div).translate, '100px');
}, 'animation-timeline: scroll(y)');
// TODO: Add more tests which change the overflow property of the container for
// scroll(nearest)
</script>
</body>