OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <script src="../resources/js-test.js"></script> | |
5 </head> | |
6 <body> | |
7 | |
8 <div id="contenteditable-textbox" role="textbox" contenteditable="true"> | |
9 <div id="contenteditable-line1">Line 1</div> | |
10 <textarea id="contenteditable-line2" rows="1" cols="40">Line 2</textarea> | |
11 </div> | |
12 | |
13 <div id="contenteditable-div" contenteditable> | |
14 <p id="paragraph1">Line 1<br>Line 2</p> | |
15 <p id="paragraph2">Line 3</p> | |
16 </div> | |
17 | |
18 <script> | |
19 description("This tests that text selection is reported correctly for co
ntenteditable elements."); | |
20 | |
21 if (window.accessibilityController) { | |
22 var selection = window.getSelection(); | |
23 var selectionRange = document.createRange(); | |
24 | |
25 var textbox = document.getElementById("contenteditable-textbox"); | |
26 var textboxAccessible = | |
27 accessibilityController.accessibleElementById( | |
28 'contenteditable-textbox'); | |
29 | |
30 var contenteditable = document.getElementById('contenteditable-div')
; | |
31 var contenteditableAccessible = | |
32 accessibilityController.accessibleElementById( | |
33 'contenteditable-div'); | |
34 | |
35 | |
36 // 1. Test the selectNodeContents method. | |
37 | |
38 // Select the entire contents of the ARIA textbox. | |
39 // These include a text node and a textarea element taking up two li
nes. | |
40 textbox.focus(); | |
41 selectionRange.selectNodeContents(textbox); | |
42 selection.removeAllRanges(); | |
43 selection.addRange(selectionRange); | |
44 shouldBeZero("textboxAccessible.selectionStart"); | |
45 // 7 for the "Line 1" text div + 1 for the textarea node. | |
46 shouldBeEqualToNumber("textboxAccessible.selectionEnd", 8); | |
47 shouldBeZero("textboxAccessible.selectionStartLineNumber"); | |
48 shouldBeEqualToNumber("textboxAccessible.selectionEndLineNumber", 1)
; | |
49 | |
50 // Select the entire contents of the content editable. | |
51 contenteditable.focus(); | |
52 selectionRange.selectNodeContents(contenteditable); | |
53 selection.removeAllRanges(); | |
54 selection.addRange(selectionRange); | |
55 shouldBeZero("contenteditableAccessible.selectionStart"); | |
56 shouldBeEqualToNumber("contenteditableAccessible.selectionEnd", 21); | |
57 shouldBeZero("contenteditableAccessible.selectionStartLineNumber"); | |
58 shouldBeEqualToNumber("contenteditableAccessible.selectionEndLineNum
ber", 2); | |
59 | |
60 | |
61 // 2. Test the setStart and setEnd methods. | |
62 | |
63 // Select only the first line of the textbox. | |
64 var line1 = document.getElementById("contenteditable-line1"); | |
65 selectionRange.setStart(line1.firstChild, 0); | |
66 selectionRange.setEnd(line1.firstChild, 6); | |
67 selection.removeAllRanges(); | |
68 selection.addRange(selectionRange); | |
69 shouldBeZero("textboxAccessible.selectionStart"); | |
70 shouldBeEqualToNumber("textboxAccessible.selectionEnd", 6); | |
71 shouldBeZero("textboxAccessible.selectionStartLineNumber"); | |
72 shouldBeZero("textboxAccessible.selectionEndLineNumber"); | |
73 | |
74 | |
75 // 3. Test the effect of the textarea.setSelectionRange method. | |
76 | |
77 // Select only the second line, that is, the one found in the textar
ea. | |
78 var line2 = document.getElementById("contenteditable-line2"); | |
79 line2.focus(); | |
80 // The selection should have been removed from the line1 div. | |
81 shouldBeZero("textboxAccessible.selectionStart"); | |
82 shouldBeZero("textboxAccessible.selectionEnd"); | |
83 | |
84 var line2Accessible = accessibilityController.focusedElement; | |
85 line2.setSelectionRange(0, line2.textLength); | |
86 shouldBeZero("line2Accessible.selectionStart"); | |
87 shouldBeEqualToNumber("line2Accessible.selectionEnd", line2.textLeng
th); | |
88 shouldBeZero("line2Accessible.selectionStartLineNumber"); | |
89 shouldBeZero("line2Accessible.selectionEndLineNumber"); | |
90 | |
91 | |
92 // 4. Test the selectNode method. | |
93 | |
94 // Select entire lines in the content editable. | |
95 var line1 = document.getElementById('paragraph1').firstChild; | |
96 var line2 = document.getElementById('paragraph1').lastChild; | |
97 var line3 = document.getElementById('paragraph2'); | |
98 var contenteditableLines = [ line1, line2, line3 ]; | |
99 | |
100 for (var testCase = 0; testCase < 2; ++testCase) { | |
101 | |
102 for (var i = 0; i < contenteditableLines.length; ++i) { | |
103 var start = i * 7; | |
104 var end = i * 7 + 6; | |
105 if (i == 2) { | |
106 // Paragraphs have a blank line between them. | |
107 ++start; | |
108 ++end; | |
109 } | |
110 | |
111 selectionRange.selectNode(contenteditableLines[i]); | |
112 selection.removeAllRanges(); | |
113 selection.addRange(selectionRange); | |
114 | |
115 shouldBeEqualToNumber("contenteditableAccessible.selectionSt
art", start); | |
116 shouldBeEqualToNumber("contenteditableAccessible.selectionEn
d", end); | |
117 shouldBeEqualToNumber("contenteditableAccessible.selectionSt
artLineNumber", i); | |
118 shouldBeEqualToNumber("contenteditableAccessible.selectionEn
dLineNumber", i); | |
119 } | |
120 | |
121 // For a sanity check, try the same tests with contenteditable="
false". | |
122 contenteditable.contenteditable = false; | |
123 } | |
124 | |
125 } | |
126 </script> | |
127 | |
128 </body> | |
129 </html> | |
OLD | NEW |