mozilla-central/testing/web-platform/tests/css/css-view-transitions/layered-capture/box-model-capture.tentative.sub.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<html class=reftest-wait>
<title>Box model is copied to group style</title>
<meta name=fuzzy content="maxDifference=0-10; totalPixels=0-200000">
<link rel="match" href="box-model-capture-ref.sub.html">
<meta name="variant" content="?sizing=border-box">
<meta name="variant" content="?sizing=content-box">
<script src="/common/reftest-wait.js"></script>
<style>
* {
box-sizing: {{GET[sizing]}};
}
html {
view-transition-name: none;
}
body {
margin: 33px;
}
.target {
width: 60px;
height: 60px;
padding: 15px;
border: 10px solid yellow;
outline: 5px solid blue;
background: green;
/* To avoid the elements affecting each other's position */
position: absolute;
left: 0;
}
.animate.target {
top: 180px;
}
html.vt-new .target {
left: 300px;
width: 200px;
height: 40px;
padding-left: 25px;
border: 3px solid yellow;
outline: 8px solid blue;
}
.override {
view-transition-name: override;
top: 300px;
left: 300px;
}
.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) {
width: 80px;
height: 80px;
padding-left: 30px;
padding-top: 0px;
border-width: 20px;
outline-width: 12px;
box-sizing: content-box;
transform: none;
animation: none;
position: fixed;
top: 300px;
left: 300px;
}
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: pink;
}
</style>
<body>
<main>
<div class="passthrough target"></div>
<div class="at-end target"></div>
<div class="animate target"></div>
<div class="override target"></div>
</main>
<script>
const transition = document.startViewTransition(() => {
document.documentElement.classList.add("vt-new");
});
transition.ready.then(() => takeScreenshot());
</script>
</body>