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