tor-browser

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

override-in-shadow-dom.html (1158B)

      1 <!DOCTYPE html>
      2 <title>Counter style rules in shadow DOM can override rules in ancestor scopes</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-counter-styles-3/#the-counter-style-rule">
      4 <link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names">
      5 <link rel="author" href="mailto:xiaochengh@chromium.org">
      6 <link rel="match" href="override-in-shadow-dom-ref.html">
      7 
      8 <style>
      9 @counter-style foo {
     10  system: fixed;
     11  symbols: A B C;
     12 }
     13 </style>
     14 
     15 <ol style="list-style-type: foo; list-style-position: inside">
     16  <li></li>
     17  <li></li>
     18  <li></li>
     19 </ol>
     20 
     21 <div id="host1"></div>
     22 <div id="host2"></div>
     23 
     24 <script>
     25 document.getElementById("host1").attachShadow({mode: 'open'}).innerHTML = `
     26 <style>
     27 @counter-style foo {
     28  system: fixed;
     29  symbols: D E F;
     30 }
     31 </style>
     32 <ol style="list-style-type: foo; list-style-position: inside">
     33  <li></li>
     34  <li></li>
     35  <li></li>
     36 </ol>
     37 `;
     38 
     39 document.getElementById("host2").attachShadow({mode: 'open'}).innerHTML = `
     40 <style>
     41 @counter-style foo {
     42  system: fixed;
     43  symbols: G H I;
     44 }
     45 </style>
     46 <ol style="list-style-type: foo; list-style-position: inside">
     47  <li></li>
     48  <li></li>
     49  <li></li>
     50 </ol>
     51 `;
     52 </script>