pseudo-animation-display.html | Explore in Territory

<!DOCTYPE html>
<style>
#target {
    width: 100px;
    height: 100px;
    background-color: red;
}
#target:after {
    display: block;
    position: relative;
    content: "";
    width: 50px;
    height: 50px;
    background-color: blue;    
}
#target.animated:after {
    animation: anim 1ms forwards;
    animation: anim 1ms forwards;
}
@keyframes anim {
    from {
        left: 0px;
        display: block;
    }
    to {
        left: 100px;
        display: none;
    }
}
@keyframes anim {
    from {
        left: 0px;
        display: block;
    }
    to {
        left: 100px;
        display: none;
    }
}
</style>

<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

function go() {
    var target = document.getElementById('target');
    target.addEventListener('animationend', completeTest);
    target.classList.add('animated');
}

function test(style, property, expected) {
    var pass = style[property] === expected;
    document.getElementById('log').innerHTML +=
        (pass ? 'PASS' : 'FAIL') + ': ' + property + ' was ' + (pass ? '' : 'not ') + expected + '<br>';
}

function completeTest(message) {
    var style = getComputedStyle(document.getElementById('target'), ':after');
    test(style, 'left', '100px');
    test(style, 'display', 'block');
    if (window.testRunner) {
        testRunner.notifyDone();
    }
}
</script>

<body onload="go()">
<div>
  Tests that an attempt to animate the display property of a pseudo element is
  ignored, and that the animation proceeds as expected.
</div>
<div id="target"></div>
<div id="log"></div>
</body>
chromium/third_party/blink/web_tests/fast/css-generated-content/pseudo-animation-display.html
