зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1854758 [wpt PR 42124] - Add more content-visibility animation tests, a=testonly
Automatic update from web-platform-tests Add more content-visibility animation tests (#42124) From https://bugs.webkit.org/show_bug.cgi?id=223930: - a test for the generic behaviour of content-visibility: auto and animations. - a reftest testing animations are restarted once a hidden content-visibility: auto subtree is scrolled to. - a reftest testing animations are restarted once a hidden content-visibility: auto subtree becomes visible. -- wpt-commits: 998a2102647e79e073c33494ff9903e0dc4c0b5e wpt-pr: 42124
This commit is contained in:
Rob Buis
moz-wptsync-bot
Родитель
9d6817fd42
Коммит
41964bed5c
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Test that scrolling to a content-visibility: auto subtree restarts animations in it</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/">
|
||||
|
||||
<style>
|
||||
#target {
|
||||
position: relative;
|
||||
background: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
left: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>Test that scrolling to a content-visibility: auto subtree restarts animations in it</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/">
|
||||
<link rel="match" href="content-visibility-animation-and-scroll-ref.html">
|
||||
<meta name="assert" content="animations in content-visibility: auto subtree should restart when scrolled to">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="../resources/utils.js"></script>
|
||||
|
||||
<style>
|
||||
#container {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 100px 100px;
|
||||
}
|
||||
@keyframes unfade {
|
||||
from { opacity: 0; transform: none; }
|
||||
to { opacity: 1; transform: translate(100px); }
|
||||
}
|
||||
#target {
|
||||
background: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.animate {
|
||||
animation: unfade 1s linear 1 alternate;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
#spacer {
|
||||
height: 300vh;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="spacer"></div>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function createAnimatingElement(name) {
|
||||
const container = document.getElementById('container');
|
||||
const target = document.createElement('div');
|
||||
container.appendChild(target);
|
||||
target.id = 'target';
|
||||
target.className = name;
|
||||
return target;
|
||||
}
|
||||
|
||||
function runTest() {
|
||||
const container = document.getElementById('container');
|
||||
const target = createAnimatingElement('animate');
|
||||
container.scrollIntoView(true /* alignToTop */);
|
||||
const listener = (e) => {
|
||||
spacer.style.height = "0px";
|
||||
takeScreenshot();
|
||||
};
|
||||
|
||||
target.addEventListener("animationend", listener);
|
||||
}
|
||||
window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Test that making a content-visibility: hidden subtree visible restarts animations in it</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/">
|
||||
|
||||
<style>
|
||||
#target {
|
||||
position: relative;
|
||||
background: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
left: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="target"</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>Test that making a content-visibility: hidden subtree visible restarts animations in it</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/">
|
||||
<link rel="match" href="content-visibility-animation-becomes-visible-ref.html">
|
||||
<meta name="assert" content="animations in content-visibility: hidden subtree should restart once visible">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="../resources/utils.js"></script>
|
||||
|
||||
<style>
|
||||
#container {
|
||||
content-visibility: hidden;
|
||||
}
|
||||
@keyframes fade {
|
||||
from { opacity: 0; transform: none; }
|
||||
to { opacity: 1; transform: translate(100px); }
|
||||
}
|
||||
#target {
|
||||
background: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.animate {
|
||||
animation: fade 1s linear 1 alternate;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function createAnimatingElement(name) {
|
||||
const container = document.getElementById('container');
|
||||
const target = document.createElement('div');
|
||||
container.appendChild(target);
|
||||
target.id = 'target';
|
||||
target.className = name;
|
||||
return target;
|
||||
}
|
||||
|
||||
function runTest() {
|
||||
const container = document.getElementById('container');
|
||||
const target = createAnimatingElement('animate');
|
||||
container.style.contentVisibility = "visible";
|
||||
const listener = (e) => {
|
||||
takeScreenshot();
|
||||
};
|
||||
|
||||
target.addEventListener("animationend", listener);
|
||||
}
|
||||
window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf8>
|
||||
<title>Test getComputedStyle on a CSS animation in a content visibility subtree using content-visibility: auto</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/">
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
content-visibility: auto;
|
||||
}
|
||||
@keyframes fade {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
#target {
|
||||
background: 'green';
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.animate {
|
||||
animation: fade 1s linear 2 alternate;
|
||||
}
|
||||
.transition {
|
||||
transition: opacity 1s linear;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="spacer"></div>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
function reset() {
|
||||
const container = document.getElementById('container');
|
||||
const target = document.getElementById('target');
|
||||
container.style = '';
|
||||
container.removeChild(target);
|
||||
}
|
||||
|
||||
function createAnimatingElement(test, name) {
|
||||
const container = document.getElementById('container');
|
||||
const target = document.createElement('div');
|
||||
container.appendChild(target);
|
||||
target.id = 'target';
|
||||
target.className = name;
|
||||
test.add_cleanup(() => {
|
||||
reset();
|
||||
});
|
||||
return target;
|
||||
}
|
||||
|
||||
promise_test(async t => {
|
||||
const container = document.getElementById('container');
|
||||
const target = createAnimatingElement(t, 'animate');
|
||||
let animationIterationEvent = false;
|
||||
const animation = target.getAnimations()[0];
|
||||
await animation.ready;
|
||||
await waitForAnimationFrames(1);
|
||||
document.getElementById("spacer").style.height = "300vh";
|
||||
await waitForAnimationFrames(1);
|
||||
target.addEventListener('animationiteration', () => {
|
||||
animationIterationEvent = true;
|
||||
});
|
||||
animation.currentTime = 1500;
|
||||
assert_approx_equals(
|
||||
parseFloat(getComputedStyle(target).opacity), 0.5, 1e-6,
|
||||
'Computed style is updated even when the animation is running in a ' +
|
||||
'content visibility subtree');
|
||||
await waitForAnimationFrames(2);
|
||||
assert_false(animationIterationEvent,
|
||||
'Animation events do not fire while the animation is ' +
|
||||
'running in a content visibility subtree');
|
||||
document.getElementById("spacer").style.height = "0vh";
|
||||
await waitForAnimationFrames(2);
|
||||
assert_true(animationIterationEvent,
|
||||
'The animationiteration event fires once the animation is ' +
|
||||
'no longer content visibility');
|
||||
}, 'Animation events do not fire for a CSS animation running in a content ' +
|
||||
'visibility subtree');
|
||||
|
||||
promise_test(async t => {
|
||||
const container = document.getElementById('container');
|
||||
const target = createAnimatingElement(t, 'animate');
|
||||
const animation = target.getAnimations()[0];
|
||||
await animation.ready;
|
||||
let finishedWhileDisplayLocked = false;
|
||||
animation.finished.then(() => {
|
||||
finishedWhileDisplayLocked =
|
||||
getComputedStyle(target).height == '0px';
|
||||
});
|
||||
await waitForAnimationFrames(1);
|
||||
document.getElementById("spacer").style.height = "300vh";
|
||||
// Advance to just shy of the effect end.
|
||||
animation.currentTime = 1999;
|
||||
assert_approx_equals(
|
||||
parseFloat(getComputedStyle(target).opacity), 0.999, 1e-6,
|
||||
'Computed style is updated even when the animation is ' +
|
||||
'running in a content visibility subtree');
|
||||
// Advancing frames should not resolve the finished promise.
|
||||
await waitForAnimationFrames(3);
|
||||
document.getElementById("spacer").style.height = "0vh";
|
||||
// Now we can resolve the finished promise.
|
||||
await animation.finished;
|
||||
assert_equals(finishedWhileDisplayLocked, false);
|
||||
}, 'The finished promise does not resolve due to the normal passage of time ' +
|
||||
'for a CSS animation in a content visibility subtree');
|
||||
|
||||
promise_test(async t => {
|
||||
const container = document.getElementById('container');
|
||||
await waitForAnimationFrames(1);
|
||||
const target = createAnimatingElement(t, 'transition');
|
||||
await waitForAnimationFrames(1);
|
||||
target.style.opacity = 0;
|
||||
const animation = target.getAnimations()[0];
|
||||
await animation.ready;
|
||||
let finishedWhileDisplayLocked = false;
|
||||
animation.finished.then(() => {
|
||||
finishedWhileDisplayLocked =
|
||||
getComputedStyle(target).height == '0px';
|
||||
});
|
||||
await waitForAnimationFrames(1);
|
||||
document.getElementById("spacer").style.height = "300vh";
|
||||
// Advance to just shy of the effect end.
|
||||
animation.currentTime = 999;
|
||||
assert_approx_equals(
|
||||
parseFloat(getComputedStyle(target).opacity), 0.001, 1e-6,
|
||||
'Computed style is updated even when the animation is ' +
|
||||
'running in a content visibility subtree');
|
||||
// Advancing frames should not resolve the finished promise.
|
||||
await waitForAnimationFrames(3);
|
||||
document.getElementById("spacer").style.height = "0vh";
|
||||
// Now we can resolve the finished promise.
|
||||
await animation.finished;
|
||||
assert_equals(finishedWhileDisplayLocked, false);
|
||||
}, 'The finished promise does not resolve due to the normal passage of time ' +
|
||||
'for a CSS transition in a content visibility subtree');
|
||||
|
||||
promise_test(async t => {
|
||||
const container = document.getElementById('container');
|
||||
const target = createAnimatingElement(t, 'animate');
|
||||
const animation = target.getAnimations()[0];
|
||||
target.className = '';
|
||||
document.getElementById("spacer").style.height = "300vh";
|
||||
assert_equals(target.getAnimations().length, 0);
|
||||
|
||||
// Though originally a CSS animation, it is no longer associated with
|
||||
// CSS rules and no longer has an owning element. It now behaves like a
|
||||
// programmatic web animation. Animation playback events (but not CSS
|
||||
// animation events) should be dispatched and promises resolved despite
|
||||
// being in a content visibility subtree.
|
||||
|
||||
let cssAnimationEndEvent = false;
|
||||
target.addEventListener('animationend', () => {
|
||||
cssAnimationEndEvent = true;
|
||||
});
|
||||
|
||||
let animationFinishEvent = false;
|
||||
animation.addEventListener('finish', () => {
|
||||
animationFinishEvent = true;
|
||||
});
|
||||
|
||||
let animationFinished = false;
|
||||
animation.finished.then(() => {
|
||||
animationFinished = true;
|
||||
});
|
||||
|
||||
animation.play();
|
||||
assert_equals(target.getAnimations().length, 1);
|
||||
|
||||
animation.currentTime = 1999;
|
||||
await animation.ready;
|
||||
await waitForAnimationFrames(2);
|
||||
|
||||
assert_true(animationFinishEvent,
|
||||
'Animation event not blocked on content visibility subtree if ' +
|
||||
'no owning element');
|
||||
assert_true(animationFinished,
|
||||
'Finished promise not blocked on content visibility subtree if ' +
|
||||
'no owning element');
|
||||
assert_false(cssAnimationEndEvent,
|
||||
'CSS animation events should not be dispatched if there is no ' +
|
||||
'owning element');
|
||||
}, 'Events and promises are handled normally for animations without an ' +
|
||||
'owning element');
|
||||
|
||||
</script>
|
||||
Загрузка…
Ссылка в новой задаче