[Web Animations] Turn Web Animations with CSS integration on for test runners
[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 pauseAnimationAtTimeOnPseudoElement(animationName, time, element, pseudoId)
82 {
83     const pseudoElement = internals.pseudoElement(element, pseudoId);
84     if (!pseudoElement) {
85         console.log("Failed to find pseudo element");
86         return;
87     }
88
89     const animations = pseudoElement.getAnimations();
90     for (let animation of animations) {
91         if (animation instanceof CSSAnimation && animation.animationName == animationName && animation.effect.getKeyframes().length) {
92             animation.currentTime = time * 1000;
93             animation.pause();
94             return true;
95         }
96     }
97     return false;
98 }
99
100 function testAnimation(id)
101 {
102     var div = document.getElementById(id);
103     div.className = 'animate';
104     window.div = div;
105     shouldBe('div.offsetWidth', '52');
106     if (window.internals) {
107         pauseAnimationAtTimeOnPseudoElement('example', 1.0, div, id);
108         shouldBeCloseTo('div.offsetWidth', 20, 1);
109         computedTop = getPseudoComputedTop(id);
110         shouldBeCloseTo('computedTop', 170, 1);
111         pauseAnimationAtTimeOnPseudoElement('example', 2.0, div, id);
112         shouldBeCloseTo('div.offsetWidth', 12, 1);
113         computedTop = getPseudoComputedTop(id);
114         shouldBeCloseTo('computedTop', 200, 1);
115     } else {
116         // This will be flaky, but it's a reasonable approximation for testing
117         // in a browser instead of DRT.
118         setTimeout(function() {
119             window.div = div;
120             shouldBeCloseTo('div.offsetWidth', 20, 1);
121             computedTop = getPseudoComputedTop(id);
122             shouldBeCloseTo('computedTop', 170, 1);
123         }, 1000);
124         setTimeout(function() {
125             window.div = div;
126             shouldBeCloseTo('div.offsetWidth', 12, 1);
127             computedTop = getPseudoComputedTop(id);
128             shouldBeCloseTo('computedTop', 200, 1);
129         }, 2000);
130     }
131 }
132
133 onload = function() {
134     testAnimation('before');
135     testAnimation('after');
136     if (window.internals)
137         isSuccessfullyParsed();
138     else
139         setTimeout(isSuccessfullyParsed, 2000);
140 };
141 </script>