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

<script>
  if (window.internals)
    internals.settings.setLazyImageLoadingEnabled(true);
</script>

<body>
  <div style="height:10000px;"></div>
  <img id="no_attribute_img" src='../loading/resources/base-image1.png'>
  <img id="auto_attribute_img" src='../loading/resources/base-image2.png' loading="auto">
  <img id="invalid_attribute_img" src='../loading/resources/base-image3.png' loading="invalid-value-default">
  <img id="lazy_attribute_img" src='../loading/resources/dup-image1.png' loading="lazy">
  <img id="eager_attribute_img" src='../loading/resources/dup-image2.png' loading="eager">
  <img id="auto_attribute_ci_img" src='../loading/resources/base-image2.png' loading="Auto">
  <img id="lazy_attribute_ci_img" src='../loading/resources/dup-image1.png' loading="Lazy">
  <img id="eager_attribute_ci_img" src='../loading/resources/dup-image2.png' loading="Eager">
</body>

<script>
  var no_attribute_img = document.getElementById("no_attribute_img");
  var auto_attribute_img = document.getElementById("auto_attribute_img");
  var invalid_attribute_img = document.getElementById("invalid_attribute_img");
  var lazy_attribute_img = document.getElementById("lazy_attribute_img");
  var eager_attribute_img = document.getElementById("eager_attribute_img");
  var auto_attribute_ci_img = document.getElementById("auto_attribute_ci_img");
  var lazy_attribute_ci_img = document.getElementById("lazy_attribute_ci_img");
  var eager_attribute_ci_img = document.getElementById("eager_attribute_ci_img");

  async_test(function(t) {
    window.addEventListener("load", t.step_func_done());
  }, "Test that document load event is fired");

  async_test(function(t) {
    auto_attribute_ci_img.addEventListener("load",
      t.step_func_done(function() {
        assert_true(is_image_fully_loaded(auto_attribute_ci_img));
      }));
    window.addEventListener("load", t.step_func_done(function() {
      assert_false(is_image_fully_loaded(lazy_attribute_ci_img));
    }));
    eager_attribute_ci_img.addEventListener("load",
      t.step_func_done(function() {
        assert_true(is_image_fully_loaded(eager_attribute_ci_img));
      }));
  }, "Test that values for loading are case insensitive");

  async_test(function(t) {
    window.addEventListener("load", t.step_func_done(function() {
      assert_false(is_image_fully_loaded(lazy_attribute_img));
      assert_true(is_image_fully_loaded(no_attribute_img));
    }));
    lazy_attribute_img.addEventListener("load",
      t.unreached_func("Load event should not be fired for below viewport image with loading=lazy"));
    auto_attribute_img.addEventListener("load",
      t.step_func_done(function() {
        assert_true(is_image_fully_loaded(auto_attribute_img));
      }));
    no_attribute_img.addEventListener("load",
      t.step_func_done(function() {
        assert_true(is_image_fully_loaded(no_attribute_img));
      }));
    invalid_attribute_img.addEventListener("load",
      t.step_func_done(function() {
        assert_true(is_image_fully_loaded(invalid_attribute_img));
      }));
  }, "Test that <img> with loading=lazy or auto or no attribute or invalid value are loaded as a placeholder");

  async_test(function(t) {
    eager_attribute_img.addEventListener("load",
      t.step_func_done(function() {
        assert_true(is_image_fully_loaded(eager_attribute_img));
      }));
  }, "Test that <img> with loading=eager is fully loaded, and not a placeholder");

  async_test(function(t) {
    var complete = 0;
    var onload_callback = function() {
      if (++complete == 2) {
        // The two images with loading=lazy,Lazy attribute are loaded.
        assert_true(is_image_fully_loaded(lazy_attribute_img));
        assert_true(is_image_fully_loaded(lazy_attribute_ci_img));
        t.done();
      }
      assert_equals(this.getAttribute('loading'), "eager");
    };
    lazy_attribute_img.addEventListener("load", onload_callback);
    lazy_attribute_ci_img.addEventListener("load", onload_callback);
    window.addEventListener("load", t.step_func(function() {
      assert_equals(lazy_attribute_img.getAttribute('loading'), "lazy");
      assert_equals(lazy_attribute_ci_img.getAttribute('loading'), "Lazy");
      lazy_attribute_img.loading = 'eager';
      lazy_attribute_ci_img.loading = 'eager';
    }));
  }, "Test that deferred <img> are fully loaded when lazyload is turned off");
</script>