tor-browser

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

css-scoping-shadow-slotted-nested.html (2349B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4    <title>CSS Scoping Module Level 1 - ::slotted pseudo element rule must apply to an element that got slotted via another slot</title>
      5    <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
      6    <link rel="help" href="http://www.w3.org/TR/css-scoping-1/#slotted-pseudo">
      7    <link rel="match" href="reference/green-box.html"/>
      8 </head>
      9 <body>
     10    <style>
     11        outer-host {
     12            display: block;
     13            width: 100px;
     14            height: 100px;
     15            background: red;
     16        }
     17        outer-host > * {
     18            display: block;
     19            width: 100px;
     20            height: 25px;
     21        }
     22    </style>
     23    <p>Test passes if you see a single 100px by 100px green box below.</p>
     24    <outer-host>
     25        <span slot="outer">FAIL1</span>
     26        <span slot="inner">FAIL2</span>
     27        <span slot="both">FAIL3</span>
     28    </outer-host>
     29    <template id="outer-host-template">
     30        <inner-host>
     31            <style>
     32                ::slotted([slot=outer]) { background: green; color: green; }
     33                ::slotted([slot=both]) { background: green; }
     34                span { display: block; width: 100px; height: 25px; }
     35            </style>
     36            <slot name="outer"></slot>
     37            <slot name="inner"></slot>
     38            <slot name="both"></slot>
     39            <span slot="inner">FAIL4</span>
     40        </inner-host>
     41    </template>
     42    <template id="inner-host-template">
     43        <style>
     44            ::slotted([slot=inner]) { background: green; color: green; }
     45            ::slotted([slot=both]) { color: green; }
     46        </style>
     47        <slot></slot>
     48        <slot name="inner"></slot>
     49    </template>
     50    <script>
     51 
     52        try {
     53            var outerHost = document.querySelector('outer-host');
     54            outerShadow = outerHost.attachShadow({mode: 'closed'});
     55            outerShadow.appendChild(document.getElementById('outer-host-template').content.cloneNode(true));
     56 
     57            var innerHost = outerShadow.querySelector('inner-host');
     58            innerShadow = innerHost.attachShadow({mode: 'closed'});
     59            innerShadow.appendChild(document.getElementById('inner-host-template').content.cloneNode(true));
     60        } catch (exception) {
     61            document.body.appendChild(document.createTextNode(exception));
     62        }
     63 
     64    </script>
     65 </body>
     66 </html>