diff --git a/layout/style/Loader.cpp b/layout/style/Loader.cpp
index 8574121f538..353561a7ad1 100644
--- a/layout/style/Loader.cpp
+++ b/layout/style/Loader.cpp
@@ -1709,16 +1709,16 @@ static bool BaseURIsArePathCompatible(nsIURI* aA, nsIURI* aB) {
 static bool CanReuseInlineSheet(SharedStyleSheetCache::InlineSheetEntry& aEntry,
                                 nsIURI* aNewBaseURI, bool aIsImage) {
   auto dependency = aEntry.mSheet->OriginalContentsUriDependency();
+  if (aIsImage != aEntry.mWasLoadedAsImage) {
+    // If the document was loaded as an image on one document, but wasn't on
+    // another, we can't cache the sheet. Non-local URIs should not load in
+    // those, see bug 1982344 and bug 2081280.
+    return false;
+  }
   if (dependency == StyleNonLocalUriDependency::No) {
     // If there are no non-local uris, then we can reuse.
     return true;
   }
-  if (aIsImage != aEntry.mWasLoadedAsImage) {
-    // Even with the same base uri, if the document was loaded as an image on
-    // one document, but wasn't on another, we can't cache the sheet, since
-    // non-local URIs should not load in those, see bug 1982344.
-    return false;
-  }
   if (dependency == StyleNonLocalUriDependency::Absolute) {
     // If there are only absolute uris, then we don't need to worry about the
     // base.
diff --git a/testing/web-platform/tests/svg/as-image/external-resource-data-url-import-helper.sub.svg b/testing/web-platform/tests/svg/as-image/external-resource-data-url-import-helper.sub.svg
new file mode 100644
index 00000000000..a2cd6433bc9
--- /dev/null
+++ b/testing/web-platform/tests/svg/as-image/external-resource-data-url-import-helper.sub.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><style>@import "data:text/css,svg{background-image:url(http://{{domains[www1]}}:{{ports[http][0]}}/images/red.png);background-size:100px 100px}";</style></svg>
diff --git a/testing/web-platform/tests/svg/as-image/external-resource-data-url-import.sub.html b/testing/web-platform/tests/svg/as-image/external-resource-data-url-import.sub.html
new file mode 100644
index 00000000000..83c522cfa97
--- /dev/null
+++ b/testing/web-platform/tests/svg/as-image/external-resource-data-url-import.sub.html
@@ -0,0 +1,28 @@
+<!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="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=2081280">
+<link rel="author" href="mailto:[email protected]" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.com" title="Mozilla">
+<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}">
+<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>

diff --git a/testing/web-platform/tests/svg/as-image/external-resource-data-url-import-helper.sub.svg b/testing/web-platform/tests/svg/as-image/external-resource-data-url-import-helper.sub.svg
new file mode 100644
index 00000000000..a2cd6433bc9
--- /dev/null
+++ b/testing/web-platform/tests/svg/as-image/external-resource-data-url-import-helper.sub.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><style>@import "data:text/css,svg{background-image:url(http://{{domains[www1]}}:{{ports[http][0]}}/images/red.png);background-size:100px 100px}";</style></svg>
diff --git a/testing/web-platform/tests/svg/as-image/external-resource-data-url-import.sub.html b/testing/web-platform/tests/svg/as-image/external-resource-data-url-import.sub.html
new file mode 100644
index 00000000000..83c522cfa97
--- /dev/null
+++ b/testing/web-platform/tests/svg/as-image/external-resource-data-url-import.sub.html
@@ -0,0 +1,28 @@
+<!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="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=2081280">
+<link rel="author" href="mailto:[email protected]" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.com" title="Mozilla">
+<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}">
+<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>