tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

background-image-shared-stylesheet.html (1994B)

      1 <!doctype html>
      2 <html class="reftest-wait">
      3 <meta charset="utf-8">
      4 <title>CSS Test: Canceled load in another page doesn't affect new stylesheet</title>
      5 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
      6 <link rel="author" title="Mozilla" href="https://mozilla.org">
      7 <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-image">
      8 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1800979">
      9 <link rel="match" href="background-image-shared-stylesheet-ref.html">
     10 <iframe></iframe>
     11 <script>
     12 const IMAGE_URI = new URL("/images/green.png", location.href).href + "?pipe=trickle(d2)&" + Math.random();
     13 const SHEET_URI = "data:text/css," + encodeURI(`:root{background-image: url('${IMAGE_URI}');}`);
     14 const iframe = document.querySelector("iframe");
     15 
     16 function willNavigate() {
     17  // The child page has already loaded the stylesheet (guaranteed by the <script> rules)
     18  // and is about to navigate away. Trigger our stylesheet load and thus image
     19  // load when it does. The background-image should still apply to us.
     20  iframe.addEventListener("load", function() {
     21    let link = document.createElement("link");
     22    link.rel = "stylesheet";
     23    link.href = SHEET_URI;
     24    link.onload = function() {
     25      iframe.remove();
     26      // We need to also make sure that the image has actually finished to load,
     27      // so that the reftest screenshot can be taken.
     28      const image = new Image();
     29      image.onload = function() {
     30        document.documentElement.className = "";
     31      };
     32      image.src = IMAGE_URI;
     33    };
     34    document.head.appendChild(link);
     35  }, { once: true });
     36 }
     37 
     38 onload = function() {
     39  document.querySelector("iframe").srcdoc = `
     40    <!doctype html>
     41    <link rel="stylesheet" href="${SHEET_URI}">
     42    <script>
     43      document.documentElement.getBoundingClientRect(); // Should trigger the image load.
     44      parent.willNavigate();
     45      window.location = "/css/reference/blank.html";
     46    </` + `script>
     47  `;
     48 };
     49 </script>