120 lines
2.6 KiB
HTML
120 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
|
|
<style>
|
|
@-webkit-keyframes example {
|
|
from {
|
|
width: 50px;
|
|
height: 50px;
|
|
top: 50px;
|
|
}
|
|
to {
|
|
width: 10px;
|
|
height: 10px;
|
|
top: 200px;
|
|
}
|
|
}
|
|
|
|
@keyframes example {
|
|
from {
|
|
width: 50px;
|
|
height: 50px;
|
|
top: 50px;
|
|
}
|
|
to {
|
|
width: 10px;
|
|
height: 10px;
|
|
top: 200px;
|
|
}
|
|
}
|
|
|
|
#after:after,
|
|
#before:before {
|
|
content: "";
|
|
display: block;
|
|
height: 50px;
|
|
width: 50px;
|
|
position: relative;
|
|
}
|
|
|
|
#after.animate:after,
|
|
#before.animate:before {
|
|
top: 200px;
|
|
width: 10px;
|
|
height: 10px;
|
|
-webkit-animation: example 2s;
|
|
-moz-animation: example 2s;
|
|
animation: example 2s;
|
|
}
|
|
|
|
#before,
|
|
#after {
|
|
display: inline-block;
|
|
border: 1px solid black;
|
|
background: red;
|
|
}
|
|
|
|
#before.animate,
|
|
#after.animate {
|
|
background: green;
|
|
}
|
|
</style>
|
|
|
|
<div id="before"></div>
|
|
<div id="after"></div>
|
|
|
|
<script>
|
|
description('Animations on :before and :after pseudo elements should run');
|
|
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText();
|
|
|
|
function getPseudoComputedTop(id)
|
|
{
|
|
return Math.round(parseFloat(getComputedStyle(document.getElementById(id), ':' + id).top));
|
|
}
|
|
|
|
// FIXME: This test should be modified so subpixel doesn't cause off by one
|
|
// below and it no longer needs shouldBeCloseTo.
|
|
|
|
function pauseAnimationAtTimeOnPseudoElement(animationName, time, element, pseudoElement)
|
|
{
|
|
for (let animation of element.getAnimations({ subtree: true })) {
|
|
if (animation instanceof CSSAnimation && animation.animationName == animationName && animation.effect.target == element && animation.effect.pseudoElement == pseudoElement) {
|
|
animation.currentTime = time * 1000;
|
|
animation.pause();
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function testAnimation(id)
|
|
{
|
|
const pseudoElement = `::${id}`;
|
|
var div = document.getElementById(id);
|
|
div.className = 'animate';
|
|
window.div = div;
|
|
shouldBe('div.offsetWidth', '52');
|
|
|
|
pauseAnimationAtTimeOnPseudoElement('example', 1.0, div, pseudoElement);
|
|
shouldBeCloseTo('div.offsetWidth', 20, 1);
|
|
computedTop = getPseudoComputedTop(id);
|
|
shouldBeCloseTo('computedTop', 170, 1);
|
|
pauseAnimationAtTimeOnPseudoElement('example', 2.0, div, pseudoElement);
|
|
shouldBeCloseTo('div.offsetWidth', 12, 1);
|
|
computedTop = getPseudoComputedTop(id);
|
|
shouldBeCloseTo('computedTop', 200, 1);
|
|
}
|
|
|
|
onload = function() {
|
|
testAnimation('before');
|
|
testAnimation('after');
|
|
if (window.internals)
|
|
isSuccessfullyParsed();
|
|
else
|
|
setTimeout(isSuccessfullyParsed, 2000);
|
|
};
|
|
</script>
|