<!DOCTYPE html>
<style>
#transparent {
overflow: hidden;
width: 100px;
height: 100px;
background: red;
}
#child1 {
width: 100px;
height: 100px;
background: green;
transform: translate(50px,0);
}
#child2 {
width: 80px;
height: 80px;
background: black;
transform: translate(35px,-60px);
}
#sibling {
width: 100px;
height: 100px;
background: blue;
transform: translate(25px,-50px);
position: relative;
z-index: -1;
}
</style>
<div id="root">
<div id="transparent">
<div id="child1"></div>
<div id="child2"></div>
</div>
<div id="sibling"></div>
</div>
The purpose of this test is to verify that overflow clipping forces the used value of
transform-style to be flat. The rendered result should be the same as if
transform-style:preserve-3d was not specified on the clipping element.