tor-browser

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

css-scoping-shadow-host-namespace.html (4079B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4    <title>CSS Scoping Module Level 1 - :host, :host-context, and default @namespace</title>
      5    <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"/>
      6    <link rel="help" href="https://www.w3.org/TR/css-scoping-1/#host-selector">
      7    <link rel="help" href="https://www.w3.org/TR/css3-selectors/#typenmsp">
      8    <link rel="help" href="https://www.w3.org/TR/css3-selectors/#univnmsp">
      9    <link rel="match" href="reference/green-box.html"/>
     10 </head>
     11 <body>
     12    <style>
     13        .host {
     14            display: block;
     15            width: 100px;
     16            height: 10px;
     17            background: red;
     18        }
     19        #host-3, #host-5, #host-10 {
     20            background: green;
     21        }
     22    </style>
     23    <p>Test passes if you see a single 100px by 100px green box below.</p>
     24    <div id="host-1" class="host">FAIL</div>
     25    <div id="host-2" class="host">FAIL</div>
     26    <div id="host-3" class="host">FAIL</div>
     27    <div id="host-4" class="host">FAIL</div>
     28    <div id="host-5" class="host">FAIL</div>
     29    <div id="host-6" class="host">FAIL</div>
     30    <div id="host-7" class="host">FAIL</div>
     31    <div id="host-8" class="host">FAIL</div>
     32    <div id="host-9" class="host">FAIL</div>
     33    <div id="host-10" class="host">FAIL</div>
     34    <script>
     35        try {
     36            var shadowHost = document.querySelector('#host-1');
     37            shadowRoot = shadowHost.attachShadow({mode: 'open'});
     38            shadowRoot.innerHTML = '<style>@namespace url(http://www.w3.org/1999/xhtml); :host { background: green !important; } </style>';
     39 
     40            shadowHost = document.querySelector('#host-2');
     41            shadowRoot = shadowHost.attachShadow({mode: 'open'});
     42            shadowRoot.innerHTML = '<style>@namespace url(http://dummy); :host { background: green !important; } </style>';
     43 
     44            shadowHost = document.querySelector('#host-3');
     45            shadowRoot = shadowHost.attachShadow({mode: 'open'});
     46            shadowRoot.innerHTML = '<style>@namespace url(http://dummy); :host(*) { background: red !important; } </style>';
     47 
     48            shadowHost = document.querySelector('#host-4');
     49            shadowRoot = shadowHost.attachShadow({mode: 'open'});
     50            shadowRoot.innerHTML = '<style>@namespace url(http://dummy); :host(*|*) { background: green !important; } </style>';
     51 
     52            shadowHost = document.querySelector('#host-5');
     53            shadowRoot = shadowHost.attachShadow({mode: 'open'});
     54            shadowRoot.innerHTML = '<style>@namespace url(http://dummy); :host-context(*) { background: red !important; } </style>';
     55 
     56            shadowHost = document.querySelector('#host-6');
     57            shadowRoot = shadowHost.attachShadow({mode: 'open'});
     58            shadowRoot.innerHTML = '<style>@namespace url(http://dummy); :host-context(*|*) { background: green !important; } </style>';
     59 
     60            shadowHost = document.querySelector('#host-7');
     61            shadowRoot = shadowHost.attachShadow({mode: 'open'});
     62            shadowRoot.innerHTML = '<style>@namespace url(http://www.w3.org/1999/xhtml); :host(*) { background: green !important; } </style>';
     63 
     64            shadowHost = document.querySelector('#host-8');
     65            shadowRoot = shadowHost.attachShadow({mode: 'open'});
     66            shadowRoot.innerHTML = '<style>@namespace url(http://www.w3.org/1999/xhtml); :host-context(*) { background: green !important; } </style>';
     67 
     68            shadowHost = document.querySelector('#host-9');
     69            shadowRoot = shadowHost.attachShadow({mode: 'open'});
     70            shadowRoot.innerHTML = '<style>@namespace url(http://www.w3.org/1999/xhtml); :host(div) { background: green !important; } </style>';
     71 
     72            shadowHost = document.querySelector('#host-10');
     73            shadowRoot = shadowHost.attachShadow({mode: 'open'});
     74            shadowRoot.innerHTML = '<style>@namespace url(http://dummy); :host-context(html) { background: red !important; } </style>';
     75 
     76        } catch (exception) {
     77            document.body.appendChild(document.createTextNode(exception));
     78        }
     79 
     80    </script>
     81 </body>
     82 </html>