Blitz - WPT: background-image-shared-stylesheet.html

wpt / css / css-backgrounds / background-image-shared-stylesheet.html

/css/css-backgrounds/background-image-shared-stylesheet.html

<!doctype html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Test: Canceled load in another page doesn't affect new stylesheet</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-image">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1800979">
<link rel="match" href="background-image-shared-stylesheet-ref.html">
<iframe></iframe>
<script>
const IMAGE_URI = new URL("/images/green.png", location.href).href + "?pipe=trickle(d2)&" + Math.random();
const SHEET_URI = "data:text/css," + encodeURI(`:root{background-image: url('${IMAGE_URI}');}`);
const iframe = document.querySelector("iframe");

function willNavigate() {
  // The child page has already loaded the stylesheet (guaranteed by the <script> rules)
  // and is about to navigate away. Trigger our stylesheet load and thus image
  // load when it does. The background-image should still apply to us.
  iframe.addEventListener("load", function() {
    let link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = SHEET_URI;
    link.onload = function() {
      iframe.remove();
      // We need to also make sure that the image has actually finished to load,
      // so that the reftest screenshot can be taken.
      const image = new Image();
      image.onload = function() {
        document.documentElement.className = "";
      };
      image.src = IMAGE_URI;
    };
    document.head.appendChild(link);
  }, { once: true });
}

onload = function() {
  document.querySelector("iframe").srcdoc = `
    <!doctype html>
    <link rel="stylesheet" href="${SHEET_URI}">
    <script>
      document.documentElement.getBoundingClientRect(); // Should trigger the image load.
      parent.willNavigate();
      window.location = "/css/reference/blank.html";
    </` + `script>
  `;
};
</script>

/css/css-backgrounds/background-image-shared-stylesheet-ref.html

<!doctype html>
<title>CSS Test Reference</title>
<style>
  :root { background-color: lime }
</style>