fragment-mask-png-ignored-tentative.https.sub.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/privacy/fragment-mask-png-ignored-tentative.https.sub.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<html>

<head>

  <title>drawElementImage does not use cross-origin mask images</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>

  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

  <style>

  #child {

    width: 100px;

    height: 200px;

    background: green;

    color: blue;

    font: 100px Ahem;

  #sameOrigin {

    mask-image: url("https://{{location[host]}}/images/blue-100x50-transparent-100x50.png");

  #crossOrigin {

    mask-image: url("https://{{hosts[alt][www]}}:{{ports[https][0]}}/images/blue-100x50-transparent-100x50.png");

  </style>

</head>

<body>

  <canvas id=canvas width="100" height="200" layoutsubtree>

    <div id=child>

      <span id=sameOrigin>A</div>

      <span id=crossOrigin>A</div>

    </div>

  </canvas>

  <script>

    window.onload = () => {

      promise_test(async function(t) {

        await waitForCanvasPaint(canvas);

        const context = canvas.getContext("2d");

        context.drawElementImage(child, 0, 0);

        // Fetch all pixel data once to avoid multiple slow readbacks.

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

        let pixel = _getPixelFromImageData(imgData, 50, 25);

        assert_array_equals(pixel, [0, 128, 0, 255], "Same origin should draw");

        pixel = _getPixelFromImageData(imgData, 50, 75);

        assert_array_equals(pixel, [0, 0, 255, 255], "Same origin should draw");

        // Missing mask image renders as black, blocking the red background

        pixel = _getPixelFromImageData(imgData, 50, 125);

        assert_array_equals(pixel, [0, 128, 0, 255], "Cross origin should not draw");

        pixel = _getPixelFromImageData(imgData, 50, 175);

        assert_array_equals(pixel, [0, 128, 0, 255], "Cross origin should not draw");

});

  </script>

</body>

</html>