michael@0: var RemoteCanvas = function(url, id) {
michael@0:   this.url = url;
michael@0:   this.id = id;
michael@0:   this.snapshot = null;
michael@0: };
michael@0: 
michael@0: RemoteCanvas.CANVAS_WIDTH = 200;
michael@0: RemoteCanvas.CANVAS_HEIGHT = 200;
michael@0: 
michael@0: RemoteCanvas.prototype.compare = function(otherCanvas, expected) {
michael@0:   return compareSnapshots(this.snapshot, otherCanvas.snapshot, expected)[0];
michael@0: }
michael@0: 
michael@0: RemoteCanvas.prototype.load = function(callback) {
michael@0:   var iframe = document.createElement("iframe");
michael@0:   iframe.id = this.id + "-iframe";
michael@0:   iframe.width = RemoteCanvas.CANVAS_WIDTH + "px";
michael@0:   iframe.height = RemoteCanvas.CANVAS_HEIGHT + "px";
michael@0:   iframe.src = this.url;
michael@0:   var me = this;
michael@0:   iframe.addEventListener("load", function() {
michael@0:     var m = iframe.contentDocument.getElementById("av");
michael@0:     m.addEventListener("progress", function(aEvent) {
michael@0:       var v = aEvent.target;
michael@0:       var b = v.buffered;
michael@0:       if (b.length == 1 && b.end(0) == v.duration) {
michael@0:         m.removeEventListener("progress", arguments.callee, false);
michael@0:         setTimeout(function() {
michael@0:           me.remotePageLoaded(callback);
michael@0:         }, 0);
michael@0:       }
michael@0:     }, false);
michael@0:     m.src = m.getAttribute("source");
michael@0:   }, false);
michael@0:   window.document.body.appendChild(iframe);
michael@0: };
michael@0: 
michael@0: RemoteCanvas.prototype.remotePageLoaded = function(callback) {
michael@0:   var ldrFrame = document.getElementById(this.id + "-iframe");
michael@0:   this.snapshot = snapshotWindow(ldrFrame.contentWindow);
michael@0:   this.snapshot.id = this.id + "-canvas";
michael@0:   window.document.body.appendChild(this.snapshot);
michael@0:   callback(this);
michael@0: };
michael@0: 
michael@0: RemoteCanvas.prototype.cleanup = function() {
michael@0:   var iframe = document.getElementById(this.id + "-iframe");
michael@0:   iframe.parentNode.removeChild(iframe);
michael@0:   var canvas = document.getElementById(this.id + "-canvas");
michael@0:   canvas.parentNode.removeChild(canvas);
michael@0: };
michael@0: 
michael@0: function runTest(index) {
michael@0:   var canvases = [];
michael@0:   function testCallback(canvas) {
michael@0:     canvases.push(canvas);
michael@0: 
michael@0:     if (canvases.length == 2) { // when both canvases are loaded
michael@0:       var expectedEqual = currentTest.op == "==";
michael@0:       var result = canvases[0].compare(canvases[1], expectedEqual);
michael@0:       ok(result, "Rendering of reftest " + currentTest.test + " should " +
michael@0:         (expectedEqual ? "not " : "") + "be different to the reference");
michael@0: 
michael@0:       if (result) {
michael@0:         canvases[0].cleanup();
michael@0:         canvases[1].cleanup();
michael@0:       }
michael@0:       else {
michael@0:         ok(true, "Snapshot of canvas 1: " + canvases[0].snapshot.toDataURL());
michael@0:         ok(true, "Snapshot of canvas 2: " + canvases[1].snapshot.toDataURL());
michael@0:       }
michael@0: 
michael@0:       if (index < tests.length - 1)
michael@0:         runTest(index + 1);
michael@0:       else
michael@0:         SimpleTest.finish();
michael@0:     }
michael@0:   }
michael@0: 
michael@0:   var currentTest = tests[index];
michael@0:   var testCanvas = new RemoteCanvas(currentTest.test, "test-" + index);
michael@0:   testCanvas.load(testCallback);
michael@0: 
michael@0:   var refCanvas = new RemoteCanvas(currentTest.ref, "ref-" + index);
michael@0:   refCanvas.load(testCallback);
michael@0: }
michael@0: 
michael@0: SimpleTest.waitForExplicitFinish();
michael@0: 
michael@0: window.addEventListener("load", function() {
michael@0:   SpecialPowers.pushPrefEnv({"set": [["media.cache_size", 40000]]}, function(){ runTest(0); });
michael@0: }, true);