57 lines
1.5 KiB
HTML
57 lines
1.5 KiB
HTML
<!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>
|