<!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="small_dimension_img" src='../loading/resources/base-image1.png' style="height:1px; width:10px" loading="lazy">
<img id="large_dimension_img" src='../loading/resources/base-image2.png' style="height:20px; width:20px" loading="lazy">
<img id="height_only_img" src='../loading/resources/base-image3.png' style="height:1px;" loading="lazy">
<img id="width_only_img" src='../loading/resources/dup-image1.png' style="width:1px;" loading="lazy">
<img id="percent_dimension_img" src='../loading/resources/dup-image2.png' style="height:10%; width:10%" loading="lazy">
</body>
<script>
async_test(function(t) {
window.addEventListener("load", t.step_func_done());
}, "Test that document load event is fired");
async_test(function(t) {
var small_dimension_img = document.getElementById("small_dimension_img");
var large_dimension_img = document.getElementById("large_dimension_img");
var height_only_img = document.getElementById("height_only_img");
var width_only_img = document.getElementById("width_only_img");
var percent_dimension_img = document.getElementById("percent_dimension_img");
window.addEventListener("load", t.step_func_done(function() {
assert_false(is_image_fully_loaded(small_dimension_img));
assert_false(is_image_fully_loaded(large_dimension_img));
assert_false(is_image_fully_loaded(height_only_img));
assert_false(is_image_fully_loaded(width_only_img));
assert_false(is_image_fully_loaded(percent_dimension_img));
}));
small_dimension_img.addEventListener("load",
t.unreached_func("Load event should not be fired for below viewport image with small inline dimension"));
large_dimension_img.addEventListener("load",
t.unreached_func("Load event should not be fired for below viewport image with large inline dimension"));
height_only_img.addEventListener("load",
t.unreached_func("Load event should not be fired for below viewport image with only inline height"));
width_only_img.addEventListener("load",
t.unreached_func("Load event should not be fired for below viewport image with only inline width"));
percent_dimension_img.addEventListener("load",
t.unreached_func("Load event should not be fired for below viewport image with percentage inline dimension"));
}, "Test that <img> with non small height or width below the viewport is loaded as placeholder");
</script>