| <!DOCTYPE html> |
| <style> |
| #root { |
| transform-style: preserve-3d; |
| } |
| |
| #transparent { |
| opacity: 0.5; |
| width: 100px; |
| height: 100px; |
| background: red; |
| transform: translate3d(0,0,30px); |
| transform-style: preserve-3d; |
| } |
| |
| #child1 { |
| width: 100px; |
| height: 100px; |
| background: green; |
| transform: translate3d(50px,0,-20px); |
| } |
| |
| #child2 { |
| width: 80px; |
| height: 80px; |
| background: black; |
| transform: translate3d(35px,-60px,-30px); |
| } |
| |
| #sibling { |
| width: 100px; |
| height: 100px; |
| background: blue; |
| transform: translate3d(25px,-50px,20px); |
| } |
| </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 non-initial value of opacity 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 transparent element. |
