| commit-queue@webkit.org | 6f93041 | 2011-01-18 18:10:37 +0000 | [diff] [blame] | 1 | <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| 2 | <html> |
| 3 | <head> |
| mark.lam@apple.com | 104d993 | 2013-09-07 22:20:15 +0000 | [diff] [blame] | 4 | <script src="../../resources/js-test-pre.js"></script> |
| commit-queue@webkit.org | 6f93041 | 2011-01-18 18:10:37 +0000 | [diff] [blame] | 5 | </head> |
| 6 | <body> |
| ap@apple.com | 92352d0 | 2017-05-24 22:53:00 +0000 | [diff] [blame] | 7 | <script> |
| 8 | description("Ensure correct behavior of canvas with fillPath using a fillStyle color with alpha and a shadow"); |
| 9 | |
| 10 | function print(message, color) |
| 11 | { |
| 12 | var paragraph = document.createElement("div"); |
| 13 | paragraph.appendChild(document.createTextNode(message)); |
| 14 | paragraph.style.fontFamily = "monospace"; |
| 15 | if (color) |
| 16 | paragraph.style.color = color; |
| 17 | document.getElementById("console").appendChild(paragraph); |
| 18 | } |
| 19 | |
| 20 | function shouldBeAround(a, b) |
| 21 | { |
| 22 | var evalA; |
| 23 | try { |
| 24 | evalA = eval(a); |
| 25 | } catch(e) { |
| 26 | evalA = e; |
| 27 | } |
| 28 | |
| 29 | if (Math.abs(evalA - b) < 15) |
| 30 | print("PASS " + a + " is around " + b , "green") |
| 31 | else |
| 32 | print("FAIL " + a + " is not around " + b + " (actual: " + evalA + ")", "red"); |
| 33 | } |
| 34 | |
| 35 | var canvas = document.createElement('canvas'); |
| 36 | document.body.appendChild(canvas); |
| 37 | canvas.setAttribute('width', '600'); |
| 38 | canvas.setAttribute('height', '1100'); |
| 39 | var ctx = canvas.getContext('2d'); |
| 40 | |
| 41 | ctx.save(); |
| 42 | ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; |
| 43 | ctx.shadowColor = 'rgba(255, 0, 0, 0.5)'; |
| 44 | ctx.shadowOffsetX = 250; |
| 45 | |
| 46 | function fillShape(x, y) { |
| 47 | ctx.beginPath(); |
| 48 | ctx.arc(x, y, 100, 0, Math.PI*2, true); |
| 49 | ctx.arc(x, y, 50, 0, Math.PI*2, false); |
| 50 | ctx.fill(); |
| 51 | } |
| 52 | |
| 53 | // Alpha shadow. |
| 54 | ctx.shadowBlur = 0; |
| 55 | fillShape(150, 150); |
| 56 | |
| 57 | // Blurry shadow. |
| 58 | ctx.shadowBlur = 10; |
| 59 | fillShape(150, 400); |
| 60 | |
| 61 | ctx.rotate(Math.PI/2); |
| 62 | |
| 63 | // Rotated alpha shadow. |
| 64 | ctx.shadowBlur = 0; |
| 65 | fillShape(650, -150); |
| 66 | |
| 67 | // Rotated blurry shadow. |
| 68 | ctx.shadowBlur = 10; |
| 69 | fillShape(900, -150); |
| 70 | |
| 71 | ctx.restore(); |
| 72 | |
| 73 | var imageData, data; |
| 74 | ctx.fillStyle = 'black'; |
| 75 | |
| 76 | function test(alphaTestFunction, x, y, r, g, b, a) { |
| 77 | // Get pixel. |
| 78 | imageData = ctx.getImageData(x, y, 1, 1); |
| 79 | data = imageData.data; |
| 80 | // Test pixel color components. |
| 81 | shouldBe('data[0]', r+''); |
| 82 | shouldBe('data[1]', g+''); |
| 83 | shouldBe('data[2]', b+''); |
| 84 | alphaTestFunction('data[3]', a+''); |
| 85 | // Plot test point. |
| 86 | ctx.fillRect(x, y, 3, 3); |
| 87 | } |
| 88 | |
| 89 | print('Verifying alpha shadow...'); |
| 90 | test(shouldBe, 400, 150, 0, 0, 0, 0); |
| 91 | test(shouldBeAround, 400, 75, 255, 0, 0, 64); |
| 92 | test(shouldBeAround, 400, 225, 255, 0, 0, 64); |
| 93 | test(shouldBeAround, 325, 150, 255, 0, 0, 64); |
| 94 | test(shouldBeAround, 475, 150, 255, 0, 0, 64); |
| 95 | |
| 96 | print(' '); |
| 97 | print('Verifying blurry shadow...'); |
| 98 | test(shouldBe, 400, 400, 0, 0, 0, 0); |
| 99 | test(shouldBeAround, 400, 300, 255, 0, 0, 31); |
| 100 | test(shouldBeAround, 400, 500, 255, 0, 0, 31); |
| 101 | test(shouldBeAround, 300, 400, 255, 0, 0, 31); |
| 102 | test(shouldBeAround, 500, 400, 255, 0, 0, 31); |
| 103 | |
| 104 | print(' '); |
| 105 | print('Verifying rotated alpha shadow...'); |
| 106 | test(shouldBe, 400, 650, 0, 0, 0, 0); |
| 107 | test(shouldBeAround, 400, 575, 255, 0, 0, 64); |
| 108 | test(shouldBeAround, 400, 725, 255, 0, 0, 64); |
| 109 | test(shouldBeAround, 325, 650, 255, 0, 0, 64); |
| 110 | test(shouldBeAround, 475, 650, 255, 0, 0, 64); |
| 111 | |
| 112 | print(' '); |
| 113 | print('Verifying rotated blurry shadow...'); |
| 114 | test(shouldBe, 400, 900, 0, 0, 0, 0); |
| 115 | test(shouldBeAround, 400, 800, 255, 0, 0, 31); |
| 116 | test(shouldBeAround, 400, 1000, 255, 0, 0, 31); |
| 117 | test(shouldBeAround, 300, 900, 255, 0, 0, 31); |
| 118 | test(shouldBeAround, 500, 900, 255, 0, 0, 31); |
| 119 | |
| 120 | print(' '); |
| 121 | </script> |
| mark.lam@apple.com | 104d993 | 2013-09-07 22:20:15 +0000 | [diff] [blame] | 122 | <script src="../../resources/js-test-post.js"></script> |
| commit-queue@webkit.org | 6f93041 | 2011-01-18 18:10:37 +0000 | [diff] [blame] | 123 | </body> |
| 124 | </html> |
