| <!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").createShadowRoot(); |
| 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").createShadowRoot(); |
| 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> |
