third_party/WebKit/LayoutTests/fast/canvas/canvas-blending-clipping.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <body>
   4     <script src="../../resources/js-test.js"></script>
   5     <script type="text/javascript" src="canvas-blending-helpers.js"></script>
   6     <script type="text/javascript">
   7
   8         description("Series of tests to ensure correct results on applying different blend modes when drawing with clipped regions.");
   9
  10         var context;
  11         function actualColor(x, y) {
  12             return context.getImageData(x, y, 1, 1).data;
  13         }
  14
  15         function checkBlendModeResult(i, context, sigma) {
  16             var expectedColor = blendColors([129 / 255, 1, 129 / 255, 1], [1, 129 / 255, 129 / 255, 1], i);
  17             var ac = "actualColor(0, 0)";
  18             shouldBeCloseTo(ac + "[0]", 0, sigma);
  19             shouldBeCloseTo(ac + "[1]", 0, sigma);
  20             shouldBeCloseTo(ac + "[2]", 0, sigma);
  21             shouldBeCloseTo(ac + "[3]", 0, sigma);
  22
  23             ac = "actualColor(5, 5)";
  24             shouldBeCloseTo(ac + "[0]", expectedColor[0], sigma);
  25             shouldBeCloseTo(ac + "[1]", expectedColor[1], sigma);
  26             shouldBeCloseTo(ac + "[2]", expectedColor[2], sigma);
  27             shouldBeCloseTo(ac + "[3]", expectedColor[3], sigma);
  28         }
  29
  30         function runTest() {
  31             var canvas = document.createElement("canvas");
  32             var sigma = 5;
  33             canvas.width = 10;
  34             canvas.height = 10;
  35             context = canvas.getContext("2d");
  36
  37             for (var i = 0; i < blendModes.length; ++i) {
  38                 debug("Testing blend mode " + blendModes[i]);
  39
  40                 context.clearRect(0, 0, 10, 10);
  41                 context.save();
  42                 context.beginPath();
  43                 context.moveTo(3, 3);
  44                 context.lineTo(3, 7);
  45                 context.lineTo(7, 7);
  46                 context.lineTo(7, 3);
  47                 context.lineTo(3, 3);
  48                 context.clip();
  49
  50                 drawBackdropColorInContext(context);
  51                 context.globalCompositeOperation = blendModes[i];
  52                 drawSourceColorInContext(context);
  53                 checkBlendModeResult(i, context, sigma);
  54                 context.restore();
  55                 debug('');
  56             }
  57         }
  58
  59         runTest();
  60     </script>
  61 </body>
  62 </html>