| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <canvas width="600" height="300" style="border: solid 1px gray"></canvas> |
| <script> |
| description('Tests that (vertical) shadow offsets are applied correctly when using fillText() regardless of blur amount.'); |
| var ctx = document.getElementsByTagName('canvas')[0].getContext('2d'); |
| ctx.font = 'bold 128px sans-serif'; |
| ctx.shadowColor = 'red' |
| ctx.shadowOffsetY = 100; |
| |
| function testWithBlur(blur, belowOffset) { |
| ctx.clearRect(0, 0, 600, 300); |
| ctx.shadowBlur = blur; |
| |
| // Center the I around the Y axis. |
| ctx.fillText('I', -ctx.measureText('I').width/2, 128); |
| |
| debug('Testing with blur of ' + blur + ' pixels'); |
| |
| // Make sure that the shadow doesn't end up above the text... |
| var imageData = ctx.getImageData(0, 0, 1, 1); |
| imgdata = imageData.data; |
| |
| shouldBe('imgdata[0]', '0'); |
| shouldBe('imgdata[1]', '0'); |
| shouldBe('imgdata[2]', '0'); |
| shouldBe('imgdata[3]', '0'); |
| |
| // ...but below. |
| var imageData = ctx.getImageData(0, belowOffset, 1, 1); |
| imgdata = imageData.data; |
| shouldBe('imgdata[0]', '255'); |
| shouldBe('imgdata[1]', '0'); |
| shouldBe('imgdata[2]', '0'); |
| shouldBe('imgdata[3]', '255'); |
| } |
| |
| debug('Testing with no transform'); |
| testWithBlur(0, 150); |
| testWithBlur(1, 150); |
| testWithBlur(5, 150); |
| |
| debug('Testing with scale transform'); |
| ctx.scale(1, 2); |
| testWithBlur(0, 299); |
| testWithBlur(1, 299); |
| testWithBlur(5, 299); |
| |
| </script> |
| </body> |
| </html> |
