OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 | 2 |
3 <html> | 3 <html> |
4 <head> | 4 <head> |
5 <style> | 5 <style> |
6 #box { | 6 #box { |
7 height: 100px; | 7 height: 100px; |
8 width: 100px; | 8 width: 100px; |
9 background-color: blue; | 9 background-color: blue; |
10 -webkit-transition-property: -webkit-transform; | 10 -webkit-transition-property: transform; |
11 -webkit-transition-duration: 3s; | 11 -webkit-transition-duration: 3s; |
12 -webkit-transform: translate(0, 0) rotate(0); | 12 transform: translate(0, 0) rotate(0); |
13 } | 13 } |
14 | 14 |
15 </style> | 15 </style> |
16 <script> | 16 <script> |
17 if (window.testRunner) { | 17 if (window.testRunner) { |
18 testRunner.dumpAsText(); | 18 testRunner.dumpAsText(); |
19 testRunner.waitUntilDone(); | 19 testRunner.waitUntilDone(); |
20 } | 20 } |
21 | 21 |
22 function test() | 22 function test() |
23 { | 23 { |
24 var c = new WebKitCSSMatrix(window.getComputedStyle(document.getElementByI
d('box')).webkitTransform); | 24 var c = new WebKitCSSMatrix(window.getComputedStyle(document.getElementByI
d('box')).transform); |
25 var result = (c.f < 200) ? 'PASS' : 'FAIL: transition should still be runn
ing, so y < 200'; | 25 var result = (c.f < 200) ? 'PASS' : 'FAIL: transition should still be runn
ing, so y < 200'; |
26 document.getElementById('result').innerHTML = result; | 26 document.getElementById('result').innerHTML = result; |
27 | 27 |
28 if (window.testRunner) | 28 if (window.testRunner) |
29 testRunner.notifyDone(); | 29 testRunner.notifyDone(); |
30 } | 30 } |
31 | 31 |
32 function startTest() | 32 function startTest() |
33 { | 33 { |
34 var box = document.getElementById('box'); | 34 var box = document.getElementById('box'); |
35 box.style.webkitTransform = 'translate(100px, 0) rotate(0)'; | 35 box.style.transform = 'translate(100px, 0) rotate(0)'; |
36 | 36 |
37 window.setTimeout(function() { | 37 window.setTimeout(function() { |
38 box.style.webkitTransform = 'translate(0, 200px) rotate(10deg)'; | 38 box.style.transform = 'translate(0, 200px) rotate(10deg)'; |
39 window.setTimeout(function() { | 39 window.setTimeout(function() { |
40 test(); | 40 test(); |
41 }, 200); | 41 }, 200); |
42 }, 300); | 42 }, 300); |
43 } | 43 } |
44 window.addEventListener('load', startTest, false) | 44 window.addEventListener('load', startTest, false) |
45 </script> | 45 </script> |
46 </head> | 46 </head> |
47 <body> | 47 <body> |
48 <p>Box should start moving right, then move down</p> | 48 <p>Box should start moving right, then move down</p> |
49 <div id="box"> | 49 <div id="box"> |
50 </div> | 50 </div> |
51 | 51 |
52 <div id="result"> | 52 <div id="result"> |
53 </div> | 53 </div> |
54 </body> | 54 </body> |
55 </html> | 55 </html> |
OLD | NEW |