Source code
Revision control
Copy as Markdown
Other Tools
// This file expects imgutils.js to be loaded as well.
/* import-globals-from imgutils.js */
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
var currentTest;
var gIsRefImageLoaded = false;
const gShouldOutputDebugInfo = false;
function pollForSuccess() {
if (!currentTest.isTestFinished) {
if (
!currentTest.reusingReferenceImage ||
(currentTest.reusingReferenceImage && gIsRefImageLoaded)
) {
currentTest.checkImage();
}
setTimeout(pollForSuccess, currentTest.pollFreq);
}
}
function reuseImageCallback() {
gIsRefImageLoaded = true;
}
function failTest() {
if (currentTest.isTestFinished || currentTest.closeFunc) {
return;
}
ok(
false,
"timing out after " +
currentTest.timeout +
"ms. " +
"Animated image still doesn't look correct, after poll #" +
currentTest.pollCounter
);
currentTest.wereFailures = true;
if (currentTest.currentSnapshotDataURI) {
currentTest.outputDebugInfo(
"Snapshot #" + currentTest.pollCounter,
"snapNum" + currentTest.pollCounter,
currentTest.currentSnapshotDataURI
);
}
currentTest.enableDisplay(
document.getElementById(currentTest.debugElementId)
);
currentTest.cleanUpAndFinish();
}
/**
* Create a new AnimationTest object.
*
* @param pollFreq The amount of time (in ms) to wait between consecutive
* snapshots if the reference image and the test image don't match.
* @param timeout The total amount of time (in ms) to wait before declaring the
* test as failed.
* @param referenceElementId The id attribute of the reference image element, or
* the source of the image to change to, once the reference snapshot has
* been successfully taken. This latter option could be used if you don't
* want the image to become invisible at any time during the test.
* @param imageElementId The id attribute of the test image element.
* @param debugElementId The id attribute of the div where links should be
* appended if the test fails.
* @param cleanId The id attribute of the div or element to use as the 'clean'
* test. This element is only enabled when we are testing to verify that
* the reference image has been loaded. It can be undefined.
* @param srcAttr The location of the source of the image, for preloading. This
* is usually not required, but it useful for preloading reference
* images.
* @param xulTest A boolean value indicating whether or not this is a XUL test
* (uses hidden=true/false rather than display: none to hide/show
* elements).
* @param closeFunc A function that should be called when this test is finished.
* If null, then cleanUpAndFinish() will be called. This can be used to
* chain tests together, so they are all finished exactly once.
* @returns {AnimationTest}
*/
function AnimationTest(
pollFreq,
timeout,
referenceElementId,
imageElementId,
debugElementId,
cleanId,
srcAttr,
xulTest,
closeFunc
) {
// We want to test the cold loading behavior, so clear cache in case an
// earlier test got our image in there already.
clearAllImageCaches();
this.wereFailures = false;
this.pollFreq = pollFreq;
this.timeout = timeout;
this.imageElementId = imageElementId;
this.referenceElementId = referenceElementId;
if (!document.getElementById(referenceElementId)) {
// In this case, we're assuming the user passed in a string that
// indicates the source of the image they want to change to,
// after the reference image has been taken.
this.reusingImageAsReference = true;
}
this.srcAttr = srcAttr;
this.debugElementId = debugElementId;
this.referenceSnapshot = ""; // value will be set in takeReferenceSnapshot()
this.pollCounter = 0;
this.isTestFinished = false;
this.numRefsTaken = 0;
this.blankWaitTime = 0;
this.cleanId = cleanId ? cleanId : "";
this.xulTest = xulTest ? xulTest : "";
this.closeFunc = closeFunc ? closeFunc : "";
}
AnimationTest.prototype.preloadImage = function () {
if (this.srcAttr) {
this.myImage = new Image();
this.myImage.onload = function () {
currentTest.continueTest();
};
this.myImage.src = this.srcAttr;
} else {
this.continueTest();
}
};
AnimationTest.prototype.outputDebugInfo = function (message, id, dataUri) {
if (!gShouldOutputDebugInfo) {
return;
}
var debugElement = document.getElementById(this.debugElementId);
var newDataUriElement = document.createElement("a");
newDataUriElement.setAttribute("id", id);
newDataUriElement.setAttribute("href", dataUri);
newDataUriElement.appendChild(document.createTextNode(message));
debugElement.appendChild(newDataUriElement);
var brElement = document.createElement("br");
debugElement.appendChild(brElement);
todo(false, "Debug (" + id + "): " + message + " " + dataUri);
};
AnimationTest.prototype.isFinished = function () {
return this.isTestFinished;
};
AnimationTest.prototype.takeCleanSnapshot = function () {
var cleanElement;
if (this.cleanId) {
cleanElement = document.getElementById(this.cleanId);
}
// Enable clean page comparison element
if (cleanElement) {
this.enableDisplay(cleanElement);
}
// Take a snapshot of the initial (clean) page
this.cleanSnapshot = snapshotWindow(window, false);
// Disable the clean page comparison element
if (cleanElement) {
this.disableDisplay(cleanElement);
}
var dataString1 = "Clean Snapshot";
this.outputDebugInfo(
dataString1,
"cleanSnap",
this.cleanSnapshot.toDataURL()
);
};
AnimationTest.prototype.takeBlankSnapshot = function () {
// Take a snapshot of the initial (essentially blank) page
this.blankSnapshot = snapshotWindow(window, false);
var dataString1 = "Initial Blank Snapshot";
this.outputDebugInfo(
dataString1,
"blank1Snap",
this.blankSnapshot.toDataURL()
);
};
/**
* Begin the AnimationTest. This will utilize the information provided in the
* constructor to invoke a mochitest on animated images. It will automatically
* fail if allowed to run past the timeout. This will attempt to preload an
* image, if applicable, and then asynchronously call continueTest(), or if not
* applicable, synchronously trigger a call to continueTest().
*/
AnimationTest.prototype.beginTest = function () {
SimpleTest.waitForExplicitFinish();
SimpleTest.requestFlakyTimeout("untriaged");
currentTest = this;
this.preloadImage();
};
/**
* This is the second part of the test. It is triggered (eventually) from
* beginTest() either synchronously or asynchronously, as an image load
* callback.
*/
AnimationTest.prototype.continueTest = async function () {
// In case something goes wrong, fail earlier than mochitest timeout,
// and with more information.
setTimeout(failTest, this.timeout);
if (!this.reusingImageAsReference) {
this.disableDisplay(document.getElementById(this.imageElementId));
}
let tookReference = new Promise(resolve => {
this.takeReferenceSnapshot(resolve);
});
tookReference.then(() => {
this.setupPolledImage();
SimpleTest.executeSoon(pollForSuccess);
});
};
AnimationTest.prototype.setupPolledImage = function () {
// Make sure the image is visible
if (!this.reusingImageAsReference) {
this.enableDisplay(document.getElementById(this.imageElementId));
var currentSnapshot = snapshotWindow(window, false);
var result = compareSnapshots(
currentSnapshot,
this.referenceSnapshot,
true
);
this.currentSnapshotDataURI = currentSnapshot.toDataURL();
if (result[0]) {
// SUCCESS!
ok(true, "Animated image looks correct, at poll #" + this.pollCounter);
this.outputDebugInfo(
"Animated image",
"animImage",
this.currentSnapshotDataURI
);
this.outputDebugInfo(
"Reference image",
"refImage",
this.referenceSnapshot.toDataURL()
);
this.cleanUpAndFinish();
}
} else if (!gIsRefImageLoaded) {
this.myImage = new Image();
this.myImage.onload = reuseImageCallback;
document
.getElementById(this.imageElementId)
.setAttribute("src", this.referenceElementId);
}
};
AnimationTest.prototype.checkImage = function () {
if (this.isTestFinished) {
return;
}
this.pollCounter++;
// We need this for some tests, because we need to force the
// test image to be visible.
if (!this.reusingImageAsReference) {
this.enableDisplay(document.getElementById(this.imageElementId));
}
var currentSnapshot = snapshotWindow(window, false);
var result = compareSnapshots(currentSnapshot, this.referenceSnapshot, true);
this.currentSnapshotDataURI = currentSnapshot.toDataURL();
if (result[0]) {
// SUCCESS!
ok(true, "Animated image looks correct, at poll #" + this.pollCounter);
this.outputDebugInfo("Animated image", "animImage", result[1]);
this.outputDebugInfo("Reference image", "refImage", result[2]);
this.cleanUpAndFinish();
}
};
AnimationTest.prototype.takeReferenceSnapshot = function (resolve) {
this.numRefsTaken++;
// Test to make sure the reference image doesn't match a clean snapshot
if (!this.cleanSnapshot) {
this.takeCleanSnapshot();
}
// Used later to verify that the reference div disappeared
if (!this.blankSnapshot) {
this.takeBlankSnapshot();
}
if (this.reusingImageAsReference) {
// Show reference elem (which is actually our image), & take a snapshot
var referenceElem = document.getElementById(this.imageElementId);
this.enableDisplay(referenceElem);
this.referenceSnapshot = snapshotWindow(window, false);
let snapResult = compareSnapshots(
this.cleanSnapshot,
this.referenceSnapshot,
false
);
if (!snapResult[0]) {
if (this.blankWaitTime > 2000) {
// if it took longer than two seconds to load the image, we probably
// have a problem.
this.wereFailures = true;
ok(
snapResult[0],
"Reference snapshot shouldn't match clean (non-image) snapshot"
);
} else {
this.blankWaitTime += currentTest.pollFreq;
// let's wait a bit and see if it clears up
setTimeout(
() => this.takeReferenceSnapshot(resolve),
currentTest.pollFreq
);
return;
}
}
ok(
snapResult[0],
"Reference snapshot shouldn't match clean (non-image) snapshot"
);
let dataString = "Reference Snapshot #" + this.numRefsTaken;
this.outputDebugInfo(
dataString,
"refSnapId",
this.referenceSnapshot.toDataURL()
);
} else {
// Make sure the animation section is hidden
this.disableDisplay(document.getElementById(this.imageElementId));
// Show reference div, & take a snapshot
var referenceDiv = document.getElementById(this.referenceElementId);
this.enableDisplay(referenceDiv);
this.referenceSnapshot = snapshotWindow(window, false);
let snapResult = compareSnapshots(
this.cleanSnapshot,
this.referenceSnapshot,
false
);
if (!snapResult[0]) {
if (this.blankWaitTime > 2000) {
// if it took longer than two seconds to load the image, we probably
// have a problem.
this.wereFailures = true;
ok(
snapResult[0],
"Reference snapshot shouldn't match clean (non-image) snapshot"
);
} else {
this.blankWaitTime += 20;
// let's wait a bit and see if it clears up
setTimeout(() => this.takeReferenceSnapshot(resolve), 20);
return;
}
}
ok(
snapResult[0],
"Reference snapshot shouldn't match clean (non-image) snapshot"
);
let dataString = "Reference Snapshot #" + this.numRefsTaken;
this.outputDebugInfo(
dataString,
"refSnapId",
this.referenceSnapshot.toDataURL()
);
// Re-hide reference div, and take another snapshot to be sure it's gone
this.disableDisplay(referenceDiv);
this.testBlankCameBack();
}
resolve();
};
AnimationTest.prototype.enableDisplay = function (element) {
if (!element) {
return;
}
if (!this.xulTest) {
element.style.display = "";
} else {
element.setAttribute("hidden", "false");
}
};
AnimationTest.prototype.disableDisplay = function (element) {
if (!element) {
return;
}
if (!this.xulTest) {
element.style.display = "none";
} else {
element.setAttribute("hidden", "true");
}
};
AnimationTest.prototype.testBlankCameBack = function () {
var blankSnapshot2 = snapshotWindow(window, false);
var result = compareSnapshots(this.blankSnapshot, blankSnapshot2, true);
ok(
result[0],
"Reference image should disappear when it becomes display:none"
);
if (!result[0]) {
this.wereFailures = true;
var dataString = "Second Blank Snapshot";
this.outputDebugInfo(dataString, "blank2SnapId", result[2]);
}
};
AnimationTest.prototype.cleanUpAndFinish = function () {
// On the off chance that failTest and checkImage are triggered
// back-to-back, use a flag to prevent multiple calls to SimpleTest.finish.
if (this.isTestFinished) {
return;
}
this.isTestFinished = true;
// Call our closing function, if one exists
if (this.closeFunc) {
this.closeFunc();
return;
}
if (this.wereFailures) {
document.getElementById(this.debugElementId).style.display = "block";
}
SimpleTest.finish();
document.getElementById(this.debugElementId).style.display = "";
};