tor-browser

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

shadow-host-with-before-after.html (2114B)

      1 <!doctype html>
      2 <title>CSS Test: Pseudo-elements and :host selector.</title>
      3 <link rel="author" title="Antti Koivisto" href="mailto:koivisto@iki.fi"/>
      4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"/>
      5 <link rel="help" href="https://drafts.csswg.org/css-scoping/#selectors-data-model">
      6 <link rel="match" href="reference/green-box.html"/>
      7 <style>
      8 .test {
      9    width: 100px;
     10    height: 25px;
     11    background: red;
     12    color: red;
     13 }
     14 #host1, #host2  {
     15    color: green;
     16 }
     17 #host3 div, #host4 div {
     18    width: 50%;
     19    height: 100%;
     20    background: green;
     21    display: inline-block;
     22 }
     23 </style>
     24 <p>Test passes if you see a single 100px by 100px green box below.</p>
     25 <div id="host1" class="test"></div>
     26 <div id="host2" class="test"></div>
     27 <div id="host3" class="test"><div>text</div></div>
     28 <div id="host4" class="test"><div>text</div></div>
     29 <script>
     30 
     31 host1.attachShadow({mode: 'closed'}).innerHTML = `<style>
     32    :host::before, :host::after {
     33        width: 50%;
     34        height: 100%;
     35        background: green;
     36        display: inline-block;
     37        content: "test";
     38    }
     39    </style>`;
     40 
     41 host2.attachShadow({mode: 'closed'}).innerHTML = `<style>
     42    :host(.green)::before, :host(.green)::after {
     43        width: 50%;
     44        height: 100%;
     45        background: green;
     46        display: inline-block;
     47        content: "test";
     48    }
     49    </style>`;
     50 
     51 getComputedStyle(host2).backgroundColor;
     52 host2.classList.add('green');
     53 
     54 host3.attachShadow({mode: 'closed'}).innerHTML = `<style>
     55    :host {
     56        color: green !important;
     57    }
     58    :host::before {
     59        width: 50%;
     60        height: 100%;
     61        background: green;
     62        display: inline-block;
     63        content: "test";
     64    }
     65    </style><slot></slot>`;
     66 
     67 host4.attachShadow({mode: 'closed'}).innerHTML = `<style>
     68    :host(.green) {
     69        color: green !important;
     70    }
     71    :host(.green)::after {
     72        width: 50%;
     73        height: 100%;
     74        background: green;
     75        display: inline-block;
     76        content: "test";
     77    }
     78    </style><slot></slot>`;
     79 
     80 getComputedStyle(host4).backgroundColor;
     81 host4.classList.add('green');
     82 
     83 </script>