Bug 1275142 - Don't create animate SVG along with its parent element at the same time. r=birtles
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Mon, 27 Jun 2016 10:57:27 +0900
changeset 342711 d347db00f665a7e5895b73f1bd1e8c631ad326a1
parent 342710 4ce9b79c3103be8847880f305a48ca7ff03a9d58
child 342712 49f62b49f9aa981f7ae656d53c789a8a1524414d
push id6389
push userraliiev@mozilla.com
push dateMon, 19 Sep 2016 13:38:22 +0000
treeherdermozilla-beta@01d67bfe6c81 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles
bugs1275142
milestone50.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
layout/style/test/test_restyles_in_smil_animation.html
--- 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>