<!DOCTYPE html>
<body>
<script src="../../resources/js-test-pre.js"></script>
<div id="visibleElement">Visible</div>
<div id="invisibleElement1" style="display: none">Invisible</div>
<div id="invisibleElement2" style="display: none">Invisible</div>
<script>
description("Tests that a repeating timer changing the style of both visible and display:none elements does not throttled.");
jsTestIsAsync = true;

var iterationCount = 0;
var timeoutId;
var visibleElement = document.getElementById("visibleElement");
var invisibleElement1 = document.getElementById("visibleElement");
var invisibleElement2 = document.getElementById("invisibleElement2");
var wasThrottled = false;

function timerCallback()
{
  ++iterationCount;
  // Interact with the style of the elements.
  invisibleElement1.style["left"] = "" + iterationCount + "px";
  visibleElement.style["left"] = "" + iterationCount + "px";
  invisibleElement2.style["left"] = "" + iterationCount + "px";

  // 5 iterations should suffice to throttle the timer.
  if (iterationCount == 5) {
    shouldBeFalse("internals.isTimerThrottled(timeoutId)");
    clearInterval(timeoutId);
    finishJSTest();
  }
}

timeoutId = setInterval(timerCallback, 10);
debug("The timer should initially not be throttled.");
shouldBeFalse("internals.isTimerThrottled(timeoutId)");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>