OLD | NEW |
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" | 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" |
2 "http://www.w3.org/TR/html4/strict.dtd"> | 2 "http://www.w3.org/TR/html4/strict.dtd"> |
3 <html> | 3 <html> |
4 <head> | 4 <head> |
5 <title>Visibility composited animation</title> | 5 <title>Visibility composited animation</title> |
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
7 <style type="text/css"> | 7 <style type="text/css"> |
8 .parentDivStyle { | 8 .parentDivStyle { |
9 width: 100px; | 9 width: 100px; |
10 height: 100px; | 10 height: 100px; |
11 background-color: #0000FF; | 11 background-color: #0000FF; |
12 | 12 |
13 -webkit-animation-iteration-count: infinite; | 13 -webkit-animation-iteration-count: infinite; |
14 -webkit-animation-timing-function: linear; | 14 -webkit-animation-timing-function: linear; |
15 | 15 |
16 -webkit-animation-name: y-spin; | 16 -webkit-animation-name: y-spin; |
17 -webkit-animation-duration: 5s; | 17 -webkit-animation-duration: 5s; |
18 } | 18 } |
19 | 19 |
20 @-webkit-keyframes y-spin { | 20 @-webkit-keyframes y-spin { |
21 0% { -webkit-transform: rotateY(0deg); } | 21 0% { -webkit-transform: rotateY(0deg); } |
22 50% { -webkit-transform: rotateY(180deg); } | 22 50% { -webkit-transform: rotateY(180deg); } |
23 100% { -webkit-transform: rotateY(360deg); } | 23 100% { -webkit-transform: rotateY(360deg); } |
24 } | 24 } |
25 </style> | 25 </style> |
26 | 26 |
27 <script type="text/javascript"> | 27 <script type="text/javascript"> |
28 if (window.testRunner) { | 28 if (window.testRunner) { |
29 testRunner.dumpAsText(true); | 29 testRunner.dumpAsTextWithPixelResults(); |
30 document.write("<span style='position:absolute; top:-5000px'>This test i
s only useful as a pixel test.</span>"); | 30 document.write("<span style='position:absolute; top:-5000px'>This test i
s only useful as a pixel test.</span>"); |
31 } | 31 } |
32 window.addEventListener('load', init, false); | 32 window.addEventListener('load', init, false); |
33 | 33 |
34 function init () | 34 function init () |
35 { | 35 { |
36 var parentDiv = document.getElementById("parentDiv"); | 36 var parentDiv = document.getElementById("parentDiv"); |
37 var childDiv = document.createElement('div'); | 37 var childDiv = document.createElement('div'); |
38 parentDiv.appendChild(childDiv); | 38 parentDiv.appendChild(childDiv); |
39 } | 39 } |
40 </script> | 40 </script> |
41 </head> | 41 </head> |
42 <body> | 42 <body> |
43 <div id="parentDiv" class="parentDivStyle"></div> | 43 <div id="parentDiv" class="parentDivStyle"></div> |
44 </body> | 44 </body> |
45 </html> | 45 </html> |
OLD | NEW |