testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage.html

   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)
  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     const check = (x, y, [r, g, b, a]) =>
  29         _assertPixelApprox(canvas, x,y, r,g,b,a, tolerance);
  30     check(1 * width / 4, 1 * height / 4, topLeft);
  31     check(3 * width / 4, 1 * height / 4, topRight);
  32     check(1 * width / 4, 3 * height / 4, bottomLeft);
  33     check(3 * width / 4, 3 * height / 4, bottomRight);
  34 }
  35
  36 function testDrawImageBitmap(source, args = [], { resizeWidth = 20, resizeHeight = 20 } = {})
  37 {
  38     let sourceIsVideo = source instanceof HTMLVideoElement;
  39     var canvas = document.createElement("canvas");
  40     canvas.width = resizeWidth;
  41     canvas.height = resizeHeight;
  42     var ctx = canvas.getContext("2d");
  43     return createImageBitmap(source, ...args).then(imageBitmap => {
  44         assert_equals(imageBitmap.width, resizeWidth);
  45         assert_equals(imageBitmap.height, resizeHeight);
  46         ctx.drawImage(imageBitmap, 0, 0);
  47         testCanvasDisplayingPattern(canvas, resizeWidth, resizeHeight, sourceIsVideo);
  48     });
  49 }
  50
  51 for (let { name, factory } of imageSourceTypes) {
  52     promise_test(function() {
  53         return factory().then(function(img) {
  54             return testDrawImageBitmap(img);
  55         });
  56     }, `createImageBitmap from ${name}, and drawImage on the created ImageBitmap`);
  57
  58     promise_test(function() {
  59         return factory().then(function(img) {
  60             const options = { resizeWidth: 10, resizeHeight: 10 };
  61             return testDrawImageBitmap(img, [options], options);
  62         });
  63     }, `createImageBitmap from ${name} scaled down, and drawImage on the created ImageBitmap`);
  64
  65     promise_test(function() {
  66         return factory().then(function(img) {
  67             const options = { resizeWidth: 40, resizeHeight: 40 };
  68             return testDrawImageBitmap(img, [options], options);
  69         });
  70     }, `createImageBitmap from ${name} scaled up, and drawImage on the created ImageBitmap`);
  71
  72     promise_test(function() {
  73         return factory().then(function(img) {
  74             const options = { resizeWidth: 10, resizeHeight: 40 };
  75             return testDrawImageBitmap(img, [options], options);
  76         });
  77     }, `createImageBitmap from ${name} resized, and drawImage on the created ImageBitmap`);
  78
  79     promise_test(function() {
  80         return factory().then(function(img) {
  81             return testDrawImageBitmap(img, [20, 20, -20, -20]);
  82         });
  83     }, `createImageBitmap from ${name} with negative sw/sh, and drawImage on the created ImageBitmap`);
  84 }
  85 </script>
  86 </body>
  87 </html>