OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style type="text/css" media="screen"> | 4 <style type="text/css" media="screen"> |
5 .red { | 5 .red { |
6 background-color: red; | 6 background-color: red; |
7 } | 7 } |
8 | 8 |
9 .green { | 9 .green { |
10 background-color: green; | 10 background-color: green; |
11 } | 11 } |
12 div { | 12 div { |
13 height: 100px; | 13 height: 100px; |
14 width: 100px; | 14 width: 100px; |
15 } | 15 } |
16 | 16 |
17 .backfaceVisible { | 17 .backfaceVisible { |
18 -webkit-transform: rotateY(180deg); | 18 transform: rotateY(180deg); |
19 -webkit-backface-visibility: visible; | 19 -webkit-backface-visibility: visible; |
20 } | 20 } |
21 | 21 |
22 .backfaceHidden { | 22 .backfaceHidden { |
23 -webkit-transform: rotateY(180deg); | 23 transform: rotateY(180deg); |
24 -webkit-backface-visibility: hidden; | 24 -webkit-backface-visibility: hidden; |
25 } | 25 } |
26 </style> | 26 </style> |
27 </head> | 27 </head> |
28 <body> | 28 <body> |
29 <!-- In the pixel results, two green squares should be visible. --> | 29 <!-- In the pixel results, two green squares should be visible. --> |
30 <div class="red"> | 30 <div class="red"> |
31 <div class="backfaceVisible green"> | 31 <div class="backfaceVisible green"> |
32 </div> | 32 </div> |
33 </div> | 33 </div> |
34 <p> | 34 <p> |
35 <div class="green"> | 35 <div class="green"> |
36 <div class="backfaceHidden red"> | 36 <div class="backfaceHidden red"> |
37 </div> | 37 </div> |
38 </div> | 38 </div> |
39 <script> | 39 <script> |
40 if (window.testRunner) { | 40 if (window.testRunner) { |
41 testRunner.dumpAsTextWithPixelResults(); // This is only useful as a pixel
test. | 41 testRunner.dumpAsTextWithPixelResults(); // This is only useful as a pixel
test. |
42 document.write("<span style='position:absolute; top:-5000px'>This test is on
ly useful as a pixel test</span>"); | 42 document.write("<span style='position:absolute; top:-5000px'>This test is on
ly useful as a pixel test</span>"); |
43 } | 43 } |
44 </script> | 44 </script> |
45 </body> | 45 </body> |
46 </html> | 46 </html> |
OLD | NEW |