[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / compositing / backing / backface-visibility-flip.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2
3 <html>
4 <head>
5     <style>
6         .box {
7           width: 100px;
8           height: 100px;
9           background-color: silver;
10         }
11         
12         .container {
13             -webkit-perspective: 500px;
14             width: 300px;
15             padding: 10px;
16         }
17         
18         #flipper {
19             width: 300px;
20             height: 300px;
21             -webkit-transform-style: preserve-3d;
22         }
23         
24         #flipper > div {
25             position: absolute;
26             top: 0;
27             left: 0;
28             width: 100%;
29             height: 100%;
30         }
31         .flipping {
32             -webkit-animation: flip 2s forwards;
33         }
34         
35         .front, .back {
36             -webkit-backface-visibility: hidden;
37         }
38         
39         .back {
40             -webkit-transform: rotateY(180deg);
41         }
42         
43         @-webkit-keyframes flip {
44             to { -webkit-transform: rotateY(0); }
45             to { -webkit-transform: rotateY(180deg); }
46         }
47     </style>
48     <script>
49         if (window.testRunner) {
50             testRunner.dumpAsText();
51             testRunner.waitUntilDone();
52         }
53
54         function doTest()
55         {
56             window.setTimeout(function() {
57                 var flipper = document.getElementById('flipper');
58                 flipper.addEventListener('webkitAnimationStart', testDone, false);
59                 flipper.classList.add('flipping');
60             }, 250);
61         }
62         
63         function testDone()
64         {
65             var layersResult = document.getElementById('layers');
66             if (window.testRunner) {
67                 layersResult.innerText = window.internals.layerTreeAsText(document);
68                 testRunner.notifyDone();
69             }
70         }
71         window.addEventListener('load', doTest, false)
72     </script>
73 </head>
74 <body>
75     <div class="container">
76         <div id="flipper">
77             <div class="front box">
78                 Front
79             </div>
80             <div class="back box">
81                 Back
82             </div>
83         </div>
84     </div>
85 <pre id="layers"></pre>
86 </body>
87 </html>