| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <script type="text/javascript"> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| window.jsTestIsAsync = true |
| </script> |
| </head> |
| <body> |
| <script src="../../resources/js-test.js"></script> |
| <script type="text/javascript" src="canvas-blending-helpers.js"></script> |
| <script type="text/javascript"> |
| |
| description("Series of tests to ensure correct results on applying different blend modes when drawing an image on top of a gradient."); |
| |
| var context; |
| function actualColor(x, y) { |
| return context.getImageData(x, y, 1, 1).data; |
| } |
| |
| function checkBlendModeResult(i, context, sigma) { |
| var expectedColor = blendColors([129 / 255, 1, 129 / 255, 1], [1, 129 / 255, 129 / 255, 1], i); |
| var ac = "actualColor(0, 0)"; |
| shouldBeCloseTo(ac + "[0]", expectedColor[0], sigma); |
| shouldBeCloseTo(ac + "[1]", expectedColor[1], sigma); |
| shouldBeCloseTo(ac + "[2]", expectedColor[2], sigma); |
| shouldBeCloseTo(ac + "[3]", expectedColor[3], sigma); |
| } |
| |
| function drawElement(context, i) { |
| if (i >= blendModes.length) { |
| finishJSTest(); |
| return; |
| } |
| debug("Testing blend mode " + blendModes[i]); |
| |
| context.clearRect(0, 0, 10, 10); |
| context.save(); |
| drawBackdropColorGradientInContext(context); |
| context.globalCompositeOperation = blendModes[i]; |
| |
| drawSourceColorImageInContext(context, function() { |
| checkBlendModeResult(i, context, 5); |
| context.restore(); |
| debug(''); |
| drawElement(context, ++i); |
| }); |
| } |
| |
| function runTest() { |
| var canvas = document.createElement("canvas"); |
| var sigma = 5; |
| canvas.width = 10; |
| canvas.height = 10; |
| context = canvas.getContext("2d"); |
| drawElement(context, 0); |
| } |
| |
| runTest(); |
| </script> |
| </body> |
| </html> |
