<!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.