pseudo-animation-before-onload.html

<!DOCTYPE html>

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

<style>
@keyframes example {
  from { width: 50px; height: 50px; }
  to { width: 10px; height: 10px; }
}

@keyframes example {
  from { width: 50px; height: 50px; }
  to { width: 10px; height: 10px; }
}

.after:after,
.before:before {
    content: "";
    display: block;
    position: relative;
    background: green;
    width: 10px;
    height: 10px;
    animation: example 2s;
    -moz-animation: example 2s;
    animation: example 2s;
}

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

</style>

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

<script>
description('Animations on :before and :after pseudo elements should run when applied before onload.');

if (window.testRunner)
    testRunner.dumpAsText();

// FIXME: This test should be modified so subpixel doesn't cause off by one
// below and it no longer needs shouldBeCloseTo.

function testAnimations()
{
    if (window.internals) {
        internals.pauseAnimations(1);
        var div = document.getElementById('before');
        window.div = div;
        shouldBeCloseTo('div.offsetWidth', 20, 1);
        var div = document.getElementById('after');
        window.div = div;
        shouldBeCloseTo('div.offsetWidth', 20, 1);

        internals.pauseAnimations(2);
        var div = document.getElementById('before');
        window.div = div;
        shouldBeCloseTo('div.offsetWidth', 12, 1);
        var div = document.getElementById('after');
        window.div = div;
        shouldBeCloseTo('div.offsetWidth', 12, 1);
    } else {
        // This will be flaky, but it's a reasonable approximation for testing
        // in a browser instead of DRT.
        setTimeout(function() {
            var div = document.getElementById('before');
            window.div = div;
            shouldBeCloseTo('div.offsetWidth', 20, 1);
            var div = document.getElementById('after');
            window.div = div;
            shouldBeCloseTo('div.offsetWidth', 20, 1);
        }, 1000);
        setTimeout(function() {
            var div = document.getElementById('before');
            window.div = div;
            shouldBeCloseTo('div.offsetWidth', 12, 1);
            var div = document.getElementById('after');
            window.div = div;
            shouldBeCloseTo('div.offsetWidth', 12, 1);
        }, 2000);
    }
}

onload = testAnimations;

</script>
chromium/Nonepseudo-animation-before-onload.html
