summaryrefslogtreecommitdiffstats
path: root/image/test/mochitest/animationPolling.js
blob: 6f5e7c889f2520057db3b21bce2589276957b054 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
/* -*- 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
        && gRefImageLoaded)) {
      currentTest.checkImage();
    }

    setTimeout(pollForSuccess, currentTest.pollFreq);
  }
};

function referencePoller()
{
  currentTest.takeReferenceSnapshot();
}

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 = 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));
  }

  this.takeReferenceSnapshot();
  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.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.cleanUpAndFinish();
  }
};

AnimationTest.prototype.takeReferenceSnapshot = function ()
{
  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);

    var 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(referencePoller, currentTest.pollFreq);
        return;
      }
    }

    ok(snapResult[0],
       "Reference snapshot shouldn't match clean (non-image) snapshot");

    var 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);
    var 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(referencePoller, 20);
        return;
      }
    }

    ok(snapResult[0],
       "Reference snapshot shouldn't match clean (non-image) snapshot");

    var 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();
  }
};

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 = "";
};