third_party/WebKit/LayoutTests/fast/canvas/canvas-blending-image-over-image.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4     <script type="text/javascript">
   5         if (window.testRunner)
   6             testRunner.waitUntilDone();
   7         window.jsTestIsAsync = true
   8     </script>
   9 </head>
  10 <body>
  11     <script src="../../resources/js-test.js"></script>
  12     <script type="text/javascript" src="canvas-blending-helpers.js"></script>
  13     <script type="text/javascript">
  14
  15         description("Series of tests to ensure correct results on applying different blend modes when drawing an image on top of another.");
  16
  17         var context;
  18         function actualColor(x, y) {
  19             return context.getImageData(x, y, 1, 1).data;
  20         }
  21
  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);
  29         }
  30
  31         function drawElement(context, i) {
  32             if (i >= blendModes.length) {
  33                 finishJSTest();
  34                 return;
  35             }
  36             debug("Testing blend mode " + blendModes[i]);
  37
  38             context.clearRect(0, 0, 10, 10);
  39             context.save();
  40             drawBackdropColorImageInContext(context, function() {
  41                 context.globalCompositeOperation = blendModes[i];
  42
  43                 drawSourceColorImageInContext(context, function() {
  44                     checkBlendModeResult(i, context, 5);
  45                     context.restore();
  46                     debug('');
  47                     drawElement(context, ++i);
  48                 });
  49             });
  50         }
  51
  52         function runTest() {
  53             var canvas = document.createElement("canvas");
  54             var sigma = 5;
  55             canvas.width = 10;
  56             canvas.height = 10;
  57             context = canvas.getContext("2d");
  58             drawElement(context, 0);
  59         }
  60
  61         runTest();
  62     </script>
  63 </body>
  64 </html>