mirror of
https://github.com/servo/servo.git
synced 2025-10-15 07:50:20 +01:00
263 lines
9.2 KiB
HTML
263 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>The animation-timeline: view() notation</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
|
<link rel="help" src="https://w3c.github.io/csswg-drafts/scroll-animations-1/#view-notation">
|
|
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/7587">
|
|
<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 fade-in-out {
|
|
entry 0% { opacity: 0; }
|
|
entry 100% { opacity: 1; }
|
|
exit 0% { opacity: 1; }
|
|
exit 100% { opacity: 0; }
|
|
}
|
|
@keyframes fade-out {
|
|
exit 0% { opacity: 1; }
|
|
exit 100% { opacity: 0; }
|
|
}
|
|
@keyframes change-font-size {
|
|
exit 0% { font-size: 10px; }
|
|
exit 100% { font-size: 20px; }
|
|
}
|
|
#container {
|
|
width: 200px;
|
|
height: 200px;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
.target {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: red;
|
|
}
|
|
.content {
|
|
width: 400px;
|
|
height: 400px;
|
|
background-color: blue;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<script>
|
|
"use strict";
|
|
|
|
setup(assert_implements_animation_timeline);
|
|
|
|
const createTargetWithStuff = function(t, divClasses) {
|
|
let container = document.createElement('div');
|
|
container.id = 'container';
|
|
document.body.appendChild(container);
|
|
|
|
// *** When testing inset
|
|
// <div id='container'>
|
|
// <div class='content'></div>
|
|
// <div class='target'></div>
|
|
// <div class='content'></div>
|
|
// </div>
|
|
// *** When testing axis
|
|
// <div id='container'>
|
|
// <div class='target'></div>
|
|
// <div class='content'></div>
|
|
// </div>
|
|
|
|
let divs = [];
|
|
let target;
|
|
for(let className of divClasses) {
|
|
let div = document.createElement('div');
|
|
div.className = className;
|
|
container.appendChild(div);
|
|
|
|
divs.push(div);
|
|
if(className === 'target')
|
|
target = div;
|
|
}
|
|
|
|
if (t && typeof t.add_cleanup === 'function') {
|
|
t.add_cleanup(() => {
|
|
for(let div of divs)
|
|
div.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, ['content', 'target', 'content']);
|
|
div.style.animation = "fade-in-out 1s linear";
|
|
div.style.animationTimeline = "view()";
|
|
|
|
await scrollTop(container, 200);
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'At entry 0%');
|
|
await scrollTop(container, 250);
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At entry 50%');
|
|
await scrollTop(container, 300);
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'At entry 100%');
|
|
|
|
await scrollTop(container, 400);
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
|
|
await scrollTop(container, 450);
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
|
await scrollTop(container, 500);
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
|
}, 'animation-timeline: view()');
|
|
|
|
promise_test(async t => {
|
|
let [container, div] = createTargetWithStuff(t, ['content', 'target', 'content']);
|
|
div.style.animation = "fade-in-out 1s linear";
|
|
div.style.animationTimeline = "view(50px)";
|
|
|
|
await scrollTop(container, 250);
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'At entry 0%');
|
|
await scrollTop(container, 300);
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At entry 50%');
|
|
|
|
await scrollTop(container, 350);
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'At entry 100% & exit 0%');
|
|
|
|
await scrollTop(container, 400);
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
|
await scrollTop(container, 450);
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
|
}, 'animation-timeline: view(50px)');
|
|
|
|
promise_test(async t => {
|
|
let [container, div] = createTargetWithStuff(t, ['content', 'target', 'content']);
|
|
div.style.animation = "fade-in-out 1s linear";
|
|
div.style.animationTimeline = "view(auto 50px)";
|
|
|
|
await scrollTop(container, 250);
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'At entry 0%');
|
|
await scrollTop(container, 300);
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At entry 50%');
|
|
await scrollTop(container, 350);
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'At entry 100%');
|
|
|
|
await scrollTop(container, 400);
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
|
|
await scrollTop(container, 450);
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
|
await scrollTop(container, 500);
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
|
}, 'animation-timeline: view(auto 50px)');
|
|
|
|
promise_test(async t => {
|
|
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
|
container.style.overflow = 'scroll';
|
|
div.style.animation = "fade-out 1s linear";
|
|
div.style.animationTimeline = "view(inline)";
|
|
|
|
await scrollLeft(container, 0);
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
|
|
await scrollLeft(container, 50);
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
|
await scrollLeft(container, 100);
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
|
}, 'animation-timeline: view(inline)');
|
|
|
|
promise_test(async t => {
|
|
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
|
container.style.overflow = 'scroll';
|
|
div.style.animation = "fade-out 1s linear";
|
|
div.style.animationTimeline = "view(horizontal)";
|
|
|
|
await scrollLeft(container, 0);
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
|
|
await scrollLeft(container, 50);
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
|
await scrollLeft(container, 100);
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
|
}, 'animation-timeline: view(horizontal)');
|
|
|
|
promise_test(async t => {
|
|
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
|
container.style.overflow = 'scroll';
|
|
div.style.animation = "fade-out 1s linear";
|
|
div.style.animationTimeline = "view(vertical)";
|
|
|
|
await scrollTop(container, 0);
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
|
|
await scrollTop(container, 50);
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
|
await scrollTop(container, 100);
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
|
}, 'animation-timeline: view(vertical)');
|
|
|
|
promise_test(async t => {
|
|
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
|
container.style.overflowY = 'hidden';
|
|
container.style.overflowX = 'scroll';
|
|
div.style.animation = "fade-out 1s linear";
|
|
div.style.animationTimeline = "view(horizontal 50px)";
|
|
|
|
await scrollLeft(container, 0);
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
|
await scrollLeft(container, 50);
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
|
}, 'animation-timeline: view(horizontal 50px)');
|
|
|
|
promise_test(async t => {
|
|
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
|
container.style.overflow = 'scroll';
|
|
div.style.animation = "fade-out 1s linear, change-font-size 1s linear";
|
|
div.style.animationTimeline = "view(), view(inline)";
|
|
|
|
await scrollLeft(container, 0);
|
|
assert_equals(getComputedStyle(div).fontSize, '10px', 'At exit 0% inline');
|
|
await scrollLeft(container, 50);
|
|
assert_equals(getComputedStyle(div).fontSize, '15px', 'At exit 50% inline');
|
|
await scrollLeft(container, 100);
|
|
assert_equals(getComputedStyle(div).fontSize, '20px', 'At exit 100% inline');
|
|
|
|
await scrollLeft(container, 0);
|
|
|
|
await scrollTop(container, 0);
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0% block');
|
|
await scrollTop(container, 50);
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50% block');
|
|
await scrollTop(container, 100);
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100% block');
|
|
|
|
await scrollLeft(container, 50);
|
|
await scrollTop(container, 50);
|
|
assert_equals(getComputedStyle(div).fontSize, '15px', 'At exit 50% inline');
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50% block');
|
|
}, 'animation-timeline: view(), view(inline)');
|
|
|
|
promise_test(async t => {
|
|
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
|
container.style.overflowY = 'hidden';
|
|
container.style.overflowX = 'scroll';
|
|
div.style.animation = "fade-out 1s linear";
|
|
|
|
div.style.animationTimeline = "view(inline)";
|
|
await scrollLeft(container, 0);
|
|
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
|
|
await scrollLeft(container, 50);
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
|
await scrollLeft(container, 100);
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
|
|
|
div.style.animationTimeline = "view(inline 50px)";
|
|
await scrollLeft(container, 0);
|
|
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
|
await scrollLeft(container, 50);
|
|
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
|
}, 'animation-timeline: view(inline) changes to view(inline 50px)');
|
|
|
|
</script>
|
|
</body>
|