blob: 5f7da1a84653d60022538ab8426e0eb0eb9e0bc8 [file] [log] [blame]
<!DOCTYPE html>
<head>
<title>In-viewport loading=lazy not-rendered images should never load</title>
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/common.js"></script>
</head>
<body>
<!-- These images must not attempt to load -->
<img id="display_none" style="display:none;" src="resources/image.png?2" loading="lazy"
onload="display_none_img.resolve();" onerror="display_none_img.reject();">
<img id="attribute_hidden" hidden src="resources/image.png?3" loading="lazy"
onload="attribute_hidden_img.resolve();" onerror="attribute_hidden_img.reject();">
<img id="js_display_none" src="resources/image.png?4" loading="lazy"
onload="js_display_none_img.resolve();" onerror="js_display_none_img.reject();">
<script>
document.getElementById("js_display_none").style = 'display:none;';
</script>
</body>
<script>
const display_none_img = new ElementLoadPromise("display_none");
const attribute_hidden_img = new ElementLoadPromise("attribute_hidden");
const js_display_none_img = new ElementLoadPromise("js_display_none");
async_test(t => {
const unreached_not_rendered_img_func =
t.unreached_func("The not-rendered in-viewport loading=lazy images " +
"should not attempt to load.");
display_none_img.promise
.then(unreached_not_rendered_img_func)
.catch(unreached_not_rendered_img_func);
attribute_hidden_img.promise
.then(unreached_not_rendered_img_func)
.catch(unreached_not_rendered_img_func);
js_display_none_img.promise
.then(unreached_not_rendered_img_func)
.catch(unreached_not_rendered_img_func);
t.step_timeout(t.done, 2000);
}, "In-viewport loading=lazy not-rendered images should never load");
</script>