shadowhost-keyframes.html | Explore in Territory

<!doctype html>
<html>
<head>
<style>
@keyframes anim {
    from {
        background-color: red;
    }
    to {
        background-color: green;
    }
}
</style>
<script src="../../../resources/js-test.js"></script>
</head>
<body>
  <div id="host"></div>
  <div id="result"></div>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

function getColor(element) {
    return window.getComputedStyle(element).color;
}

description('Test if @keyframes works for shadow host when using :host. i.e. crbug.com/332577');

var host = document.getElementById('host');
var sr = host.attachShadow({mode: 'open'});
sr.innerHTML = '<style>@keyframes anim {'
    + 'from { color: red; } to { color: green; } }'
    + ':host { animation: anim 0.5s both; color: red; }</style>'
    + 'I should become green';

window.setTimeout(function() {
    shouldBe("getColor(document.getElementById('host'))", '"rgb(0, 128, 0)"');
    if (window.testRunner)
        testRunner.notifyDone();
}, 1000);
</script>
</body>
</html>

chromium/third_party/blink/web_tests/fast/dom/shadow/shadowhost-keyframes.html