| <!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> |
