Google Git
Sign in
webkit / WebKit / b77ef60f9e352abd5f0b9f65cef7d6cf3a025367 / . / LayoutTests / fast / canvas / canvas-blending-image-over-image.html
blob: f92c6fc9285a0bbc29dd52e3b7d29e71c110c458 [file] [log] [blame]
commit-queue@webkit.orgc5178be2013-08-02 18:42:51 +0000[diff] [blame]1<!DOCTYPE HTML>
2<html>
3<head>
4 <script type="text/javascript">
5 if (window.testRunner)
6 testRunner.waitUntilDone();
7 </script>
8</head>
9<body>
mark.lam@apple.com104d9932013-09-07 22:20:15 +0000[diff] [blame]10 <script src="../../resources/js-test-pre.js"></script>
commit-queue@webkit.orgc5178be2013-08-02 18:42:51 +0000[diff] [blame]11 <script type="text/javascript" src="canvas-blending-helpers.js"></script>
12 <script type="text/javascript">
13
14 description("Series of tests to ensure correct results on applying different blend modes when drawing an image on top of another.");
15
commit-queue@webkit.org7887c4d2013-08-05 14:23:05 +0000[diff] [blame]16 var context;
commit-queue@webkit.org144b3222013-08-09 17:35:12 +0000[diff] [blame]17 var hardwareAcceleratedTestsDone = false;
commit-queue@webkit.org7887c4d2013-08-05 14:23:05 +0000[diff] [blame]18 function actualColor(x, y) {
19 return context.getImageData(x, y, 1, 1).data;
20 }
21
commit-queue@webkit.orgc5178be2013-08-02 18:42:51 +0000[diff] [blame]22 function checkBlendModeResult(i, context, sigma) {
23 var expectedColor = blendColors([129 / 255, 1, 129 / 255, 1], [1, 129 / 255, 129 / 255, 1], i);
commit-queue@webkit.org7887c4d2013-08-05 14:23:05 +0000[diff] [blame]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);
commit-queue@webkit.orgc5178be2013-08-02 18:42:51 +0000[diff] [blame]29 }
30
31 function drawElement(context, i) {
32 if (i >= blendModes.length) {
commit-queue@webkit.org144b3222013-08-09 17:35:12 +0000[diff] [blame]33 if (hardwareAcceleratedTestsDone) {
34 var scriptElement = document.createElement("script");
mark.lam@apple.com104d9932013-09-07 22:20:15 +0000[diff] [blame]35 scriptElement.src = "../../resources/js-test-post-async.js";
commit-queue@webkit.org144b3222013-08-09 17:35:12 +0000[diff] [blame]36 document.body.appendChild(scriptElement);
37 return;
38 }
39 hardwareAcceleratedTestsDone = true;
40 debug('Running test in hardware accelerated mode\n');
41 runTest(100, 100);
commit-queue@webkit.orgc5178be2013-08-02 18:42:51 +0000[diff] [blame]42 return;
43 }
44 debug("Testing blend mode " + blendModes[i]);
45
46 context.clearRect(0, 0, 10, 10);
47 context.save();
48 drawBackdropColorImageInContext(context, function() {
commit-queue@webkit.org7887c4d2013-08-05 14:23:05 +0000[diff] [blame]49 context.globalCompositeOperation = blendModes[i];
commit-queue@webkit.orgc5178be2013-08-02 18:42:51 +0000[diff] [blame]50
51 drawSourceColorImageInContext(context, function() {
52 checkBlendModeResult(i, context, 5);
53 context.restore();
54 debug('');
55 drawElement(context, ++i);
56 });
57 });
58 }
59
commit-queue@webkit.org144b3222013-08-09 17:35:12 +0000[diff] [blame]60 function runTest(width, height) {
commit-queue@webkit.orgc5178be2013-08-02 18:42:51 +0000[diff] [blame]61 var canvas = document.createElement("canvas");
62 var sigma = 5;
commit-queue@webkit.org144b3222013-08-09 17:35:12 +0000[diff] [blame]63 canvas.width = width;
64 canvas.height = height;
commit-queue@webkit.org7887c4d2013-08-05 14:23:05 +0000[diff] [blame]65 context = canvas.getContext("2d");
commit-queue@webkit.org144b3222013-08-09 17:35:12 +0000[diff] [blame]66 document.body.appendChild(canvas);
commit-queue@webkit.orgc5178be2013-08-02 18:42:51 +0000[diff] [blame]67 drawElement(context, 0);
68 }
69
commit-queue@webkit.org144b3222013-08-09 17:35:12 +0000[diff] [blame]70 debug('Running test in non accelerated mode\n');
71 runTest(10, 10);
72
commit-queue@webkit.orgc5178be2013-08-02 18:42:51 +0000[diff] [blame]73 </script>
commit-queue@webkit.orgc5178be2013-08-02 18:42:51 +0000[diff] [blame]74</body>
75</html>