| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <style> |
| 3 #root { |
| 4 transform-style: preserve-3d; |
| 5 } |
| 6 |
| 7 #transparent { |
| 8 overflow: hidden; |
| 9 width: 100px; |
| 10 height: 100px; |
| 11 background: red; |
| 12 transform: translate3d(0,0,30px); |
| 13 } |
| 14 |
| 15 #child1 { |
| 16 width: 100px; |
| 17 height: 100px; |
| 18 background: green; |
| 19 transform: translate3d(50px,0,-20px); |
| 20 } |
| 21 |
| 22 #child2 { |
| 23 width: 80px; |
| 24 height: 80px; |
| 25 background: black; |
| 26 transform: translate3d(35px,-60px,-30px); |
| 27 } |
| 28 |
| 29 #sibling { |
| 30 width: 100px; |
| 31 height: 100px; |
| 32 background: blue; |
| 33 transform: translate3d(25px,-50px,20px); |
| 34 } |
| 35 </style> |
| 36 <div id="root"> |
| 37 <div id="transparent"> |
| 38 <div id="child1"></div> |
| 39 <div id="child2"></div> |
| 40 </div> |
| 41 <div id="sibling"></div> |
| 42 </div> |
| 43 The purpose of this test is to verify that overflow clipping forces the used val
ue of |
| 44 transform-style to be flat. The rendered result should be the same as if |
| 45 transform-style:preserve-3d was not specified on the clipping element. |
| OLD | NEW |