Bug 962594 - Add tests. r=heycam

This commit is contained in:
Kartikaya Gupta 2015-03-15 20:28:52 -04:00
parent f64fcefe30
commit f735ff5b59
2 changed files with 104 additions and 0 deletions

View File

@ -1969,6 +1969,48 @@ is(cs.getPropertyValue("left"), "0px", "left is not animating");
is(cs.getPropertyValue("top"), "50px", "top is animating");
done_div();
/*
* Bug 962594 - Turn off CSS animations when the element is display:none, or
* is in a display:none subtree.
*/
// Helper function for the two tests below
function testDisplayNoneTurnsOffAnimations(aTestName, aElementToDisplayNone) {
is(cs.getPropertyValue("margin-right"), "0px",
aTestName + "margin-right at 0s");
advance_clock(1000);
is(cs.getPropertyValue("margin-right"), "10px",
aTestName + "margin-right at 1s");
aElementToDisplayNone.style.display = "none";
is(cs.getPropertyValue("margin-right"), "0px",
aTestName + "margin-right after display:none");
advance_clock(1000);
is(cs.getPropertyValue("margin-right"), "0px",
aTestName + "margin-right 1s after display:none");
aElementToDisplayNone.style.display = "";
is(cs.getPropertyValue("margin-right"), "0px",
aTestName + "margin-right after display:block");
advance_clock(1000);
is(cs.getPropertyValue("margin-right"), "10px",
aTestName + "margin-right 1s after display:block");
}
// Check that it works if the animated element itself becomes display:none
new_div("animation: anim2 linear 10s");
testDisplayNoneTurnsOffAnimations("AnimatedElement ", div);
done_div();
// Check that it works if an ancestor of the animated element becomes display:none
new_div("animation: anim2 linear 10s");
var ancestor = document.createElement("div");
div.parentNode.insertBefore(ancestor, div);
ancestor.appendChild(div);
testDisplayNoneTurnsOffAnimations("AncestorElement ", ancestor);
ancestor.parentNode.insertBefore(div, ancestor);
ancestor.parentNode.removeChild(ancestor);
done_div();
SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
</script>

View File

@ -2067,5 +2067,67 @@ addAsyncAnimTest(function *() {
visitedLink.remove();
});
/*
* Bug 962594 - Turn off CSS animations when the element is display:none, or
* is in a display:none subtree.
*/
// Check that it works if the animated element itself becomes display:none
addAsyncAnimTest(function *() {
new_div("animation: anim4 linear 10s");
yield waitForPaintsFlushed();
omta_is("transform", { ty: 0 }, RunningOn.Compositor,
"transform animation is running on compositor");
advance_clock(1000);
omta_is("transform", { ty: 10 }, RunningOn.Compositor,
"transform animation is at 1s on compositor");
gDiv.style.display = "none";
yield waitForPaintsFlushed();
omta_is("transform", "none", RunningOn.MainThread,
"transform animation stopped on compositor");
advance_clock(1000);
omta_is("transform", "none", RunningOn.MainThread,
"transform animation 1s after display:none");
gDiv.style.display = "";
yield waitForPaintsFlushed();
omta_is("transform", { ty: 0 }, RunningOn.Compositor,
"transform animation after display:block");
advance_clock(1000);
omta_is("transform", { ty: 10 }, RunningOn.Compositor,
"transform animation 1s after display:block");
done_div();
});
// Check that it works if an ancestor of the animated element becomes display:none
addAsyncAnimTest(function *() {
new_div("animation: anim4 linear 10s");
var ancestor = document.createElement("div");
gDiv.parentNode.insertBefore(ancestor, gDiv);
ancestor.appendChild(gDiv);
yield waitForPaintsFlushed();
omta_is("transform", { ty: 0 }, RunningOn.Compositor,
"transform animation is running on compositor");
advance_clock(1000);
omta_is("transform", { ty: 10 }, RunningOn.Compositor,
"transform animation is at 1s on compositor");
gDiv.style.display = "none";
yield waitForPaintsFlushed();
omta_is("transform", "none", RunningOn.MainThread,
"transform animation stopped on compositor");
advance_clock(1000);
omta_is("transform", "none", RunningOn.MainThread,
"transform animation 1s after display:none");
gDiv.style.display = "";
yield waitForPaintsFlushed();
omta_is("transform", { ty: 0 }, RunningOn.Compositor,
"transform animation after display:block");
advance_clock(1000);
omta_is("transform", { ty: 10 }, RunningOn.Compositor,
"transform animation 1s after display:block");
ancestor.parentNode.insertBefore(gDiv, ancestor);
ancestor.parentNode.removeChild(ancestor);
done_div();
});
</script>
</html>