| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css" media="screen"> |
| div { |
| height: 100px; |
| width: 100px; |
| } |
| |
| .red { |
| background-color: red; |
| } |
| |
| .green { |
| background-color: green; |
| } |
| |
| .test1location { |
| position: absolute; |
| top: 10px; |
| left: 10px; |
| } |
| |
| .test2location { |
| position: absolute; |
| top: 120px; |
| left: 10px; |
| } |
| |
| .preserves3d { |
| -webkit-transform-style: preserve-3d; |
| } |
| |
| .firstRenderSurface { |
| -webkit-transform: rotateY(180deg); |
| -webkit-transform-style: flat; |
| } |
| |
| .secondRenderSurface { |
| -webkit-transform: rotateY(0deg); |
| -webkit-transform-style: flat; |
| } |
| |
| .backfaceVisible { |
| -webkit-backface-visibility: visible; |
| } |
| |
| .backfaceHidden { |
| -webkit-backface-visibility: hidden; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <!-- In the pixel results, two green squares should be visible. --> |
| <!-- This tests whether backface culling is accounting for the hierarchy of transforms --> |
| |
| <div class="test1location red"> |
| </div> |
| <div class="test1location"> |
| <div class="preserves3d"> |
| <div class="firstRenderSurface"> |
| <div class="preserves3d"> |
| <div class="secondRenderSurface"> |
| <div class="preserves3d backfaceVisible green"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="test2location green"> |
| </div> |
| <div class="test2location"> |
| <div class="preserves3d"> |
| <div class="firstRenderSurface"> |
| <div class="preserves3d"> |
| <div class="secondRenderSurface"> |
| <div class="preserves3d backfaceHidden red"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| if (window.layoutTestController) { |
| layoutTestController.dumpAsText(true); // This is only useful as a pixel test. |
| document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>"); |
| } |
| </script> |
| </body> |
| </html> |
