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
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=490949
-->
<head>
<title>Test for Bug 490949</title>
<script type="application/javascript" src="/MochiKit/MochiKit.js"></script>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=490949">Mozilla Bug 490949</a>
<p id="display"></p>
<div id="content" style="display: none">
<canvas id="canvas" width="100" height="100"> </canvas>
</div>
<pre id="test">
<script type="application/javascript">
SimpleTest.waitForExplicitFinish();
var canvas = document.getElementById('canvas');
var first, second, third;
RemoteCanvas = function() {
this.url = "bug490949-iframe.html";
};
RemoteCanvas.CANVAS_WIDTH = 100;
RemoteCanvas.CANVAS_HEIGHT = 100;
RemoteCanvas.prototype.load = function(cb) {
this.cb = cb;
var windowWidth = window.innerWidth - 25;
var iframe;
iframe = document.createElement("iframe");
iframe.id = "test-iframe";
iframe.height = "10px";
iframe.width = windowWidth + "px";
iframe.style.visibility = "hidden";
iframe.src = this.url;
// Here is where the magic happens... add a listener to the
// frame's onload event - it will call handleEvent
iframe.addEventListener("load", this, true);
//append to the end of the page
window.document.body.appendChild(iframe);
};
RemoteCanvas.prototype.reload = function(cb, force) {
this.cb = cb;
window.frames[0].location.reload(force);
}
RemoteCanvas.prototype.handleEvent = function() {
// Look back up the iframe by id
var ldrFrame = document.getElementById("test-iframe");
// Get a reference to the window object you need for the
// SpecialPowers.snapshotRect method
var remoteWindow = ldrFrame.contentWindow;
//Draw canvas
canvas.style.width = RemoteCanvas.CANVAS_WIDTH + "px";
canvas.style.height = RemoteCanvas.CANVAS_HEIGHT + "px";
canvas.width = RemoteCanvas.CANVAS_WIDTH;
canvas.height = RemoteCanvas.CANVAS_HEIGHT;
var windowWidth = window.innerWidth - 25;
var windowHeight = window.innerHeight;
var rect = { left: 0, top: 0, width: windowWidth, height: windowHeight };
var snapshot = SpecialPowers.snapshotRect(remoteWindow, rect, "rgb(0,0,0)");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0,
RemoteCanvas.CANVAS_WIDTH,
RemoteCanvas.CANVAS_HEIGHT);
ctx.save();
ctx.scale(RemoteCanvas.CANVAS_WIDTH / windowWidth,
RemoteCanvas.CANVAS_HEIGHT / windowHeight);
ctx.drawImage(snapshot, 0, 0);
ctx.restore();
this.cb();
};
function checkFirst()
{
first = canvas.toDataURL();
remoteCanvas.reload(checkForceReload, true);
}
function checkForceReload()
{
second = canvas.toDataURL();
ok(first != second, "We got the wrong image.");
remoteCanvas.reload(checkLazyReload, false);
}
function checkLazyReload()
{
third = canvas.toDataURL();
ok(second != third, "We got the wrong image.");
SimpleTest.finish();
}
var remoteCanvas = new RemoteCanvas();
remoteCanvas.load(checkFirst);
</script>
</pre>
</body>
</html>
|
