<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="placeholder.js"></script>

<body>
  <img id="in_viewport" src='../loading/resources/base-image1.png'>
  <div style="height:10000px;"></div>
  <img id="below_viewport" src='../loading/resources/base-image2.png'>
</body>

<script>
  var in_viewport_element = document.getElementById("in_viewport");
  var below_viewport_element = document.getElementById("below_viewport");
  async_test(function(t) {
    window.addEventListener("load", t.step_func_done());
  }, "Test that document load event is fired");

  async_test(function(t) {
    in_viewport_element.addEventListener("load",
      t.step_func_done(function() {
        assert_true(is_image_fully_loaded(in_viewport_element));
      }));
  }, "Test that <img> in viewport is loaded, and not a placeholder");

  async_test(function(t) {
    var complete = 0;
    var onload_callback = function() {
      if (++complete == 2) {
        // Document and the above viewport image has loaded.
        assert_false(is_image_fully_loaded(below_viewport_element));
        t.done();
      }
    };
    window.addEventListener("load", t.step_func(onload_callback));
    in_viewport_element.addEventListener("load",
      t.step_func(onload_callback));
    below_viewport_element.addEventListener("load",
      t.unreached_func("Load event should not be fired for below viewport image"));
  }, "Test that <img> below viewport is a placeholder, with lazyimage enabled");
</script>