Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<title>Uneven borders should be captured correctly</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: rebeccapurple;
}
@keyframes anim {
to {
border: 5px solid blue;
border-right: 4px solid teal;
}
}
.target {
width: 100px;
height: 100px;
view-transition-name: parent;
border-left: 10px solid black;
border-top: 20px groove pink;
border-bottom: 1px dashed orange;
border-right: 2px solid yellow;
background: green;
animation-name: anim;
animation-timing-function: steps(2, start);
animation-play-state: paused;
animation-duration: 10s;
}
</style>
<body>
<div class="target"></div>
</body>