mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2026-04-21 11:20:32 +00:00
94 lines
2.5 KiB
HTML
94 lines
2.5 KiB
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>
|