103 lines
2.9 KiB
HTML
103 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
.test-div
|
|
{
|
|
width: 100px;
|
|
height: 100px;
|
|
text-align: center;
|
|
background-color: gray;
|
|
}
|
|
.test-img
|
|
{
|
|
width: 50px;
|
|
height: 50px;
|
|
-webkit-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("-webkit-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="-webkit-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="-webkit-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="-webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;">
|
|
<script>addTestImg("-webkit-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="-webkit-transform: rotateY(180deg); -webkit-backface-visibility: hidden;">
|
|
<script>addTestImg("-webkit-transform: rotateY(180deg);")</script>
|
|
</div>
|
|
</td>
|
|
|
|
</tr></table>
|
|
|
|
|
|
<script>
|
|
if (window.testRunner) {
|
|
/* Instruct the test runner that this is a pixel test */
|
|
testRunner.dumpAsText(true);
|
|
document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|