css/cssom-view/scrollParent-shadow-tree.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSSOM View —— scrollParent test</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-htmlelement-scrollparent">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  .scroller {
    overflow: scroll;
    border: 1px solid blue;
  }
  .scroller {
    height: 150px;
  }
  .target {
    background: repeating-linear-gradient(30deg, white 0px, white 30px, green 30px, green 60px);
    height: 1000px;
  }
  .spacer {
    background: repeating-linear-gradient(-30deg, white 0px, white 30px, blue 30px, blue 60px);
    height: 1000px;
  }

</style>
<script>
var closedShadowRoot = null;
class BaseComponent extends HTMLElement {
  constructor(mode = 'open') {
    super();
    const shadowRoot = this.attachShadow({ mode });
    shadowRoot.innerHTML = `
        <style>
          .shadow-scroller {
            overflow: scroll;
            height: 50px;
            border: 1px solid black;
          }
        </style>

        <div>
          <div class="shadow-scroller">
            <slot><p>No description.</p></slot>
          </div>
        </div>
    `;
    if (mode == 'closed') {
      closedShadowRoot = shadowRoot;
    }
  }
}
class HiddenComponent extends BaseComponent {
  constructor() { super('closed'); }
}
class OpenComponent extends BaseComponent {
  constructor() { super('open'); }
}
customElements.define('hidden-component', HiddenComponent);
customElements.define('open-component', OpenComponent);
</script>

<div id="outerScroller" class="scroller">
  <div class="spacer">
    <hidden-component id="shadowComponent">
      <div>
        <div id="closedInnerElement" class="target"></div>
      </div>
    </hidden-component>
    <open-component id="openShadowComponent">
      <div>
        <div id="openInnerElement" class="target"></div>
      </div>
    </open-component>
  </div>
</div>

<script>
test(() => {
  assert_equals(closedInnerElement.scrollParent(), outerScroller);
}, "scrollParent skips intermediate closed shadow tree nodes");

test(() => {
  assert_equals(openInnerElement.scrollParent(), outerScroller);
}, "scrollParent skips intermediate open shadow tree nodes");

test(() => {
  assert_equals(closedShadowRoot.querySelector('div').scrollParent(), outerScroller);
}, "scrollParent from inside closed shadow tree");

test(() => {
  assert_equals(openShadowComponent.shadowRoot.querySelector('div').scrollParent(), outerScroller);
}, "scrollParent from inside open shadow tree");
</script>
</body>
</html>