Emilio Cobos Álvarez
7142b07a77
We need to compensate with the centered origin that the transform will get. Differential Revision: https://phabricator.services.mozilla.com/D253143
45 lines
1.1 KiB
HTML
45 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait">
|
|
<link rel="match" href="small-scale-ref.html">
|
|
<link rel="help" href="https://bugzil.la/1968672">
|
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
|
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
|
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<style>
|
|
:root {
|
|
view-transition-name: none;
|
|
}
|
|
body { margin: 0 }
|
|
.outer {
|
|
/* Removing this makes it work */
|
|
transform: scale(0.5);
|
|
}
|
|
.inner {
|
|
view-transition-name: inner;
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: green;
|
|
}
|
|
:root::view-transition {
|
|
background: pink;
|
|
}
|
|
:root::view-transition-group(inner),
|
|
:root::view-transition-image-pair(inner),
|
|
:root::view-transition-old(inner),
|
|
:root::view-transition-new(inner) {
|
|
animation-play-state: paused;
|
|
}
|
|
</style>
|
|
|
|
<div class="outer">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<script>
|
|
onload = function () {
|
|
requestAnimationFrame(() => requestAnimationFrame(() => {
|
|
document.startViewTransition().ready.then(takeScreenshot);
|
|
}));
|
|
}
|
|
</script>
|