Vladimir Levin
86c9428bcc
Automatic update from web-platform-tests Nested VTs: Fix the transform ordering to keep top-left origin longer. This patch ensures that we don't convert the transform to center of the element until late in the stack. Since we're doing some inverse calculations to figure out relative transforms, we need to keep them all in the same space before converting to the default transform origin center. R=kevers@chromium.org Change-Id: Idcd277d02d97b4266cc41cf9996692f53a8cd007 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6680468 Commit-Queue: Vladimir Levin <vmpstr@chromium.org> Reviewed-by: Kevin Ellis <kevers@chromium.org> Cr-Commit-Position: refs/heads/main@{#1479433} -- wpt-commits: af08de92e1b45ab509cbd8146620510694375a7c wpt-pr: 53426
66 lines
1.5 KiB
HTML
66 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html class=reftest-wait>
|
|
<title>Nested View Transitions: rotated container</title>
|
|
<link rel="author" href="mailto:vmpstr@chromium.org">
|
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
|
|
<link rel="match" href="rotated-container-ref.html">
|
|
<!-- Accommodate anti-aliasing along border -->
|
|
<meta name=fuzzy content="maxDifference=0-80; totalPixels=0-2000">
|
|
<script src="/common/reftest-wait.js"></script>
|
|
|
|
<style>
|
|
:root { view-transition-name: none }
|
|
::view-transition { background: pink }
|
|
::view-transition-group(*) {
|
|
animation-duration: 1s;
|
|
animation-play-state: paused;
|
|
}
|
|
::view-transition-old(*) {
|
|
animation: unset;
|
|
opacity: 0;
|
|
}
|
|
::view-transition-new(*) {
|
|
animation: unset;
|
|
opacity: 1;
|
|
}
|
|
|
|
#target {
|
|
width: 100px;
|
|
height: 100px;
|
|
position: absolute;
|
|
left: 50px;
|
|
top: 50px;
|
|
background: lightblue;
|
|
|
|
view-transition-name: container;
|
|
view-transition-group: contain;
|
|
}
|
|
.after {
|
|
transform: translateX(100px) rotate(45deg);
|
|
}
|
|
#item {
|
|
view-transition-name: item;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: blue;
|
|
}
|
|
</style>
|
|
|
|
<div id=target>
|
|
<div id=item></div>
|
|
</div>
|
|
|
|
<script>
|
|
async function runTest() {
|
|
const transition = document.startViewTransition(() => target.classList.toggle("after"));
|
|
await transition.ready;
|
|
document.documentElement.getAnimations({ subtree: true }).forEach((a) =>{
|
|
a.currentTime = 1000;
|
|
});
|
|
requestAnimationFrame(takeScreenshot);
|
|
}
|
|
|
|
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
|
|
</script>
|
|
</html>
|