| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <body> |
| <script> |
| test(function(t) { |
| var STROKE_WIDTH = 20; |
| var SHADOW_OFFSET = 15; |
| |
| // Do not start at (0, 0) |
| // otherwise half of the stroke on top left will be hidden |
| var POSITION = 20; |
| var SIDE_LENGTH = 100; |
| |
| var image = new Image(); |
| image.src = "resources/html5.png"; |
| image.onload = function() { |
| var canvas = document.createElement('canvas'); |
| document.body.appendChild(canvas); |
| canvas.setAttribute('width', '1000'); |
| canvas.setAttribute('height', '1000'); |
| var ctx = canvas.getContext('2d'); |
| |
| var pattern = ctx.createPattern(image, 'repeat'); |
| ctx.beginPath(); |
| ctx.strokeStyle = pattern; |
| ctx.lineWidth = STROKE_WIDTH; |
| ctx.shadowColor = 'rgba(0,0,0,0.5)'; |
| ctx.shadowBlur = 10; |
| ctx.shadowOffsetX = SHADOW_OFFSET; |
| ctx.shadowOffsetY = SHADOW_OFFSET; |
| |
| // colored pixels of html5.png starts at 3 pixels away from the border of |
| // the image, they must be taken into account since the shadow is applied |
| // to the colored pixels. |
| const squareBorder = POSITION + SIDE_LENGTH + STROKE_WIDTH / 2 + SHADOW_OFFSET + 3 * 2; |
| var imgDataBefore = []; |
| for (var i = 25; i < squareBorder; i += 10) |
| imgDataBefore.push(ctx.getImageData(squareBorder, i, 1, 1).data) |
| |
| ctx.strokeRect(POSITION, POSITION, SIDE_LENGTH, SIDE_LENGTH); |
| |
| var imgDataAfter = []; |
| for (var i = 25; i < squareBorder; i += 10) |
| imgDataAfter.push(ctx.getImageData(squareBorder, i, 1, 1).data) |
| |
| for (var i = 0; i < imgDataAfter.length; i++) |
| assert_array_equals(imgDataAfter[i], imgDataBefore[i]); |
| }; |
| }, 'Test that the drop shadow properly falls off when a rect is stroked with a pattern.'); |
| |
| </script> |
