<!DOCTYPE html>
<style>
host {
  border: solid 1px red;
  padding: 5px;
}
.sample{
  border: solid 1px green;
  padding: 10px;
}
</style>
<div>
<div id="sample1" class="sample">012<host id="host1">host1</host>345</div>
<div id="sample2" class="sample" contenteditable>012<host id="host2">host2</host>345</div>
<div id="sample3" class="sample">012<host id="host3">host3abc<host id="host4">host4</host>host3def</host>345</div>
<div id="sample4" class="sample">012<host id="host5">host5</host>345</div>
</div>
<p>end of document</p>
<script src="../../resources/js-test.js"></script>
<script>
description('SelectAll and Shadow DOM Tree');

function installShadowTree(host) {
    var shadowRoot = host.createShadowRoot();
    shadowRoot.innerHTML = '<i>BEFORE</i> <b><content></b> <i>AFTER</i>';
}

var selection = window.getSelection();

// In this file, we use following symbols in pictures in comment.
// ^=anchor position, |=focus position, [...]=shadow DOM boundary.

debug('Select all from host content in shadow tree => select all on document');
// before 012 [BEFORE ^host1| AFTER] 345
// select all
// after ^... 012 [^BEFORE host1 AFTER] 345 ...|
var host1 = document.getElementById('host1');
installShadowTree(host1);
selection.collapse(host1, 0);
document.execCommand('selectAll');
shouldBeEqualToString('selection.anchorNode.nodeValue', 'SelectAll and Shadow DOM Tree');
shouldBe('selection.anchorOffset', '0');
shouldBeEqualToString('selection.focusNode.nodeValue', 'end of document');
shouldBe('selection.focusOffset', '15');

debug('\nSelect all from "EFO" in shadow tree => select descendants of immediate child of shadow root containing start position');
// before 012 [B^EFO|RE host1 AFTER] 345
// select all
// after 012 [^BEFORE| host2 AFTER] 345
selection.collapse(host1.shadowRoot.firstChild.firstChild, 1);
selection.extend(host1.shadowRoot.firstChild.firstChild, 4);
document.execCommand('selectAll');
shouldBe('selection.anchorNode', 'host1.parentNode');
shouldBe('selection.anchorOffset', '1');
shouldBe('selection.focusNode', 'host1.parentNode');
shouldBe('selection.focusOffset', '1');
var selectionInHost1 = host1.shadowRoot.getSelection();
shouldBeEqualToString('selectionInHost1.anchorNode.nodeValue', 'BEFORE');
shouldBe('selectionInHost1.anchorOffset', '0');
shouldBeEqualToString('selectionInHost1.focusNode.nodeValue', 'BEFORE');
shouldBe('selectionInHost1.focusOffset', '6');

debug('\nSelect all from host content in editable => select all in editable rather than whole document');
// before 012 [BEFORE |host2 AFTER] 345
// select all
// after ^012 [BEFORE host2 AFTER] 345|
var host2 = document.getElementById('host2');
installShadowTree(host2);
selection.collapse(host2, 0);
document.execCommand('selectAll');
shouldBeEqualToString('selection.anchorNode.nodeValue', '012');
shouldBe('selection.anchorOffset', '0');
shouldBeEqualToString('selection.focusNode.nodeValue', '345');
shouldBe('selection.anchorOffset', '0');

debug('\nSelect all from "EFO" in shadow tree => select descendants of immediate child of shadow root containing start position, host editable doesn\'t affect select all');
// before 012 [B^EFO|RE host2 AFTER] 345
// select all
// after 012 [^BEFORE| host2 AFTER] 345
selection.collapse(host2.shadowRoot.firstChild.firstChild, 1);
selection.extend(host2.shadowRoot.firstChild.firstChild, 4);
document.execCommand('selectAll');
shouldBe('selection.anchorNode', 'host2.parentNode');
shouldBe('selection.anchorOffset', '1');
shouldBe('selection.focusNode', 'host2.parentNode');
shouldBe('selection.focusOffset', '1');
var selectionInHost2 = host2.shadowRoot.getSelection();
shouldBeEqualToString('selectionInHost2.anchorNode.nodeValue', 'BEFORE');
shouldBe('selectionInHost2.anchorOffset', '0');
shouldBeEqualToString('selectionInHost2.focusNode.nodeValue', 'BEFORE');
shouldBe('selectionInHost2.focusOffset', '6');

debug('\nSelect all from host content in nested shadow tree => select all on document');
// before 012 [BEFORE host3abc[BFORE |host4 AFTER] host3def AFTER] 345
// select all
// after ^ ... 012 [BEFORE host3abc[BEFORE host4 AFTER] host3def AFTER] 345 ... |
var host3 = document.getElementById('host3');
installShadowTree(host3);
var host4 = document.getElementById('host4');
installShadowTree(host4);
selection.collapse(host4, 0);
document.execCommand('selectAll');
shouldBeEqualToString('selection.anchorNode.nodeValue', 'SelectAll and Shadow DOM Tree');
shouldBe('selection.anchorOffset', '0');
shouldBeEqualToString('selection.focusNode.nodeValue', 'end of document');
shouldBe('selection.focusOffset', '15');

debug('\nSelect all from "EFO" in nested shadow tree => select descendants of immediate child of shadow root containing start position');
// before 012 [BEFORE host3abc[B^EFO|RE host4 AFTER] host3def AFTER] 345
// select all
// after 012 [BEFORE host3abc[^BEFORE| host4 AFTER] host3def AFTER] 345
selection.collapse(host4.shadowRoot.firstChild.firstChild, 1);
selection.extend(host4.shadowRoot.firstChild.firstChild, 4);
document.execCommand('selectAll');
shouldBe('selection.anchorNode', 'host4.parentNode');
shouldBe('selection.anchorOffset', '1');
shouldBe('selection.focusNode', 'host4.parentNode');
shouldBe('selection.focusOffset', '1');

var selectionInHost3 = host3.shadowRoot.getSelection();
shouldBe('selectionInHost3.anchorNode', 'null');
shouldBe('selectionInHost3.anchorOffset', '0');
shouldBe('selectionInHost3.focusNode', 'null');
shouldBe('selectionInHost3.focusOffset', '0');

var selectionInHost4 = host4.shadowRoot.getSelection();
shouldBeEqualToString('selectionInHost4.anchorNode.nodeValue', 'BEFORE');
shouldBe('selectionInHost4.anchorOffset', '0');
shouldBeEqualToString('selectionInHost4.focusNode.nodeValue', 'BEFORE');
shouldBe('selectionInHost4.focusOffset', '6');
</script>