150 lines
6.9 KiB
HTML
150 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<div id="test"><span><i><br></i></span></div>
|
|
<div id="console"></div>
|
|
<script src="../../resources/js-test.js"></script>
|
|
<style>
|
|
#test { padding-left: 10px; border: solid 1px; }
|
|
#test > span { border-left: solid 1px green; }
|
|
</style>
|
|
<script>
|
|
|
|
let host = document.querySelector('#test > span');
|
|
let shadowRoot = host.attachShadow({mode: 'closed'});
|
|
shadowRoot.innerHTML = '<b><br></b>';
|
|
|
|
function markup(node) { return node.innerHTML.replace(/</g, '<'); }
|
|
|
|
debug(`host: ${markup(host)}, shadowRoot: ${markup(shadowRoot)}`);
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 1, host.parentNode.offsetTop + 1)');
|
|
shouldBe('range.startContainer', 'host');
|
|
shouldBe('range.startOffset', '0');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
debug('')
|
|
debug(`host: ${markup(host)}, shadowRoot: ${markup(shadowRoot)}`);
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 100, host.parentNode.offsetTop + 1)');
|
|
shouldBe('range.startContainer', 'host');
|
|
shouldBe('range.startOffset', '0');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
debug('');
|
|
shadowRoot.innerHTML = 'hi';
|
|
debug(`host: ${markup(host)}, shadowRoot: ${markup(shadowRoot)}`);
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 1, host.parentNode.offsetTop + 1)');
|
|
shouldBe('range.startContainer', 'host');
|
|
shouldBe('range.startOffset', '0');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
debug('');
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 100, host.parentNode.offsetTop + 1)');
|
|
shouldBe('range.startContainer', 'host');
|
|
shouldBe('range.startOffset', '0');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
debug('');
|
|
shadowRoot.innerHTML = '<slot></slot>';
|
|
debug(`host: ${markup(host)}, shadowRoot: ${markup(shadowRoot)}`);
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 1, host.parentNode.offsetTop + 1)');
|
|
shouldNotBe('range.startContainer', 'null');
|
|
shouldBe('range.startContainer', 'host.querySelector("i")');
|
|
shouldBe('range.startOffset', '0');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
debug('');
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 100, host.parentNode.offsetTop + 1)');
|
|
shouldNotBe('range.startContainer', 'null');
|
|
shouldBe('range.startContainer', 'host.querySelector("i")');
|
|
shouldBe('range.startOffset', '0');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
debug('');
|
|
host.innerHTML = 'hi';
|
|
shadowRoot.innerHTML = '<slot></slot>';
|
|
debug(`host: ${markup(host)}, shadowRoot: ${markup(shadowRoot)}`);
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 1, host.parentNode.offsetTop + 1)');
|
|
shouldBe('range.startContainer', 'host.firstChild');
|
|
shouldBe('range.startOffset', '0');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
debug('');
|
|
debug(`host: ${markup(host)}, shadowRoot: ${markup(shadowRoot)}`);
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 100, host.parentNode.offsetTop + 1)');
|
|
shouldBe('range.startContainer', 'host.firstChild');
|
|
shouldBe('range.startOffset', '2');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
debug('');
|
|
host.innerHTML = 'bye';
|
|
shadowRoot.innerHTML = '<span id="inner-host"></span>';
|
|
let innerHost = shadowRoot.getElementById('inner-host');
|
|
let innerShadowRoot = innerHost.attachShadow({mode: 'closed'});
|
|
innerShadowRoot.innerHTML = 'hi';
|
|
debug(`host: ${markup(host)}, shadowRoot: ${markup(shadowRoot)}, innerShadowRoot: ${markup(innerShadowRoot)}`);
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 1, host.parentNode.offsetTop + 1)');
|
|
shouldBe('range.startContainer', 'host');
|
|
shouldBe('range.startOffset', '0');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
debug('');
|
|
debug(`host: ${markup(host)}, shadowRoot: ${markup(shadowRoot)}, innerShadowRoot: ${markup(innerShadowRoot)}`);
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 100, host.parentNode.offsetTop + 1)');
|
|
shouldBe('range.startContainer', 'host');
|
|
shouldBe('range.startOffset', '0');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
debug('');
|
|
shadowRoot.innerHTML = '<span id="inner-host" style="margin-left: 10px; border-left: solid 1px blue;">hi</span>';
|
|
innerHost = shadowRoot.getElementById('inner-host');
|
|
innerShadowRoot = innerHost.attachShadow({mode: 'closed'});
|
|
innerShadowRoot.innerHTML = '<slot></slot>';
|
|
debug(`host: ${markup(host)}, shadowRoot: ${markup(shadowRoot)}, innerShadowRoot: ${markup(innerShadowRoot)}`);
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 15, host.parentNode.offsetTop + 1)');
|
|
shouldBe('range.startContainer', 'host');
|
|
shouldBe('range.startOffset', '0');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
debug('');
|
|
debug(`host: ${markup(host)}, shadowRoot: ${markup(shadowRoot)}, innerShadowRoot: ${markup(innerShadowRoot)}`);
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 100, host.parentNode.offsetTop + 1)');
|
|
shouldBe('range.startContainer', 'host');
|
|
shouldBe('range.startOffset', '0');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
debug('');
|
|
shadowRoot.innerHTML = '<span id="inner-host" style="margin-left: 10px; border-left: solid 1px blue;"><slot></slot></span>';
|
|
innerHost = shadowRoot.getElementById('inner-host');
|
|
innerShadowRoot = innerHost.attachShadow({mode: 'closed'});
|
|
innerShadowRoot.innerHTML = '<slot></slot>';
|
|
debug(`host: ${markup(host)}, shadowRoot: ${markup(shadowRoot)}, innerShadowRoot: ${markup(innerShadowRoot)}`);
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 15, host.parentNode.offsetTop + 1)');
|
|
shouldBe('range.startContainer', 'host.firstChild');
|
|
shouldBe('range.startOffset', '0');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
debug('');
|
|
debug(`host: ${markup(host)}, shadowRoot: ${markup(shadowRoot)}, innerShadowRoot: ${markup(innerShadowRoot)}`);
|
|
evalAndLog('range = document.caretRangeFromPoint(host.parentNode.offsetLeft + 100, host.parentNode.offsetTop + 1)');
|
|
shouldBe('range.startContainer', 'host.firstChild');
|
|
shouldBe('range.startOffset', '3');
|
|
shouldBe('range.startContainer', 'range.endContainer');
|
|
shouldBe('range.startOffset', 'range.endOffset');
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|