<!DOCTYPE html><!-- webkit-test-runner [ experimental:enableLazyImageLoading=true ] -->
<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' loading="lazy">
</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) {
    below_viewport_element.addEventListener("load",
      t.step_func_done(function() {
        assert_true(is_image_fully_loaded(in_viewport_element));
      }));
  }, "Test that <img> below viewport is loaded, and not a placeholder");
</script>