1<!DOCTYPE html><!-- webkit-test-runner [ experimental:LazyImageLoadingEnabled=true ] -->
2<script src="/resources/testharness.js"></script>
3<script src="/resources/testharnessreport.js"></script>
4<script src="placeholder.js"></script>
5
6<body>
7 <div style="height:10000px;"></div>
8 <img id="no_attribute_img" src='../loading/resources/base-image1.png'>
9 <img loading="auto" id="auto_attribute_img" src='../loading/resources/base-image2.png'>
10 <img loading="invalid-value-default" id="invalid_attribute_img" src='../loading/resources/base-image3.png'>
11 <img loading="lazy" id="lazy_attribute_img" src='../loading/resources/dup-image1.png'>
12 <img loading="eager" id="eager_attribute_img" src='../loading/resources/dup-image2.png'>
13</body>
14
15<script>
16 var no_attribute_img = document.getElementById("no_attribute_img");
17 var auto_attribute_img = document.getElementById("auto_attribute_img");
18 var invalid_attribute_img = document.getElementById("invalid_attribute_img");
19 var lazy_attribute_img = document.getElementById("lazy_attribute_img");
20 var eager_attribute_img = document.getElementById("eager_attribute_img");
21
22 async_test(function(t) {
23 window.addEventListener("load", t.step_func_done());
24 }, "Test that document load event is fired");
25
26 async_test(function(t) {
27 window.addEventListener("load", t.step_func_done(function() {
28 assert_false(is_image_fully_loaded(lazy_attribute_img));
29 assert_true(is_image_fully_loaded(no_attribute_img));
30 }));
31 lazy_attribute_img.addEventListener("load",
32 t.unreached_func("Load event should not be fired for below viewport image with loading=lazy"));
33 }, "Test that <img> with loading=lazy or auto or no attribute or invalid value are loaded as a placeholder");
34
35 async_test(function(t) {
36 eager_attribute_img.addEventListener("load",
37 t.step_func_done(function() {
38 assert_true(is_image_fully_loaded(eager_attribute_img));
39 }));
40 }, "Test that <img> with loading=eager is fully loaded, and not a placeholder");
41
42 async_test(function(t) {
43 no_attribute_img.addEventListener("load",
44 t.step_func_done(function() {
45 assert_true(is_image_fully_loaded(eager_attribute_img));
46 }));
47 }, "Test that <img> with no loading attribute is fully loaded, and not a placeholder");
48
49 async_test(function(t) {
50 auto_attribute_img.addEventListener("load",
51 t.step_func_done(function() {
52 assert_true(is_image_fully_loaded(eager_attribute_img));
53 }));
54 }, "Test that <img> with loading=auto is fully loaded, and not a placeholder");
55
56 async_test(function(t) {
57 invalid_attribute_img.addEventListener("load",
58 t.step_func_done(function() {
59 assert_true(is_image_fully_loaded(eager_attribute_img));
60 }));
61 }, "Test that <img> with invalid loading attribute is fully loaded, and not a placeholder");
62
63 async_test(function(t) {
64 var complete = 0;
65 var onload_callback = function() {
66 if (++complete == 4) {
67 // The four images with loading=lazy,auto or default or invalid attribute are loaded.
68 assert_true(is_image_fully_loaded(no_attribute_img));
69 assert_true(is_image_fully_loaded(lazy_attribute_img));
70 assert_true(is_image_fully_loaded(auto_attribute_img));
71 assert_true(is_image_fully_loaded(invalid_attribute_img));
72 t.done();
73 }
74 assert_equals("eager", this.getAttribute('loading'));
75 };
76 no_attribute_img.addEventListener("load", onload_callback);
77 lazy_attribute_img.addEventListener("load", onload_callback);
78 auto_attribute_img.addEventListener("load", onload_callback);
79 invalid_attribute_img.addEventListener("load", onload_callback);
80 window.addEventListener("load", t.step_func(function() {
81 assert_equals(null, no_attribute_img.getAttribute('loading'));
82 assert_equals("lazy", lazy_attribute_img.getAttribute('loading'));
83 assert_equals("auto", auto_attribute_img.getAttribute('loading'));
84 assert_equals("invalid-value-default", invalid_attribute_img.getAttribute('loading'));
85 no_attribute_img.setAttribute('loading', 'eager');
86 lazy_attribute_img.setAttribute('loading', 'eager');
87 auto_attribute_img.setAttribute('loading', 'eager');
88 invalid_attribute_img.setAttribute('loading', 'eager');
89 }));
90 }, "Test that deferred <img> are fully loaded when lazyload is turned off");
91</script>
