tor-browser

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

scrollParent-shadow-tree.html (2569B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>CSSOM View —— scrollParent test</title>
      4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-htmlelement-scrollparent">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <style>
      8  .scroller {
      9    overflow: scroll;
     10    border: 1px solid blue;
     11  }
     12  .scroller {
     13    height: 150px;
     14  }
     15  .target {
     16    background: repeating-linear-gradient(30deg, white 0px, white 30px, green 30px, green 60px);
     17    height: 1000px;
     18  }
     19  .spacer {
     20    background: repeating-linear-gradient(-30deg, white 0px, white 30px, blue 30px, blue 60px);
     21    height: 1000px;
     22  }
     23 
     24 </style>
     25 <script>
     26 var closedShadowRoot = null;
     27 class BaseComponent extends HTMLElement {
     28  constructor(mode = 'open') {
     29    super();
     30    const shadowRoot = this.attachShadow({ mode });
     31    shadowRoot.innerHTML = `
     32        <style>
     33          .shadow-scroller {
     34            overflow: scroll;
     35            height: 50px;
     36            border: 1px solid black;
     37          }
     38        </style>
     39 
     40        <div>
     41          <div class="shadow-scroller">
     42            <slot><p>No description.</p></slot>
     43          </div>
     44        </div>
     45    `;
     46    if (mode == 'closed') {
     47      closedShadowRoot = shadowRoot;
     48    }
     49  }
     50 }
     51 class HiddenComponent extends BaseComponent {
     52  constructor() { super('closed'); }
     53 }
     54 class OpenComponent extends BaseComponent {
     55  constructor() { super('open'); }
     56 }
     57 customElements.define('hidden-component', HiddenComponent);
     58 customElements.define('open-component', OpenComponent);
     59 </script>
     60 
     61 <div id="outerScroller" class="scroller">
     62  <div class="spacer">
     63    <hidden-component id="shadowComponent">
     64      <div>
     65        <div id="closedInnerElement" class="target"></div>
     66      </div>
     67    </hidden-component>
     68    <open-component id="openShadowComponent">
     69      <div>
     70        <div id="openInnerElement" class="target"></div>
     71      </div>
     72    </open-component>
     73  </div>
     74 </div>
     75 
     76 <script>
     77 test(() => {
     78  assert_equals(closedInnerElement.scrollParent, outerScroller);
     79 }, "scrollParent skips intermediate closed shadow tree nodes");
     80 
     81 test(() => {
     82  assert_equals(openInnerElement.scrollParent, outerScroller);
     83 }, "scrollParent skips intermediate open shadow tree nodes");
     84 
     85 test(() => {
     86  assert_equals(closedShadowRoot.querySelector('div').scrollParent, outerScroller);
     87 }, "scrollParent from inside closed shadow tree");
     88 
     89 test(() => {
     90  assert_equals(openShadowComponent.shadowRoot.querySelector('div').scrollParent, outerScroller);
     91 }, "scrollParent from inside open shadow tree");
     92 </script>
     93 </body>
     94 </html>