drawElementImage-src-rect-non-finite.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/draw-element-image/drawElementImage-src-rect-non-finite.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<title>canvas.drawElementImage src rect variants</title>

<script src='/resources/testharness.js'></script>

<script src='/resources/testharnessreport.js'></script>

<script src='/html/canvas/resources/canvas-tests.js'></script>

<script src="/html/canvas/resources/wait-for-canvas-paint.js"></script>

<style>

  #child {

    width: 100px;

    height: 100px;

    background-color: red;

</style>

<canvas id="canvas" width="200" height="200" content=drawable>

  <div drawable id="child">

  </div>

</canvas>

<script>

  'use strict';

  promise_test(async t => {

    const child = document.getElementById('child');

    const context = canvas.getContext('2d', { willReadFrequently: true });

    context.fillStyle = 'green';

    context.fillRect(0, 0, 200, 200);

    await waitForCanvasPaint(canvas);

    // Child had red in the top left quadrant, green top right, blue bottom left, black bottom right

    context.drawElementImage(child, Number.POSITIVE_INFINITY, 0, 100, 100, 0, 0, 100, 100);

    var canvasTransform = canvas.getElementTransform(child);

    assert_equals(canvasTransform.e, 0, "CanvasTransform x translate for src Number.POSITIVE_INFINITY, 0, 100, 100");

    assert_equals(canvasTransform.f, 0, "CanvasTransform y translate for src Number.POSITIVE_INFINITY, 0, 100, 100");

    context.drawElementImage(child, 100, Number.POSITIVE_INFINITY, 100, 100, 100, 0, 100, 100);

    canvasTransform = canvas.getElementTransform(child);

    assert_equals(canvasTransform.e, 0, "CanvasTransform x translate for src 100, Number.POSITIVE_INFINITY, 100, 100");

    assert_equals(canvasTransform.f, 0, "CanvasTransform y translate for src 100, Number.POSITIVE_INFINITY, 100, 100");

    context.drawElementImage(child, 0, 100, Number.NaN, 100, 0, 100, 100, 100);

    canvasTransform = canvas.getElementTransform(child);

    assert_equals(canvasTransform.e, 0, "CanvasTransform x translate for src 0, 100, Number.NaN, 100");

    assert_equals(canvasTransform.f, 0, "CanvasTransform y translate for src 0, 100, Number.NaN, 100");

    context.drawElementImage(child, 100, 100, 100, Number.NaN, 100, 100, 100, 100);

    canvasTransform = canvas.getElementTransform(child);

    assert_equals(canvasTransform.e, 0, "CanvasTransform x translate for src 100, 100, 100, Number.NaN");

    assert_equals(canvasTransform.f, 0, "CanvasTransform y translate for src 100, 100, 100, Number.NaN");

    const imgData = context.getImageData(0, 0, canvas.width, canvas.height);

    assert_array_equals(_getPixelFromImageData(imgData, 50, 50), [0, 128, 0, 255],

      "top left incorrect");

    assert_array_equals(_getPixelFromImageData(imgData, 150, 50), [0, 128, 0, 255],

      "top right incorrect");

    assert_array_equals(_getPixelFromImageData(imgData, 50, 150), [0, 128, 0, 255],

      "bottom left incorrect");

    assert_array_equals(_getPixelFromImageData(imgData, 150, 150), [0, 128, 0, 255],

      "bottom right incorrect");

}, 'drawElementImage handles non-finite source rect parameters');

</script>