| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .large { |
| width: 100px; |
| height: 100px; |
| } |
| |
| .medium { |
| width: 65px; |
| height: 65px; |
| } |
| |
| .small { |
| width: 30px; |
| height: 30px; |
| } |
| |
| .backfaceHidden { |
| -webkit-backface-visibility: hidden; |
| } |
| |
| .green { |
| background-color: green |
| } |
| |
| .blue { |
| background-color: blue |
| } |
| |
| .lime { |
| background-color: lime |
| } |
| |
| #testCase1 { |
| position: absolute; |
| top: 50px; |
| left: 10px; |
| } |
| |
| #testCase2 { |
| position: absolute; |
| top: 160px; |
| left: 10px; |
| } |
| |
| #testCase3 { |
| position: absolute; |
| top: 270px; |
| left: 10px; |
| } |
| |
| #testCase4 { |
| position: absolute; |
| top: 380px; |
| left: 10px; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <!-- This test checks various configurations of backface visibility when there is a 3d |
| rendering context. --> |
| |
| <!-- The blue div is a 3d rendering context, containing the lime div. No back faces are |
| visible, so we should see all three divs. --> |
| <div class="large green" id="testCase1"> |
| <div class="medium blue" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateY(0deg); -webkit-transform-style: preserve-3d"> |
| <div class="small lime" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateX(0deg)"> |
| </div> |
| </div> |
| </div> |
| |
| <!-- The blue div is a 3d rendering context, containing the lime div. The lime div should |
| inherit the blue div's transform, so both divs are showing their backface and both |
| should disappear. --> |
| <div class="large green" id="testCase2"> |
| <div class="medium blue" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d"> |
| <div class="small lime" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateX(0deg)"> |
| </div> |
| </div> |
| </div> |
| |
| <!-- The blue div is a 3d rendering context, containing the lime div. The lime div should |
| become invisible when it shows its backface. --> |
| <div class="large green" id="testCase3"> |
| <div class="medium blue" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateY(0deg); -webkit-transform-style: preserve-3d"> |
| <div class="small lime" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateX(180deg)"> |
| </div> |
| </div> |
| </div> |
| |
| <!-- The blue div is a 3d rendering context, containing the lime div. The lime div should |
| inherit the blue div's transform, but because it flips twice (once around Y, once |
| around X), its shows its front face and should be visible. This happens BEFORE the |
| lime div flattens to the rendering context, so the lime div should remain visible. --> |
| <div id="testCase4" class="large green"> |
| <div class="medium blue" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d"> |
| <div class="small lime" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateX(180deg)"> |
| </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> |
