5 @-webkit-keyframes anim {
10 background-color: green;
14 <script src="../../../resources/js-test.js"></script>
19 <div id="result"></div>
21 if (window.testRunner)
22 testRunner.waitUntilDone();
24 function getBackgroundColor(element) {
25 return window.getComputedStyle(element).backgroundColor;
28 var shadowRootWithKeyframe = document.getElementById("d1").createShadowRoot();
29 shadowRootWithKeyframe.innerHTML = '<style>@-webkit-keyframes "anim" {' +
30 'from { background-color:red; } to { background-color: blue; } }' +
31 '#box { height: 100px; width: 100px; background: red; ' +
32 '-webkit-animation: "anim" 0.5s both; }</style>' +
33 '<div id="box"></div>';
35 var shadowRootWithoutKeyframe = document.getElementById("d2").createShadowRoot();
36 shadowRootWithoutKeyframe.innerHTML = '<style>' +
37 '#box { height: 100px; width: 100px; background: red; ' +
38 '-webkit-animation: "anim" 0.5s both; }</style>' +
39 '<div id="box"></div>';
41 window.setTimeout(function() {
42 shouldBe("getBackgroundColor(shadowRootWithKeyframe.getElementById('box'))", '"rgb(0, 0, 255)"');
43 shouldBe("getBackgroundColor(shadowRootWithoutKeyframe.getElementById('box'))", '"rgb(255, 0, 0)"');
44 if (window.testRunner)
45 testRunner.notifyDone();