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
|
<title>Test VideoFrame creation from CanvasImageSource.</title>
<style>
button {
display: inline-block;
min-height: 100px; min-width: 100px;
background: no-repeat 5% center url(four-colors.png);
}
</style>
<video preload="auto"></video>
<img src="four-colors.png"/>
<canvas id=""></canvas>
<svg width="320" height="240" xmlns="http://www.w3.org/2000/svg">
<image href="four-colors.png" height="320" width="240"/>
</svg>
<button></button>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/webcodecs/image-decoder-utils.js"></script>
<script>
async_test(t => {
let video = document.querySelector('video');
video.onerror = t.unreached_func();
video.requestVideoFrameCallback(t.step_func(_ => {
let frame = new VideoFrame(video);
assert_true(!!frame);
assert_equals(frame.displayWidth, video.videoWidth);
assert_equals(frame.displayHeight, video.videoHeight);
let canvas = new OffscreenCanvas(frame.displayWidth, frame.displayHeight);
let ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0);
verifyFourColorsImage(video.videoWidth, video.videoHeight, ctx);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(frame, 0, 0);
verifyFourColorsImage(frame.displayWidth, frame.displayHeight, ctx);
let frame_copy = new VideoFrame(frame, {duration: 1234});
assert_equals(frame.timestamp, frame_copy.timestamp);
assert_equals(frame_copy.duration, 1234);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(frame_copy, 0, 0);
verifyFourColorsImage(frame_copy.displayWidth, frame_copy.displayHeight,
ctx);
frame_copy.close();
frame_copy = new VideoFrame(frame, {timestamp: 1234, duration: 456});
assert_equals(frame_copy.timestamp, 1234);
assert_equals(frame_copy.duration, 456);
frame_copy.close();
frame_copy = new VideoFrame(frame);
assert_equals(frame.format, frame_copy.format);
assert_equals(frame.timestamp, frame_copy.timestamp);
assert_equals(frame.codedWidth, frame_copy.codedWidth);
assert_equals(frame.codedHeight, frame_copy.codedHeight);
assert_equals(frame.displayWidth, frame_copy.displayWidth);
assert_equals(frame.displayHeight, frame_copy.displayHeight);
assert_equals(frame.duration, frame_copy.duration);
frame_copy.close();
frame.close();
t.done();
}));
video.src = 'four-colors.mp4';
}, '<video> and VideoFrame constructed VideoFrame');
test(t => {
let button = document.querySelector('button');
let bgImage = button.computedStyleMap().get('background-image');
assert_throws_dom('SecurityError', _ => { new VideoFrame(bgImage, {timestamp: 0}); },
'CSSImageValues are currently always tainted');
}, 'CSSImageValue constructed VideoFrame');
test(t => {
let frame = new VideoFrame(document.querySelector('img'), {timestamp: 0});
let canvas = new OffscreenCanvas(frame.displayWidth, frame.displayHeight);
let ctx = canvas.getContext('2d');
ctx.drawImage(frame, 0, 0);
verifyFourColorsImage(frame.displayWidth, frame.displayHeight, ctx);
frame.close();
}, 'Image element constructed VideoFrame');
test(t => {
let frame = new VideoFrame(document.querySelector('image'), {timestamp: 0});
let canvas = new OffscreenCanvas(frame.displayWidth, frame.displayHeight);
let ctx = canvas.getContext('2d');
ctx.drawImage(frame, 0, 0);
verifyFourColorsImage(frame.displayWidth, frame.displayHeight, ctx);
frame.close();
}, 'SVGImageElement constructed VideoFrame');
function drawFourColors(canvas) {
let ctx = canvas.getContext('2d');
ctx.fillStyle = '#FFFF00'; // yellow
ctx.fillRect(0, 0, canvas.width / 2, canvas.height / 2);
ctx.fillStyle = '#FF0000'; // red
ctx.fillRect(canvas.width / 2, 0, canvas.width / 2, canvas.height / 2);
ctx.fillStyle = '#0000FF'; // blue
ctx.fillRect(0, canvas.height / 2, canvas.width / 2, canvas.height / 2);
ctx.fillStyle = '#00FF00'; // green
ctx.fillRect(canvas.width / 2, canvas.height / 2, canvas.width / 2,
canvas.height / 2);
}
test(t => {
let canvas = document.querySelector('canvas');
canvas.width = 320;
canvas.height = 240;
// Draw and verify four colors image.
drawFourColors(canvas);
let ctx = canvas.getContext('2d');
verifyFourColorsImage(canvas.width, canvas.height, ctx);
let frame = new VideoFrame(canvas, {timestamp: 0});
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(frame, 0, 0);
verifyFourColorsImage(canvas.width, canvas.height, ctx);
frame.close();
}, 'Canvas element constructed VideoFrame');
test(t => {
let canvas = document.querySelector('canvas');
canvas.width = 320;
canvas.height = 240;
// Draw and verify four colors image.
drawFourColors(canvas);
let ctx = canvas.getContext('2d');
verifyFourColorsImage(canvas.width, canvas.height, ctx);
// Set a different timestamp to try and ensure the same frame isn't reused.
let frame = new VideoFrame(canvas, {timestamp: 0});
let frame_copy = new VideoFrame(frame, {timestamp: 1});
frame.close();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(frame_copy, 0, 0);
verifyFourColorsImage(canvas.width, canvas.height, ctx);
frame_copy.close();
}, 'Copy of canvas element constructed VideoFrame');
</script>
|
