Files
ladybird/Tests/LibWeb/Text/input/load-event-delayed-by-css-background-image.html
Shannon Booth ba79535d94 Tests/LibWeb: Support absolute paths for WPT files in HTTP test server
Imported WPT tests often load resources using canonical absolute paths,
for example:

/html/browsers/windows/resources/message-parent.html

Our usual strategy is to rewrite such URLs to relative paths during
import so they resolve from the importing test HTML file (which also
allows for loading this HTML as a file://).

That works for same-origin relative loading with the echo server, but it
breaks down when a test constructs a cross-origin URL from an absolute
path, for example:

get_host_info().REMOTE_ORIGIN + "/some/wpt/path.html"

In that case the resource still needs to be fetched at its canonical
absolute path, so rewriting it relative to the importing document is no
longer sufficient.

Update the HTTP test server so /static/ continues to serve from the
general test root, other non-echo requests are served from the imported
WPT tree, and dynamically registered echo responses live under /echo/
to avoid path conflicts.
2026-03-23 22:32:43 +01:00

41 lines
1.3 KiB
HTML

<!DOCTYPE html>
<script src="include.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.open("POST", "/echo", false);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({
method: "GET",
path: "/echo/delayed-green.png",
status: 200,
headers: {"Content-Type": "image/png", "Cache-Control": "no-store"},
body: "iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAD0lEQVR4nGNgaGAAIQgFAA4OAgFhGn2EAAAAAElFTkSuQmCC",
body_encoding: "base64",
delay_ms: 500
}));
</script>
<style>
#target {
width: 100px;
height: 100px;
background-color: red;
background-image: url("/echo/delayed-green.png");
background-size: cover;
}
</style>
<div id="target"></div>
<script>
asyncTest((done) => {
window.addEventListener("load", () => {
let loadTime = performance.now();
println(`Load event delayed by at least 400ms: ${loadTime >= 400}`);
let entries = performance.getEntriesByType("resource");
let imageEntry = entries.find(e => e.name.includes("delayed-green"));
println(`Image resource entry exists: ${imageEntry !== undefined}`);
println(`Image loaded before load event: ${imageEntry !== undefined && imageEntry.responseEnd <= loadTime}`);
done();
});
});
</script>