blob: 78fd781adc0631df9bf979bddb7f4404bfb52462 (
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
|
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
}
#testCase1 {
position: absolute;
top: 10px;
left: 10px;
}
#testCase2 {
position: absolute;
top: 120px;
left: 10px;
}
#testCase3 {
position: absolute;
top: 230px;
left: 10px;
}
#testCase4 {
position: absolute;
top: 340px;
left: 10px;
}
</style>
</head>
<body>
<!-- This test checks various configurations of backface visibility when there is no 3d
rendering context (i.e. no layer preserves-3d). -->
<!-- No back faces are visible, so we should see the lime div inside the blue narrow div
inside the green div. -->
<div id="testCase1" style="background-color: green">
<div style="background-color: blue; -webkit-backface-visibility: hidden; transform: rotateY(80deg)">
<div style="background-color: lime; -webkit-backface-visibility: hidden; transform: rotateX(80deg)">
</div>
</div>
</div>
<!-- The lime div has its back facing, so we should see only the blue strip inside the
green div. -->
<div id="testCase2" style="background-color: green">
<div style="background-color: blue; -webkit-backface-visibility: hidden; transform: rotateY(80deg)">
<div style="background-color: lime; -webkit-backface-visibility: hidden; transform: rotateX(100deg)">
</div>
</div>
</div>
<!-- The blue div should not be visible, but the lime div should be visible, because the
W3C spec says that without a 3d context that they should use their own local
transforms. -->
<div id="testCase3" style="background-color: green">
<div style="background-color: blue; -webkit-backface-visibility: hidden; transform: rotateY(100deg)">
<div style="background-color: lime; -webkit-backface-visibility: hidden; transform: rotateX(80deg)">
</div>
</div>
</div>
<!-- Only the green div should be visible. -->
<div id="testCase4" style="background-color: green">
<div style="background-color: blue; -webkit-backface-visibility: hidden; transform: rotateY(100deg)">
<div style="background-color: lime; -webkit-backface-visibility: hidden; transform: rotateX(100deg)">
</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>
|
