3 <script src=
"../../resources/js-test.js"></script>
14 -webkit-transition: width
2s, top
2s;
15 -moz-transition: width
2s, top
2s;
16 transition: width
2s, top
2s;
19 #before.transition:before,
20 #after.transition:after {
28 display: inline-block;
29 border:
1px solid black;
39 <div id=
"before"></div>
40 <div id=
"after"></div>
43 description('Transitions on :before and :after pseudo elements should run');
45 if (window
.testRunner
)
46 testRunner
.dumpAsText();
48 function getPseudoComputedTop(id
)
50 return Math
.round(parseFloat(getComputedStyle(document
.getElementById(id
), ':' + id
).top
));
53 // FIXME: This test should be modified so subpixel doesn't cause off by one
54 // below and it no longer needs shouldBeCloseTo.
56 function testTransition(id
)
58 var div
= document
.getElementById(id
);
59 div
.className
= 'transition';
61 shouldBe('div.offsetWidth', '52');
62 if (window
.internals
) {
63 internals
.pauseAnimations(1);
64 shouldBeCloseTo('div.offsetWidth', 20, 1);
65 computedTop
= getPseudoComputedTop(id
);
66 shouldBeCloseTo('computedTop', 170, 1);
67 internals
.pauseAnimations(2);
68 shouldBeCloseTo('div.offsetWidth', 12, 1);
69 computedTop
= getPseudoComputedTop(id
);
70 shouldBeCloseTo('computedTop', 200, 1);
72 // This will be flaky, but it's a reasonable approximation for testing
73 // in a browser instead of DRT.
74 setTimeout(function() {
76 shouldBeCloseTo('div.offsetWidth', 20, 1);
77 computedTop
= getPseudoComputedTop(id
);
78 shouldBeCloseTo('computedTop', 170, 1);
80 setTimeout(function() {
82 shouldBeCloseTo('div.offsetWidth', 12, 1);
83 computedTop
= getPseudoComputedTop(id
);
84 shouldBeCloseTo('computedTop', 200, 1);
90 testTransition('before');
91 testTransition('after');
93 isSuccessfullyParsed();
95 setTimeout(isSuccessfullyParsed
, 2000);