third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-strokePath-shadow.js

   1 description("Ensure correct behavior of canvas with path stroke shadow");
   2
   3 function print(message, color)
   4 {
   5     var paragraph = document.createElement("div");
   6     paragraph.appendChild(document.createTextNode(message));
   7     paragraph.style.fontFamily = "monospace";
   8     if (color)
   9         paragraph.style.color = color;
  10     document.getElementById("console").appendChild(paragraph);
  11 }
  12
  13 // Level of tolerance we expect of most pixel comparisons in this test.
  14 function shouldBeAlmost(_a, _b)
  15 {
  16     shouldBeCloseTo(_a, _b, 2);
  17 }
  18
  19 var canvas = document.createElement('canvas');
  20 document.body.appendChild(canvas);
  21 canvas.setAttribute('width', '700');
  22 canvas.setAttribute('height', '700');
  23 var ctx = canvas.getContext('2d');
  24
  25 ctx.beginPath();
  26 ctx.moveTo(300, 300);
  27 ctx.lineTo(300, 50);
  28 ctx.bezierCurveTo(200, 40, 75, 150, 30, 30);
  29 ctx.quadraticCurveTo(250, 75, 50, 300);
  30 ctx.shadowOffsetX = 350;
  31 ctx.shadowColor = 'rgba(255, 20, 0, 0.5)';
  32 ctx.shadowBlur = 0;
  33 ctx.strokeStyle = 'rgba(0, 0, 255, 1)';
  34 ctx.lineWidth = 30;
  35 ctx.closePath();
  36 ctx.stroke();
  37
  38 ctx.beginPath();
  39 ctx.moveTo(300,650);
  40 ctx.lineTo(300,400);
  41 ctx.bezierCurveTo(200, 390, 75, 500, 30, 380);
  42 ctx.quadraticCurveTo(250, 425, 50, 650);
  43 ctx.shadowOffsetX = 350;
  44 ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
  45 ctx.shadowBlur = 30;
  46 ctx.strokeStyle = 'rgba(0, 0, 255, 1)';
  47 ctx.lineWidth = 30;
  48 ctx.closePath();
  49 ctx.stroke();
  50
  51 var imageData, data;
  52
  53 // Verify solid shadow.
  54 imageData = ctx.getImageData(650, 300, 1, 1);
  55 data = imageData.data;
  56 shouldBeAlmost('data[0]', 255);
  57 shouldBeAlmost('data[1]', 20);
  58 shouldBeAlmost('data[2]', 0);
  59
  60 imageData = ctx.getImageData(650, 50, 1, 1);
  61 data = imageData.data;
  62 shouldBeAlmost('data[0]', 255);
  63 shouldBeAlmost('data[1]', 20);
  64 shouldBeAlmost('data[2]', 0);
  65
  66 imageData = ctx.getImageData(380, 30, 1, 1);
  67 data = imageData.data;
  68 shouldBeAlmost('data[0]', 255);
  69 shouldBeAlmost('data[1]', 20);
  70 shouldBeAlmost('data[2]', 0);
  71
  72 imageData = ctx.getImageData(400, 40, 1, 1);
  73 data = imageData.data;
  74 shouldBeAlmost('data[0]', 255);
  75 shouldBeAlmost('data[1]', 20);
  76 shouldBeAlmost('data[2]', 0);
  77
  78 // Verify blurry shadow.
  79 imageData = ctx.getImageData(640, 640, 1, 1);
  80 data = imageData.data;
  81 shouldBeAlmost('data[0]', 255);
  82 shouldBeAlmost('data[1]', 0);
  83 shouldBeAlmost('data[2]', 0);
  84 shouldNotBe('data[3]', '255');
  85
  86 imageData = ctx.getImageData(650, 400, 1, 1);
  87 data = imageData.data;
  88 shouldBeAlmost('data[0]', 255);
  89 shouldBeAlmost('data[1]', 0);
  90 shouldBeAlmost('data[2]', 0);
  91 shouldNotBe('data[3]', '255');
  92
  93 imageData = ctx.getImageData(380, 380, 1, 1);
  94 data = imageData.data;
  95 shouldBeAlmost('data[0]', 255);
  96 shouldBeAlmost('data[1]', 0);
  97 shouldBeAlmost('data[2]', 0);
  98 shouldNotBe('data[3]', '255');
  99
 100 imageData = ctx.getImageData(350, 380, 1, 1);
 101 data = imageData.data;
 102 shouldBeAlmost('data[0]', 255);
 103 shouldBeAlmost('data[1]', 0);
 104 shouldBeAlmost('data[2]', 0);
 105 shouldNotBe('data[3]', '255');