summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-view-transitions
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:13:33 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:13:33 +0000
commit086c044dc34dfc0f74fbe41f4ecb402b2cd34884 (patch)
treea4f824bd33cb075dd5aa3eb5a0a94af221bbe83a /testing/web-platform/tests/css/css-view-transitions
parentAdding debian version 124.0.1-1. (diff)
downloadfirefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.tar.xz
firefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.zip
Merging upstream version 125.0.1.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-view-transitions')
-rw-r--r--testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element-ref.html29
-rw-r--r--testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element.html63
-rw-r--r--testing/web-platform/tests/css/css-view-transitions/only-child-group.html14
-rw-r--r--testing/web-platform/tests/css/css-view-transitions/only-child-image-pair.html5
-rw-r--r--testing/web-platform/tests/css/css-view-transitions/only-child-new.html20
-rw-r--r--testing/web-platform/tests/css/css-view-transitions/only-child-no-transition.html12
-rw-r--r--testing/web-platform/tests/css/css-view-transitions/only-child-old.html19
-rw-r--r--testing/web-platform/tests/css/css-view-transitions/pseudo-element-animations.html36
-rw-r--r--testing/web-platform/tests/css/css-view-transitions/pseudo-get-computed-style.html94
-rw-r--r--testing/web-platform/tests/css/css-view-transitions/web-animations-api-parse-pseudo-argument.html63
10 files changed, 265 insertions, 90 deletions
diff --git a/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element-ref.html b/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element-ref.html
new file mode 100644
index 0000000000..67d55eedf4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: clip-path larger than element bounds on child of a named element (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+body {
+ background: lightpink;
+}
+
+.target {
+ width: 100px;
+ height: 100px;
+ background: blue;
+}
+.child {
+ width: 10px;
+ height: 10px;
+ position: relative;
+ top: 100px;
+ left: 100px;
+ background: green;
+ clip-path: inset(-10px -100px -50px -20px);
+}
+</style>
+
+<div class="target">
+ <div class="child"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element.html b/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element.html
new file mode 100644
index 0000000000..4cde9cb586
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: clip-path larger than element bounds on child of a named element</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="clip-path-larger-than-border-box-on-child-of-named-element-ref.html">
+<meta name="fuzzy" content="clip-path-larger-than-border-box-on-child-of-named-element-ref.html:maxDifference=0-255;totalPixels=0-400">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+ width: 100px;
+ height: 100px;
+ background: blue;
+ view-transition-name: target;
+}
+.child {
+ width: 10px;
+ height: 10px;
+ position: relative;
+ top: 100px;
+ left: 100px;
+ background: green;
+ clip-path: inset(-10px -100px -50px -20px);
+}
+.hidden {
+ width: 10px;
+ height: 10px;
+ view-transition-name: hidden;
+}
+
+html::view-transition-old(target), html::view-transition-new(target) {
+ animation: unset;
+}
+html::view-transition-old(target) {
+ opacity: 0;
+}
+html::view-transition-new(target) {
+ opacity: 1;
+}
+
+html::view-transition-group(hidden) {
+ animation-duration: 300s;
+ visibility: hidden;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div class="target">
+ <div class="child"></div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+ document.startViewTransition(() =>
+ requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-group.html b/testing/web-platform/tests/css/css-view-transitions/only-child-group.html
index 05275a3448..551e881611 100644
--- a/testing/web-platform/tests/css/css-view-transitions/only-child-group.html
+++ b/testing/web-platform/tests/css/css-view-transitions/only-child-group.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html class="reftest-wait foo">
<title>View transitions: ensure :only-child is supported on view-transition-group</title>
-<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
@@ -54,8 +54,7 @@ promise_test(() => {
return new Promise(async (resolve, reject) => {
let transition = document.startViewTransition();
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-group(root)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-group(root)");
if (style.backgroundColor == "rgb(255, 0, 0)" && style.color == "rgb(255, 0, 0)")
resolve();
else
@@ -70,8 +69,7 @@ promise_test(() => {
target.style.viewTransitionName = "target";
let transition = document.startViewTransition();
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-group(root)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-group(root)");
if (style.backgroundColor == "rgb(0, 0, 255)" && style.color == "rgb(0, 0, 255)")
resolve();
else
@@ -87,8 +85,7 @@ promise_test(() => {
target.style.viewTransitionName = "target";
let transition = document.startViewTransition();
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-group(target)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-group(target)");
if (style.backgroundColor == "rgb(255, 0, 0)" && style.color == "rgb(255, 0, 0)")
resolve();
else
@@ -105,8 +102,7 @@ promise_test(() => {
target2.style.viewTransitionName = "target2";
let transition = document.startViewTransition();
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-group(target)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-group(target)");
if (style.backgroundColor == "rgb(0, 0, 255)" && style.color == "rgb(0, 0, 255)")
resolve();
else
diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-image-pair.html b/testing/web-platform/tests/css/css-view-transitions/only-child-image-pair.html
index 288d496346..d84b74f0ab 100644
--- a/testing/web-platform/tests/css/css-view-transitions/only-child-image-pair.html
+++ b/testing/web-platform/tests/css/css-view-transitions/only-child-image-pair.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html class="reftest-wait foo">
<title>View transitions: ensure :only-child is supported on view-transition-image-pair</title>
-<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
@@ -38,8 +38,7 @@ promise_test(() => {
return new Promise(async (resolve, reject) => {
let transition = document.startViewTransition();
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-image-pair(root)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-image-pair(root)");
if (style.backgroundColor == "rgb(255, 0, 0)" && style.color == "rgb(255, 0, 0)")
resolve();
else
diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-new.html b/testing/web-platform/tests/css/css-view-transitions/only-child-new.html
index 9f36528219..7bc8a447ce 100644
--- a/testing/web-platform/tests/css/css-view-transitions/only-child-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/only-child-new.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html class="reftest-wait foo">
<title>View transitions: ensure :only-child is supported on view-transition-new</title>
-<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
@@ -61,8 +61,7 @@ promise_test(() => {
});
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-new(root)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-new(root)");
if (style.backgroundColor == matchedColor && style.color == matchedColor)
resolve();
else
@@ -79,8 +78,7 @@ promise_test(() => {
let transition = document.startViewTransition();
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-new(root)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-new(root)");
if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
resolve();
else
@@ -100,8 +98,7 @@ promise_test(() => {
});
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-new(root)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-new(root)");
if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
resolve();
else
@@ -120,8 +117,7 @@ promise_test(() => {
});
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-new(target)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-new(target)");
if (style.backgroundColor == matchedColor && style.color == matchedColor)
resolve();
else
@@ -141,8 +137,7 @@ promise_test(() => {
});
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-new(root)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-new(root)");
if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
resolve();
else
@@ -159,8 +154,7 @@ promise_test(() => {
let transition = document.startViewTransition();
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-new(target)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-new(target)");
if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
resolve();
else
diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-no-transition.html b/testing/web-platform/tests/css/css-view-transitions/only-child-no-transition.html
index 7dc2bf1217..9152253dff 100644
--- a/testing/web-platform/tests/css/css-view-transitions/only-child-no-transition.html
+++ b/testing/web-platform/tests/css/css-view-transitions/only-child-no-transition.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: :only-child style queries without transition shouldn't crash</title>
-<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
@@ -21,11 +21,11 @@
promise_test(() => {
return new Promise(async (resolve, reject) => {
let elements = [
- "view-transition",
- "view-transition-group(foo)",
- "view-transition-image-pair(foo)",
- "view-transition-old(foo)",
- "view-transition-old(foo)"
+ "::view-transition",
+ "::view-transition-group(foo)",
+ "::view-transition-image-pair(foo)",
+ "::view-transition-old(foo)",
+ "::view-transition-old(foo)"
];
for (let i = 0; i < elements.length; i++) {
diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-old.html b/testing/web-platform/tests/css/css-view-transitions/only-child-old.html
index 7a55af7397..4d57121aa1 100644
--- a/testing/web-platform/tests/css/css-view-transitions/only-child-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/only-child-old.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html class="reftest-wait foo">
<title>View transitions: ensure :only-child is supported on view-transition-old</title>
-<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">
<script src="/resources/testharness.js"></script>
@@ -61,8 +61,7 @@ promise_test(() => {
});
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-old(root)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-old(root)");
if (style.backgroundColor == matchedColor && style.color == matchedColor)
resolve();
else
@@ -79,8 +78,7 @@ promise_test(() => {
let transition = document.startViewTransition();
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-old(root)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-old(root)");
if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
resolve();
else
@@ -100,8 +98,7 @@ promise_test(() => {
});
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-old(root)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-old(root)");
if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
resolve();
else
@@ -121,7 +118,7 @@ promise_test(() => {
transition.ready.then(() => {
let style = getComputedStyle(
- document.documentElement, ":view-transition-old(target)");
+ document.documentElement, "::view-transition-old(target)");
if (style.backgroundColor == matchedColor && style.color == matchedColor)
resolve();
else
@@ -141,8 +138,7 @@ promise_test(() => {
});
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-old(root)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-old(root)");
if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
resolve();
else
@@ -159,8 +155,7 @@ promise_test(() => {
let transition = document.startViewTransition();
transition.ready.then(() => {
- let style = getComputedStyle(
- document.documentElement, ":view-transition-old(target)");
+ let style = getComputedStyle(document.documentElement, "::view-transition-old(target)");
if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
resolve();
else
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-element-animations.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-animations.html
new file mode 100644
index 0000000000..a7c3247479
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-animations.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Animations on view transition pseudos run more than once</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../css-animations/support/testcommon.js"></script>
+<style>
+:root::view-transition,
+:root::view-transition-group(root),
+:root::view-transition-image-pair(root),
+:root::view-transition-old(root),
+:root::view-transition-new(root) {
+ animation: view-transition-animation 1ms;
+}
+@keyframes view-transition-animation {
+ to { opacity: 0 }
+}
+</style>
+<div id="log"></div>
+<script>
+"use strict";
+promise_test(async t => {
+ let viewTransition = document.startViewTransition(() => {});
+ await viewTransition.ready;
+ assert_equals(document.documentElement.getAnimations({ subtree: true }).length, 5, "Starting a view transition should start related animations.");
+
+ await viewTransition.finished;
+ assert_equals(document.documentElement.getAnimations({ subtree: true }).length, 0, "Stopping a view transition should stop related animations.");
+
+ await waitForNextFrame();
+ viewTransition = document.startViewTransition(() => {});
+ await viewTransition.ready;
+ assert_equals(document.documentElement.getAnimations({ subtree: true }).length, 5, "Re-starting a view-transition should restart related animations.");
+}, "CSS Animations on view transitions are canceled and restarted when the view transition starts and ends.");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-get-computed-style.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-get-computed-style.html
index 2481a71313..3e971885c3 100644
--- a/testing/web-platform/tests/css/css-view-transitions/pseudo-get-computed-style.html
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-get-computed-style.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
-<title>View transitions: check pseudo element's display property</title>
-<link rel="help" href="https://github.com/WICG/view-transitions">
+<title>View transitions: check pseudo element's default styles</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
<link rel="author" href="mailto:vmpstr@chromium.org">
<script src="/resources/testharness.js"></script>
@@ -30,34 +30,34 @@ promise_test(() => {
assert_implements(document.startViewTransition, "Missing document.startViewTransition");
return new Promise(async (resolve, reject) => {
let transition = document.startViewTransition(() => {
- assert_equals(getComputedStyle(document.documentElement, ":view-transition").position, "fixed", ":view-transition");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").position, "absolute", "container(target)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").mixBlendMode, "multiply", "container(target)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").textOrientation, "upright", "container(target)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").colorScheme, "dark light", "container(target)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(target)").position, "absolute", "wrapper(target)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition").position, "fixed", "::view-transition");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").position, "absolute", "container(target)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").mixBlendMode, "multiply", "container(target)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").textOrientation, "upright", "container(target)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").colorScheme, "dark light", "container(target)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(target)").position, "absolute", "wrapper(target)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(target)").position, "absolute", "outgoing(target)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(target)").position, "absolute", "outgoing(target)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").position, "absolute", "container(root)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").mixBlendMode, "normal", "container(root)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(root)").position, "absolute", "wrapper(root)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(root)").position, "absolute", "outgoing(root)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").position, "absolute", "container(root)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").mixBlendMode, "normal", "container(root)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").position, "absolute", "wrapper(root)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").position, "absolute", "outgoing(root)");
requestAnimationFrame(() => {
- assert_equals(getComputedStyle(document.documentElement, ":view-transition").position, "fixed", "raf :view-transition");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").position, "absolute", "raf container(target)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").mixBlendMode, "multiply", "raf container(target)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").textOrientation, "upright", "raf container(target)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").colorScheme, "dark light", "raf container(target)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(target)").position, "fixed", "raf wrapper(target)");
-
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(target)").position, "absolute", "raf outgoing(target)");
-
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").position, "absolute", "raf container(root)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").mixBlendMode, "normal", "raf container(root)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(root)").position, "absolute", "raf wrapper(root)");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(root)").position, "absolute", "raf outgoing(root)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition").position, "fixed", "raf ::view-transition");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").position, "absolute", "raf container(target)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").mixBlendMode, "multiply", "raf container(target)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").textOrientation, "upright", "raf container(target)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").colorScheme, "dark light", "raf container(target)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(target)").position, "fixed", "raf wrapper(target)");
+
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(target)").position, "absolute", "raf outgoing(target)");
+
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").position, "absolute", "raf container(root)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").mixBlendMode, "normal", "raf container(root)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").position, "absolute", "raf wrapper(root)");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").position, "absolute", "raf outgoing(root)");
});
});
await transition.finished;
@@ -69,42 +69,42 @@ promise_test(() => {
assert_implements(document.startViewTransition, "Missing document.startViewTransition");
return new Promise(async (resolve, reject) => {
let transition = document.startViewTransition(() => {
- assert_equals(getComputedStyle(document.documentElement, ":view-transition").position, "fixed");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").position, "absolute");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(target)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition").position, "fixed");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(target)").position, "absolute");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(target)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(target)").position, "absolute");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").position, "absolute");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(root)").position, "absolute");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(root)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").position, "absolute");
target.remove();
});
await transition.ready;
- assert_equals(getComputedStyle(document.documentElement, ":view-transition").position, "fixed");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").position, "absolute");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").mixBlendMode, "multiply");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").textOrientation, "upright");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").colorScheme, "dark light");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(target)").position, "fixed");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition").position, "fixed");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").mixBlendMode, "multiply");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").textOrientation, "upright");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").colorScheme, "dark light");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(target)").position, "fixed");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(target)").position, "absolute");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-new(target)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(target)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(target)").position, "absolute");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").position, "absolute");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(root)").position, "absolute");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(root)").position, "absolute");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-new(root)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").position, "absolute");
- assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").position, "absolute");
+ assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").position, "absolute");
await transition.finished;
// With custom ua sheets not applying to non-existing pseudo, the value should be the default (not absolute)
- assert_not_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").position, "absolute");
+ assert_not_equals(getComputedStyle(document.documentElement, "::view-transition-group(target)").position, "absolute");
resolve();
});
diff --git a/testing/web-platform/tests/css/css-view-transitions/web-animations-api-parse-pseudo-argument.html b/testing/web-platform/tests/css/css-view-transitions/web-animations-api-parse-pseudo-argument.html
new file mode 100644
index 0000000000..40c9a0d0c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/web-animations-api-parse-pseudo-argument.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions with web-animation API: full parsing of argument</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="match" href="web-animations-api-ref.html">
+<meta name="fuzzy" content="web-animations-api-ref.html:0-2;0-500">
+<meta name="variant" content="?first-pseudo=::view-transition-group( first)">
+<meta name="variant" content="?first-pseudo=::view-transition-group(first)">
+<meta name="variant" content="?first-pseudo=::view-transition-group( first">
+<meta name="variant" content="?first-pseudo=::view-transition-group( first )">
+<meta name="variant" content="?first-pseudo=::view-transition-group(first )">
+<meta name="variant" content="?first-pseudo=::view-transition-group(first">
+<script src="/common/reftest-wait.js">
+</script>
+<style>
+ #first {
+ background: blue;
+ width: 100px;
+ height: 100px;
+ contain: paint;
+ }
+
+ #second {
+ background: green;
+ width: 100px;
+ height: 100px;
+ contain: paint;
+ }
+
+ /* Unset all animations since the test drives it using WA-API */
+ html::view-transition-group(*),
+ html::view-transition-image-pair(*),
+ html::view-transition-new(*),
+ html::view-transition-old(*) {
+ animation: unset;
+ }
+
+ html::view-transition-group(root) {
+ opacity: 0;
+ }
+</style>
+<div id=first></div>
+<div id=second></div>
+<script>
+ failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+ const firstPseudo = new URL(location.href).searchParams.get("first-pseudo") ?? "::view-transition-group(first)";
+
+ function setAnimation() {
+ document.documentElement.animate({ transform: ['translate(100px)', 'translate(100px)'] }, { duration: 10000, pseudoElement: firstPseudo });
+ document.documentElement.animate({ transform: ['translate(150px)', 'translate(150px)'] }, { duration: 10000, pseudoElement: '::view-transition-group(second)' });
+ requestAnimationFrame(takeScreenshot);
+ }
+
+ async function runTest() {
+ first.style.viewTransitionName = "first";
+ document.startViewTransition(() => {
+ first.style.viewTransitionName = "";
+ second.style.viewTransitionName = "second";
+ requestAnimationFrame(setAnimation);
+ });
+ }
+ onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-11 07:48:12 +0000