tor-browser

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

marker-content-021.html (2016B)

      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-021-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/#content-property">
      9 <meta name="assert" content="Checks that non-normal ::marker is not updated when 'list-style-type' changes dynamically.">
     10 <style>
     11 ::marker {
     12  content: "[m]";
     13 }
     14 .inside {
     15  list-style-position: inside;
     16 }
     17 .none {
     18  list-style-type: none;
     19 }
     20 .symbol {
     21  list-style-type: disc;
     22 }
     23 .decimal {
     24  list-style-type: decimal;
     25 }
     26 .roman {
     27  list-style-type: lower-roman;
     28 }
     29 .string {
     30  list-style-type: "string";
     31 }
     32 </style>
     33 <ol class="inside">
     34  <li class="none">inside none→symbol</li>
     35  <li class="symbol">inside symbol→decimal</li>
     36  <li class="decimal">inside decimal→roman</li>
     37  <li class="roman">inside roman→string</li>
     38  <li class="string">inside string→none</li>
     39 </ol>
     40 <ol class="outside">
     41  <li class="none">outside none→symbol</li>
     42  <li class="symbol">outside symbol→decimal</li>
     43  <li class="decimal">outside decimal→roman</li>
     44  <li class="roman">outside roman→string</li>
     45  <li class="string">outside string→none</li>
     46 </ol>
     47 <script src="/common/reftest-wait.js"></script>
     48 <script>
     49 "use strict";
     50 // Use a "load" event listener and requestAnimationFrame to ensure that
     51 // the markers will have been laid out.
     52 addEventListener("load", function() {
     53  requestAnimationFrame(() => {
     54    for (let list of document.querySelectorAll("ol")) {
     55      // Rotate class names among list items
     56      const firstClass = list.firstElementChild.className;
     57      for (let item of list.children) {
     58        const next = item.nextElementSibling;
     59        item.className = next ? next.className : firstClass;
     60      }
     61    }
     62    takeScreenshot();
     63  });
     64 }, {once: true});
     65 </script>
     66 </html>