diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-view-transitions/style-inheritance.html')
-rw-r--r-- | testing/web-platform/tests/css/css-view-transitions/style-inheritance.html | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-view-transitions/style-inheritance.html b/testing/web-platform/tests/css/css-view-transitions/style-inheritance.html new file mode 100644 index 0000000000..70788842be --- /dev/null +++ b/testing/web-platform/tests/css/css-view-transitions/style-inheritance.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<title>View transitions: ensure correct style inheritance for pseudo tree</title> +<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="author" href="mailto:khushalsagar@chromium.org"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> +::view-transition { + background-color: red; +} + +::view-transition-group(*) { + background-color: inherit; + color: blue; + animation-duration: 0.321s; +} + +::view-transition-image-pair(*) { + color: inherit; + overflow-x: clip; +} + +::view-transition-old(*), ::view-transition-new(*) { + overflow-x: inherit; +} +</style> + +<script> +promise_test(() => { + assert_implements(document.startViewTransition, "Missing document.startViewTransition"); + return new Promise(async (resolve, reject) => { + let transition = document.startViewTransition(); + transition.ready.then(() => { + assert_equals(getComputedStyle(document.documentElement, ":view-transition").backgroundColor, "rgb(255, 0, 0)", ":view-transition"); + + assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").backgroundColor, "rgb(255, 0, 0)", "group"); + assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").color, "rgb(0, 0, 255)", "group"); + assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").animationDuration, "0.321s", "group"); + + assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(root)").color, "rgb(0, 0, 255)", "wrapper"); + assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(root)").overflowX, "clip", "wrapper"); + assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(root)").animationDuration, "0.321s", "wrapper"); + + assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(root)").overflowX, "clip", "outgoing"); + assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(root)").animationDuration, "0.321s", "outgoing"); + assert_equals(getComputedStyle(document.documentElement, ":view-transition-new(root)").overflowX, "clip", "incoming"); + assert_equals(getComputedStyle(document.documentElement, ":view-transition-new(root)").animationDuration, "0.321s", "incoming"); + }); + await transition.finished; + resolve(); + }); +}, "style inheritance of pseudo elements"); +</script> |