Unreviewed, speculative fix for build failure
[WebKit-https.git] / ManualTests / interrupted-compound-transform.html
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>