1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
<!--
Important: needs to be in quirks mode for the test to work.
If not in quirks mode, the down and up arrow don't position as expected.
-->
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=756984
-->
<head>
<meta charset="utf-8">
<title>Test for Bug 756984</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=756984">Mozilla Bug 756984</a>
<p id="display"></p>
<div id="content" style="display: none">
</div>
<div id="div1">123<br>45678<br></div>
<div id="div2"><font face="Arial">123</font><br><i>45678</i><br></div>
<div id="div3"><font face="Courier"><i><strong>123</strong></i></font><br><i>45678</i><br></div>
<div id="div4"><br>45678<br></div>
<div id="div5" contenteditable=true spellcheck=false>1234567890<br>abc<br>defghijklmno<br>end</div>
<div id="div6" contenteditable=true spellcheck=false><font face="Arial">1234567890</font><br><i>abc</i><br><font color="red">defghijklmno</font><br>end</div>
<div id="div7" contenteditable=true spellcheck=false><font face="Courier"><i><strong>1234567890</strong></i></font><br><i>abc</i><br><font color="red"><b>defghijklmno</b></font><br>end</div>
<pre id="test">
<script type="application/javascript">
/** Test for Bug 756984 **/
/*
* We test that clicking beyond the end of a line terminated with <br> selects the preceding text, if any.
* In a contenteditable div, we also test that getting to the end of a line via the "end" key or by using
* the left-arrow key from the beginning of the following line selects the text preceding the <br>.
*/
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(function() {
var sel = window.getSelection();
var i, theDiv, selRange;
for (i = 1; i <= 3; i++) {
// click beyond the first line (100px to the left and 2px down), expect text
theDiv = document.getElementById("div" + i.toString());
theDiv.focus();
sel.collapse(theDiv, 0);
synthesizeMouse(theDiv, 100, 2, {});
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName, "#text", "selection should be in text node");
is(selRange.endOffset, 3, "offset should be 3");
}
// click beyond the first line (100px to the left and 2px down), expect DIV.
// This is the previous behaviour which hasn't changed since the line is empty.
// If the processing were wrong, the selection would end up in some other non-empty line.
theDiv = document.getElementById("div4");
theDiv.focus();
sel.collapse(theDiv, 0);
synthesizeMouse(theDiv, 100, 2, {});
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName, "DIV", "selection should be in DIV");
is(selRange.endOffset, 0, "offset should be 0");
// Now we do a more complex test, this time with an editable div.
// We have four lines:
// 1234567890<br>
// abc<br>
// defghijklmno<br> <!-- Note: 12 characters long. -->
// end
for (i = 5; i <= 7; i++) {
// We do these steps:
// 1) Click behind the first line, add "X".
theDiv = document.getElementById("div" + i.toString());
theDiv.focus();
var originalHTML = theDiv.innerHTML;
sel.collapse(theDiv, 0);
synthesizeMouse(theDiv, 100, 2, {});
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName, "#text", "selection should be in text node (1)");
is(selRange.endOffset, 10, "offset should be 10");
synthesizeKey("X", {});
// 2) Down arrow to the end of the second line, add "Y".
synthesizeKey("VK_DOWN", {});
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName, "#text", "selection should be in text node (2)");
is(selRange.endOffset, 3, "offset should be 3");
synthesizeKey("Y", {});
// 3) Right arrow and end key to the end of the third line, add "Z".
synthesizeKey("VK_RIGHT", {});
if (navigator.platform.indexOf("Win") == 0) {
synthesizeKey("VK_END", {});
} else {
// End key doesn't work as expected on Mac and Linux.
sel.modify("move", "right", "lineboundary");
}
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName, "#text", "selection should be in text node (3)");
is(selRange.endOffset, 12, "offset should be 12");
synthesizeKey("Z", {});
// 4) Up arrow to the end of the second line, add "T".
synthesizeKey("VK_UP", {});
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName, "#text", "selection should be in text node (4)");
is(selRange.endOffset, 4, "offset should be 4");
synthesizeKey("T", {});
// 5) Left arrow six times to the end of the first line, add "A".
synthesizeKey("VK_LEFT", {});
synthesizeKey("VK_LEFT", {});
synthesizeKey("VK_LEFT", {});
synthesizeKey("VK_LEFT", {});
synthesizeKey("VK_LEFT", {});
synthesizeKey("VK_LEFT", {});
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName, "#text", "selection should be in text node (5)");
is(selRange.endOffset, 11, "offset should be 11");
synthesizeKey("A", {});
// Check the resulting HTML. First prepare what we expect.
originalHTML = originalHTML.replace(/1234567890/, "1234567890XA");
originalHTML = originalHTML.replace(/abc/, "abcYT");
originalHTML = originalHTML.replace(/defghijklmno/, "defghijklmnoZ");
var newHTML = theDiv.innerHTML;
is(newHTML, originalHTML, "unexpected HTML");
}
SimpleTest.finish();
});
</script>
</pre>
</body>
</html>
|
