<!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>