third_party/WebKit/LayoutTests/animations/display-none-cancel-computedstyle.html

   1 <!DOCTYPE html>
   2 <script src="../resources/js-test.js"></script>
   3 <style>
   4 #child {
   5     width: 50px;
   6     height: 50px;
   7     background: red;
   8     border: 1px solid red;
   9 }
  10
  11 .animate {
  12     animation: flash 0.2s infinite;
  13 }
  14
  15 @keyframes flash {
  16     0% {
  17         opacity: 1;
  18     }
  19     100% {
  20         opacity: 0;
  21     }
  22 }
  23 </style>
  24 <div id="container">
  25     <div id="child"></div>
  26 </div>
  27 <script>
  28 description("Canceling an animation should not leave dirty bits on display none elements.");
  29
  30 window.jsTestIsAsync = true;
  31 if (window.testRunner) {
  32     testRunner.waitUntilDone();
  33     testRunner.dumpAsText();
  34 }
  35
  36 var child = document.getElementById("child");
  37 var container = document.getElementById("container");
  38
  39 child.addEventListener("animationstart", function(event) {
  40     container.style.display = "none";
  41     child.style.borderWidth = "10px";
  42     shouldBeEqualToString("getComputedStyle(child).borderWidth", "10px");
  43     child.style.borderWidth = "5px";
  44     shouldBeEqualToString("getComputedStyle(child).borderWidth", "5px");
  45     finishJSTest();
  46 });
  47
  48 child.classList.add("animate");
  49 </script>
  50