<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1231622
-->
<head>
  <meta charset="utf-8">
  <title>Test for Bug 1231622: Draw partial frames of downloading css background images</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/WindowSnapshot.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body onload="SimpleTest.waitForFocus(runTest)">

<style>
div {
  width: 200px;
  height: 200px;
  background-size: 200px 200px; background-image: url(sendimagenevercomplete.sjs)
}
</style>
<script>
/* sendimagenevercomplete.sjs sends us a partial png file and keeps the
 * connection open but sends no more data. This is enough data to draw at last
 * a partial frame. We do this so that we can distinguish from drawing a
 * partial frame after we've been told all data has arrived, from drawing
 * a partial frame while data is still arriving.
 */

SimpleTest.waitForExplicitFinish();
const gUtils = SpecialPowers.getDOMWindowUtils(window);

function checkPixel(r, x, y, red, green, blue, alpha) {
  let canvas = snapshotRect(window, r);
  let context = canvas.getContext('2d');

  let image = context.getImageData(x, y, 1, 1);
  if (image.data[0] == red &&
      image.data[1] == green &&
      image.data[2] == blue &&
      image.data[3] == alpha) {
    return true;
  }
  return false;
}

async function runTest() {
  let theDiv = document.createElement("div");
  document.body.appendChild(theDiv);

  let r = theDiv.getBoundingClientRect();

  // Give that some time to partially load.
  for (let i = 0; i < 10; i++) {
    await new Promise(resolve => requestAnimationFrame(resolve));
  }

  let correct = false;
  while (!correct) {
    // Check the middle pixel part way down the partial frame.
    correct = checkPixel(r, 100, 25, 0, 0, 255, 255);

    await new Promise(resolve => requestAnimationFrame(resolve));
  }

  ok(correct, "correct pixel value");

  SimpleTest.finish();
}
</script>
</pre>
</body>
</html>