| var getRegularContextForFilter = function(filter, pattern) { |
| var c = document.createElement("canvas"); |
| c.width = c.height = 80; |
| var ctx = c.getContext('2d'); |
| ctx.filter = filter; |
| ctx.drawImage(pattern, 5, 5); |
| ctx.drawImage(pattern, 25, 25); |
| ctx.drawImage(pattern, 45, 45); |
| return ctx; |
| }; |
| |
| var matchImageDataResults = function(offscreenImage, regularImage, filter) { |
| assert_array_equals(offscreenImage, regularImage, |
| "The image data generated by filter " + |
| filter + |
| " should be the same for both OffscreenCanvas and regular canvas"); |
| }; |
| |
| var createPatternCanvas = function() { |
| var patternCanvas = document.createElement('canvas'); |
| patternCanvas.width = 20; |
| patternCanvas.height = 20; |
| var patternCtx = patternCanvas.getContext('2d'); |
| patternCtx.fillStyle = '#A00'; |
| patternCtx.fillRect(0, 0, 10, 10); |
| patternCtx.fillStyle = '#0A0'; |
| patternCtx.fillRect(10, 0, 10, 10); |
| patternCtx.fillStyle = '#00A'; |
| patternCtx.fillRect(0, 10, 10, 10); |
| patternCtx.fillStyle = "#AA0"; |
| patternCtx.fillRect(10, 10, 10, 10); |
| return patternCanvas; |
| }; |
| |
| var filters = [ "none" , |
| "blur(10px)" , |
| "brightness(40%)" , |
| "contrast(20%)" , |
| "drop-shadow(0 0 5px green)" , |
| "grayscale(100%)" , |
| "invert(100%)" , |
| "opacity(50%)" , |
| "saturate(20%)" , |
| "sepia(100%)" , |
| "sepia(1) hue-rotate(200deg)", |
| "url(#url)" ]; |
| |
| |