2d.color.space.p3.fillText.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/wide-gamut-canvas/2d.color.space.p3.fillText.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->

<title>Canvas test: 2d.color.space.p3.fillText</title>

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

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

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

<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">

<body class="show_output">

<h1>2d.color.space.p3.fillText</h1>

<p class="desc">Test if fillText can be used with a solid display-p3 color</p>

<p class="output">Actual output:</p>

<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>

<ul id="d"></ul>

<script>

var t = async_test("Test if fillText can be used with a solid display-p3 color");

_addTest(function(canvas, ctx) {

  deferTest();

  const fullRedInP3 = [255, 0, 0, 255];

  const sRGBRedInP3 = [234, 51, 35, 255];

  canvas.width = 100;

  canvas.height = 100;

  let f = new FontFace("Ahem", "url(/fonts/Ahem.ttf)");

  document.fonts.add(f);

  f.load().then(function() {

      t.step(function() {

          ctx.font = "40px Ahem";

          ctx.fillStyle = "#f00";

          ctx.fillText("A", 0, 50);

          ctx.fillStyle = "black";

          ctx.fillStyle = "color(display-p3 100% 0 0)";

          ctx.fillText("A", 50, 50);

          let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height, { colorSpace: "display-p3" }).data;

          let pixelAt = function(x, y) {

              let offset = (y * canvas.width + x) * 4;

              return [pixels[offset], pixels[offset + 1], pixels[offset + 2], pixels[offset + 3]];

};

          assert_array_equals(pixelAt(25, 25), sRGBRedInP3);

          assert_array_equals(pixelAt(75, 25), fullRedInP3);

          t.done();

});

});

}, {colorSpace: "display-p3"});

</script>