third_party/WebKit/LayoutTests/fast/canvas/canvas-blending-pattern-over-gradient.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 a pattern on top of an gradient.");
  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             drawBackdropColorGradientInContext(context);
  41             context.globalCompositeOperation = blendModes[i];
  42
  43             drawSourceColorPatternInContext(context, function() {
  44                 checkBlendModeResult(i, context, 5);
  45                 context.restore();
  46                 debug('');
  47                 drawElement(context, ++i);
  48             });
  49         }
  50
  51         function runTest() {
  52             var canvas = document.createElement("canvas");
  53             var sigma = 5;
  54             canvas.width = 10;
  55             canvas.height = 10;
  56             context = canvas.getContext("2d");
  57             drawElement(context, 0);
  58         }
  59
  60         runTest();
  61     </script>
  62 </body>
  63 </html>