<!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, pseudoId)
{
    const pseudoElement = internals.pseudoElement(element, pseudoId);
    if (!pseudoElement) {
        console.log("Failed to find pseudo element");
        return;
    }

    const animations = pseudoElement.getAnimations();
    for (let animation of animations) {
        if (animation instanceof CSSAnimation && animation.animationName == animationName && animation.effect.getKeyframes().length) {
            animation.currentTime = time * 1000;
            animation.pause();
            return true;
        }
    }
    return false;
}

function testAnimation(id)
{
    var div = document.getElementById(id);
    div.className = 'animate';
    window.div = div;
    shouldBe('div.offsetWidth', '52');
    if (window.internals) {
        pauseAnimationAtTimeOnPseudoElement('example', 1.0, div, id);
        shouldBeCloseTo('div.offsetWidth', 20, 1);
        computedTop = getPseudoComputedTop(id);
        shouldBeCloseTo('computedTop', 170, 1);
        pauseAnimationAtTimeOnPseudoElement('example', 2.0, div, id);
        shouldBeCloseTo('div.offsetWidth', 12, 1);
        computedTop = getPseudoComputedTop(id);
        shouldBeCloseTo('computedTop', 200, 1);
    } else {
        // This will be flaky, but it's a reasonable approximation for testing
        // in a browser instead of DRT.
        setTimeout(function() {
            window.div = div;
            shouldBeCloseTo('div.offsetWidth', 20, 1);
            computedTop = getPseudoComputedTop(id);
            shouldBeCloseTo('computedTop', 170, 1);
        }, 1000);
        setTimeout(function() {
            window.div = div;
            shouldBeCloseTo('div.offsetWidth', 12, 1);
            computedTop = getPseudoComputedTop(id);
            shouldBeCloseTo('computedTop', 200, 1);
        }, 2000);
    }
}

onload = function() {
    testAnimation('before');
    testAnimation('after');
    if (window.internals)
        isSuccessfullyParsed();
    else
        setTimeout(isSuccessfullyParsed, 2000);
};
</script>