blob: 097439a942ddef6867548a8bb6c917e160710893 [file] [log] [blame]
<!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>