<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

  <head>
    <title>Odd stretching of pixel-wide drawImage call</title>
    <script type="text/javascript" charset="utf-8">
        window.addEventListener('DOMContentLoaded', init, true);

        var image, ctx;

        function init () {
          if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
          }

          var canvas = document.getElementById("c");
          canvas.width = 200;
          canvas.height = 50;
          ctx = canvas.getContext('2d');

          image = new Image();
          image.addEventListener('load', draw, false);
          image.src = 'resources/orangePixels.gif';
        };

        function draw () {
          var w = ctx.canvas.width;
          var h = ctx.canvas.height;
          // part between left corner and arrow
          ctx.drawImage(image, 3, 2, 1, 1,
                               0, 0, w, h);
          setTimeout(checkPixels, 0);
        };
        
        function checkPixels() {
            var passed = areAllRowsUniform(ctx);

            var result = document.getElementById('result');
            if (passed)
                result.innerHTML = "PASSED";
            else
                result.innerHTML = "FAILED";

            if (window.testRunner) 
                testRunner.notifyDone();
        }

        function areAllRowsUniform(ctx) {
            for (var y = 0; y < ctx.canvas.height; y++) {
                if (!isRowUniform(ctx,y))
                    return false;
            }

            return true;
        }

        function isRowUniform(ctx, y) {
            var start = getPixel(ctx, 0, y);

            for (var i = 0; i < ctx.canvas.width; i++) {
                if (!areEqual(start, getPixel(ctx, i, y)))
                    return false;
            }

            return true;
        };

        function areEqual(a, b) {
            return a[0] == b[0] && a[1] == b[1] && a[2] == b[2] && a[3] == b[3];
        };

        function getPixel(ctx, x, y) {
            var idata = ctx.getImageData(x,y,1,1);
            return idata.data;
        };
    </script>

  </head>

  <body>
  <p>DrawImage with a source of a single pixel should draw one uniform color throughout. Neighboring pixels in the source image shouldn't affect the destination rect's output pixels</p>
  <p>(Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=58267) (Radar: rdar://problem/9148473)</p>

  <p> This canvas should be uniformly one color </p>
  <p id="result"></p>
  <canvas id="c"></canvas>
  </body>
</html>