diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-view-transitions/shared-transition-author-style.manual.html | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-view-transitions/shared-transition-author-style.manual.html')
-rw-r--r-- | testing/web-platform/tests/css/css-view-transitions/shared-transition-author-style.manual.html | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-view-transitions/shared-transition-author-style.manual.html b/testing/web-platform/tests/css/css-view-transitions/shared-transition-author-style.manual.html new file mode 100644 index 0000000000..d757c8cf0d --- /dev/null +++ b/testing/web-platform/tests/css/css-view-transitions/shared-transition-author-style.manual.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> +<title>View transitions of different elements and shapes</title> +<link rel="help" href="https://github.com/vmpstr/view-transitions"> +<link rel="author" href="mailto:vmpstr@chromium.org"> + +<style> +body { + background: lightpink; + overflow: hidden; +} + +input { + position: absolute; + left: 8px; + top: 8px; + z-index: 10; +} + +.top { + top: 0px; + background: green; +} +.bottom { + bottom: 0px; + background: blue; +} + +div { + position: absolute; + left: 0px; + right: 0px; + height: 40vh; + contain: paint; +} +</style> + +<input id=toggle type=button value="Toggle!"></input> +<div id=target class=top> +The div should alternate being at the bottom and at the top. +The color at the top is green and bottom is blue. +During the animation, the div has an (x, y) offset and its +content is a blend of green and blue. There is also a grey +background with a slight offset from the top. +</div> + +<script> +let classes = ["top", "bottom"] +let i = 0; + +let transitionStyle = + `html::view-transition { + top: 50px; + } + + html::view-transition-group(root) { + background-color: grey; + } + + html::view-transition-group(target) { + left: 50px; + } + + html::view-transition-old(target) { + opacity: 0.5; + animation-name: none; + } + + html::view-transition-new(target) { + opacity: 0.5; + } + ` + +let pseudoStyle = document.createElement('style'); +pseudoStyle.appendChild(document.createTextNode(transitionStyle)); + +async function runAnimation() { + target.style.viewTransitionName = "target"; + let t = document.startViewTransition(() => { + target.classList.remove(classes[i]); + i = (i + 1) % classes.length; + target.classList.add(classes[i]); + + document.head.appendChild(pseudoStyle); + }); + await t.finished; + document.head.removeChild(pseudoStyle) +} + +function init() { + toggle.addEventListener("click", runAnimation); +} +onload = init; +</script> |