Adding upstream version 125.0.1.upstream/125.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 01:13:27 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 01:13:27 +0000
commit: 40a355a42d4a9444dc753c04c6608dade2f06a23 (patch)
tree: 871fc667d2de662f171103ce5ec067014ef85e61 /testing/web-platform/tests/css/css-view-transitions
parent: Adding upstream version 124.0.1. (diff)
download: firefox-upstream/125.0.1.tar.xz
firefox-upstream/125.0.1.zip
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>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 01:13:27 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 01:13:27 +0000
commit	40a355a42d4a9444dc753c04c6608dade2f06a23 (patch)
tree	871fc667d2de662f171103ce5ec067014ef85e61 /testing/web-platform/tests/css/css-view-transitions
parent	Adding upstream version 124.0.1. (diff)
download	firefox-upstream/125.0.1.tar.xz firefox-upstream/125.0.1.zip