| <!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> |
| 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)); |
| assert_false(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.unreached_func("Load event should not be fired for below viewport image with loading=auto")); |
| no_attribute_img.addEventListener("load", |
| t.unreached_func("Load event should not be fired for below viewport image with no loading attribute")); |
| invalid_attribute_img.addEventListener("load", |
| t.unreached_func("Load event should not be fired for below viewport image with invalid loading attribute")); |
| }, "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 == 4) { |
| // The four images with loading=lazy,auto or default or invalid attribute are loaded. |
| assert_true(is_image_fully_loaded(no_attribute_img)); |
| assert_true(is_image_fully_loaded(lazy_attribute_img)); |
| assert_true(is_image_fully_loaded(auto_attribute_img)); |
| assert_true(is_image_fully_loaded(invalid_attribute_img)); |
| t.done(); |
| } |
| assert_equals("eager", this.getAttribute('loading')); |
| }; |
| no_attribute_img.addEventListener("load", onload_callback); |
| lazy_attribute_img.addEventListener("load", onload_callback); |
| auto_attribute_img.addEventListener("load", onload_callback); |
| invalid_attribute_img.addEventListener("load", onload_callback); |
| window.addEventListener("load", t.step_func(function() { |
| assert_equals(null, no_attribute_img.getAttribute('loading')); |
| assert_equals("lazy", lazy_attribute_img.getAttribute('loading')); |
| assert_equals("auto", auto_attribute_img.getAttribute('loading')); |
| assert_equals("invalid-value-default", invalid_attribute_img.getAttribute('loading')); |
| no_attribute_img.setAttribute('loading', 'eager'); |
| lazy_attribute_img.setAttribute('loading', 'eager'); |
| auto_attribute_img.setAttribute('loading', 'eager'); |
| invalid_attribute_img.setAttribute('loading', 'eager'); |
| })); |
| }, "Test that deferred <img> are fully loaded when lazyload is turned off"); |
| </script> |
