<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test-pre.js"></script>
<svg width="300px" height="100px">
    <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
    <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
        <animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" />
    </circle>
</svg>
<script>
description("Tests that SVG animations are properly paused when the page becomes hidden.");
jsTestIsAsync = true;

var expectedState = "hidden";

window.onload = function() {
    shouldBeFalse("internals.areSVGAnimationsPaused");
    document.addEventListener("visibilitychange", function() {
        if (expectedState == "hidden") {
            debug("* Page is now hidden");
            shouldBeTrue("document.hidden");
            setTimeout(function() {
                shouldBeTrue("internals.areSVGAnimationsPaused");
                expectedState = "visible";
                testRunner.setPageVisibility("visible");
            }, 0);
        } else {
            debug("* Page is now visible");
            shouldBeFalse("document.hidden");
            setTimeout(function() {
                shouldBeFalse("internals.areSVGAnimationsPaused");
                finishJSTest();
            }, 0);
        }
    });
    if (window.testRunner)
        testRunner.setPageVisibility("hidden");
}
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>