pseudo-transition.html | Explore in Territory

<!DOCTYPE html>

<script src="../../resources/js-test.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.

function testTransition(id)
{
    var div = document.getElementById(id);
    div.className = 'transition';
    window.div = div;
    shouldBe('div.offsetWidth', '52');
    if (window.internals) {
        internals.pauseAnimations(1);
        shouldBeCloseTo('div.offsetWidth', 20, 1);
        computedTop = getPseudoComputedTop(id);
        shouldBeCloseTo('computedTop', 170, 1);
        internals.pauseAnimations(2);
        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() {
    testTransition('before');
    testTransition('after');
    if (window.internals)
        isSuccessfullyParsed();
    else
        setTimeout(isSuccessfullyParsed, 2000);
};
</script>
chromium/third_party/blink/web_tests/fast/css-generated-content/pseudo-transition.html
