OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 div { | 5 div { |
6 height: 100px; | 6 height: 100px; |
7 width: 100px; | 7 width: 100px; |
8 } | 8 } |
9 | 9 |
10 #testCase1 { | 10 #testCase1 { |
(...skipping 22 matching lines...) Expand all Loading... |
33 </style> | 33 </style> |
34 </head> | 34 </head> |
35 <body> | 35 <body> |
36 | 36 |
37 <!-- This test checks various configurations of backface visibility when there i
s no 3d | 37 <!-- This test checks various configurations of backface visibility when there i
s no 3d |
38 rendering context (i.e. no layer preserves-3d). --> | 38 rendering context (i.e. no layer preserves-3d). --> |
39 | 39 |
40 <!-- No back faces are visible, so we should see the lime div inside the blue na
rrow div | 40 <!-- No back faces are visible, so we should see the lime div inside the blue na
rrow div |
41 inside the green div. --> | 41 inside the green div. --> |
42 <div id="testCase1" style="background-color: green"> | 42 <div id="testCase1" style="background-color: green"> |
43 <div style="background-color: blue; -webkit-backface-visibility: hidden; -webk
it-transform: rotateY(80deg)"> | 43 <div style="background-color: blue; -webkit-backface-visibility: hidden; trans
form: rotateY(80deg)"> |
44 <div style="background-color: lime; -webkit-backface-visibility: hidden; -we
bkit-transform: rotateX(80deg)"> | 44 <div style="background-color: lime; -webkit-backface-visibility: hidden; tra
nsform: rotateX(80deg)"> |
45 </div> | 45 </div> |
46 </div> | 46 </div> |
47 </div> | 47 </div> |
48 | 48 |
49 <!-- The lime div has its back facing, so we should see only the blue strip insi
de the | 49 <!-- The lime div has its back facing, so we should see only the blue strip insi
de the |
50 green div. --> | 50 green div. --> |
51 <div id="testCase2" style="background-color: green"> | 51 <div id="testCase2" style="background-color: green"> |
52 <div style="background-color: blue; -webkit-backface-visibility: hidden; -webk
it-transform: rotateY(80deg)"> | 52 <div style="background-color: blue; -webkit-backface-visibility: hidden; trans
form: rotateY(80deg)"> |
53 <div style="background-color: lime; -webkit-backface-visibility: hidden; -we
bkit-transform: rotateX(100deg)"> | 53 <div style="background-color: lime; -webkit-backface-visibility: hidden; tra
nsform: rotateX(100deg)"> |
54 </div> | 54 </div> |
55 </div> | 55 </div> |
56 </div> | 56 </div> |
57 | 57 |
58 <!-- The blue div should not be visible, but the lime div should be visible, bec
ause the | 58 <!-- The blue div should not be visible, but the lime div should be visible, bec
ause the |
59 W3C spec says that without a 3d context that they should use their own loca
l | 59 W3C spec says that without a 3d context that they should use their own loca
l |
60 transforms. --> | 60 transforms. --> |
61 <div id="testCase3" style="background-color: green"> | 61 <div id="testCase3" style="background-color: green"> |
62 <div style="background-color: blue; -webkit-backface-visibility: hidden; -webk
it-transform: rotateY(100deg)"> | 62 <div style="background-color: blue; -webkit-backface-visibility: hidden; trans
form: rotateY(100deg)"> |
63 <div style="background-color: lime; -webkit-backface-visibility: hidden; -we
bkit-transform: rotateX(80deg)"> | 63 <div style="background-color: lime; -webkit-backface-visibility: hidden; tra
nsform: rotateX(80deg)"> |
64 </div> | 64 </div> |
65 </div> | 65 </div> |
66 </div> | 66 </div> |
67 | 67 |
68 <!-- Only the green div should be visible. --> | 68 <!-- Only the green div should be visible. --> |
69 <div id="testCase4" style="background-color: green"> | 69 <div id="testCase4" style="background-color: green"> |
70 <div style="background-color: blue; -webkit-backface-visibility: hidden; -webk
it-transform: rotateY(100deg)"> | 70 <div style="background-color: blue; -webkit-backface-visibility: hidden; trans
form: rotateY(100deg)"> |
71 <div style="background-color: lime; -webkit-backface-visibility: hidden; -we
bkit-transform: rotateX(100deg)"> | 71 <div style="background-color: lime; -webkit-backface-visibility: hidden; tra
nsform: rotateX(100deg)"> |
72 </div> | 72 </div> |
73 </div> | 73 </div> |
74 </div> | 74 </div> |
75 | 75 |
76 <script> | 76 <script> |
77 if (window.testRunner) { | 77 if (window.testRunner) { |
78 testRunner.dumpAsTextWithPixelResults(); // This is only useful as a pixe
l test. | 78 testRunner.dumpAsTextWithPixelResults(); // This is only useful as a pixe
l test. |
79 document.write("<span style='position:absolute; top:-5000px'>This test is
only useful as a pixel test</span>"); | 79 document.write("<span style='position:absolute; top:-5000px'>This test is
only useful as a pixel test</span>"); |
80 } | 80 } |
81 </script> | 81 </script> |
82 </body> | 82 </body> |
83 </html> | 83 </html> |
OLD | NEW |