<!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="d1"></div>
  <div id="d2"></div>
  <div id="result"></div>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

function getBackgroundColor(element) {
    return window.getComputedStyle(element).backgroundColor;
}

var shadowRootWithKeyframe = document.getElementById("d1").attachShadow({mode: 'open'});
shadowRootWithKeyframe.innerHTML = '<style>@keyframes anim {' +
    'from { background-color:red; } to { background-color: blue; } }' +
    '#box { height: 100px; width: 100px; background: red; ' +
    'animation: anim 0.5s both; }</style>' +
    '<div id="box"></div>';

var shadowRootWithoutKeyframe = document.getElementById("d2").attachShadow({mode: 'open'});
shadowRootWithoutKeyframe.innerHTML = '<style>' +
    '#box { height: 100px; width: 100px; background: red; ' +
    'animation: anim 0.5s both; }</style>' +
    '<div id="box"></div>';

window.setTimeout(function() {
    shouldBe("getBackgroundColor(shadowRootWithKeyframe.getElementById('box'))", '"rgb(0, 0, 255)"');
    shouldBe("getBackgroundColor(shadowRootWithoutKeyframe.getElementById('box'))", '"rgb(255, 0, 0)"');
    if (window.testRunner)
        testRunner.notifyDone();
}, 1000);
</script>
</body>
</html>