Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /svg/as-image/external-resource-data-url-import.sub.html - WPT Dashboard Interop Dashboard
<!doctype html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>SVG as image doesn't load cross-origin resources from a cached inline sheet with a data: URL @import</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="match" href="/svg/struct/reftests/reference/green-100x100.html">
<link rel="stylesheet" href="data:text/css,svg{background-image:url(http://{{domains[www1]}}:{{ports[http][0]}}/images/red.png);background-size:100px 100px}">
![http://{{domains[www1]}}:{{ports[http][0]}}/images/red.png](http://{{domains[www1]}}:{{ports[http][0]}}/images/red.png){kind=link}
<svg width="100" height="100" style="position: absolute; left: -1000px"></svg>
<img width="100" height="100" style="background-color: green">
<script>
window.addEventListener("load", () => {
// Insert the inline sheet once the @import target is loaded, so that it
// completes synchronously.
const style = document.createElement("style");
style.textContent = `@import "${document.querySelector("link[rel=stylesheet]").getAttribute("href")}";`;
document.head.appendChild(style);
const img = document.querySelector("img");
img.onload = img.onerror = () => {
requestAnimationFrame(() => requestAnimationFrame(() => {
document.documentElement.classList.remove("reftest-wait");
}));
};
img.src = "external-resource-data-url-import-helper.sub.svg";
});
</script>
</html>