| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| div { |
| height: 100px; |
| width: 100px; |
| } |
| |
| #testCase1 { |
| position: absolute; |
| top: 10px; |
| left: 10px; |
| } |
| |
| #testCase2 { |
| position: absolute; |
| top: 120px; |
| left: 10px; |
| } |
| |
| #testCase3 { |
| position: absolute; |
| top: 230px; |
| left: 10px; |
| } |
| |
| #testCase4 { |
| position: absolute; |
| top: 340px; |
| left: 10px; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <!-- This test checks various configurations of backface visibility when there is no 3d |
| rendering context (i.e. no layer preserves-3d). --> |
| |
| <!-- No back faces are visible, so we should see the lime div inside the blue narrow div |
| inside the green div. --> |
| <div id="testCase1" style="background-color: green"> |
| <div style="background-color: blue; -webkit-backface-visibility: hidden; -webkit-transform: rotateY(80deg)"> |
| <div style="background-color: lime; -webkit-backface-visibility: hidden; -webkit-transform: rotateX(80deg)"> |
| </div> |
| </div> |
| </div> |
| |
| <!-- The lime div has its back facing, so we should see only the blue strip inside the |
| green div. --> |
| <div id="testCase2" style="background-color: green"> |
| <div style="background-color: blue; -webkit-backface-visibility: hidden; -webkit-transform: rotateY(80deg)"> |
| <div style="background-color: lime; -webkit-backface-visibility: hidden; -webkit-transform: rotateX(100deg)"> |
| </div> |
| </div> |
| </div> |
| |
| <!-- The blue div should not be visible, but the lime div should be visible, because the |
| W3C spec says that without a 3d context that they should use their own local |
| transforms. --> |
| <div id="testCase3" style="background-color: green"> |
| <div style="background-color: blue; -webkit-backface-visibility: hidden; -webkit-transform: rotateY(100deg)"> |
| <div style="background-color: lime; -webkit-backface-visibility: hidden; -webkit-transform: rotateX(80deg)"> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Only the green div should be visible. --> |
| <div id="testCase4" style="background-color: green"> |
| <div style="background-color: blue; -webkit-backface-visibility: hidden; -webkit-transform: rotateY(100deg)"> |
| <div style="background-color: lime; -webkit-backface-visibility: hidden; -webkit-transform: rotateX(100deg)"> |
| </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> |
