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

   1 description("Ensure correct behavior of canvas with fillRect using a gradient fillStyle and a 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 function shouldBeAround(a, b)
  14 {
  15     var evalA;
  16     try {
  17         evalA = eval(a);
  18     } catch(e) {
  19         evalA = e;
  20     }
  21
  22     if (Math.abs(evalA - b) < 5)
  23         print("PASS " + a + " is around " + b , "green")
  24     else
  25         print("FAIL " + a + " is not around " + b + " (actual: " + evalA + ")", "red");
  26 }
  27
  28 function shouldBeSmaller(a, b)
  29 {
  30     var evalA;
  31     try {
  32         evalA = eval(a);
  33     } catch(e) {
  34         evalA = e;
  35     }
  36
  37     if (evalA < b)
  38         print("PASS " + a + " is smaller than " + b , "green")
  39     else
  40         print("FAIL " + a + " is not smaller than " + b + " (actual: " + evalA + ")", "red");
  41 }
  42
  43 var canvas = document.createElement('canvas');
  44 document.body.appendChild(canvas);
  45 canvas.setAttribute('width', '400');
  46 canvas.setAttribute('height', '800');
  47 var ctx = canvas.getContext('2d');
  48
  49 var gradient = ctx.createLinearGradient(0, 0, 100, 100);
  50 gradient.addColorStop(0, 'rgba(0, 0, 255, 1.0)');
  51 gradient.addColorStop(1, 'rgba(0, 0, 255, 1.0)');
  52
  53 ctx.shadowOffsetX = 200;
  54 ctx.fillStyle = gradient;
  55
  56 ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';
  57 ctx.fillRect(50, 50, 100, 100);
  58
  59 ctx.shadowColor = 'rgba(255, 0, 0, 0.3)';
  60 ctx.fillRect(50, 200, 100, 100);
  61
  62 ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';
  63 ctx.shadowBlur = 5;
  64 ctx.fillRect(50, 350, 100, 100);
  65
  66 ctx.shadowColor = 'rgba(255, 0, 0, 0.3)';
  67 ctx.fillRect(50, 500, 100, 100);
  68
  69 ctx.rotate(Math.PI/2);
  70 ctx.fillRect(650, -150, 100, 100);
  71
  72 var d; // imageData.data
  73
  74 // Verify solid shadow.
  75 d = ctx.getImageData(250, 50, 1, 1).data;
  76 shouldBe('d[0]', '255');
  77 shouldBe('d[1]', '0');
  78 shouldBe('d[2]', '0');
  79 shouldBe('d[3]', '255');
  80
  81 d = ctx.getImageData(250, 149, 1, 1).data;
  82 shouldBe('d[0]', '255');
  83 shouldBe('d[1]', '0');
  84 shouldBe('d[2]', '0');
  85 shouldBe('d[3]', '255');
  86
  87 d = ctx.getImageData(349, 50, 1, 1).data;
  88 shouldBe('d[0]', '255');
  89 shouldBe('d[1]', '0');
  90 shouldBe('d[2]', '0');
  91 shouldBe('d[3]', '255');
  92
  93 d = ctx.getImageData(349, 149, 1, 1).data;
  94 shouldBe('d[0]', '255');
  95 shouldBe('d[1]', '0');
  96 shouldBe('d[2]', '0');
  97 shouldBe('d[3]', '255');
  98
  99 // Verify solid alpha shadow.
 100 d = ctx.getImageData(250, 200, 1, 1).data;
 101 shouldBe('d[0]', '255');
 102 shouldBe('d[1]', '0');
 103 shouldBe('d[2]', '0');
 104 shouldBeAround('d[3]', '76');
 105
 106 d = ctx.getImageData(250, 299, 1, 1).data;
 107 shouldBe('d[0]', '255');
 108 shouldBe('d[1]', '0');
 109 shouldBe('d[2]', '0');
 110 shouldBeAround('d[3]', '76');
 111
 112 d = ctx.getImageData(349, 200, 1, 1).data;
 113 shouldBe('d[0]', '255');
 114 shouldBe('d[1]', '0');
 115 shouldBe('d[2]', '0');
 116 shouldBeAround('d[3]', '76');
 117
 118 d = ctx.getImageData(349, 299, 1, 1).data;
 119 shouldBe('d[0]', '255');
 120 shouldBe('d[1]', '0');
 121 shouldBe('d[2]', '0');
 122 shouldBeAround('d[3]', '76');
 123
 124 // Verify blurry shadow.
 125 d = ctx.getImageData(248, 348, 1, 1).data;
 126 shouldBe('d[0]', '255');
 127 shouldBe('d[1]', '0');
 128 shouldBe('d[2]', '0');
 129 shouldBeSmaller('d[3]', '25');
 130
 131 d = ctx.getImageData(248, 451, 1, 1).data;
 132 shouldBe('d[0]', '255');
 133 shouldBe('d[1]', '0');
 134 shouldBe('d[2]', '0');
 135 shouldBeSmaller('d[3]', '25');
 136
 137 d = ctx.getImageData(351, 348, 1, 1).data;
 138 shouldBe('d[0]', '255');
 139 shouldBe('d[1]', '0');
 140 shouldBe('d[2]', '0');
 141 shouldBeSmaller('d[3]', '25');
 142
 143 d = ctx.getImageData(351, 451, 1, 1).data;
 144 shouldBe('d[0]', '255');
 145 shouldBe('d[1]', '0');
 146 shouldBe('d[2]', '0');
 147 shouldBeSmaller('d[3]', '25');
 148
 149 // Verify blurry alpha shadow.
 150 d = ctx.getImageData(248, 498, 1, 1).data;
 151 shouldBe('d[0]', '255');
 152 shouldBe('d[1]', '0');
 153 shouldBe('d[2]', '0');
 154 shouldBeSmaller('d[3]', '10');
 155
 156 d = ctx.getImageData(248, 601, 1, 1).data;
 157 shouldBe('d[0]', '255');
 158 shouldBe('d[1]', '0');
 159 shouldBe('d[2]', '0');
 160 shouldBeSmaller('d[3]', '10');
 161
 162 d = ctx.getImageData(351, 498, 1, 1).data;
 163 shouldBe('d[0]', '255');
 164 shouldBe('d[1]', '0');
 165 shouldBe('d[2]', '0');
 166 shouldBeSmaller('d[3]', '10');
 167
 168 d = ctx.getImageData(351, 601, 1, 1).data;
 169 shouldBe('d[0]', '255');
 170 shouldBe('d[1]', '0');
 171 shouldBe('d[2]', '0');
 172 shouldBeSmaller('d[3]', '10');
 173
 174 // Verify blurry alpha shadow with rotation.
 175 d = ctx.getImageData(249, 649, 1, 1).data;
 176 shouldBe('d[0]', '255');
 177 shouldBe('d[1]', '0');
 178 shouldBe('d[2]', '0');
 179 shouldBeSmaller('d[3]', '15');
 180
 181 d = ctx.getImageData(248, 751, 1, 1).data;
 182 shouldBe('d[0]', '255');
 183 shouldBe('d[1]', '0');
 184 shouldBe('d[2]', '0');
 185 shouldBeSmaller('d[3]', '15');
 186
 187 d = ctx.getImageData(350, 649, 1, 1).data;
 188 shouldBe('d[0]', '255');
 189 shouldBe('d[1]', '0');
 190 shouldBe('d[2]', '0');
 191 shouldBeSmaller('d[3]', '15');
 192
 193 d = ctx.getImageData(350, 750, 1, 1).data;
 194 shouldBe('d[0]', '255');
 195 shouldBe('d[1]', '0');
 196 shouldBe('d[2]', '0');
 197 shouldBeSmaller('d[3]', '15');