tor-browser

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

first-letter-background-image-dynamic.html (889B)

      1 <!doctype html>
      2 <title>CSS Test: ::first-letter correctly applies background-image dynamically</title>
      3 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
      4 <link rel="author" href="https://mozilla.org" title="Mozilla">
      5 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
      6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1528451">
      7 <link rel="match" href="first-letter-background-image-ref.html">
      8 <style>
      9  div::first-letter {
     10    color: lime;
     11  }
     12  div.image::first-letter {
     13    /* Lime background */
     14    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==');
     15  }
     16 </style>
     17 <div>
     18  A letter
     19 </div>
     20 <script>
     21  let div = document.querySelector("div");
     22  getComputedStyle(div).color;
     23  div.classList.add('image');
     24 </script>