| OLD | NEW | 
|---|
| 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <script src="../../resources/testharness.js"></script> | 
| 2 <html> | 2 <script src="../../resources/testharnessreport.js"></script> | 
| 3 <head> |  | 
| 4 <script src="../../resources/js-test.js"></script> |  | 
| 5 </head> |  | 
| 6 <body> | 3 <body> | 
| 7 <script src="script-tests/canvas-scale-strokePath-shadow.js"></script> | 4 <script> | 
|  | 5 // Ensure correct behavior of canvas with path stroke + shadow after scaling. A 
    blue and red checkered pattern should be displayed. | 
|  | 6 | 
|  | 7 var canvas = document.createElement('canvas'); | 
|  | 8 document.body.appendChild(canvas); | 
|  | 9 canvas.setAttribute('width', '600'); | 
|  | 10 canvas.setAttribute('height', '600'); | 
|  | 11 var ctx = canvas.getContext('2d'); | 
|  | 12 | 
|  | 13 ctx.scale(2, 2); | 
|  | 14 ctx.shadowOffsetX = 100; | 
|  | 15 ctx.shadowOffsetY = 100; | 
|  | 16 ctx.strokeStyle = 'rgba(0, 0, 255, 1)'; | 
|  | 17 ctx.lineWidth = 5; | 
|  | 18 | 
|  | 19 ctx.shadowColor = 'rgba(255, 0, 0, 1.0)'; | 
|  | 20 ctx.beginPath(); | 
|  | 21 ctx.moveTo(50, 50); | 
|  | 22 ctx.lineTo(100, 50); | 
|  | 23 ctx.lineTo(100, 100); | 
|  | 24 ctx.lineTo(50, 100); | 
|  | 25 ctx.lineTo(50, 50); | 
|  | 26 ctx.stroke(); | 
|  | 27 | 
|  | 28 ctx.shadowColor = 'rgba(255, 0, 0, 0.3)'; | 
|  | 29 ctx.beginPath(); | 
|  | 30 ctx.moveTo(50, 150); | 
|  | 31 ctx.lineTo(100, 150); | 
|  | 32 ctx.lineTo(100, 200); | 
|  | 33 ctx.lineTo(50, 200); | 
|  | 34 ctx.lineTo(50, 150); | 
|  | 35 ctx.stroke(); | 
|  | 36 | 
|  | 37 ctx.shadowColor = 'rgba(255, 0, 0, 1.0)'; | 
|  | 38 ctx.shadowBlur = 10; | 
|  | 39 ctx.beginPath(); | 
|  | 40 ctx.moveTo(150, 50); | 
|  | 41 ctx.lineTo(200, 50); | 
|  | 42 ctx.lineTo(200, 100); | 
|  | 43 ctx.lineTo(150, 100); | 
|  | 44 ctx.lineTo(150, 50); | 
|  | 45 ctx.stroke(); | 
|  | 46 | 
|  | 47 ctx.shadowColor = 'rgba(255, 0, 0, 0.6)'; | 
|  | 48 ctx.beginPath(); | 
|  | 49 ctx.moveTo(150, 150); | 
|  | 50 ctx.lineTo(200, 150); | 
|  | 51 ctx.lineTo(200, 200); | 
|  | 52 ctx.lineTo(150, 200); | 
|  | 53 ctx.lineTo(150, 150); | 
|  | 54 ctx.stroke(); | 
|  | 55 | 
|  | 56 function testPixelShadowBlur(x, y, color) | 
|  | 57 { | 
|  | 58     if (color.length == 4) { | 
|  | 59         assert_array_equals(ctx.getImageData(x, y, 1, 1).data, color); | 
|  | 60     } else {    // we expect to have [r, g, b, a, alphaApprox] | 
|  | 61         var data = ctx.getImageData(x, y, 1, 1).data; | 
|  | 62         assert_array_equals(data.slice(0,3), color.slice(0,3)); | 
|  | 63         assert_approx_equals(data[3], color[3], color[4]); | 
|  | 64     } | 
|  | 65 } | 
|  | 66 | 
|  | 67 var testPixelShadowScenarios = [ | 
|  | 68     ['Verify solid shadow 1', 250, 200, [255, 0, 0, 255]], | 
|  | 69     ['Verify solid shadow 2', 300, 290, [255, 0, 0, 255]], | 
|  | 70     ['Verify solid shadow 3', 200, 250, [255, 0, 0, 255]], | 
|  | 71 | 
|  | 72     ['Verify solid alpha shadow 1', 201, 405, [255, 0, 0, 76, 20]], | 
|  | 73     ['Verify solid alpha shadow 2', 201, 500, [255, 0, 0, 76, 20]], | 
|  | 74     ['Verify solid alpha shadow 3', 300, 499, [255, 0, 0, 76, 20]], | 
|  | 75 | 
|  | 76     ['Verify blurry shadow 1', 398, 210, [255, 0, 0, 200, 20]], | 
|  | 77     ['Verify blurry shadow 2', 508, 250, [255, 0, 0, 49, 20]], | 
|  | 78     ['Verify blurry shadow 3', 450, 198, [255, 0, 0, 199, 20]], | 
|  | 79 | 
|  | 80     ['Verify blurry alpha shadow 1', 505, 450, [255, 0, 0, 70, 20]], | 
|  | 81     ['Verify blurry alpha shadow 2', 450, 405, [255, 0, 0, 70, 20]], | 
|  | 82 ]; | 
|  | 83 | 
|  | 84 generate_tests(testPixelShadowBlur, testPixelShadowScenarios); | 
|  | 85 | 
|  | 86 </script> | 
| 8 </body> | 87 </body> | 
| 9 </html> |  | 
| OLD | NEW | 
|---|