mirror of
https://github.com/servo/servo.git
synced 2025-07-30 10:40:27 +01:00
73 lines
1.6 KiB
HTML
73 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<title>View transitions: Old content is an inline element (ref)</title>
|
|
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
|
|
<link rel="author" href="mailto:bokan@chromium.org">
|
|
|
|
<style>
|
|
:root { background-color: rebeccapurple; }
|
|
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: 200px;
|
|
transform: translateY(-50px);
|
|
}
|
|
|
|
.inline {
|
|
background-color: limegreen;
|
|
color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.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>FILLER FILLER</span>
|
|
<span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
|
|
<p>START STATE</p>
|
|
</div>
|
|
|
|
<div class="container end transitioned">
|
|
<span>FILLER FILLER</span>
|
|
<span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
|
|
<p>END STATE</p>
|
|
</div>
|
|
|
|
<div id="dummyEndInline">
|
|
<span style="opacity:0">FILLER FILLER</span>
|
|
<span class="inline">INLINE INLINE INLINE INLINE</span>
|
|
</div>
|
|
<script>
|
|
let endWidth = document.getElementById('end').getBoundingClientRect().width;
|
|
let startWidth = document.getElementById('start').getBoundingClientRect().width;
|
|
let scale = endWidth / startWidth;
|
|
document.getElementById('dummyEndInline').style.transform = `scale(${scale})`;
|
|
</script>
|
|
|