138 lines
4.7 KiB
HTML
138 lines
4.7 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<title>CSS Animations and Web Animations on view transition pseudos</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-animations-1/">
|
|
<link rel="help" href="https://drafts.csswg.org/web-animations-1/#dom-animatable-animate">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="../css-animations/support/testcommon.js"></script>
|
|
<style>
|
|
/* Override UA stylesheet to avoid any impact on our tests */
|
|
:root {
|
|
view-transition-name: none;
|
|
}
|
|
:root::view-transition,
|
|
:root::view-transition-group(*),
|
|
:root::view-transition-image-pair(*),
|
|
:root::view-transition-old(*),
|
|
:root::view-transition-new(*) {
|
|
animation: unset;
|
|
}
|
|
|
|
@keyframes css-anim {
|
|
from { margin-left: 100px; }
|
|
to { margin-left: 100px; }
|
|
}
|
|
</style>
|
|
<div id="log"></div>
|
|
<script>
|
|
"use strict";
|
|
|
|
promise_test(async t => {
|
|
document.documentElement.style.viewTransitionName = "test";
|
|
const ruleText =
|
|
":root::view-transition, :root::view-transition-group(test) {" +
|
|
" animation: css-anim 10s;"
|
|
"}";
|
|
const index = document.styleSheets[0].cssRules.length;
|
|
document.styleSheets[0].insertRule(ruleText, index);
|
|
|
|
let viewTransition = document.startViewTransition(() => {});
|
|
await viewTransition.ready;
|
|
|
|
let anims = document.documentElement.getAnimations({ subtree: true });
|
|
assert_equals(anims.length, 2, "Has 2 CSS Animations.");
|
|
let style = getComputedStyle(document.documentElement,
|
|
"::view-transition-group(test)");
|
|
assert_equals(style.marginLeft, "100px");
|
|
|
|
viewTransition.skipTransition();
|
|
document.styleSheets[0].deleteRule(index);
|
|
document.documentElement.style.viewTransitionName = "none";
|
|
}, "The specified CSS Animations work on view transition pseudos.");
|
|
|
|
promise_test(async t => {
|
|
document.documentElement.style.viewTransitionName = "test";
|
|
const ruleText =
|
|
":root::view-transition, :root::view-transition-group(test) {" +
|
|
"animation: css-anim 10s;"
|
|
"}";
|
|
const index = document.styleSheets[0].cssRules.length;
|
|
document.styleSheets[0].insertRule(ruleText, index);
|
|
|
|
let viewTransition = document.startViewTransition(() => {});
|
|
await viewTransition.ready;
|
|
|
|
let anim1 = document.documentElement.animate(
|
|
{ opacity: [0.5, 0.5] },
|
|
{ duration: 10000, pseudoElement: '::view-transition-group(test)' }
|
|
);
|
|
await anim1.ready;
|
|
|
|
let kf = new KeyframeEffect(
|
|
document.documentElement,
|
|
{ translate: ["200px", "200px"] },
|
|
{ duration: 10000, pseudoElement: '::view-transition-old(test)' }
|
|
);
|
|
let anim2 = new Animation(kf, document.timeline);
|
|
anim2.play();
|
|
await anim2.ready;
|
|
|
|
let anims = document.documentElement.getAnimations({ subtree: true });
|
|
assert_equals(anims.length, 4,
|
|
"Has 2 CSS Animations and 2 script animations.");
|
|
|
|
let style = getComputedStyle(document.documentElement,
|
|
"::view-transition-group(test)");
|
|
assert_equals(style.marginLeft, "100px");
|
|
assert_equals(style.opacity, "0.5");
|
|
assert_equals(
|
|
getComputedStyle(document.documentElement,
|
|
"::view-transition-old(test)").translate,
|
|
"200px"
|
|
);
|
|
|
|
anim1.finish();
|
|
anim2.finish();
|
|
viewTransition.skipTransition();
|
|
document.styleSheets[0].deleteRule(index);
|
|
document.documentElement.style.viewTransitionName = "none";
|
|
}, "The specified CSS Animations and script animations work on view "+
|
|
"transition pseudos");
|
|
|
|
promise_test(async t => {
|
|
document.documentElement.style.viewTransitionName = "test";
|
|
let ruleText =
|
|
":root::view-transition, " +
|
|
":root::view-transition-group(test), " +
|
|
":root::view-transition-image-pair(test) {" +
|
|
" animation: css-anim 10s;"
|
|
"}";
|
|
const index = document.styleSheets[0].cssRules.length;
|
|
document.styleSheets[0].insertRule(ruleText, index);
|
|
|
|
let viewTransition = document.startViewTransition(() => {});
|
|
await viewTransition.ready;
|
|
|
|
let anims = document.documentElement.getAnimations({ subtree: true });
|
|
assert_equals(anims.length, 3, "Has 3 CSS Animations.");
|
|
|
|
// Make the pseudo-element display:none.
|
|
ruleText = ":root::view-transition-image-pair(test) { display: none; }";
|
|
document.styleSheets[0].insertRule(ruleText, index + 1);
|
|
anims = document.documentElement.getAnimations({ subtree: true });
|
|
assert_equals(anims.length, 2, "One CSS Animation was removed.");
|
|
|
|
// Destroy all frames.
|
|
document.documentElement.style.display = "none";
|
|
anims = document.documentElement.getAnimations({ subtree: true });
|
|
assert_equals(anims.length, 0, "All CSS Animation were removed.");
|
|
|
|
viewTransition.skipTransition();
|
|
document.styleSheets[0].deleteRule(index + 1);
|
|
document.styleSheets[0].deleteRule(index);
|
|
document.documentElement.style.viewTransitionName = "none";
|
|
document.documentElement.style.display = "inline";
|
|
}, "The specified CSS Animations are removed if setting display:none.");
|
|
|
|
</script>
|