blob: e567df49593d05673c4759540e957df29dfd386f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<!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("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; -webkit-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); -webkit-backface-visibility: hidden;">
<script>addTestImg("transform: rotateY(180deg);")</script>
</div>
</td>
</tr></table>
<script>
if (window.testRunner) {
/* Instruct the test runner that this is a pixel test */
testRunner.dumpAsTextWithPixelResults();
document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");
}
</script>
</body>
</html>
|
