1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html>
<html>
<title>Test colorSpaceConversion option for createImageBitmap</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/canvas-tests.js"></script>
<script src="/common/media.js"></script>
<script src="common.sub.js"></script>
<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
<body>
<script>
function testCanvasDisplayingPattern(canvas, width, height)
{
var tolerance = 10; // high tolerance for differing color management results
const check = (x, y, r, g, b, a) =>
_assertPixelApprox(canvas, x,y, r,g,b,a, tolerance);
check(1 * width / 4, 1 * height / 4, 124,0,27,255);
check(3 * width / 4, 1 * height / 4, 0,124,46,255);
check(1 * width / 4, 3 * height / 4, 60,0,123,255);
check(3 * width / 4, 3 * height / 4, 0,0,0,255);
}
function testDrawImageBitmap(source, options)
{
var canvas = document.createElement("canvas");
canvas.width = 20;
canvas.height = 20;
var ctx = canvas.getContext("2d");
return createImageBitmap(source, options).then(imageBitmap => {
ctx.drawImage(imageBitmap, 0, 0);
testCanvasDisplayingPattern(canvas, 20, 20);
});
}
var wideGamutImageSourceTypes = [
{name: 'a bitmap HTMLImageElement', factory: makeMakeHTMLImage("/images/wide-gamut-pattern.png")},
{name: 'a Blob', factory: makeBlob("/images/wide-gamut-pattern.png")},
];
for (let { name, factory } of wideGamutImageSourceTypes) {
promise_test(function() {
return factory().then(function(img) {
return testDrawImageBitmap(img, {colorSpaceConversion: "none"});
});
}, `createImageBitmap from ${name}, and drawImage on the created ImageBitmap with colorSpaceConversion: none`);
}
</script>
</body>
</html>
|
