testing/web-platform/tests/html/canvas/tools/yaml/element/shadows.yaml

   1 - name: 2d.shadow.attributes.shadowBlur.initial
   2   testing:
   3   - 2d.shadow.blur.get
   4   - 2d.shadow.blur.initial
   5   code: |
   6     @assert ctx.shadowBlur === 0;
   7
   8 - name: 2d.shadow.attributes.shadowBlur.valid
   9   testing:
  10   - 2d.shadow.blur.get
  11   - 2d.shadow.blur.set
  12   code: |
  13     ctx.shadowBlur = 1;
  14     @assert ctx.shadowBlur === 1;
  15
  16     ctx.shadowBlur = 0.5;
  17     @assert ctx.shadowBlur === 0.5;
  18
  19     ctx.shadowBlur = 1e6;
  20     @assert ctx.shadowBlur === 1e6;
  21
  22     ctx.shadowBlur = 0;
  23     @assert ctx.shadowBlur === 0;
  24
  25 - name: 2d.shadow.attributes.shadowBlur.invalid
  26   testing:
  27   - 2d.shadow.blur.invalid
  28   code: |
  29     ctx.shadowBlur = 1;
  30     ctx.shadowBlur = -2;
  31     @assert ctx.shadowBlur === 1;
  32
  33     ctx.shadowBlur = 1;
  34     ctx.shadowBlur = Infinity;
  35     @assert ctx.shadowBlur === 1;
  36
  37     ctx.shadowBlur = 1;
  38     ctx.shadowBlur = -Infinity;
  39     @assert ctx.shadowBlur === 1;
  40
  41     ctx.shadowBlur = 1;
  42     ctx.shadowBlur = NaN;
  43     @assert ctx.shadowBlur === 1;
  44
  45     ctx.shadowBlur = 1;
  46     ctx.shadowBlur = 'string';
  47     @assert ctx.shadowBlur === 1;
  48
  49     ctx.shadowBlur = 1;
  50     ctx.shadowBlur = true;
  51     @assert ctx.shadowBlur === 1;
  52
  53     ctx.shadowBlur = 1;
  54     ctx.shadowBlur = false;
  55     @assert ctx.shadowBlur === 0;
  56
  57 - name: 2d.shadow.attributes.shadowOffset.initial
  58   testing:
  59   - 2d.shadow.offset.initial
  60   code: |
  61     @assert ctx.shadowOffsetX === 0;
  62     @assert ctx.shadowOffsetY === 0;
  63
  64 - name: 2d.shadow.attributes.shadowOffset.valid
  65   testing:
  66   - 2d.shadow.offset.get
  67   - 2d.shadow.offset.set
  68   code: |
  69     ctx.shadowOffsetX = 1;
  70     ctx.shadowOffsetY = 2;
  71     @assert ctx.shadowOffsetX === 1;
  72     @assert ctx.shadowOffsetY === 2;
  73
  74     ctx.shadowOffsetX = 0.5;
  75     ctx.shadowOffsetY = 0.25;
  76     @assert ctx.shadowOffsetX === 0.5;
  77     @assert ctx.shadowOffsetY === 0.25;
  78
  79     ctx.shadowOffsetX = -0.5;
  80     ctx.shadowOffsetY = -0.25;
  81     @assert ctx.shadowOffsetX === -0.5;
  82     @assert ctx.shadowOffsetY === -0.25;
  83
  84     ctx.shadowOffsetX = 0;
  85     ctx.shadowOffsetY = 0;
  86     @assert ctx.shadowOffsetX === 0;
  87     @assert ctx.shadowOffsetY === 0;
  88
  89     ctx.shadowOffsetX = 1e6;
  90     ctx.shadowOffsetY = 1e6;
  91     @assert ctx.shadowOffsetX === 1e6;
  92     @assert ctx.shadowOffsetY === 1e6;
  93
  94 - name: 2d.shadow.attributes.shadowOffset.invalid
  95   testing:
  96   - 2d.shadow.offset.invalid
  97   code: |
  98     ctx.shadowOffsetX = 1;
  99     ctx.shadowOffsetY = 2;
 100     ctx.shadowOffsetX = Infinity;
 101     ctx.shadowOffsetY = Infinity;
 102     @assert ctx.shadowOffsetX === 1;
 103     @assert ctx.shadowOffsetY === 2;
 104
 105     ctx.shadowOffsetX = 1;
 106     ctx.shadowOffsetY = 2;
 107     ctx.shadowOffsetX = -Infinity;
 108     ctx.shadowOffsetY = -Infinity;
 109     @assert ctx.shadowOffsetX === 1;
 110     @assert ctx.shadowOffsetY === 2;
 111
 112     ctx.shadowOffsetX = 1;
 113     ctx.shadowOffsetY = 2;
 114     ctx.shadowOffsetX = NaN;
 115     ctx.shadowOffsetY = NaN;
 116     @assert ctx.shadowOffsetX === 1;
 117     @assert ctx.shadowOffsetY === 2;
 118
 119     ctx.shadowOffsetX = 1;
 120     ctx.shadowOffsetY = 2;
 121     ctx.shadowOffsetX = 'string';
 122     ctx.shadowOffsetY = 'string';
 123     @assert ctx.shadowOffsetX === 1;
 124     @assert ctx.shadowOffsetY === 2;
 125
 126     ctx.shadowOffsetX = 1;
 127     ctx.shadowOffsetY = 2;
 128     ctx.shadowOffsetX = true;
 129     ctx.shadowOffsetY = true;
 130     @assert ctx.shadowOffsetX === 1;
 131     @assert ctx.shadowOffsetY === 1;
 132
 133     ctx.shadowOffsetX = 1;
 134     ctx.shadowOffsetY = 2;
 135     ctx.shadowOffsetX = false;
 136     ctx.shadowOffsetY = false;
 137     @assert ctx.shadowOffsetX === 0;
 138     @assert ctx.shadowOffsetY === 0;
 139
 140 - name: 2d.shadow.attributes.shadowColor.initial
 141   testing:
 142   - 2d.shadow.color.initial
 143   code: |
 144     @assert ctx.shadowColor === 'rgba(0, 0, 0, 0)';
 145
 146 - name: 2d.shadow.attributes.shadowColor.valid
 147   testing:
 148   - 2d.shadow.color.get
 149   - 2d.shadow.color.set
 150   code: |
 151     ctx.shadowColor = 'lime';
 152     @assert ctx.shadowColor === '#00ff00';
 153
 154     ctx.shadowColor = 'RGBA(0,255, 0,0)';
 155     @assert ctx.shadowColor === 'rgba(0, 255, 0, 0)';
 156
 157 - name: 2d.shadow.attributes.shadowColor.invalid
 158   testing:
 159   - 2d.shadow.color.invalid
 160   code: |
 161     ctx.shadowColor = '#00ff00';
 162     ctx.shadowColor = 'bogus';
 163     @assert ctx.shadowColor === '#00ff00';
 164
 165     ctx.shadowColor = '#00ff00';
 166     ctx.shadowColor = 'red bogus';
 167     @assert ctx.shadowColor === '#00ff00';
 168
 169     ctx.shadowColor = '#00ff00';
 170     ctx.shadowColor = ctx;
 171     @assert ctx.shadowColor === '#00ff00';
 172
 173     ctx.shadowColor = '#00ff00';
 174     ctx.shadowColor = undefined;
 175     @assert ctx.shadowColor === '#00ff00';
 176
 177 - name: 2d.shadow.enable.off.1
 178   desc: Shadows are not drawn when only shadowColor is set
 179   testing:
 180   - 2d.shadow.enable
 181   - 2d.shadow.render
 182   code: |
 183     ctx.shadowColor = '#f00';
 184     ctx.fillStyle = '#0f0';
 185     ctx.fillRect(0, 0, 100, 50);
 186     @assert pixel 50,25 == 0,255,0,255;
 187   expected: green
 188
 189 - name: 2d.shadow.enable.off.2
 190   desc: Shadows are not drawn when only shadowColor is set
 191   testing:
 192   - 2d.shadow.enable
 193   - 2d.shadow.render
 194   code: |
 195     ctx.globalCompositeOperation = 'destination-atop';
 196     ctx.shadowColor = '#f00';
 197     ctx.fillStyle = '#0f0';
 198     ctx.fillRect(0, 0, 100, 50);
 199     @assert pixel 50,25 == 0,255,0,255;
 200   expected: green
 201
 202 - name: 2d.shadow.enable.blur
 203   desc: Shadows are drawn if shadowBlur is set
 204   testing:
 205   - 2d.shadow.enable
 206   - 2d.shadow.render
 207   code: |
 208     ctx.globalCompositeOperation = 'destination-atop';
 209     ctx.shadowColor = '#0f0';
 210     ctx.shadowBlur = 0.1;
 211     ctx.fillStyle = '#f00';
 212     ctx.fillRect(0, 0, 100, 50);
 213     @assert pixel 50,25 == 0,255,0,255;
 214   expected: green
 215
 216 - name: 2d.shadow.enable.x
 217   desc: Shadows are drawn if shadowOffsetX is set
 218   testing:
 219   - 2d.shadow.enable
 220   - 2d.shadow.render
 221   code: |
 222     ctx.globalCompositeOperation = 'destination-atop';
 223     ctx.shadowColor = '#0f0';
 224     ctx.shadowOffsetX = 0.1;
 225     ctx.fillStyle = '#f00';
 226     ctx.fillRect(0, 0, 100, 50);
 227     @assert pixel 50,25 == 0,255,0,255;
 228   expected: green
 229
 230 - name: 2d.shadow.enable.y
 231   desc: Shadows are drawn if shadowOffsetY is set
 232   testing:
 233   - 2d.shadow.enable
 234   - 2d.shadow.render
 235   code: |
 236     ctx.globalCompositeOperation = 'destination-atop';
 237     ctx.shadowColor = '#0f0';
 238     ctx.shadowOffsetY = 0.1;
 239     ctx.fillStyle = '#f00';
 240     ctx.fillRect(0, 0, 100, 50);
 241     @assert pixel 50,25 == 0,255,0,255;
 242   expected: green
 243
 244 - name: 2d.shadow.offset.positiveX
 245   desc: Shadows can be offset with positive x
 246   testing:
 247   - 2d.shadow.render
 248   code: |
 249     ctx.fillStyle = '#f00';
 250     ctx.fillRect(0, 0, 100, 50);
 251     ctx.fillStyle = '#0f0';
 252     ctx.shadowColor = '#0f0';
 253     ctx.shadowOffsetX = 50;
 254     ctx.fillRect(0, 0, 50, 50);
 255     @assert pixel 25,25 == 0,255,0,255;
 256     @assert pixel 75,25 == 0,255,0,255;
 257   expected: green
 258
 259 - name: 2d.shadow.offset.negativeX
 260   desc: Shadows can be offset with negative x
 261   testing:
 262   - 2d.shadow.render
 263   code: |
 264     ctx.fillStyle = '#f00';
 265     ctx.fillRect(0, 0, 100, 50);
 266     ctx.fillStyle = '#0f0';
 267     ctx.shadowColor = '#0f0';
 268     ctx.shadowOffsetX = -50;
 269     ctx.fillRect(50, 0, 50, 50);
 270     @assert pixel 25,25 == 0,255,0,255;
 271     @assert pixel 75,25 == 0,255,0,255;
 272   expected: green
 273
 274 - name: 2d.shadow.offset.positiveY
 275   desc: Shadows can be offset with positive y
 276   testing:
 277   - 2d.shadow.render
 278   code: |
 279     ctx.fillStyle = '#f00';
 280     ctx.fillRect(0, 0, 100, 50);
 281     ctx.fillStyle = '#0f0';
 282     ctx.shadowColor = '#0f0';
 283     ctx.shadowOffsetY = 25;
 284     ctx.fillRect(0, 0, 100, 25);
 285     @assert pixel 50,12 == 0,255,0,255;
 286     @assert pixel 50,37 == 0,255,0,255;
 287   expected: green
 288
 289 - name: 2d.shadow.offset.negativeY
 290   desc: Shadows can be offset with negative y
 291   testing:
 292   - 2d.shadow.render
 293   code: |
 294     ctx.fillStyle = '#f00';
 295     ctx.fillRect(0, 0, 100, 50);
 296     ctx.fillStyle = '#0f0';
 297     ctx.shadowColor = '#0f0';
 298     ctx.shadowOffsetY = -25;
 299     ctx.fillRect(0, 25, 100, 25);
 300     @assert pixel 50,12 == 0,255,0,255;
 301     @assert pixel 50,37 == 0,255,0,255;
 302   expected: green
 303
 304 - name: 2d.shadow.outside
 305   desc: Shadows of shapes outside the visible area can be offset onto the visible
 306     area
 307   testing:
 308   - 2d.shadow.render
 309   code: |
 310     ctx.fillStyle = '#f00';
 311     ctx.fillRect(0, 0, 100, 50);
 312     ctx.shadowColor = '#0f0';
 313     ctx.shadowOffsetX = 100;
 314     ctx.fillRect(-100, 0, 25, 50);
 315     ctx.shadowOffsetX = -100;
 316     ctx.fillRect(175, 0, 25, 50);
 317     ctx.shadowOffsetX = 0;
 318     ctx.shadowOffsetY = 100;
 319     ctx.fillRect(25, -100, 50, 25);
 320     ctx.shadowOffsetY = -100;
 321     ctx.fillRect(25, 125, 50, 25);
 322     @assert pixel 12,25 == 0,255,0,255;
 323     @assert pixel 87,25 == 0,255,0,255;
 324     @assert pixel 50,12 == 0,255,0,255;
 325     @assert pixel 50,37 == 0,255,0,255;
 326   expected: green
 327
 328 - name: 2d.shadow.clip.1
 329   desc: Shadows of clipped shapes are still drawn within the clipping region
 330   testing:
 331   - 2d.shadow.render
 332   code: |
 333     ctx.fillStyle = '#0f0';
 334     ctx.fillRect(0, 0, 50, 50);
 335     ctx.fillStyle = '#f00';
 336     ctx.fillRect(50, 0, 50, 50);
 337
 338     ctx.save();
 339     ctx.beginPath();
 340     ctx.rect(50, 0, 50, 50);
 341     ctx.clip();
 342     ctx.shadowColor = '#0f0';
 343     ctx.shadowOffsetX = 50;
 344     ctx.fillRect(0, 0, 50, 50);
 345     ctx.restore();
 346
 347     @assert pixel 25,25 == 0,255,0,255;
 348     @assert pixel 75,25 == 0,255,0,255;
 349   expected: green
 350
 351 - name: 2d.shadow.clip.2
 352   desc: Shadows are not drawn outside the clipping region
 353   testing:
 354   - 2d.shadow.render
 355   code: |
 356     ctx.fillStyle = '#f00';
 357     ctx.fillRect(0, 0, 50, 50);
 358     ctx.fillStyle = '#0f0';
 359     ctx.fillRect(50, 0, 50, 50);
 360
 361     ctx.save();
 362     ctx.beginPath();
 363     ctx.rect(0, 0, 50, 50);
 364     ctx.clip();
 365     ctx.shadowColor = '#f00';
 366     ctx.shadowOffsetX = 50;
 367     ctx.fillRect(0, 0, 50, 50);
 368     ctx.restore();
 369
 370     @assert pixel 25,25 == 0,255,0,255;
 371     @assert pixel 75,25 == 0,255,0,255;
 372   expected: green
 373
 374 - name: 2d.shadow.clip.3
 375   desc: Shadows of clipped shapes are still drawn within the clipping region
 376   testing:
 377   - 2d.shadow.render
 378   code: |
 379     ctx.fillStyle = '#f00';
 380     ctx.fillRect(0, 0, 50, 50);
 381     ctx.fillStyle = '#0f0';
 382     ctx.fillRect(50, 0, 50, 50);
 383
 384     ctx.save();
 385     ctx.beginPath();
 386     ctx.rect(0, 0, 50, 50);
 387     ctx.clip();
 388     ctx.fillStyle = '#f00';
 389     ctx.shadowColor = '#0f0';
 390     ctx.shadowOffsetX = 50;
 391     ctx.fillRect(-50, 0, 50, 50);
 392     ctx.restore();
 393
 394     @assert pixel 25,25 == 0,255,0,255;
 395     @assert pixel 75,25 == 0,255,0,255;
 396   expected: green
 397
 398 - name: 2d.shadow.stroke.basic
 399   desc: Shadows are drawn for strokes
 400   testing:
 401   - 2d.shadow.render
 402   code: |
 403     ctx.fillStyle = '#f00';
 404     ctx.fillRect(0, 0, 100, 50);
 405     ctx.strokeStyle = '#f00';
 406     ctx.shadowColor = '#0f0';
 407     ctx.shadowOffsetY = 50;
 408     ctx.beginPath();
 409     ctx.lineWidth = 50;
 410     ctx.moveTo(0, -25);
 411     ctx.lineTo(100, -25);
 412     ctx.stroke();
 413
 414     @assert pixel 1,25 == 0,255,0,255;
 415     @assert pixel 50,25 == 0,255,0,255;
 416     @assert pixel 98,25 == 0,255,0,255;
 417   expected: green
 418
 419 - name: 2d.shadow.stroke.cap.1
 420   desc: Shadows are not drawn for areas outside stroke caps
 421   testing:
 422   - 2d.shadow.render
 423   code: |
 424     ctx.fillStyle = '#0f0';
 425     ctx.fillRect(0, 0, 100, 50);
 426     ctx.strokeStyle = '#f00';
 427     ctx.shadowColor = '#f00';
 428     ctx.shadowOffsetY = 50;
 429     ctx.beginPath();
 430     ctx.lineWidth = 50;
 431     ctx.lineCap = 'butt';
 432     ctx.moveTo(-50, -25);
 433     ctx.lineTo(0, -25);
 434     ctx.moveTo(100, -25);
 435     ctx.lineTo(150, -25);
 436     ctx.stroke();
 437
 438     @assert pixel 1,25 == 0,255,0,255;
 439     @assert pixel 50,25 == 0,255,0,255;
 440     @assert pixel 98,25 == 0,255,0,255;
 441   expected: green
 442
 443 - name: 2d.shadow.stroke.cap.2
 444   desc: Shadows are drawn for stroke caps
 445   testing:
 446   - 2d.shadow.render
 447   code: |
 448     ctx.fillStyle = '#f00';
 449     ctx.fillRect(0, 0, 100, 50);
 450     ctx.strokeStyle = '#f00';
 451     ctx.shadowColor = '#0f0';
 452     ctx.shadowOffsetY = 50;
 453     ctx.beginPath();
 454     ctx.lineWidth = 50;
 455     ctx.lineCap = 'square';
 456     ctx.moveTo(25, -25);
 457     ctx.lineTo(75, -25);
 458     ctx.stroke();
 459
 460     @assert pixel 1,25 == 0,255,0,255;
 461     @assert pixel 50,25 == 0,255,0,255;
 462     @assert pixel 98,25 == 0,255,0,255;
 463   expected: green
 464
 465 - name: 2d.shadow.stroke.join.1
 466   desc: Shadows are not drawn for areas outside stroke joins
 467   testing:
 468   - 2d.shadow.render
 469   code: |
 470     ctx.fillStyle = '#0f0';
 471     ctx.fillRect(0, 0, 100, 50);
 472     ctx.strokeStyle = '#f00';
 473     ctx.shadowColor = '#f00';
 474     ctx.shadowOffsetX = 100;
 475     ctx.lineWidth = 200;
 476     ctx.lineJoin = 'bevel';
 477     ctx.beginPath();
 478     ctx.moveTo(-200, -50);
 479     ctx.lineTo(-150, -50);
 480     ctx.lineTo(-151, -100);
 481     ctx.stroke();
 482
 483     @assert pixel 1,1 == 0,255,0,255;
 484     @assert pixel 48,48 == 0,255,0,255;
 485     @assert pixel 50,25 == 0,255,0,255;
 486     @assert pixel 98,48 == 0,255,0,255;
 487   expected: green
 488
 489 - name: 2d.shadow.stroke.join.2
 490   desc: Shadows are drawn for stroke joins
 491   testing:
 492   - 2d.shadow.render
 493   code: |
 494     ctx.fillStyle = '#f00';
 495     ctx.fillRect(0, 0, 50, 50);
 496     ctx.fillStyle = '#0f0';
 497     ctx.fillRect(50, 0, 50, 50);
 498     ctx.strokeStyle = '#f00';
 499     ctx.shadowColor = '#0f0';
 500     ctx.shadowOffsetX = 100;
 501     ctx.lineWidth = 200;
 502     ctx.lineJoin = 'miter';
 503     ctx.beginPath();
 504     ctx.moveTo(-200, -50);
 505     ctx.lineTo(-150, -50);
 506     ctx.lineTo(-151, -100);
 507     ctx.stroke();
 508
 509     @assert pixel 1,1 == 0,255,0,255;
 510     @assert pixel 48,48 == 0,255,0,255;
 511     @assert pixel 50,25 == 0,255,0,255;
 512     @assert pixel 98,48 == 0,255,0,255;
 513   expected: green
 514
 515 - name: 2d.shadow.stroke.join.3
 516   desc: Shadows are drawn for stroke joins respecting miter limit
 517   testing:
 518   - 2d.shadow.render
 519   code: |
 520     ctx.fillStyle = '#0f0';
 521     ctx.fillRect(0, 0, 100, 50);
 522     ctx.strokeStyle = '#f00';
 523     ctx.shadowColor = '#f00';
 524     ctx.shadowOffsetX = 100;
 525     ctx.lineWidth = 200;
 526     ctx.lineJoin = 'miter';
 527     ctx.miterLimit = 0.1;
 528     ctx.beginPath();
 529     ctx.moveTo(-200, -50);
 530     ctx.lineTo(-150, -50);
 531     ctx.lineTo(-151, -100); // (not an exact right angle, to avoid some other bug in Firefox 3)
 532     ctx.stroke();
 533
 534     @assert pixel 1,1 == 0,255,0,255;
 535     @assert pixel 48,48 == 0,255,0,255;
 536     @assert pixel 50,25 == 0,255,0,255;
 537     @assert pixel 98,48 == 0,255,0,255;
 538   expected: green
 539
 540 - name: 2d.shadow.image.basic
 541   desc: Shadows are drawn for images
 542   testing:
 543   - 2d.shadow.render
 544   images:
 545   - red.png
 546   code: |
 547     ctx.fillStyle = '#f00';
 548     ctx.fillRect(0, 0, 100, 50);
 549     ctx.shadowColor = '#0f0';
 550     ctx.shadowOffsetY = 50;
 551     ctx.drawImage(document.getElementById('red.png'), 0, -50);
 552
 553     @assert pixel 50,25 == 0,255,0,255;
 554   expected: green
 555
 556 - name: 2d.shadow.image.transparent.1
 557   desc: Shadows are not drawn for transparent images
 558   testing:
 559   - 2d.shadow.render
 560   images:
 561   - transparent.png
 562   code: |
 563     ctx.fillStyle = '#0f0';
 564     ctx.fillRect(0, 0, 100, 50);
 565     ctx.shadowColor = '#f00';
 566     ctx.shadowOffsetY = 50;
 567     ctx.drawImage(document.getElementById('transparent.png'), 0, -50);
 568
 569     @assert pixel 50,25 == 0,255,0,255;
 570   expected: green
 571
 572 - name: 2d.shadow.image.transparent.2
 573   desc: Shadows are not drawn for transparent parts of images
 574   testing:
 575   - 2d.shadow.render
 576   images:
 577   - redtransparent.png
 578   code: |
 579     ctx.fillStyle = '#0f0';
 580     ctx.fillRect(0, 0, 50, 50);
 581     ctx.fillStyle = '#f00';
 582     ctx.fillRect(50, 0, 50, 50);
 583     ctx.shadowOffsetY = 50;
 584     ctx.shadowColor = '#0f0';
 585     ctx.drawImage(document.getElementById('redtransparent.png'), 50, -50);
 586     ctx.shadowColor = '#f00';
 587     ctx.drawImage(document.getElementById('redtransparent.png'), -50, -50);
 588
 589     @assert pixel 25,25 == 0,255,0,255;
 590     @assert pixel 50,25 == 0,255,0,255;
 591     @assert pixel 75,25 == 0,255,0,255;
 592   expected: green
 593
 594 - name: 2d.shadow.image.alpha
 595   desc: Shadows are drawn correctly for partially-transparent images
 596   testing:
 597   - 2d.shadow.render
 598   images:
 599   - transparent50.png
 600   code: |
 601     ctx.fillStyle = '#f00';
 602     ctx.fillRect(0, 0, 100, 50);
 603     ctx.shadowOffsetY = 50;
 604     ctx.shadowColor = '#00f';
 605     ctx.drawImage(document.getElementById('transparent50.png'), 0, -50);
 606
 607     @assert pixel 50,25 ==~ 127,0,127,255;
 608   expected: |
 609     size 100 50
 610     cr.set_source_rgb(0.5, 0, 0.5)
 611     cr.rectangle(0, 0, 100, 50)
 612     cr.fill()
 613
 614 - name: 2d.shadow.image.section
 615   desc: Shadows are not drawn for areas outside image source rectangles
 616   testing:
 617   - 2d.shadow.render
 618   images:
 619   - redtransparent.png
 620   code: |
 621     ctx.fillStyle = '#0f0';
 622     ctx.fillRect(0, 0, 100, 50);
 623     ctx.shadowOffsetY = 50;
 624     ctx.shadowColor = '#f00';
 625     ctx.drawImage(document.getElementById('redtransparent.png'), 50, 0, 50, 50, 0, -50, 50, 50);
 626
 627     @assert pixel 25,25 ==~ 0,255,0,255;
 628     @assert pixel 50,25 ==~ 0,255,0,255;
 629     @assert pixel 75,25 ==~ 0,255,0,255;
 630   expected: green
 631
 632 - name: 2d.shadow.image.scale
 633   desc: Shadows are drawn correctly for scaled images
 634   testing:
 635   - 2d.shadow.render
 636   images:
 637   - redtransparent.png
 638   code: |
 639     ctx.fillStyle = '#f00';
 640     ctx.fillRect(0, 0, 100, 50);
 641     ctx.shadowOffsetY = 50;
 642     ctx.shadowColor = '#0f0';
 643     ctx.drawImage(document.getElementById('redtransparent.png'), 0, 0, 100, 50, -10, -50, 240, 50);
 644
 645     @assert pixel 25,25 ==~ 0,255,0,255;
 646     @assert pixel 50,25 ==~ 0,255,0,255;
 647     @assert pixel 75,25 ==~ 0,255,0,255;
 648   expected: green
 649
 650 - name: 2d.shadow.canvas.basic
 651   desc: Shadows are drawn for canvases
 652   testing:
 653   - 2d.shadow.render
 654   code: |
 655     var canvas2 = document.createElement('canvas');
 656     canvas2.width = 100;
 657     canvas2.height = 50;
 658     var ctx2 = canvas2.getContext('2d');
 659     ctx2.fillStyle = '#f00';
 660     ctx2.fillRect(0, 0, 100, 50);
 661
 662     ctx.fillStyle = '#f00';
 663     ctx.fillRect(0, 0, 100, 50);
 664     ctx.shadowColor = '#0f0';
 665     ctx.shadowOffsetY = 50;
 666     ctx.drawImage(canvas2, 0, -50);
 667
 668     @assert pixel 50,25 == 0,255,0,255;
 669   expected: green
 670
 671 - name: 2d.shadow.canvas.transparent.1
 672   desc: Shadows are not drawn for transparent canvases
 673   testing:
 674   - 2d.shadow.render
 675   code: |
 676     var canvas2 = document.createElement('canvas');
 677     canvas2.width = 100;
 678     canvas2.height = 50;
 679     var ctx2 = canvas2.getContext('2d');
 680
 681     ctx.fillStyle = '#0f0';
 682     ctx.fillRect(0, 0, 100, 50);
 683     ctx.shadowColor = '#f00';
 684     ctx.shadowOffsetY = 50;
 685     ctx.drawImage(canvas2, 0, -50);
 686
 687     @assert pixel 50,25 == 0,255,0,255;
 688   expected: green
 689
 690 - name: 2d.shadow.canvas.transparent.2
 691   desc: Shadows are not drawn for transparent parts of canvases
 692   testing:
 693   - 2d.shadow.render
 694   code: |
 695     var canvas2 = document.createElement('canvas');
 696     canvas2.width = 100;
 697     canvas2.height = 50;
 698     var ctx2 = canvas2.getContext('2d');
 699     ctx2.fillStyle = '#f00';
 700     ctx2.fillRect(0, 0, 50, 50);
 701
 702     ctx.fillStyle = '#0f0';
 703     ctx.fillRect(0, 0, 50, 50);
 704     ctx.fillStyle = '#f00';
 705     ctx.fillRect(50, 0, 50, 50);
 706     ctx.shadowOffsetY = 50;
 707     ctx.shadowColor = '#0f0';
 708     ctx.drawImage(canvas2, 50, -50);
 709     ctx.shadowColor = '#f00';
 710     ctx.drawImage(canvas2, -50, -50);
 711
 712     @assert pixel 25,25 == 0,255,0,255;
 713     @assert pixel 50,25 == 0,255,0,255;
 714     @assert pixel 75,25 == 0,255,0,255;
 715   expected: green
 716
 717 - name: 2d.shadow.canvas.alpha
 718   desc: Shadows are drawn correctly for partially-transparent canvases
 719   testing:
 720   - 2d.shadow.render
 721   images:
 722   - transparent50.png
 723   code: |
 724     var canvas2 = document.createElement('canvas');
 725     canvas2.width = 100;
 726     canvas2.height = 50;
 727     var ctx2 = canvas2.getContext('2d');
 728     ctx2.fillStyle = 'rgba(255, 0, 0, 0.5)';
 729     ctx2.fillRect(0, 0, 100, 50);
 730
 731     ctx.fillStyle = '#f00';
 732     ctx.fillRect(0, 0, 100, 50);
 733     ctx.shadowOffsetY = 50;
 734     ctx.shadowColor = '#00f';
 735     ctx.drawImage(canvas2, 0, -50);
 736
 737     @assert pixel 50,25 ==~ 127,0,127,255;
 738   expected: |
 739     size 100 50
 740     cr.set_source_rgb(0.5, 0, 0.5)
 741     cr.rectangle(0, 0, 100, 50)
 742     cr.fill()
 743
 744 - name: 2d.shadow.pattern.basic
 745   desc: Shadows are drawn for fill patterns
 746   testing:
 747   - 2d.shadow.render
 748   # http://bugs.webkit.org/show_bug.cgi?id=15266
 749   images:
 750   - red.png
 751   code: |
 752     var pattern = ctx.createPattern(document.getElementById('red.png'), 'repeat');
 753     ctx.fillStyle = '#f00';
 754     ctx.fillRect(0, 0, 100, 50);
 755     ctx.shadowColor = '#0f0';
 756     ctx.shadowOffsetY = 50;
 757     ctx.fillStyle = pattern;
 758     ctx.fillRect(0, -50, 100, 50);
 759
 760     @assert pixel 50,25 == 0,255,0,255;
 761   expected: green
 762
 763 - name: 2d.shadow.pattern.transparent.1
 764   desc: Shadows are not drawn for transparent fill patterns
 765   testing:
 766   - 2d.shadow.render
 767   # http://bugs.webkit.org/show_bug.cgi?id=15266
 768   images:
 769   - transparent.png
 770   code: |
 771     var pattern = ctx.createPattern(document.getElementById('transparent.png'), 'repeat');
 772     ctx.fillStyle = '#0f0';
 773     ctx.fillRect(0, 0, 100, 50);
 774     ctx.shadowColor = '#f00';
 775     ctx.shadowOffsetY = 50;
 776     ctx.fillStyle = pattern;
 777     ctx.fillRect(0, -50, 100, 50);
 778
 779     @assert pixel 50,25 == 0,255,0,255;
 780   expected: green
 781
 782 - name: 2d.shadow.pattern.transparent.2
 783   desc: Shadows are not drawn for transparent parts of fill patterns
 784   testing:
 785   - 2d.shadow.render
 786   # http://bugs.webkit.org/show_bug.cgi?id=15266
 787   images:
 788   - redtransparent.png
 789   code: |
 790     var pattern = ctx.createPattern(document.getElementById('redtransparent.png'), 'repeat');
 791     ctx.fillStyle = '#f00';
 792     ctx.fillRect(0, 0, 50, 50);
 793     ctx.fillStyle = '#0f0';
 794     ctx.fillRect(50, 0, 50, 50);
 795     ctx.shadowOffsetY = 50;
 796     ctx.shadowColor = '#0f0';
 797     ctx.fillStyle = pattern;
 798     ctx.fillRect(0, -50, 100, 50);
 799
 800     @assert pixel 25,25 == 0,255,0,255;
 801     @assert pixel 50,25 == 0,255,0,255;
 802     @assert pixel 75,25 == 0,255,0,255;
 803   expected: green
 804
 805 - name: 2d.shadow.pattern.alpha
 806   desc: Shadows are drawn correctly for partially-transparent fill patterns
 807   testing:
 808   - 2d.shadow.render
 809   # http://bugs.webkit.org/show_bug.cgi?id=15266
 810   images:
 811   - transparent50.png
 812   code: |
 813     var pattern = ctx.createPattern(document.getElementById('transparent50.png'), 'repeat');
 814     ctx.fillStyle = '#f00';
 815     ctx.fillRect(0, 0, 100, 50);
 816     ctx.shadowOffsetY = 50;
 817     ctx.shadowColor = '#00f';
 818     ctx.fillStyle = pattern;
 819     ctx.fillRect(0, -50, 100, 50);
 820
 821     @assert pixel 50,25 ==~ 127,0,127,255;
 822   expected: |
 823     size 100 50
 824     cr.set_source_rgb(0.5, 0, 0.5)
 825     cr.rectangle(0, 0, 100, 50)
 826     cr.fill()
 827
 828 - name: 2d.shadow.gradient.basic
 829   desc: Shadows are drawn for gradient fills
 830   testing:
 831   - 2d.shadow.render
 832   # http://bugs.webkit.org/show_bug.cgi?id=15266
 833   code: |
 834     var gradient = ctx.createLinearGradient(0, 0, 100, 0);
 835     gradient.addColorStop(0, '#f00');
 836     gradient.addColorStop(1, '#f00');
 837     ctx.fillStyle = '#f00';
 838     ctx.fillRect(0, 0, 100, 50);
 839     ctx.shadowColor = '#0f0';
 840     ctx.shadowOffsetY = 50;
 841     ctx.fillStyle = gradient;
 842     ctx.fillRect(0, -50, 100, 50);
 843
 844     @assert pixel 50,25 == 0,255,0,255;
 845   expected: green
 846
 847 - name: 2d.shadow.gradient.transparent.1
 848   desc: Shadows are not drawn for transparent gradient fills
 849   testing:
 850   - 2d.shadow.render
 851   # http://bugs.webkit.org/show_bug.cgi?id=15266
 852   code: |
 853     var gradient = ctx.createLinearGradient(0, 0, 100, 0);
 854     gradient.addColorStop(0, 'rgba(0,0,0,0)');
 855     gradient.addColorStop(1, 'rgba(0,0,0,0)');
 856     ctx.fillStyle = '#0f0';
 857     ctx.fillRect(0, 0, 100, 50);
 858     ctx.shadowColor = '#f00';
 859     ctx.shadowOffsetY = 50;
 860     ctx.fillStyle = gradient;
 861     ctx.fillRect(0, -50, 100, 50);
 862
 863     @assert pixel 50,25 == 0,255,0,255;
 864   expected: green
 865
 866 - name: 2d.shadow.gradient.transparent.2
 867   desc: Shadows are not drawn for transparent parts of gradient fills
 868   testing:
 869   - 2d.shadow.render
 870   # http://bugs.webkit.org/show_bug.cgi?id=15266
 871   code: |
 872     var gradient = ctx.createLinearGradient(0, 0, 100, 0);
 873     gradient.addColorStop(0, '#f00');
 874     gradient.addColorStop(0.499, '#f00');
 875     gradient.addColorStop(0.5, 'rgba(0,0,0,0)');
 876     gradient.addColorStop(1, 'rgba(0,0,0,0)');
 877     ctx.fillStyle = '#f00';
 878     ctx.fillRect(0, 0, 50, 50);
 879     ctx.fillStyle = '#0f0';
 880     ctx.fillRect(50, 0, 50, 50);
 881     ctx.shadowOffsetY = 50;
 882     ctx.shadowColor = '#0f0';
 883     ctx.fillStyle = gradient;
 884     ctx.fillRect(0, -50, 100, 50);
 885
 886     @assert pixel 25,25 == 0,255,0,255;
 887     @assert pixel 50,25 == 0,255,0,255;
 888     @assert pixel 75,25 == 0,255,0,255;
 889   expected: green
 890
 891 - name: 2d.shadow.gradient.alpha
 892   desc: Shadows are drawn correctly for partially-transparent gradient fills
 893   testing:
 894   - 2d.shadow.render
 895   # http://bugs.webkit.org/show_bug.cgi?id=15266
 896   code: |
 897     var gradient = ctx.createLinearGradient(0, 0, 100, 0);
 898     gradient.addColorStop(0, 'rgba(255,0,0,0.5)');
 899     gradient.addColorStop(1, 'rgba(255,0,0,0.5)');
 900     ctx.fillStyle = '#f00';
 901     ctx.fillRect(0, 0, 100, 50);
 902     ctx.shadowOffsetY = 50;
 903     ctx.shadowColor = '#00f';
 904     ctx.fillStyle = gradient;
 905     ctx.fillRect(0, -50, 100, 50);
 906
 907     @assert pixel 50,25 ==~ 127,0,127,255;
 908   expected: |
 909     size 100 50
 910     cr.set_source_rgb(0.5, 0, 0.5)
 911     cr.rectangle(0, 0, 100, 50)
 912     cr.fill()
 913
 914 - name: 2d.shadow.transform.1
 915   desc: Shadows take account of transformations
 916   testing:
 917   - 2d.shadow.render
 918   code: |
 919     ctx.fillStyle = '#f00';
 920     ctx.fillRect(0, 0, 100, 50);
 921     ctx.shadowOffsetY = 50;
 922     ctx.shadowColor = '#0f0';
 923     ctx.translate(100, 100);
 924     ctx.fillRect(-100, -150, 100, 50);
 925
 926     @assert pixel 50,25 == 0,255,0,255;
 927   expected: green
 928
 929 - name: 2d.shadow.transform.2
 930   desc: Shadow offsets are not affected by transformations
 931   testing:
 932   - 2d.shadow.render
 933   code: |
 934     ctx.fillStyle = '#f00';
 935     ctx.fillRect(0, 0, 100, 50);
 936     ctx.shadowOffsetY = 50;
 937     ctx.shadowColor = '#0f0';
 938     ctx.rotate(Math.PI)
 939     ctx.fillRect(-100, 0, 100, 50);
 940
 941     @assert pixel 50,25 == 0,255,0,255;
 942   expected: green
 943
 944 - name: 2d.shadow.blur.low
 945   desc: Shadows look correct for small blurs
 946   manual:
 947   testing:
 948   - 2d.shadow.render
 949   code: |
 950     ctx.fillStyle = '#ff0';
 951     ctx.fillRect(0, 0, 100, 50);
 952     ctx.shadowColor = '#00f';
 953     ctx.shadowOffsetY = 25;
 954     for (var x = 0; x < 100; ++x) {
 955         ctx.save();
 956         ctx.beginPath();
 957         ctx.rect(x, 0, 1, 50);
 958         ctx.clip();
 959         ctx.shadowBlur = x;
 960         ctx.fillRect(-200, -200, 500, 200);
 961         ctx.restore();
 962     }
 963   expected: |
 964     size 100 50
 965     import math
 966     cr.set_source_rgb(0, 0, 1)
 967     cr.rectangle(0, 0, 1, 25)
 968     cr.fill()
 969     cr.set_source_rgb(1, 1, 0)
 970     cr.rectangle(0, 25, 1, 25)
 971     cr.fill()
 972     for x in range(1, 100):
 973         sigma = x/2.0
 974         filter = []
 975         for i in range(-24, 26):
 976             filter.append(math.exp(-i*i / (2*sigma*sigma)) / (math.sqrt(2*math.pi)*sigma))
 977         accum = [0]
 978         for f in filter:
 979             accum.append(accum[-1] + f)
 980         for y in range(0, 50):
 981             cr.set_source_rgb(accum[y], accum[y], 1-accum[y])
 982             cr.rectangle(x, y, 1, 1)
 983             cr.fill()
 984
 985 - name: 2d.shadow.blur.high
 986   desc: Shadows look correct for large blurs
 987   manual:
 988   testing:
 989   - 2d.shadow.render
 990   code: |
 991     ctx.fillStyle = '#ff0';
 992     ctx.fillRect(0, 0, 100, 50);
 993     ctx.shadowColor = '#00f';
 994     ctx.shadowOffsetY = 0;
 995     ctx.shadowBlur = 100;
 996     ctx.fillRect(-200, -200, 200, 400);
 997   expected: |
 998     size 100 50
 999     import math
1000     sigma = 100.0/2
1001     filter = []
1002     for i in range(-200, 100):
1003         filter.append(math.exp(-i*i / (2*sigma*sigma)) / (math.sqrt(2*math.pi)*sigma))
1004     accum = [0]
1005     for f in filter:
1006         accum.append(accum[-1] + f)
1007     for x in range(0, 100):
1008         cr.set_source_rgb(accum[x+200], accum[x+200], 1-accum[x+200])
1009         cr.rectangle(x, 0, 1, 50)
1010         cr.fill()
1011
1012 - name: 2d.shadow.alpha.1
1013   desc: Shadow color alpha components are used
1014   testing:
1015   - 2d.shadow.render
1016   code: |
1017     ctx.fillStyle = '#0f0';
1018     ctx.fillRect(0, 0, 100, 50);
1019     ctx.shadowColor = 'rgba(255, 0, 0, 0.01)';
1020     ctx.shadowOffsetY = 50;
1021     ctx.fillRect(0, -50, 100, 50);
1022
1023     @assert pixel 50,25 ==~ 0,255,0,255 +/- 4;
1024   expected: green
1025
1026 - name: 2d.shadow.alpha.2
1027   desc: Shadow color alpha components are used
1028   testing:
1029   - 2d.shadow.render
1030   code: |
1031     ctx.fillStyle = '#f00';
1032     ctx.fillRect(0, 0, 100, 50);
1033     ctx.shadowColor = 'rgba(0, 0, 255, 0.5)';
1034     ctx.shadowOffsetY = 50;
1035     ctx.fillRect(0, -50, 100, 50);
1036
1037     @assert pixel 50,25 ==~ 127,0,127,255;
1038   expected: |
1039     size 100 50
1040     cr.set_source_rgb(0.5, 0, 0.5)
1041     cr.rectangle(0, 0, 100, 50)
1042     cr.fill()
1043
1044 - name: 2d.shadow.alpha.3
1045   desc: Shadows are affected by globalAlpha
1046   testing:
1047   - 2d.shadow.render
1048   code: |
1049     ctx.fillStyle = '#f00';
1050     ctx.fillRect(0, 0, 100, 50);
1051     ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
1052     ctx.shadowColor = '#00f';
1053     ctx.shadowOffsetY = 50;
1054     ctx.globalAlpha = 0.5;
1055     ctx.fillRect(0, -50, 100, 50);
1056
1057     @assert pixel 50,25 ==~ 127,0,127,255;
1058   expected: |
1059     size 100 50
1060     cr.set_source_rgb(0.5, 0, 0.5)
1061     cr.rectangle(0, 0, 100, 50)
1062     cr.fill()
1063
1064 - name: 2d.shadow.alpha.4
1065   desc: Shadows with alpha components are correctly affected by globalAlpha
1066   testing:
1067   - 2d.shadow.render
1068   code: |
1069     ctx.fillStyle = '#f00';
1070     ctx.fillRect(0, 0, 100, 50);
1071     ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
1072     ctx.shadowColor = 'rgba(0, 0, 255, 0.707)';
1073     ctx.shadowOffsetY = 50;
1074     ctx.globalAlpha = 0.707;
1075     ctx.fillRect(0, -50, 100, 50);
1076
1077     @assert pixel 50,25 ==~ 127,0,127,255;
1078   expected: |
1079     size 100 50
1080     cr.set_source_rgb(0.5, 0, 0.5)
1081     cr.rectangle(0, 0, 100, 50)
1082     cr.fill()
1083
1084 - name: 2d.shadow.alpha.5
1085   desc: Shadows of shapes with alpha components are drawn correctly
1086   testing:
1087   - 2d.shadow.render
1088   code: |
1089     ctx.fillStyle = '#f00';
1090     ctx.fillRect(0, 0, 100, 50);
1091     ctx.fillStyle = 'rgba(64, 0, 0, 0.5)';
1092     ctx.shadowColor = '#00f';
1093     ctx.shadowOffsetY = 50;
1094     ctx.fillRect(0, -50, 100, 50);
1095
1096     @assert pixel 50,25 ==~ 127,0,127,255;
1097   expected: |
1098     size 100 50
1099     cr.set_source_rgb(0.5, 0, 0.5)
1100     cr.rectangle(0, 0, 100, 50)
1101     cr.fill()
1102
1103 - name: 2d.shadow.composite.1
1104   desc: Shadows are drawn using globalCompositeOperation
1105   testing:
1106   - 2d.shadow.render
1107   code: |
1108     ctx.fillStyle = '#f00';
1109     ctx.fillRect(0, 0, 100, 50);
1110     ctx.globalCompositeOperation = 'xor';
1111     ctx.shadowColor = '#f00';
1112     ctx.shadowOffsetX = 100;
1113     ctx.fillStyle = '#0f0';
1114     ctx.fillRect(-100, 0, 200, 50);
1115
1116     @assert pixel 50,25 ==~ 0,255,0,255;
1117   expected: green
1118
1119 - name: 2d.shadow.composite.2
1120   desc: Shadows are drawn using globalCompositeOperation
1121   testing:
1122   - 2d.shadow.render
1123   code: |
1124     ctx.fillStyle = '#f00';
1125     ctx.fillRect(0, 0, 100, 50);
1126     ctx.globalCompositeOperation = 'xor';
1127     ctx.shadowColor = '#f00';
1128     ctx.shadowBlur = 1;
1129     ctx.fillStyle = '#0f0';
1130     ctx.fillRect(-10, -10, 120, 70);
1131
1132     @assert pixel 50,25 ==~ 0,255,0,255;
1133   expected: green
1134
1135 - name: 2d.shadow.composite.3
1136   desc: Areas outside shadows are drawn correctly with destination-out
1137   testing:
1138   - 2d.shadow.render
1139   code: |
1140     ctx.fillStyle = '#0f0';
1141     ctx.fillRect(0, 0, 100, 50);
1142     ctx.globalCompositeOperation = 'destination-out';
1143     ctx.shadowColor = '#f00';
1144     ctx.shadowBlur = 10;
1145     ctx.fillStyle = '#f00';
1146     ctx.fillRect(200, 0, 100, 50);
1147
1148     @assert pixel 5,5 ==~ 0,255,0,255;
1149     @assert pixel 50,25 ==~ 0,255,0,255;
1150   expected: green