| <!DOCTYPE HTML> |
| <!-- |
| This test creates a situation where introduce two bookkeeping layers to apply |
| the perspective and the clip. It ensures that these layers are positioned |
| correctly. If the test is not working the red div with class "perspective" |
| will be exposed. |
| --> |
| <style> |
| .perspective { |
| background: red; |
| width: 100px; |
| height: 100px; |
| overflow: hidden; |
| box-shadow: 0 0 100px 100px rgba(10, 10, 10, 0.0); |
| perspective: 100px; |
| } |
| .cover { |
| background: green; |
| height: 500px; |
| transform: translateZ(0); |
| } |
| </style> |
| <div class="perspective"> |
| <div class="cover"></div> |
| </div> |
