src/third_party/WebKit/LayoutTests/fast/dom/shadow/shadowroot-keyframes.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <style>
   5 @-webkit-keyframes anim {
   6     from {
   7         background-color: red;
   8     }
   9     to {
  10         background-color: green;
  11     }
  12 }
  13 </style>
  14 <script src="../../../resources/js-test.js"></script>
  15 </head>
  16 <body>
  17   <div id="d1"></div>
  18   <div id="d2"></div>
  19   <div id="result"></div>
  20 <script>
  21 if (window.testRunner)
  22     testRunner.waitUntilDone();
  23
  24 function getBackgroundColor(element) {
  25     return window.getComputedStyle(element).backgroundColor;
  26 }
  27
  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>';
  34
  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>';
  40
  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();
  46 }, 1000);
  47 </script>
  48 </body>
  49 </html>