<!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>