|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
|
2 "http://www.w3.org/TR/html4/loose.dtd"> |
|
3 |
|
4 <html lang="en"> |
|
5 <head> |
|
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
7 <title>Interrupted Transitions on Transform Test</title> |
|
8 <style type="text/css" media="screen"> |
|
9 #container { |
|
10 width: 400px; |
|
11 height: 400px; |
|
12 margin: 20px; |
|
13 border: 1px solid black; |
|
14 -webkit-perspective: 800; |
|
15 } |
|
16 #tester { |
|
17 width: 300px; |
|
18 height: 300px; |
|
19 margin: 50px; |
|
20 background-color: blue; |
|
21 -webkit-transition: -webkit-transform 3s linear; |
|
22 -webkit-transform: rotateX(65deg) translateZ(75px) rotateZ(0deg); |
|
23 -webkit-transform-style: preserve-3d; |
|
24 } |
|
25 #pos1 { |
|
26 position:absolute; |
|
27 width: 300px; |
|
28 height: 300px; |
|
29 margin: 50px; |
|
30 border: 2px solid #F00; |
|
31 -webkit-transform: rotateX(65deg) translateZ(75px) rotateZ(118deg); |
|
32 -webkit-transform-style: preserve-3d; |
|
33 } |
|
34 #pos2 { |
|
35 position:absolute; |
|
36 width: 300px; |
|
37 height: 300px; |
|
38 margin: 50px; |
|
39 border: 2px solid #0F0; |
|
40 -webkit-transform: rotateX(65deg) translateZ(75px) rotateZ(80deg); |
|
41 -webkit-transform-style: preserve-3d; |
|
42 } |
|
43 </style> |
|
44 <script type="text/javascript" charset="utf-8"> |
|
45 function setAngle(index) |
|
46 { |
|
47 var tester = document.getElementById('tester'); |
|
48 tester.style.webkitTransform = "rotateX(65deg) translateZ(75px) rotateZ(" + index + "deg)"; |
|
49 } |
|
50 |
|
51 function runTest() |
|
52 { |
|
53 window.setTimeout(function() { |
|
54 setAngle(240); |
|
55 }, 0); |
|
56 |
|
57 window.setTimeout(function() { |
|
58 setAngle(80); |
|
59 }, 1500); |
|
60 } |
|
61 window.addEventListener('load', runTest, false); |
|
62 </script> |
|
63 </head> |
|
64 <body> |
|
65 In this test you should see a blue diamond spinning in the clockwise direction. After 1.5 seconds it should stop |
|
66 close to the red outlne and then spin counterclockwise. After 3 more seconds it should stop close to the |
|
67 position of the green outline. |
|
68 (see: <a href="https://bugs.webkit.org/show_bug.cgi?id=26162">https://bugs.webkit.org/show_bug.cgi?id=26162)</a> |
|
69 <div id="container"> |
|
70 <div id="pos1"> |
|
71 </div> |
|
72 <div id="pos2"> |
|
73 </div> |
|
74 <div id="tester"> |
|
75 </div> |
|
76 </div> |
|
77 |
|
78 </body> |
|
79 </html> |