| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .test-div |
| { |
| width: 100px; |
| height: 100px; |
| text-align: center; |
| background-color: gray; |
| } |
| .test-img |
| { |
| width: 50px; |
| height: 50px; |
| backface-visibility: hidden; |
| } |
| </style> |
| <script> |
| /* Function to draw a 50x50 white opaque square with the upper-left quadrant |
| red with a specified style */ |
| function addTestImg(style) { |
| var imgData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACDSURBVFhH7dKxDcAgDAVRzAipKbP/QpTUmcHMcJIVubjUJwQvP771jqLvObvopDGrDqo9x2sRT7XUIgKkdVtqEQHSui21iABp3ZZaRIC0bkstIkDaptuKzCTP+KltquW1yP9XSy0iQFq3pRYRIK3bUosIkNZtqUUESOu21CICpG26rQt3xwZdWSYa9QAAAABJRU5ErkJggg=="; |
| document.write("<img style=\"" + style + "\" src=\"" + imgData + "\" width=50px height=50px class=\"test-img\"/>"); |
| } |
| </script> |
| </head> |
| <body> |
| |
| <table><tr> |
| |
| <!-- This test draws a img which is facing the screen. --> |
| |
| <td> |
| <div class="test-div"> |
| <script>addTestImg("")</script> |
| </div> |
| </td> |
| |
| <!-- This test draws a single-sided img facing away from the screen. This |
| should not appear. --> |
| |
| <td> |
| <div class="test-div"> |
| <script>addTestImg("transform: rotateY(180deg);")</script> |
| </div> |
| </td> |
| |
| <!-- This test rotates the div away from the screen, but keeps the |
| single-sided img facing towards its div. This should appear. --> |
| |
| <td> |
| <div class="test-div" style="transform: rotateY(180deg)"> |
| <script>addTestImg("")</script> |
| </div> |
| </td> |
| |
| </tr><tr> |
| |
| <!-- This test draws a img inside a div which is double-sided and does not |
| face the screen. This should not appear because preserve-3d is set for |
| the parent div. --> |
| |
| <td> |
| <div class="test-div" style="transform: rotateY(180deg); -webkit-transform-style: preserve-3d;"> |
| <script>addTestImg("")</script> |
| </div> |
| </td> |
| |
| <!-- This test draws a img inside a div which is single-sided and does not |
| face the screen. This should appear because preserve-3d is set for the |
| parent div. --> |
| |
| <td> |
| <div class="test-div" style="transform: rotateY(180deg); -webkit-transform-style: preserve-3d; backface-visibility: hidden;"> |
| <script>addTestImg("transform: rotateY(180deg);")</script> |
| </div> |
| </td> |
| |
| <!-- This test draws a img inside a div which is single-sided and does not |
| face the screen. This should not appear because preserve-3d is not set |
| for the parent div. --> |
| |
| <td> |
| <div class="test-div" style="transform: rotateY(180deg); backface-visibility: hidden;"> |
| <script>addTestImg("transform: rotateY(180deg);")</script> |
| </div> |
| </td> |
| |
| </tr></table> |
| |
| </body> |
| </html> |
