third_party/WebKit/LayoutTests/fast/canvas/canvas-blending-gradient-over-gradient.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 a gradient on top of another.");
   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]", expectedColor[0], sigma);
  19             shouldBeCloseTo(ac + "[1]", expectedColor[1], sigma);
  20             shouldBeCloseTo(ac + "[2]", expectedColor[2], sigma);
  21             shouldBeCloseTo(ac + "[3]", expectedColor[3], sigma);
  22         }
  23
  24         function runTest() {
  25             var canvas = document.createElement("canvas");
  26             var sigma = 5;
  27             canvas.width = 10;
  28             canvas.height = 10;
  29             context = canvas.getContext("2d");
  30
  31             for (var i = 0; i < blendModes.length; ++i) {
  32                 debug("Testing blend mode " + blendModes[i]);
  33
  34                 context.clearRect(0, 0, 10, 10);
  35                 context.save();
  36                 drawBackdropColorGradientInContext(context);
  37                 context.globalCompositeOperation = blendModes[i];
  38                 drawSourceColorGradientInContext(context);
  39                 checkBlendModeResult(i, context, sigma);
  40                 context.restore();
  41                 debug('');
  42             }
  43         }
  44
  45         runTest();
  46     </script>
  47 </body>
  48 </html>