mirror of
https://github.com/servo/servo.git
synced 2025-06-25 17:44:33 +01:00
166 lines
4.9 KiB
HTML
166 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<title>The animation-timeline: scroll() notation</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
|
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-notation">
|
|
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/6674">
|
|
<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');
|
|
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');
|
|
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');
|
|
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');
|
|
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');
|
|
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');
|
|
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');
|
|
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>
|