blob: 9d4056236244e547933d72e66d3b8f191e9f85a1 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test-pre.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>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>