3a0c6c49a8c3f2514f76833836589d68e92cf717
[WebKit-https.git] / LayoutTests / fast / css-generated-content / pseudo-animation.html
1 <!DOCTYPE html>
2
3 <script src="../../resources/js-test-pre.js"></script>
4
5 <style>
6 @-webkit-keyframes example {
7   from {
8     width: 50px;
9     height: 50px;
10     top: 50px;
11   }
12   to {
13     width: 10px;
14     height: 10px;
15     top: 200px;
16   }
17 }
18
19 @keyframes example {
20   from {
21     width: 50px;
22     height: 50px;
23     top: 50px;
24   }
25   to {
26     width: 10px;
27     height: 10px;
28     top: 200px;
29   }
30 }
31
32 #after:after,
33 #before:before {
34     content: "";
35     display: block;
36     height: 50px;
37     width: 50px;
38     position: relative;
39 }
40
41 #after.animate:after,
42 #before.animate:before {
43     top: 200px;
44     width: 10px;
45     height: 10px;
46     -webkit-animation: example 2s;
47     -moz-animation: example 2s;
48     animation: example 2s;
49 }
50
51 #before,
52 #after {
53     display: inline-block;
54     border: 1px solid black;
55     background: red;
56 }
57
58 #before.animate,
59 #after.animate {
60     background: green;
61 }
62 </style>
63
64 <div id="before"></div>
65 <div id="after"></div>
66
67 <script>
68 description('Animations on :before and :after pseudo elements should run');
69
70 if (window.testRunner)
71     testRunner.dumpAsText();
72
73 function getPseudoComputedTop(id)
74 {
75     return Math.round(parseFloat(getComputedStyle(document.getElementById(id), ':' + id).top));
76 }
77
78 // FIXME: This test should be modified so subpixel doesn't cause off by one
79 // below and it no longer needs shouldBeCloseTo.
80
81 function testAnimation(id)
82 {
83     var div = document.getElementById(id);
84     div.className = 'animate';
85     window.div = div;
86     shouldBe('div.offsetWidth', '52');
87     if (window.internals) {
88         internals.pauseAnimationAtTimeOnPseudoElement('example', 1.0, div, id);
89         shouldBeCloseTo('div.offsetWidth', 20, 1);
90         computedTop = getPseudoComputedTop(id);
91         shouldBeCloseTo('computedTop', 170, 1);
92         internals.pauseAnimationAtTimeOnPseudoElement('example', 2.0, div, id);
93         shouldBeCloseTo('div.offsetWidth', 12, 1);
94         computedTop = getPseudoComputedTop(id);
95         shouldBeCloseTo('computedTop', 200, 1);
96     } else {
97         // This will be flaky, but it's a reasonable approximation for testing
98         // in a browser instead of DRT.
99         setTimeout(function() {
100             window.div = div;
101             shouldBeCloseTo('div.offsetWidth', 20, 1);
102             computedTop = getPseudoComputedTop(id);
103             shouldBeCloseTo('computedTop', 170, 1);
104         }, 1000);
105         setTimeout(function() {
106             window.div = div;
107             shouldBeCloseTo('div.offsetWidth', 12, 1);
108             computedTop = getPseudoComputedTop(id);
109             shouldBeCloseTo('computedTop', 200, 1);
110         }, 2000);
111     }
112 }
113
114 onload = function() {
115     testAnimation('before');
116     testAnimation('after');
117     if (window.internals)
118         isSuccessfullyParsed();
119     else
120         setTimeout(isSuccessfullyParsed, 2000);
121 };
122 </script>