mirror of
https://github.com/lexmount/moli.git
synced 2026-09-26 08:01:32 +00:00
51 lines
2.0 KiB
HTML
51 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<body>
|
|
<div id="content"><!-- hello world --><p>over 9000</p></div>
|
|
<div id="range-clone-container"></div>
|
|
<script>
|
|
const container = document.getElementById("content");
|
|
const commentNode = container.childNodes[0];
|
|
|
|
const ctorRange = new Range();
|
|
window.rangeCtorCollapsed = ctorRange.collapsed;
|
|
window.rangeCtorStartOffset = ctorRange.startOffset;
|
|
window.rangeCtorEndOffset = ctorRange.endOffset;
|
|
window.rangeCtorStartIsDocument = ctorRange.startContainer instanceof HTMLDocument;
|
|
window.rangeCtorEndIsDocument = ctorRange.endContainer instanceof HTMLDocument;
|
|
|
|
const docRange = document.createRange();
|
|
window.rangeCreateRangeInstance = docRange instanceof Range;
|
|
window.rangeCreateRangeCollapsed = docRange.collapsed;
|
|
|
|
const commentRange = document.createRange();
|
|
commentRange.selectNodeContents(commentNode);
|
|
window.rangeCommentStartOffset = commentRange.startOffset;
|
|
window.rangeCommentEndOffset = commentRange.endOffset;
|
|
|
|
const nodeRange = document.createRange();
|
|
nodeRange.selectNodeContents(container);
|
|
window.rangeNodeStartOffset = nodeRange.startOffset;
|
|
window.rangeNodeEndOffset = nodeRange.endOffset;
|
|
|
|
let cloneCalls = 0;
|
|
class RangeCloneElement extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
cloneCalls += 1;
|
|
document.getElementById("range-clone-container").appendChild(this);
|
|
}
|
|
}
|
|
customElements.define("range-clone-element", RangeCloneElement);
|
|
|
|
const cloneHost = document.createElement("div");
|
|
cloneHost.appendChild(document.createElement("range-clone-element"));
|
|
const cloneRange = document.createRange();
|
|
cloneRange.selectNodeContents(cloneHost);
|
|
const cloned = cloneRange.cloneContents();
|
|
window.rangeCloneCallsAtLeastTwo = cloneCalls >= 2;
|
|
window.rangeCloneFragmentChildren = cloned.childNodes.length;
|
|
</script>
|
|
</body>
|
|
</html>
|