attribute.html | Explore in Territory

<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="placeholder.js"></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">
</body>

<script>
  function callOnLoadOrIfAlreadyLoaded(image, callback) {
    if (image.complete)
      callback();
    else
      image.addEventListener("load", callback);
  }

  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");

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

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

  async_test(function(t) {
    callOnLoadOrIfAlreadyLoaded(eager_attribute_img,
      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) {
    callOnLoadOrIfAlreadyLoaded(no_attribute_img,
      t.step_func_done(function() {
        assert_true(is_image_fully_loaded(no_attribute_img));
      }));
  }, "Test that <img> with no loading attribute is fully loaded, and not a placeholder");

async_test(function(t) {
    callOnLoadOrIfAlreadyLoaded(invalid_attribute_img,
      t.step_func_done(function() {
        assert_true(is_image_fully_loaded(invalid_attribute_img));
      }));
  }, "Test that <img> with invalid loading attribute is fully loaded, and not a placeholder");

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

  async_test(function(t) {
    lazy_attribute_img.addEventListener("load", t.step_func_done(function() {
      assert_equals('eager', lazy_attribute_img.getAttribute('loading'));
      assert_true(is_image_fully_loaded(lazy_attribute_img));
      t.done();
    }));
    window.addEventListener("load", t.step_func(function() {
      assert_equals("auto", auto_attribute_img.getAttribute('loading'));
      assert_equals("invalid-value-default", invalid_attribute_img.getAttribute('loading'));
      lazy_attribute_img.setAttribute('loading', 'eager');
    }));
  }, "Test that deferred <img> are fully loaded when lazyload is turned off");
</script>
chromium/third_party/blink/web_tests/http/tests/lazyload/attribute.html
