third_party/WebKit/LayoutTests/fast/canvas/fillText-shadow.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <canvas width="600" height="300" style="border: solid 1px gray"></canvas>
   8 <script>
   9 description('Tests that (vertical) shadow offsets are applied correctly when using fillText() regardless of blur amount.');
  10 var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
  11 ctx.font = 'bold 128px sans-serif';
  12 ctx.shadowColor = 'red'
  13 ctx.shadowOffsetY = 100;
  14
  15 function testWithBlur(blur, belowOffset) {
  16   ctx.clearRect(0, 0, 600, 300);
  17   ctx.shadowBlur = blur;
  18
  19   // Center the I around the Y axis.
  20   ctx.fillText('I', -ctx.measureText('I').width/2, 128);
  21
  22   debug('Testing with blur of ' + blur + ' pixels');
  23
  24   // Make sure that the shadow doesn't end up above the text...
  25   var imageData = ctx.getImageData(0, 0, 1, 1);
  26   imgdata = imageData.data;
  27
  28   shouldBe('imgdata[0]', '0');
  29   shouldBe('imgdata[1]', '0');
  30   shouldBe('imgdata[2]', '0');
  31   shouldBe('imgdata[3]', '0');
  32
  33   // ...but below.
  34   var imageData = ctx.getImageData(0, belowOffset, 1, 1);
  35   imgdata = imageData.data;
  36   shouldBe('imgdata[0]', '255');
  37   shouldBe('imgdata[1]', '0');
  38   shouldBe('imgdata[2]', '0');
  39   shouldBe('imgdata[3]', '255');
  40 }
  41
  42 debug('Testing with no transform');
  43 testWithBlur(0, 150);
  44 testWithBlur(1, 150);
  45 testWithBlur(5, 150);
  46
  47 debug('Testing with scale transform');
  48 ctx.scale(1, 2);
  49 testWithBlur(0, 299);
  50 testWithBlur(1, 299);
  51 testWithBlur(5, 299);
  52
  53 </script>
  54 </body>
  55 </html>