createImageBitmap-flipY.html (2899B)
1 <!DOCTYPE html> 2 <html> 3 <title>createImageBitmap + drawImage test</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/html/canvas/resources/canvas-tests.js"></script> 7 <script src="/common/media.js"></script> 8 <script src="common.sub.js"></script> 9 <link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> 10 <body> 11 <script> 12 function testCanvasDisplayingPattern(canvas, width, height, sourceIsVideo, flipped) 13 { 14 var tolerance = 3; 15 let topLeft = [255, 0, 0, 255]; 16 let topRight = [0, 255, 0, 255]; 17 let bottomLeft = [0, 0, 255, 255]; 18 let bottomRight = [0, 0, 0, 255]; 19 if (sourceIsVideo) { 20 // The source video uses colors in the Rec.601 color space whose 21 // values are close to full red, full green, full blue, and black, 22 // but when converted to sRGB, are somewhat different. 23 topLeft = [247, 37, 0, 255]; 24 topRight = [63, 251, 0, 255]; 25 bottomLeft = [28, 35, 255, 255]; 26 bottomRight = [5, 0, 2, 255]; 27 } 28 if (flipped) { 29 [topLeft, bottomLeft] = [bottomLeft, topLeft]; 30 [topRight, bottomRight] = [bottomRight, topRight]; 31 } 32 const check = (x, y, [r, g, b, a]) => 33 _assertPixelApprox(canvas, x,y, r,g,b,a, tolerance); 34 check(1 * width / 4, 1 * height / 4, topLeft); 35 check(3 * width / 4, 1 * height / 4, topRight); 36 check(1 * width / 4, 3 * height / 4, bottomLeft); 37 check(3 * width / 4, 3 * height / 4, bottomRight); 38 } 39 40 function testDrawImageBitmap(source, args = [], flipped, { resizeWidth = 20, resizeHeight = 20 } = {}) 41 { 42 let sourceIsVideo = source instanceof HTMLVideoElement; 43 var canvas = document.createElement("canvas"); 44 canvas.width = resizeWidth; 45 canvas.height = resizeHeight; 46 var ctx = canvas.getContext("2d"); 47 return createImageBitmap(source, ...args).then(imageBitmap => { 48 assert_equals(imageBitmap.width, resizeWidth); 49 assert_equals(imageBitmap.height, resizeHeight); 50 ctx.drawImage(imageBitmap, 0, 0); 51 testCanvasDisplayingPattern(canvas, resizeWidth, resizeHeight, sourceIsVideo, flipped); 52 }); 53 } 54 55 for (let { name, factory } of imageSourceTypes) { 56 promise_test(function() { 57 return factory().then(function(img) { 58 const options = { imageOrientation: 'from-image' }; 59 return testDrawImageBitmap(img, [options], false); 60 }); 61 }, `createImageBitmap from ${name} imageOrientation: "from-image", and drawImage on the created ImageBitmap`); 62 63 promise_test(function() { 64 return factory().then(function(img) { 65 const options = { imageOrientation: 'flipY' }; 66 return testDrawImageBitmap(img, [options], true); 67 }); 68 }, `createImageBitmap from ${name} imageOrientation: "flipY", and drawImage on the created ImageBitmap`); 69 70 } 71 </script> 72 </body> 73 </html>