rgb-jpeg-endian-pixels.html | Explore in Territory

<!DOCTYPE html>
<script>
  if (window.testRunner) {
      testRunner.waitUntilDone();
      testRunner.dumpAsText();
  }

  function log(message)
  {
      document.getElementById("log").textContent += '\n' + message;
  }

  function averagePixelComponents(data, size)
  {
      var r = 0, g = 0, b = 0, a = 0;
      for (var i = 0, total = size * 4; i < total; i += 4) {
          r += data[i + 0];
          g += data[i + 1];
          b += data[i + 2];
          a += data[i + 3];
      }

      return [r / size, g / size, b / size, a / size];
  }

  function averagePixelShouldBe(pixel, expect, tolerance)
  {
      var delta = 0;
      pixel.forEach(function(component, i) {
          delta = Math.max(Math.abs(pixel[i] - expect[i]), delta);
      });

      if (delta > tolerance)
         log('FAIL: [' + pixel + '] expected [' + expect + '] +/- ' + tolerance);
  }

  function testImage(image, expect)
  {
      // Create a canvas, load the given image in it.
      var canvas = document.createElement("canvas");
      canvas.width = canvas.height = 64;
      var context = canvas.getContext("2d");
      context.drawImage(image, 0, 0);

      // Compare the canvas pixel component averages.
      var pixels = context.getImageData(0, 0, 64, 64).data;
      var result = averagePixelComponents(pixels, 64 * 64);

      var pixelTolerance = 3;
      averagePixelShouldBe(result, expect, pixelTolerance);
  }

  function test(image, expect)
  {
      try {
          loadedImages = window.loadedImages || 0;
          testImage(image, expect);
          if (++loadedImages < 3)
              return;
      } catch (e) {
          log('FAIL: ' + e.message);
      }

      if (window.testRunner)
          testRunner.notifyDone();
  }
</script>

JPEG image RGB pixels should render without color corruption and in strict<br>
order, regardless of the underlying machine pixel buffer endianess.<br><br>

<img src="resources/rgb-jpeg-red.jpg"   onload="test(this, [255,0,0,255])">
<img src="resources/rgb-jpeg-green.jpg" onload="test(this, [0,255,0,255])">
<img src="resources/rgb-jpeg-blue.jpg"  onload="test(this, [0,0,255,255])">

<pre id="log">PASS</pre>
chromium/third_party/blink/web_tests/images/rgb-jpeg-endian-pixels.html
