| <!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; |
| } |
| |
| .test3location { |
| position: absolute; |
| top: 230px; |
| left: 10px; |
| } |
| |
| .preserves3d { |
| -webkit-transform-style: preserve-3d; |
| } |
| |
| .flat { |
| -webkit-transform-style: flat; |
| } |
| |
| .rotated180 { |
| -webkit-transform: rotateY(180deg); |
| } |
| |
| .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. |
| http://dev.w3.org/csswg/css3-transforms/#backface-visibility-property |
| --> |
| |
| |
| <!-- Case 1: the inner-most div remains 3d, and inherits a 180-degree rotation from |
| higher up the hierarchy. The inner-most div should remain visible. |
| --> |
| <div class="test1location red"> |
| </div> |
| <div class="test1location"> |
| <div class="preserves3d"> |
| <div class="preserves3d rotated180"> |
| <div class="preserves3d"> |
| <div class="backfaceVisible green"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <!-- Case 2: same as Case 1, except now the inner-most div has backface-visibility: hidden. --> |
| <div class="test2location green"> |
| </div> |
| <div class="test2location"> |
| <div class="preserves3d"> |
| <div class="preserves3d rotated180"> |
| <div class="preserves3d"> |
| <div class="backfaceHidden red"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <!-- Case 3: the inner-most div flattens to its container div, with its front face |
| showing. Then higher in the hierarchy, that flattened container gets rotated so its |
| back face is showing. However, because it was already flattened, the inner-most div |
| should also remain visible, because the flattened layer is implicitly backface visible. --> |
| <div class="test3location red"> |
| </div> |
| <div class="test3location"> |
| <div class="preserves3d"> |
| <div class="flat rotated180"> |
| <div class="preserves3d"> |
| <div class="flat"> |
| <div class="backfaceHidden green"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| if (window.testRunner) { |
| testRunner.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> |
