114 lines
3.3 KiB
HTML
114 lines
3.3 KiB
HTML
<!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>
|