Bug 1275142 - Don't create animate SVG along with its parent element at the same time. r?birtles
If we create an animate SVG along with its parent, in rare cases,
the animation does not start in the first frame, i.e, it's the frame
that the animated element and its parent element are created. In such
cases, restyle for the animation is not observed in the first frame.
To avoid it, we need to create parent element in the first place,
then, append an animated element into the parent in the next frame.
MozReview-Commit-ID: 3GPDxX4cmkQ
--- a/layout/style/test/test_restyles_in_smil_animation.html
+++ b/layout/style/test/test_restyles_in_smil_animation.html
@@ -4,16 +4,22 @@
<title>Tests restyles in smil animation</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/SpawnTask.js"></script>
<script src="/tests/SimpleTest/paint_listener.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
</head>
<body>
+<div id="target-div">
+ <svg>
+ <rect id="svg-rect" width="100%" height="100%" fill="lime"/>
+ </svg>
+</div>
+
<script>
"use strict";
function waitForAnimationFrames(frameCount) {
return new Promise(function(resolve, reject) {
function handleFrame() {
if (--frameCount <= 0) {
resolve();
@@ -55,55 +61,43 @@ function ensureElementRemoval(aElement)
}
function waitForPaintFlushed() {
return new Promise(function(resolve) {
waitForAllPaintsFlushed(resolve);
});
}
-function addTestElement() {
- var div = document.createElement("div");
- var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
- div.appendChild(svg);
+SimpleTest.waitForExplicitFinish();
- var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
- rect.setAttribute("width", "100%");
- rect.setAttribute("height", "100%");
- rect.setAttribute("fill", "lime");
- svg.appendChild(rect);
+add_task(function* smil_is_in_display_none_subtree() {
+ yield waitForPaintFlushed();
var animate =
document.createElementNS("http://www.w3.org/2000/svg", "animate");
animate.setAttribute("attributeType", "XML");
animate.setAttribute("attributeName", "fill");
animate.setAttribute("values", "red;lime");
animate.setAttribute("dur", "1s");
animate.setAttribute("repeatCount", "indefinite");
- rect.appendChild(animate);
+ document.getElementById("svg-rect").appendChild(animate);
- document.body.appendChild(div);
- return div;
-}
-
-SimpleTest.waitForExplicitFinish();
-
-add_task(function* smil_is_in_display_none_subtree() {
- var div = addTestElement();
yield waitForPaintFlushed();
var displayMarkers = yield observeStyling(5);
is(displayMarkers.length, 5, "should restyle in every frame");
+ var div = document.getElementById("target-div");
+
div.style.display = "none";
getComputedStyle(div).display;
var displayNoneMarkers = yield observeStyling(5);
is(displayNoneMarkers.length, 0, "should never restyle if display:none");
div.style.display = "";
getComputedStyle(div).display;
var displayAgainMarkers = yield observeStyling(5);
is(displayAgainMarkers.length, 5, "should restyle again");
- yield ensureElementRemoval(div);
+ yield ensureElementRemoval(animate);
});
</script>
</body>