Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-view-transitions/scoped/crashtests/display-change-contents-after-capture.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class="test-wait">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="help" contents="crbug.com/493951244">
<title></title>
<style>
#scope {
display: block;
width: 200px;
height: 200px;
background: lightblue;
padding: 20px;
}
#child {
view-transition-name: child;
width: 100px;
height: 100px;
background: coral;
}
</style>
</head>
<body>
<div id="scope">
<div id="child">Content</div>
</div>
<script>
const scope = document.getElementById('scope');
const child = document.getElementById('child');
const vt = scope.startViewTransition(() => {
child.textContent = 'Updated content';
child.style.background = 'green';
});
vt.ready.then(() => {
// Transition is now animating. Change scope to inline.
scope.style.display = 'contents';
});
vt.finished.then(() => {
document.documentElement.classList.remove('test-wait');
});
</script>
</body>
</html>