blob: ef2a7d39cc32969adb543f3b8eef7d0951a80d0a (
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
103
104
105
106
107
108
109
110
111
112
|
<!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; transform: rotateY(0deg); -webkit-transform-style: preserve-3d">
<div class="small lime" style="-webkit-backface-visibility: hidden; 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; transform: rotateY(180deg); -webkit-transform-style: preserve-3d">
<div class="small lime" style="-webkit-backface-visibility: hidden; 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; transform: rotateY(0deg); -webkit-transform-style: preserve-3d">
<div class="small lime" style="-webkit-backface-visibility: hidden; 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; transform: rotateY(180deg); -webkit-transform-style: preserve-3d">
<div class="small lime" style="-webkit-backface-visibility: hidden; transform: rotateX(180deg)">
</div>
</div>
</div>
<script>
if (window.testRunner) {
testRunner.dumpAsTextWithPixelResults(); // 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>
|
