Computed style of fill/stroke properties incorrect on references
[WebKit-https.git] / LayoutTests / transitions / move-after-transition.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style>
6     #container {
7       position: relative;
8       width: 400px;
9       height: 100px;
10       border: 1px solid  black;
11     }
12     
13     .box {
14       position: absolute;
15       width: 100px;
16       height: 100px;
17       background-color: green;
18     }
19     
20     .indicator {
21       left: 150px;
22       top: 0;
23       background-color: red;
24     }
25     #container.moved .software {
26       left: 300px;
27     }
28
29     #container.moved .hardware {
30       -webkit-transform: translateX(300px);
31     }
32
33     .hardware {
34       -webkit-transform-style: preserve-3d;
35       -webkit-transition: -webkit-transform 300ms linear;
36       -webkit-transform: translateX(0);
37     }
38
39    </style>
40    <script src="resources/transition-test-helpers.js"></script>
41    <script type="text/javascript">
42
43     function testEnded()
44     {
45       var testDiv = document.getElementById('tester');
46       testDiv.style.webkitTransitionProperty = 'none';
47       testDiv.style.webkitTransitionDuration = '0';
48
49       testDiv.style.webkitTransform = 'translateX(150px)';
50       if (window.testRunner)
51         testRunner.notifyDone();
52     }
53     
54     function startTest()
55     {
56       if (window.testRunner)
57         testRunner.waitUntilDone();
58
59       document.getElementById('tester').addEventListener('webkitTransitionEnd', testEnded, false);
60       document.getElementById('container').className = 'moved';
61     }
62     
63     window.addEventListener('load', startTest, false);
64    </script>
65 </head>
66 <body>
67
68   <p>At the end of the test the green box should obscure the red box.</p>
69   <div id="container">
70     <div class="indicator box"></div>
71     <div id="tester" class="hardware box"></div>
72   </div>
73
74   <div id="result">
75   </div>
76
77 </body>
78 </html>