tor-browser

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

inspector-shadow.html (2660B)

      1 <!doctype html>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <title>Inspector (empty page)</title>
      6  <script>
      7  "use strict";
      8 
      9  window.onload = function() {
     10    customElements.define("test-empty", class extends HTMLElement {
     11      constructor() {
     12        super();
     13        this.attachShadow({mode: "open"});
     14      }
     15    });
     16 
     17    customElements.define("test-empty-closed", class extends HTMLElement {
     18      constructor() {
     19        super();
     20        this.attachShadow({mode: "closed"});
     21      }
     22    });
     23 
     24    customElements.define("test-children", class extends HTMLElement {
     25      constructor() {
     26        super();
     27        this.attachShadow({mode: "open"});
     28        this.shadowRoot.innerHTML = `
     29          <h1>One child</h1>
     30          <p>A second child</p>`;
     31      }
     32    });
     33 
     34    customElements.define("test-named-slot", class extends HTMLElement {
     35      constructor() {
     36        super();
     37        this.attachShadow({mode: "open"});
     38        this.shadowRoot.innerHTML = `
     39          <h1>With slot</h1>
     40          <slot name="slot1"></slot>`;
     41      }
     42    });
     43 
     44    customElements.define("test-slot", class extends HTMLElement {
     45      constructor() {
     46        super();
     47        this.attachShadow({mode: "open"});
     48        this.shadowRoot.innerHTML = `
     49        <style>
     50          slot::before { content: "[SLOT BEFORE]"; color: red; }
     51          slot::after { content: "[SLOT AFTER]"; color: blue; }
     52        </style>
     53        <slot></slot>`;
     54      }
     55    });
     56 
     57    customElements.define("test-simple-slot", class extends HTMLElement {
     58      constructor() {
     59        super();
     60        this.attachShadow({ mode: "open"});
     61        this.shadowRoot.innerHTML = "<slot></slot>";
     62      }
     63    });
     64  };
     65  </script>
     66  <style>
     67    #host-pseudo::before { content: "[HOST BEFORE]"; color: red; }
     68    #host-pseudo::after { content: "[HOST AFTER]"; color: blue; }
     69  </style>
     70 </head>
     71 <body>
     72  <test-empty id="empty"></test-empty>
     73 
     74  <hr>
     75 
     76  <test-empty id="one-child">
     77    <h1>One child</h1>
     78  </test-empty>
     79 
     80  <hr>
     81 
     82  <test-children id="shadow-children"></test-children>
     83 
     84  <hr>
     85 
     86  <test-named-slot id="named-slot">
     87    <p class="slotted" slot="slot1">Slotted</p>
     88  </test-named-slot>
     89 
     90  <hr>
     91 
     92  <test-slot id="slot-pseudo">
     93    <span class="has-before">Slotted</span>
     94  </test-slot>
     95 
     96  <hr>
     97 
     98  <test-empty id="host-pseudo"></test-empty>
     99 
    100  <hr>
    101 
    102  <test-empty id="mode-open"></test-empty>
    103  <test-empty-closed id="mode-closed"></test-empty-closed>
    104 
    105  <hr>
    106 
    107  <test-simple-slot id="slot-inline-text">
    108    Lorem ipsum
    109  </test-simple-slot>
    110 
    111  <hr>
    112  <video id="video-controls" controls></video>
    113  <video id="video-controls-with-children" controls>
    114    <div>some content</div>
    115  </video>
    116 </body>
    117 </html>