4 <script type=
"text/javascript">
6 testRunner
.waitUntilDone();
7 window
.jsTestIsAsync
= true
11 <script src=
"../../resources/js-test.js"></script>
12 <script type=
"text/javascript" src=
"canvas-blending-helpers.js"></script>
13 <script type=
"text/javascript">
15 description("Series of tests to ensure correct results on applying different blend modes when drawing a gradient on top of an image.");
18 function actualColor(x
, y
) {
19 return context
.getImageData(x
, y
, 1, 1).data
;
22 function checkBlendModeResult(i
, context
, sigma
) {
23 var expectedColor
= blendColors([129 / 255, 1, 129 / 255, 1], [1, 129 / 255, 129 / 255, 1], i
);
24 var ac
= "actualColor(0, 0)";
25 shouldBeCloseTo(ac
+ "[0]", expectedColor
[0], sigma
);
26 shouldBeCloseTo(ac
+ "[1]", expectedColor
[1], sigma
);
27 shouldBeCloseTo(ac
+ "[2]", expectedColor
[2], sigma
);
28 shouldBeCloseTo(ac
+ "[3]", expectedColor
[3], sigma
);
31 function drawElement(context
, i
) {
32 if (i
>= blendModes
.length
) {
36 debug("Testing blend mode " + blendModes
[i
]);
38 context
.clearRect(0, 0, 10, 10);
40 drawBackdropColorImageInContext(context
,
42 context
.globalCompositeOperation
= blendModes
[i
];
43 drawSourceColorGradientInContext(context
);
44 checkBlendModeResult(i
, context
, 5);
47 drawElement(context
, ++i
);
52 var canvas
= document
.createElement("canvas");
56 context
= canvas
.getContext("2d");
57 drawElement(context
, 0);