tor-browser

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

marker-content-013.html (1542B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <meta charset="utf-8">
      4 <title>CSS Test: ::marker pseudo elements styled with 'content' property</title>
      5 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
      6 <link rel="match" href="marker-content-013-ref.html">
      7 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
      8 <link rel="help" href="https://drafts.csswg.org/css-lists/#list-style-position-property">
      9 <meta name="assert" content="Checks that ::marker is updated when 'list-style-position' changes dynamically.">
     10 <style>
     11 .inside {
     12  list-style-position: inside;
     13 }
     14 .string {
     15  list-style-type: "string";
     16 }
     17 .content::marker {
     18  content: "content";
     19 }
     20 .before, .after {
     21  display: contents;
     22 }
     23 .before::before, .after::after {
     24  content: "item";
     25  display: list-item;
     26  list-style-type: "nested";
     27 }
     28 </style>
     29 <ol class="inside">
     30  <li class="decimal">item</li>
     31  <li class="string">item</li>
     32  <li class="content">item</li>
     33  <li class="before"></li>
     34  <li class="after"></li>
     35 </ol>
     36 <ol class="outside">
     37  <li class="decimal">item</li>
     38  <li class="string">item</li>
     39  <li class="content">item</li>
     40  <li class="before"></li>
     41  <li class="after"></li>
     42 </ol>
     43 <script src="/common/reftest-wait.js"></script>
     44 <script>
     45 "use strict";
     46 addEventListener("load", function() {
     47  requestAnimationFrame(() => {
     48    for (const list of document.querySelectorAll("ol")) {
     49      list.classList.toggle("inside");
     50      list.classList.toggle("outside");
     51    }
     52    takeScreenshot();
     53  });
     54 }, {once: true});
     55 </script>
     56 </html>