Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<title>Box model is copied to group style</title>
<meta name=fuzzy content="maxDifference=0-10; totalPixels=0-200000">
<style>
* {
box-sizing: {{GET[sizing]}};
}
body {
margin: 33px;
background: pink;
}
.target {
width: 60px;
height: 60px;
padding: 15px;
border: 10px solid yellow;
outline: 5px solid blue;
background: green;
position: fixed;
left: 0;
}
.target.at-end {
width: 200px;
height: 40px;
left: 300px;
padding-left: 25px;
border: 3px solid yellow;
outline: 8px solid blue;
left: 300px;
}
.target.override {
width: 80px;
height: 80px;
padding-left: 30px;
padding-top: 0px;
border-width: 20px;
outline-width: 12px;
position: absolute;
left: 300px;
top: 300px;
box-sizing: content-box;
}
@keyframes anim {
to {
width: 200px;
height: 40px;
padding-left: 25px;
border: 3px solid yellow;
outline: 8px solid blue;
left: 300px;
}
}
.target.animate {
animation-name: anim;
animation-duration: 1000s;
animation-play-state: paused;
animation-timing-function: steps(2, start);
top: 180px;
}
</style>
<body>
<div class="passthrough target"></div>
<div class="at-end target"></div>
<div class="animate target"></div>
<div class="override target"></div>
</body>