Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>View transitions: Old content is an inline element (ref)</title>
<link rel="author" href="mailto:bokan@chromium.org">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
:root {
background-color: rebeccapurple;
font: 20px/1 Ahem;
}
body { margin: 0; }
.container {
position: absolute;
left: 100px;
width: 400px;
height: 100px;
background-color: grey;
}
.container.start {
top: 100px;
}
.container.end {
top: 300px;
}
.container.transitioned {
left: 20px;
width: 600px;
transform: translateY(-50px);
}
.inline {
background-color: limegreen;
color: blue;
}
.transitioned .inline {
opacity: 0;
}
#dummyEndInline {
position: absolute;
left: 20px;
top: 250px;
/* scale transform applied in script below */
transform-origin: top left;
}
</style>
<div class="container start">
<span>FILL FILL</span>
<span id="start" class="inline">INL INL</span>
<p>START STATE</p>
</div>
<div class="container end transitioned">
<span>FILL FILL</span>
<span id="end" class="inline">INL INL</span>
<p>END STATE</p>
</div>
<div id="dummyEndInline">
<span style="opacity:0">FILL FILL</span>
<span class="inline">INL INL</span>
</div>
<script>
let endWidth = document.getElementById('end').getBoundingClientRect().width;
let startWidth = document.getElementById('start').getBoundingClientRect().width;
let scale = endWidth / startWidth;
/* Default UA CSS scales the image pseudos to match the group in the inline
direction. The block direction scales to retain the image's aspect ratio.
So have the dummy end line scale to match the end state width and apply the
same scale to its height. */
document.getElementById('dummyEndInline').style.transform = `scale(${scale})`;
</script>