| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src='/resources/testharness.js'></script> |
| <script src='/resources/testharnessreport.js'></script> |
| <script src='/webcodecs/videoFrame-utils.js'></script> |
| </head> |
| <body> |
| <canvas id=canvas width=100px hwight=100px></canvas> |
| <script> |
| function createVideoFrame(stride) |
| { |
| const width = 16; |
| const height = 16; |
| const size = stride * height; |
| const buf = new ArrayBuffer(size * 1.5); |
| const bytesY = new Uint8Array(buf, 0, size * 1.0); |
| const bytesU = new Uint8Array(buf, size * 1.0, size * 0.25); |
| const bytesV = new Uint8Array(buf, size * 1.25, size * 0.25); |
| for (let y = 0; y < height; y++) { |
| for (let x = 0; x < width; x++) |
| bytesY[y * stride + x] = (y << 4) | x; |
| } |
| bytesU.fill(128); |
| bytesV.fill(128); |
| |
| return new VideoFrame(buf, { |
| format: "I420", |
| codedWidth: stride, |
| codedHeight: height, |
| timestamp: 0, |
| visibleRect: { |
| x: 0, |
| y: 0, |
| width: width, |
| height: height |
| }, |
| colorSpace: { |
| primaries: 'bt709', |
| transfer: 'bt709', |
| matrix: 'bt709', |
| fullRange: true, |
| } |
| }); |
| } |
| |
| test(t => { |
| const frame1 = createVideoFrame(16); |
| t.add_cleanup(() => frame1.close()); |
| const frame2 = createVideoFrame(32); |
| t.add_cleanup(() => frame2.close()); |
| |
| canvas.getContext('2d').drawImage(frame1, 0, 0); |
| const data1 = canvas.getContext('2d').getImageData(0, 0, 4, 2).data; |
| |
| canvas.getContext('2d').drawImage(frame2, 0, 0); |
| const data2 = canvas.getContext('2d').getImageData(0, 0, 4, 2).data; |
| |
| assert_array_equals(data1, data2); |
| }, 'Creating video frames Creating video frames Creating video frames with codedWidth differing from visibleWidthh'); |
| </script> |
| </body> |
| </html> |
