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