Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/draw-element-image/draw-element-image-get-image-data.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>drawElementImage pixel readback</title>
<link rel="author" href="mailto:vmpstr@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/wait-for-canvas-paint.js"></script>
<style>
canvas > div {
width: 50px;
height: 50px;
}
.srgb {
background: rgb(32 128 64);
}
.p3 {
background: color(display-p3 .94 .95 .08);
}
</style>
<canvas id=srgb_canvas width=100 height=100 layoutsubtree>
<div class=srgb></div>
<div class=p3></div>
</canvas>
<canvas id=p3_canvas width=100 height=100 layoutsubtree>
<div class=srgb></div>
<div class=p3></div>
</canvas>
<script>
const checkColors = (cvs, colorspace) => {
const srgb_child = cvs.querySelector('.srgb');
const p3_child = cvs.querySelector('.p3');
const ctx = cvs.getContext('2d', {colorSpace: colorspace});
// Draw each child element next to a canvas rect of the same color, and
// verify that the colors match when the pixels are read back.
ctx.drawElementImage(srgb_child, 0, 0);
ctx.fillStyle = getComputedStyle(srgb_child).backgroundColor;
ctx.fillRect(50, 0, 50, 50);
ctx.drawElementImage(p3_child, 0, 50);
ctx.fillStyle = getComputedStyle(p3_child).backgroundColor;
ctx.fillRect(50, 50, 50, 50);
// Read back a 20x20 square of pixels from the center of the canvas.
// The four 10x10 quadrants contain the two drawn elements and two rects.
const imageData = ctx.getImageData(40, 40, 20, 20, {colorSpace: colorspace});
const pixelSlice = (x, y) =>
Array.from(imageData.data.slice((y*20*4) + (x*4), (y*20*4) + (x*4) + 4));
// Sanity-check absolute color values of canvas rects.
if (colorspace == 'srgb') {
// Check the color of the canvas rect with srgb fill color
assert_array_equals(pixelSlice(15, 5), [32, 128, 64, 255],
`srgb color verification`);
} else {
// Check the color of the canvas rect with display-p3 fill color
assert_array_approx_equals(pixelSlice(15, 15), [239, 242, 20, 255], 2,
`display-p3 color verification`);
}
assert_array_equals(pixelSlice(5, 5), pixelSlice(15, 5),
`srgb element in a ${colorspace} canvas`);
assert_array_equals(pixelSlice(5, 15), pixelSlice(15, 15),
`display-p3 element in a ${colorspace} canvas`);
};
promise_test(() =>
waitForCanvasPaint(srgb_canvas)
.then(() => checkColors(srgb_canvas, 'srgb')));
promise_test(() =>
waitForCanvasPaint(p3_canvas)
.then(() => checkColors(p3_canvas, 'display-p3')));
</script>