OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <title>Selection canonicalization test</title> | 4 <title>Selection canonicalization test</title> |
5 <script src="../../resources/js-test.js"></script> | 5 <script src="../../resources/js-test.js"></script> |
6 </head> | 6 </head> |
7 <body> | 7 <body> |
8 <script> | 8 <script> |
9 description('Ranges set by Selection.addRange() and returned by Selection.getRan
geAt() should be identical.'); | 9 description('Ranges/Nodes set by a Selection method and returned by a corresopon
ding Selection method should be identical.'); |
10 | 10 |
11 var sandboxRoot = document.createElement('div'); | 11 var sandboxRoot = document.createElement('div'); |
12 sandboxRoot.innerHTML = | 12 sandboxRoot.innerHTML = |
13 '<div id="non-editable-root"><span>A</span><span></span><span>B</span></div>
' + | 13 '<div id="non-editable-root"><span>A</span><span></span><span>B</span></div>
' + |
14 '<div id="editable-root" contentEditable="true"><span>C</span><span></span><
span>D</span></div>'; | 14 '<div id="editable-root" contentEditable="true"><span>C</span><span></span><
span>D</span></div>'; |
15 document.body.appendChild(sandboxRoot); | 15 document.body.appendChild(sandboxRoot); |
16 | 16 |
17 var selection = window.getSelection(); | 17 var selection = window.getSelection(); |
18 | 18 |
19 function selectRange(range) | 19 function selectRange(range) |
20 { | 20 { |
21 selection.removeAllRanges(); | 21 selection.removeAllRanges(); |
22 selection.addRange(range); | 22 selection.addRange(range); |
23 } | 23 } |
24 | 24 |
25 function collapsedRangeAt(anchorNode, offset) | 25 function collapsedRangeAt(anchorNode, offset) |
26 { | 26 { |
27 var range = new Range(); | 27 var range = new Range(); |
28 range.setEnd(anchorNode, offset); | 28 range.setEnd(anchorNode, offset); |
29 range.collapse(); | 29 range.collapse(); |
30 return range; | 30 return range; |
31 } | 31 } |
32 | 32 |
33 var originalRange; | 33 var originalRange; |
34 var gotRange; | 34 var gotRange; |
35 | 35 |
36 function testSingleRange(range) | 36 function testAddRange() |
37 { | 37 { |
38 originalRange = range; | 38 originalRange = collapsedRangeAt(originalAnchorNode, originalAnchorOffset); |
39 selectRange(range); | 39 selectRange(originalRange); |
40 gotRange = selection.getRangeAt(0); | 40 gotRange = selection.getRangeAt(0); |
41 | 41 |
42 shouldBeTrue('gotRange.startContainer === originalRange.startContainer'); | 42 shouldBeTrue('gotRange.startContainer === originalRange.startContainer'); |
43 shouldBe('gotRange.startOffset', 'originalRange.startOffset'); | 43 shouldBe('gotRange.startOffset', 'originalRange.startOffset'); |
44 shouldBeTrue('gotRange.endContainer === originalRange.endContainer'); | 44 shouldBeTrue('gotRange.endContainer === originalRange.endContainer'); |
45 shouldBe('gotRange.endOffset', 'originalRange.endOffset'); | 45 shouldBe('gotRange.endOffset', 'originalRange.endOffset'); |
46 } | 46 } |
47 | 47 |
| 48 function testCollapse() |
| 49 { |
| 50 selection.collapse(originalAnchorNode, originalAnchorOffset); |
| 51 gotRange = selection.getRangeAt(0); |
| 52 shouldBeTrue('gotRange.startContainer === originalAnchorNode'); |
| 53 shouldBe('gotRange.startOffset', 'originalAnchorOffset'); |
| 54 shouldBeTrue('gotRange.endContainer === originalAnchorNode'); |
| 55 shouldBe('gotRange.endOffset', 'originalAnchorOffset'); |
| 56 } |
| 57 |
| 58 var originalAnchorNode; |
| 59 var originalAnchorOffset; |
| 60 function testSingleRange(anchorNode, anchorOffset) |
| 61 { |
| 62 originalAnchorNode = anchorNode; |
| 63 originalAnchorOffset = anchorOffset; |
| 64 |
| 65 testAddRange(); |
| 66 testCollapse(); |
| 67 } |
| 68 |
48 function runTest(rootElement) | 69 function runTest(rootElement) |
49 { | 70 { |
50 var span1 = rootElement.childNodes[0]; | 71 var span1 = rootElement.childNodes[0]; |
51 var span2 = rootElement.childNodes[1]; | 72 var span2 = rootElement.childNodes[1]; |
52 var span3 = rootElement.childNodes[2]; | 73 var span3 = rootElement.childNodes[2]; |
53 var text1 = span1.firstChild; | 74 var text1 = span1.firstChild; |
54 var text2 = span3.firstChild; | 75 var text2 = span3.firstChild; |
55 | 76 |
56 // These positions are all visually equivalent, and should not mutate when o
btained by getRangeAt(). | 77 // These positions are all visually equivalent, and should not mutate when o
btained by getRangeAt(). |
57 debug('position = [text1, 1]'); | 78 debug('position = [text1, 1]'); |
58 testSingleRange(collapsedRangeAt(text1, 1)); | 79 testSingleRange(text1, 1); |
59 debug('position = [span1, 1]'); | 80 debug('position = [span1, 1]'); |
60 testSingleRange(collapsedRangeAt(span1, 1)); | 81 testSingleRange(span1, 1); |
61 debug('position = [rootElement, 1]'); | 82 debug('position = [rootElement, 1]'); |
62 testSingleRange(collapsedRangeAt(rootElement, 1)); | 83 testSingleRange(rootElement, 1); |
63 debug('position = [span2, 0]'); | 84 debug('position = [span2, 0]'); |
64 testSingleRange(collapsedRangeAt(span2, 0)); | 85 testSingleRange(span2, 0); |
65 debug('position = [rootElement, 2]'); | 86 debug('position = [rootElement, 2]'); |
66 testSingleRange(collapsedRangeAt(rootElement, 2)); | 87 testSingleRange(rootElement, 2); |
67 debug('position = [span3, 0]'); | 88 debug('position = [span3, 0]'); |
68 testSingleRange(collapsedRangeAt(span3, 0)); | 89 testSingleRange(span3, 0); |
69 debug('position = [text2, 0]'); | 90 debug('position = [text2, 0]'); |
70 testSingleRange(collapsedRangeAt(text2, 0)); | 91 testSingleRange(text2, 0); |
71 } | 92 } |
72 | 93 |
73 debug('Testing selection on non-editable nodes...'); | 94 debug('Testing selection on non-editable nodes...'); |
74 runTest(document.getElementById('non-editable-root')); | 95 runTest(document.getElementById('non-editable-root')); |
75 debug('Testing selection on editable nodes...'); | 96 debug('Testing selection on editable nodes...'); |
76 runTest(document.getElementById('editable-root')); | 97 runTest(document.getElementById('editable-root')); |
77 | 98 |
78 document.body.removeChild(sandboxRoot); | 99 document.body.removeChild(sandboxRoot); |
79 </script> | 100 </script> |
80 </body> | 101 </body> |
81 </html> | 102 </html> |
OLD | NEW |