1 files changed, 113 insertions, 0 deletions
diff --git a/layout/style/test/test_restyles_in_smil_animation.html b/layout/style/test/test_restyles_in_smil_animation.html
new file mode 100644
index 000000000..8e18da053
--- /dev/null
+++ b/layout/style/test/test_restyles_in_smil_animation.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<head>
+<meta charset=utf-8>
+<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();
+      } else {
+        window.requestAnimationFrame(handleFrame); // wait another frame
+      }
+    }
+    window.requestAnimationFrame(handleFrame);
+  });
+}
+
+function observeStyling(frameCount) {
+  var Ci = SpecialPowers.Ci;
+  var docShell =
+    SpecialPowers.wrap(window).QueryInterface(Ci.nsIInterfaceRequestor)
+                              .getInterface(Ci.nsIWebNavigation)
+                              .QueryInterface(Ci.nsIDocShell);
+
+  docShell.recordProfileTimelineMarkers = true;
+  docShell.popProfileTimelineMarkers();
+
+  return new Promise(function(resolve) {
+    return waitForAnimationFrames(frameCount).then(function() {
+      var markers = docShell.popProfileTimelineMarkers();
+      docShell.recordProfileTimelineMarkers = false;
+      var stylingMarkers = markers.filter(function(marker, index) {
+        return marker.restyleHint == "eRestyle_SVGAttrAnimations";
+      });
+      resolve(stylingMarkers);
+    });
+  });
+}
+
+function ensureElementRemoval(aElement) {
+  return new Promise(function(resolve) {
+    aElement.remove();
+    waitForAllPaintsFlushed(resolve);
+  });
+}
+
+function waitForPaintFlushed() {
+  return new Promise(function(resolve) {
+    waitForAllPaintsFlushed(resolve);
+  });
+}
+
+SimpleTest.waitForExplicitFinish();
+
+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");
+  document.getElementById("svg-rect").appendChild(animate);
+
+  yield waitForPaintFlushed();
+
+  var displayMarkers = yield observeStyling(5);
+  // FIXME: Bug 866411: SMIL animations sometimes skip restyles when the target
+  // element is newly associated with an nsIFrame.
+  ok(displayMarkers.length == 5 || displayMarkers.length == 4,
+     "should restyle in most frames");
+
+  var div = document.getElementById("target-div");
+
+  div.style.display = "none";
+  getComputedStyle(div).display;
+  yield waitForPaintFlushed();
+
+  var displayNoneMarkers = yield observeStyling(5);
+  is(displayNoneMarkers.length, 0, "should never restyle if display:none");
+
+  div.style.display = "";
+  getComputedStyle(div).display;
+  yield waitForPaintFlushed();
+
+  var displayAgainMarkers = yield observeStyling(5);
+  // FIXME: Bug 866411: SMIL animations sometimes skip restyles when the target
+  // element is newly associated with an nsIFrame.
+  ok(displayMarkers.length == 5 || displayMarkers.length == 4,
+     "should restyle again");
+
+  yield ensureElementRemoval(animate);
+});
+</script>
+</body>