<!DOCTYPE html>
<!--
 | Test case which ensures that an animation assigned to an element whose
 | ancestor has display: none will wait until display becomes non-none to begin,
 | and that specifically re-calculating the computed style on the animating
 | element does not change anything.
 -->
<html>
<head>
  <style>
    @keyframes testAnimation{
      0% { transform: translate(0, 0); }
      50% { transform: translate(100px,0); }
      100% { transform: translate(100px,100px); }
    }
    #block {
      width: 100px;
      height: 100px;
      font-size: 30px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="outer-container">
    <div id="inner-container">
      <div id="block"></div>
    </div>
  </div>

  <script>
    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    var blockDiv = document.getElementById('block');
    var containerDiv = document.getElementById('outer-container');

    window.addEventListener('load', function() {
      if (window.testRunner) {
        // Run the transition to the half-way point.
        window.testRunner.AdvanceClockByMs(500);
        window.testRunner.DoNonMeasuredLayout();
      }

      containerDiv.style.display = "none";
      blockDiv.style.animation = "testAnimation 1s forwards";

      if (window.testRunner) {
        window.testRunner.AdvanceClockByMs(500);
      }

      // Call getComputedStyle() to cause a targeted computed style update.
      window.getComputedStyle(blockDiv);

      containerDiv.style.display = "block";

      if (window.testRunner) {
        window.testRunner.DoNonMeasuredLayout();

        window.testRunner.AdvanceClockByMs(500);
        window.testRunner.notifyDone();
      }
    });
  </script>

</body>
</html>