| <!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> |
| <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> |
