<!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>
Codebase Browser
chromium