<!doctype html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/utils.js"></script>
<script src="/preload/resources/preload_helper.js"></script>
<body>
<script>

const invalidImages = {
    'invalid data': '/preload/resources/echo-with-cors.py?type=image/svg+xml&content=junk',
    missing: '/nothing.png'
}

Object.entries(invalidImages).forEach(([name, url]) => {
    promise_test(async t => {
        const invalidImageURL = getAbsoluteURL(url)
        const link = document.createElement('link');
        link.rel = 'preload';
        link.as = 'image';
        link.href = url;
        document.head.appendChild(link);
        t.add_cleanup(() => link.remove());
        await new Promise(resolve => {
            const img = document.createElement('img');
            img.src = url;
            img.onerror = resolve;
            document.body.appendChild(img);
            t.add_cleanup(() => img.remove());
        });
        verifyNumberOfResourceTimingEntries(url, 1);
    }, `Preloading an invalid image (${name}) should preload and not re-fetch`)
})

</script>
</body>