third_party/WebKit/LayoutTests/editing/shadow/selection-all-with-shadow.html

   1 <!DOCTYPE html>
   2 <style>
   3 host {
   4   border: solid 1px red;
   5   padding: 5px;
   6 }
   7 .sample{
   8   border: solid 1px green;
   9   padding: 10px;
  10 }
  11 </style>
  12 <div>
  13 <div id="sample1" class="sample">012<host id="host1">host1</host>345</div>
  14 <div id="sample2" class="sample" contenteditable>012<host id="host2">host2</host>345</div>
  15 <div id="sample3" class="sample">012<host id="host3">host3abc<host id="host4">host4</host>host3def</host>345</div>
  16 <div id="sample4" class="sample">012<host id="host5">host5</host>345</div>
  17 </div>
  18 <p>end of document</p>
  19 <script src="../../resources/js-test.js"></script>
  20 <script>
  21 description('SelectAll and Shadow DOM Tree');
  22
  23 function installShadowTree(host) {
  24     var shadowRoot = host.createShadowRoot();
  25     shadowRoot.innerHTML = '<i>BEFORE</i> <b><content></b> <i>AFTER</i>';
  26 }
  27
  28 var selection = window.getSelection();
  29
  30 // In this file, we use following symbols in pictures in comment.
  31 // ^=anchor position, |=focus position, [...]=shadow DOM boundary.
  32
  33 debug('Select all from host content in shadow tree => select all on document');
  34 // before 012 [BEFORE ^host1| AFTER] 345
  35 // select all
  36 // after ^... 012 [^BEFORE host1 AFTER] 345 ...|
  37 var host1 = document.getElementById('host1');
  38 installShadowTree(host1);
  39 selection.collapse(host1, 0);
  40 document.execCommand('selectAll');
  41 shouldBeEqualToString('selection.anchorNode.nodeValue', 'SelectAll and Shadow DOM Tree');
  42 shouldBe('selection.anchorOffset', '0');
  43 shouldBeEqualToString('selection.focusNode.nodeValue', 'end of document');
  44 shouldBe('selection.focusOffset', '15');
  45
  46 debug('\nSelect all from "EFO" in shadow tree => select descendants of immediate child of shadow root containing start position');
  47 // before 012 [B^EFO|RE host1 AFTER] 345
  48 // select all
  49 // after 012 [^BEFORE| host2 AFTER] 345
  50 selection.collapse(host1.shadowRoot.firstChild.firstChild, 1);
  51 selection.extend(host1.shadowRoot.firstChild.firstChild, 4);
  52 document.execCommand('selectAll');
  53 shouldBe('selection.anchorNode', 'host1.parentNode');
  54 shouldBe('selection.anchorOffset', '1');
  55 shouldBe('selection.focusNode', 'host1.parentNode');
  56 shouldBe('selection.focusOffset', '1');
  57 var selectionInHost1 = host1.shadowRoot.getSelection();
  58 shouldBeEqualToString('selectionInHost1.anchorNode.nodeValue', 'BEFORE');
  59 shouldBe('selectionInHost1.anchorOffset', '0');
  60 shouldBeEqualToString('selectionInHost1.focusNode.nodeValue', 'BEFORE');
  61 shouldBe('selectionInHost1.focusOffset', '6');
  62
  63 debug('\nSelect all from host content in editable => select all in editable rather than whole document');
  64 // before 012 [BEFORE |host2 AFTER] 345
  65 // select all
  66 // after ^012 [BEFORE host2 AFTER] 345|
  67 var host2 = document.getElementById('host2');
  68 installShadowTree(host2);
  69 selection.collapse(host2, 0);
  70 document.execCommand('selectAll');
  71 shouldBeEqualToString('selection.anchorNode.nodeValue', '012');
  72 shouldBe('selection.anchorOffset', '0');
  73 shouldBeEqualToString('selection.focusNode.nodeValue', '345');
  74 shouldBe('selection.anchorOffset', '0');
  75
  76 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');
  77 // before 012 [B^EFO|RE host2 AFTER] 345
  78 // select all
  79 // after 012 [^BEFORE| host2 AFTER] 345
  80 selection.collapse(host2.shadowRoot.firstChild.firstChild, 1);
  81 selection.extend(host2.shadowRoot.firstChild.firstChild, 4);
  82 document.execCommand('selectAll');
  83 shouldBe('selection.anchorNode', 'host2.parentNode');
  84 shouldBe('selection.anchorOffset', '1');
  85 shouldBe('selection.focusNode', 'host2.parentNode');
  86 shouldBe('selection.focusOffset', '1');
  87 var selectionInHost2 = host2.shadowRoot.getSelection();
  88 shouldBeEqualToString('selectionInHost2.anchorNode.nodeValue', 'BEFORE');
  89 shouldBe('selectionInHost2.anchorOffset', '0');
  90 shouldBeEqualToString('selectionInHost2.focusNode.nodeValue', 'BEFORE');
  91 shouldBe('selectionInHost2.focusOffset', '6');
  92
  93 debug('\nSelect all from host content in nested shadow tree => select all on document');
  94 // before 012 [BEFORE host3abc[BFORE |host4 AFTER] host3def AFTER] 345
  95 // select all
  96 // after ^ ... 012 [BEFORE host3abc[BEFORE host4 AFTER] host3def AFTER] 345 ... |
  97 var host3 = document.getElementById('host3');
  98 installShadowTree(host3);
  99 var host4 = document.getElementById('host4');
 100 installShadowTree(host4);
 101 selection.collapse(host4, 0);
 102 document.execCommand('selectAll');
 103 shouldBeEqualToString('selection.anchorNode.nodeValue', 'SelectAll and Shadow DOM Tree');
 104 shouldBe('selection.anchorOffset', '0');
 105 shouldBeEqualToString('selection.focusNode.nodeValue', 'end of document');
 106 shouldBe('selection.focusOffset', '15');
 107
 108 debug('\nSelect all from "EFO" in nested shadow tree => select descendants of immediate child of shadow root containing start position');
 109 // before 012 [BEFORE host3abc[B^EFO|RE host4 AFTER] host3def AFTER] 345
 110 // select all
 111 // after 012 [BEFORE host3abc[^BEFORE| host4 AFTER] host3def AFTER] 345
 112 selection.collapse(host4.shadowRoot.firstChild.firstChild, 1);
 113 selection.extend(host4.shadowRoot.firstChild.firstChild, 4);
 114 document.execCommand('selectAll');
 115 shouldBe('selection.anchorNode', 'host4.parentNode');
 116 shouldBe('selection.anchorOffset', '1');
 117 shouldBe('selection.focusNode', 'host4.parentNode');
 118 shouldBe('selection.focusOffset', '1');
 119
 120 var selectionInHost3 = host3.shadowRoot.getSelection();
 121 shouldBe('selectionInHost3.anchorNode', 'null');
 122 shouldBe('selectionInHost3.anchorOffset', '0');
 123 shouldBe('selectionInHost3.focusNode', 'null');
 124 shouldBe('selectionInHost3.focusOffset', '0');
 125
 126 var selectionInHost4 = host4.shadowRoot.getSelection();
 127 shouldBeEqualToString('selectionInHost4.anchorNode.nodeValue', 'BEFORE');
 128 shouldBe('selectionInHost4.anchorOffset', '0');
 129 shouldBeEqualToString('selectionInHost4.focusNode.nodeValue', 'BEFORE');
 130 shouldBe('selectionInHost4.focusOffset', '6');
 131
 132 debug('\nSelect all from selecting node in youngest shadow DOM tree => select descendants of immediate child of shadow root containing start position');
 133 var host5 = document.getElementById('host5');
 134 installShadowTree(host5);
 135 host5.createShadowRoot().innerHTML = '<i>BEFORE</i><b><shadow></shadow></b><i>AFTER</i>';
 136 var selectionInHost5 = host5.shadowRoot.getSelection();
 137 selection.collapse(host5.shadowRoot.firstChild.firstChild, 1);
 138 selection.extend(host5.shadowRoot.firstChild.firstChild, 4);
 139 document.execCommand('selectAll');
 140 shouldBeEqualToString('selectionInHost5.anchorNode.nodeValue', 'BEFORE');
 141 shouldBe('selectionInHost5.anchorOffset', '0');
 142 shouldBeEqualToString('selectionInHost5.focusNode.nodeValue', 'BEFORE');
 143 shouldBe('selectionInHost5.focusOffset', '6');
 144
 145 debug('\nSelect all from selecting node in oldest shadow DOM tree => select descendants of immediate child of shadow root containing start position');
 146 selection.collapse(host5.shadowRoot.olderShadowRoot.firstChild.firstChild, 1);
 147 selection.extend(host5.shadowRoot.olderShadowRoot.firstChild.firstChild, 4);
 148 document.execCommand('selectAll');
 149 selectionInHost5 = host5.shadowRoot.olderShadowRoot.getSelection();
 150 console.log(selectionInHost5);
 151 shouldBeEqualToString('selectionInHost5.anchorNode.nodeValue', 'BEFORE');
 152 shouldBe('selectionInHost5.anchorOffset', '0');
 153 shouldBeEqualToString('selectionInHost5.focusNode.nodeValue', 'BEFORE');
 154 shouldBe('selectionInHost5.focusOffset', '6');
 155 </script>