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/layered-capture/box-decorations.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class=reftest-wait>
<title>Box decorations are captured as group style</title>
<meta name=fuzzy content="maxDifference=0-10; totalPixels=0-200000">
<link rel="match" href="box-decorations-ref.tentative.html">
<script src="/common/reftest-wait.js"></script>
<style>
* {
box-sizing: border-box;
}
html {
view-transition-name: none;
}
body {
margin: 0;
}
.target {
width: 100px;
height: 100px;
margin: 30px;
background: green;
overflow: hidden;
border: 3px solid yellow;
outline: 2px solid blue;
border-radius: 10px;
background-image: linear-gradient(orange, cyan);
box-shadow: -10px 10px lightcoral;
}
html.vt-new .target {
border: 10px solid red;
outline: 5px solid green;
border-radius: 10px 20px 0 4px;
background-image: linear-gradient(pink, black);
box-shadow: 2px -15px lightslategray;
}
html::view-transition-image-pair(*) {
inset: 5px;
}
.override {
view-transition-name: override;
}
.passthrough {
view-transition-name: passthrough;
}
.animate {
view-transition-name: animate;
}
.at-end {
view-transition-name: at-end;
}
html::view-transition-group(*) {
animation-play-state: paused;
}
html::view-transition-group(override) {
border: 1px groove blue;
outline: none;
border-radius: 2px;
background: grey;
box-shadow: 3px 3px purple;
animation: none;
}
html::view-transition-group(animate),
html::view-transition-old(animate),
html::view-transition-new(animate)
{
animation-timing-function: steps(2, start);
animation-play-state: paused;
animation-duration: 100s;
}
html::view-transition-group(at-end),
html::view-transition-old(at-end),
html::view-transition-new(at-end)
{
animation-timing-function: steps(1, start);
animation-play-state: paused;
animation-duration: 100s;
}
html::view-transition-group(passthrough),
html::view-transition-old(passthrough),
html::view-transition-new(passthrough)
{
animation-timing-function: steps(1, end);
animation-play-state: paused;
animation-duration: 100s;
}
html::view-transition {
background: lightpink;
}
</style>
<body>
<div class="passthrough target"></div>
<div class="at-end target"></div>
<div class="animate target"></div>
<div class="override target"></div>
<script>
const transition = document.startViewTransition(() => {
document.documentElement.classList.add("vt-new");
});
transition.ready.then(() => takeScreenshot());
</script>
</body>