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
|
<!DOCTYPE HTML>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Canvas2D test: CaptureStream()</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="captureStream_common.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
<body>
<script>
var c; // Canvas element captured by streams.
var h; // CaptureStreamTestHelper holding utility test functions.
var vauto; // Video element with captureStream stream in automatic mode.
var vmanual; // Video element with captureStream stream in manual (fps 0) mode.
var vrate; // Video element with captureStream stream with fixed frame rate.
function checkDrawColorInitialRed() {
info("Checking that all video elements become red when initiated just after the first drawColor(red).");
h.drawColor(c, h.red);
vauto.srcObject = c.captureStream();
vmanual.srcObject = c.captureStream(0);
vrate.srcObject = c.captureStream(10);
ok(h.isPixel(h.getPixel(vauto), h.blackTransparent, 0),
"vauto should not be drawn to before stable state");
ok(h.isPixel(h.getPixel(vrate), h.blackTransparent, 0),
"vrate should not be drawn to before stable state");
ok(h.isPixel(h.getPixel(vmanual), h.blackTransparent, 0),
"vmanual should not be drawn to before stable state");
return Promise.resolve()
.then(() => h.waitForPixelColor(vauto, h.red, 0,
"should become red automatically"))
.then(() => h.waitForPixelColor(vrate, h.red, 0,
"should become red automatically"))
.then(() => h.waitForPixelColor(vmanual, h.red, 0,
"should become red when we get" +
" to stable state (first frame)"));
}
function checkDrawColorGreen() {
info("Checking that drawing green propagates properly to video elements.");
var drawing = h.startDrawing(() => h.drawColor(c, h.green));
return Promise.resolve()
.then(() => h.waitForPixelColor(vauto, h.green, 0,
"should become green automatically"))
.then(() => h.waitForPixelColor(vrate, h.green, 0,
"should become green automatically"))
.then(() => h.waitForPixelColor(vmanual, h.red, 0,
"should still be red"))
.then(() => h.requestFrame(vmanual))
.then(() => h.waitForPixelColor(vmanual, h.green, 0,
"should become green after requstFrame()"))
.catch(err => ok(false, "checkDrawColorGreen failed: ", err))
.then(() => drawing.stop());
}
function checkRequestFrameOrderGuarantee() {
info("Checking that requestFrame() immediately after a drawColor() " +
"call results in the expected frame seen in the stream.");
return Promise.resolve()
.then(() => h.waitForPixelColor(vmanual, h.green, 0,
"should still be green"))
.then(() => h.drawColor(c, h.red)) // 1. Draw canvas red
.then(() => h.requestFrame(vmanual)) // 2. Immediately request a frame
.then(() => h.waitForPixelColor(vmanual, h.red, 0,
"should become red after call order test"))
}
function checkDrawImageNotCleanRed() {
info("Checking that drawImage with not origin-clean image renders streams useless.");
var ctx = c.getContext('2d');
var notCleanRed = new Image();
var drawing;
return new Promise((resolve, reject) => {
notCleanRed.onload = resolve;
notCleanRed.onerror = () => reject(new Error("Failed to load tainted image."));
notCleanRed.src = "http://example.com/tests/dom/canvas/test/image_red_crossorigin_credentials.png";
document.body.appendChild(notCleanRed);
})
.then(() => drawing = h.startDrawing(() => ctx.drawImage(notCleanRed, 0, 0, c.width, c.height)))
.then(() => h.testNotClean(c))
.then(() => h.waitForPixelColorTimeout(vauto, h.red, 0, 1000,
"should not become red"))
.then(() => h.isPixelNot(h.getPixel(vrate), h.red, 250,
"should not have become red"))
.then(() => h.waitForPixelColor(vmanual, h.green, 0, "should still be green"))
.then(() => h.requestFrame(vmanual))
.then(() => h.waitForPixelColorTimeout(vmanual, h.red, 0, 1000,
"should not become red"))
.catch(err => ok(false, "checkDrawImageNotCleanRed failed: ", err))
.then(() => drawing.stop());
}
function checkEndedOnStop() {
let promises = [vauto, vmanual, vrate].map(elem => {
elem.srcObject.getTracks()[0].stop();
return new Promise(resolve =>
elem.addEventListener("ended", function endedListener(event) {
ok(true, "Element " + elem.id + " ended.");
resolve();
elem.removeEventListener("ended", endedListener);
}));
});
return Promise.all(promises);
}
function finish() {
ok(true, 'Test complete.');
SimpleTest.finish();
}
function beginTest() {
h = new CaptureStreamTestHelper2D();
c = h.createAndAppendElement('canvas', 'c');
vauto = h.createAndAppendElement('video', 'vauto');
vmanual = h.createAndAppendElement('video', 'vmanual');
vrate = h.createAndAppendElement('video', 'vrate');
Promise.resolve()
.then(checkDrawColorInitialRed)
.then(checkDrawColorGreen)
.then(checkRequestFrameOrderGuarantee)
.then(checkDrawColorGreen) // Restore video elements to green.
.then(checkDrawImageNotCleanRed)
.then(checkEndedOnStop)
.then(finish);
}
SimpleTest.waitForExplicitFinish();
beginTest();
</script>
|
