| <!DOCTYPE html> |
| <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> |
| <title>Canvas test: 2d.color.space.p3.strokeText</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.strokeText</h1> |
| <p class="desc">Test if strokeText 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 strokeText 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.strokeStyle = "#f00"; |
| ctx.lineWidth = 20; |
| ctx.strokeText("A", 0, 50); |
| |
| ctx.strokeStyle = "black"; |
| ctx.strokeStyle = "color(display-p3 100% 0 0)"; |
| ctx.strokeText("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> |
| |