Bug 1209405 - Part 6: Add restyle test for SMIL animation. r=hiro
MozReview-Commit-ID: 2nOxiujnQgv
--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -236,16 +236,17 @@ skip-if = (toolkit == 'gonk' && debug) |
[test_property_syntax_errors.html]
skip-if = (toolkit == 'gonk' && debug) # Bug 1186224
[test_pseudoelement_state.html]
skip-if = (toolkit == 'gonk' && debug) #debug-only failure
[test_pseudoelement_parsing.html]
[test_redundant_font_download.html]
support-files = redundant_font_download.sjs
[test_rem_unit.html]
+[test_restyles_in_smil_animation.html]
[test_root_node_display.html]
[test_rule_insertion.html]
skip-if = (buildapp == 'b2g' && (toolkit != 'gonk' || debug)) # b2g-debug(monospace and serif text have sufficiently different widths) b2g-desktop(monospace and serif text have sufficiently different widths)
[test_rule_serialization.html]
[test_rules_out_of_sheets.html]
[test_selectors.html]
skip-if = (toolkit == 'gonk' && debug) || toolkit == 'android' #bug 775227 #debug-only failure; timed out
[test_selectors_on_anonymous_content.html]
new file mode 100644
--- /dev/null
+++ b/layout/style/test/test_restyles_in_smil_animation.html
@@ -0,0 +1,109 @@
+<!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>
+
+<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);
+ });
+}
+
+function addTestElement() {
+ var div = document.createElement("div");
+ var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+ div.appendChild(svg);
+
+ 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);
+
+ 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.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");
+
+ 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);
+});
+</script>
+</body>