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-shapes.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-shapes.manual.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-view-transitions/shared-transition-shapes.manual.html | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-view-transitions/shared-transition-shapes.manual.html b/testing/web-platform/tests/css/css-view-transitions/shared-transition-shapes.manual.html new file mode 100644 index 0000000000..1f666cfe9f --- /dev/null +++ b/testing/web-platform/tests/css/css-view-transitions/shared-transition-shapes.manual.html @@ -0,0 +1,80 @@ +<!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; +} + +#container { + width: max-content; + position: relative; +} + +.left { + left: 50px; +} +.right { + left: 550px; +} + +div { + margin: 10px; + contain: paint; +} + +.square { + width: 100px; + height: 100px; + background: green; +} +.rounded { + width: 100px; + height: 100px; + background: green; + border-radius: 20%; +} +.translucent { + opacity: 0.5; +} +.text { + width: 100px; + height: 100px; +} +</style> + +<input id=toggle type=button value="Toggle!"></input> +<span>Same shape should move right and left</span> +<div id=container class=left> + <div id=e1 class=square></div> + <div id=e2 class=rounded></div> + <div id=e3 class="square translucent"></div> + <div id=e4 class="rounded translucent"></div> + <div id=e5 class=text>Lorem Ipsum</div> +</div> + +<script> +let classes = ["left", "right"] +let i = 0; +async function runAnimation() { + e1.style.viewTransitionName = "e1"; + e2.style.viewTransitionName = "e2"; + e3.style.viewTransitionName = "e3"; + e4.style.viewTransitionName = "e4"; + e5.style.viewTransitionName = "e5"; + let t = document.startViewTransition(() => { + container.classList.remove(classes[i]); + i = (i + 1) % classes.length; + container.classList.add(classes[i]); + }); + await t.finished; +} + +function init() { + toggle.addEventListener("click", runAnimation); +} +onload = init; +</script> |