<!DOCTYPE html>

<script src="../../resources/js-test-pre.js"></script>

<style>
#before:before,
#after:after {
    content: "";
    display: block;
    height: 50px;
    width: 50px;
    top: 50px;
    position: relative;
    -webkit-transition: width 2s, top 2s;
    -moz-transition: width 2s, top 2s;
    transition: width 2s, top 2s;
}

#before.transition:before,
#after.transition:after {
    top: 200px;
    height: 10px;
    width: 10px;
}

#before,
#after {
    display: inline-block;
    border: 1px solid black;
    background: red;
}

#after.transition,
#before.transition {
    background: green;
}
</style>

<div id="before"></div>
<div id="after"></div>

<script>
description('Transitions 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.

const prefix = "-webkit-";
const propertiesRequiringPrefix = ["-webkit-text-stroke-color", "-webkit-text-fill-color"];

function pauseTransitionAtTimeOnPseudoElement(transitionProperty, time, element, pseudoId)
{
    const pseudoElement = internals.pseudoElement(element, pseudoId);
    if (!pseudoElement) {
        console.log("Failed to find pseudo element");
        return;
    }

    if (transitionProperty.startsWith(prefix) && !propertiesRequiringPrefix.includes(transitionProperty))
        transitionProperty = transitionProperty.substr(prefix.length);

    // Otherwise, use the Web Animations API.
    const animations = pseudoElement.getAnimations();
    for (let animation of animations) {
        if (animation instanceof CSSTransition && animation.transitionProperty == transitionProperty) {
            animation.currentTime = time * 1000;
            animation.pause();
            return true;
        }
    }
    console.log(`A transition for property ${transitionProperty} could not be found`);
    return false;
}

function testTransition(id)
{
    var div = document.getElementById(id);
    div.className = 'transition';
    window.div = div;
    shouldBe('div.offsetWidth', '52');
    if (window.internals) {
        pauseTransitionAtTimeOnPseudoElement('width', 1.0, div, id);
        shouldBeCloseTo('div.offsetWidth', 20, 1);
        pauseTransitionAtTimeOnPseudoElement('top', 1.0, div, id);
        computedTop = getPseudoComputedTop(id);
        shouldBeCloseTo('computedTop', 170, 1);
        pauseTransitionAtTimeOnPseudoElement('width', 2.0, div, id);
        shouldBeCloseTo('div.offsetWidth', 12, 1);
        pauseTransitionAtTimeOnPseudoElement('top', 2.0, div, id);
        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() {
    testTransition('before');
    testTransition('after');
    if (window.internals)
        isSuccessfullyParsed();
    else
        setTimeout(isSuccessfullyParsed, 2000);
};
</script>