0
Files
src/third_party/blink/web_tests/wpt_internal/document-transition/shared-transition-repeated-elements.manual.html
Vladimir Levin d217f4966d SET: Allow an element to be specified multiple times as shared.
This patch allows an element to be specified as shared multiple times.
This was already possible in the API, but we didn't plumb sufficient
information to viz to let it take advantage of it.

Also adds a (manual) test to exercise this behavior.

R=wangxianzhu@chromium.org

Bug: 1174141
Change-Id: I0e7da0889297e96d0ddafa66ae736055a987f5ec
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2844997
Commit-Queue: vmpstr <vmpstr@chromium.org>
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#876233}
2021-04-26 18:29:22 +00:00

80 lines
1.5 KiB
HTML

<!DOCTYPE html>
<html>
<title>Shared transitions: repeated elements (one -> two elements and back)</title>
<link rel="help" href="https://github.com/vmpstr/shared-element-transitions">
<link rel="author" href="mailto:vmpstr@chromium.org">
<style>
body {
background: lightpink;
}
#container {
width: max-content;
position: relative;
}
.hidden { display: none; }
.shape {
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid black;
position: absolute;
contain: paint;
}
#yellow {
background: yellow;
left: 300px;
top: 50px;
}
#green {
background: green;
left: 50px;
top: 150px;
}
#blue {
background: blue;
left: 300px;
top: 250px;
}
</style>
<input id=toggle type=button value="Toggle!"></input>
<span>One shape becomes two and vice versa</span>
<div id=green class=shape></div>
<div id=blue class="shape hidden"></div>
<div id=yellow class="shape hidden"></div>
<script>
function visibleSharedElements() {
if (green.classList.contains("hidden")) {
return [blue, yellow];
} else {
return [green, green];
}
}
async function runAnimation() {
await document.documentTransition.prepare({
rootTransition: "none",
sharedElements: visibleSharedElements()
});
green.classList.toggle("hidden");
blue.classList.toggle("hidden");
yellow.classList.toggle("hidden");
await document.documentTransition.start({
sharedElements: visibleSharedElements()
});
}
function init() {
toggle.addEventListener("click", runAnimation);
}
onload = init;
</script>