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