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
|
<html>
<body>
<canvas id="c1" width="250" height="250"></canvas>
<canvas id="c2" width="250" height="250"></canvas>
<br>
<canvas id="c3" width="250" height="250"></canvas>
<canvas id="c4" width="250" height="250"></canvas>
<script type="text/javascript">
var ctx1 = document.getElementById('c1').getContext('2d');
var ctx2 = document.getElementById('c2').getContext('2d');
var ctx3 = document.getElementById('c3').getContext('2d');
var ctx4 = document.getElementById('c4').getContext('2d');
ctx1.fillStyle = 'green';
ctx2.fillStyle = 'green';
ctx3.fillStyle = 'green';
ctx4.fillStyle = 'green';
ctx1.fillRect(25, 25, 200, 200);
ctx2.fillRect(25, 25, 200, 200);
if (window.createImageBitmap) {
ctx4.fillRect(25, 25, 200, 200);
}
if (window.testRunner) {
testRunner.waitUntilDone();
}
var video = document.createElement("video");
video.autoplay = false;
video.addEventListener("canplaythrough", videoLoaded, false);
video.src = "resources/green.ogv";
function videoLoaded() {
var w = video.videoWidth;
var h = video.videoHeight;
ctx3.drawImage(video, 0, 0, w, h, 75, 75, 100, 100);
ctx3.drawImage(video, 0, 0, w, h, 25, 25, 50, 50);
ctx3.drawImage(video, 0, 0, w, h, 75, 25, 100, 50);
ctx3.drawImage(video, 0, 0, w, h, 175, 25, 50, 50);
ctx3.drawImage(video, 0, 0, w, h, 25, 75, 50, 100);
ctx3.drawImage(video, 0, 0, w, h, 175, 75, 50, 100);
ctx3.drawImage(video, 0, 0, w, h, 25, 175, 50, 50);
ctx3.drawImage(video, 0, 0, w, h, 75, 175, 100, 50);
ctx3.drawImage(video, 0, 0, w, h, 175, 175, 50, 50);
if (window.testRunner) {
testRunner.notifyDone();
}
}
</script>
</body></html>
|
