third_party/WebKit/LayoutTests/fast/canvas/2d.fillText.gradient.html

   1 <!DOCTYPE html>
   2 <body>
   3 <p>On success, the square should have the bottom left portion of the base of the green I and red otherwise.</p>
   4 <canvas id="c" class="output" width="100" height="100"><p class="fallback">FAIL (fallback content)</p></canvas>
   5 <div id="console"></div>
   6
   7 <script>
   8
   9 function drawCanvas(ctx) {
  10
  11   ctx.fillStyle = '#f00';
  12   ctx.fillRect(0,0,100,100);
  13
  14   var gradient = ctx.createLinearGradient(0, 0, 100, 100);
  15   gradient.addColorStop(0, '#0f0');
  16   gradient.addColorStop(1, '#0f0');
  17
  18   ctx.fillStyle = gradient;
  19   ctx.font = "500px Times";
  20
  21   ctx.fillText("I", -5, 100);
  22 }
  23
  24 if (window.testRunner)
  25     testRunner.dumpAsText();
  26
  27 var canvas = document.getElementById('c');
  28 var ctx = canvas.getContext("2d");
  29 drawCanvas(ctx);
  30
  31 // Check that the letter rendered appropriately
  32 var renderedCorrectly = true;
  33
  34 // Check for a green pixel from the text
  35 var imageData = ctx.getImageData(75,75,1,1);
  36 if (imageData.data[0] != 0) renderedCorrectly = false;
  37 if (imageData.data[1] != 255) renderedCorrectly = false;
  38 if (imageData.data[2] != 0) renderedCorrectly = false;
  39 if (imageData.data[3] != 255) renderedCorrectly = false;
  40
  41 // Check the red pixel outside of text wasn't touched
  42 var imageData = ctx.getImageData(25,25,1,1);
  43 if (imageData.data[0] != 255) renderedCorrectly = false;
  44 if (imageData.data[1] != 0) renderedCorrectly = false;
  45 if (imageData.data[2] != 0) renderedCorrectly = false;
  46 if (imageData.data[3] != 255) renderedCorrectly = false;
  47
  48 if (renderedCorrectly)
  49         document.getElementById("console").innerHTML = "TEST PASSED";
  50 else
  51         document.getElementById("console").innerHTML = "TEST FAILED";
  52
  53 </script>
  54 </body>
  55 </html>