diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-view-transitions')
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> |