diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html')
-rw-r--r-- | testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html new file mode 100644 index 0000000000..c657fa19fb --- /dev/null +++ b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class=reftest-wait style="background: lightblue;"> +<title>When the root element has scrollbars, these should be excluded in snapshot</title> +<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="root-scrollbar-with-fixed-background-ref.html"> + +<script src="/common/rendering-utils.js"></script> +<script src="/common/reftest-wait.js"></script> + +<style> +#hide { + position: absolute; + top: 0px; + left: 0px; + width: 10px; + height: 10px; + background: red; + contain: paint; + view-transition-name: hide; +} +#first { + width: 10px; + background: linear-gradient(green, blue); + height: 1000px; +} +body { + margin: 0px; + padding: 0px; +} + +/* Set a no-op animation to screenshot the pseudo transition DOM. */ +html::view-transition-group(hide) { + animation-duration: 300s; + opacity: 0; +} +html::view-transition-new(*) { + animation: unset; + filter: invert(1); + height: 100%; +} +html::view-transition-old(*) { + animation: unset; + opacity: 0; + height: 100%; +} +</style> + +<div id=hide></div> +<div id=first></div> + +<script> +failIfNot(document.startViewTransition, "Missing document.startViewTransition"); + +async function runTest() { + await waitForAtLeastOneFrame(); + + document.documentElement.scrollTop = 500; + document.startViewTransition(() => { + requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); + }); +} + +onload = () => requestAnimationFrame(runTest); +</script> + +</html> |