1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/generic/test/test_bug496275.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,282 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=496275
1.8 +-->
1.9 +
1.10 +<head>
1.11 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
1.12 + <title>Test for Bug 496275</title>
1.13 + <script type="application/javascript" src="/MochiKit/MochiKit.js"></script>
1.14 + <script type="application/javascript"
1.15 + src="/tests/SimpleTest/SimpleTest.js"></script>
1.16 + <script type="application/javascript"
1.17 + src="/tests/SimpleTest/WindowSnapshot.js"></script>
1.18 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
1.19 +</head>
1.20 +
1.21 +<body onload="run()">
1.22 +<a target="_blank"
1.23 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=496275">
1.24 + Mozilla Bug 496275
1.25 +</a>
1.26 +<p id="display"></p>
1.27 +<div id="c" contenteditable="true">
1.28 + <p id="p1">The first paragraph. Another sentence. Even more text.</p>
1.29 + <p id="p2">Paragraph no. 2.</p>
1.30 + <p id="p3">This paragraph<br>
1.31 +is broken up<br>
1.32 +into four<br>
1.33 +lines</p>
1.34 +</div>
1.35 +
1.36 +<div id="ltr" contenteditable="true">
1.37 + <p id="l1">םלש Hello</p>
1.38 + <p id="l2">Goodbye</p>
1.39 +</div>
1.40 +
1.41 +<div id="rtl" contenteditable="true" dir="rtl">
1.42 + <p id="r1">התרגום האחרון שפיתחנו הוא עבור Firefox 3.5.6.</p>
1.43 + <p id="r2">קראו את הערות ההפצה (אנגלית) להוראות ורשימת בעיות ידועות.</p>
1.44 +</div>
1.45 +
1.46 +<!-- Special characters: لا is actually two characters, while تَ should be
1.47 + treated as one character. -->
1.48 +<div id="special" contenteditable="true">
1.49 + <p id="s1">a لا b تَ c</p>
1.50 +</div>
1.51 +
1.52 +<div>
1.53 + <p>Anchor offset: <span id="anchor-offset"></span></p>
1.54 + <p>Focus offset: <span id="focus-offset"></span></p>
1.55 +</div>
1.56 +
1.57 +<script type="application/javascript">
1.58 +SimpleTest.waitForExplicitFinish();
1.59 +
1.60 +function isOrIsParent(actual, expected, msg) {
1.61 + // actual should be expected or actual's parent node should be expected.
1.62 + msg += " Expected " + actual + " or " + actual.parentNode +
1.63 + " to be " + expected + ".";
1.64 +
1.65 + ok(actual == expected || actual.parentNode == expected, msg);
1.66 +}
1.67 +
1.68 +function isAt(anchorNode, anchorOffset, focusNode, focusOffset, msg) {
1.69 + var sel = window.getSelection();
1.70 +
1.71 + isOrIsParent(sel.anchorNode, $(anchorNode), msg + ": Wrong anchor node.");
1.72 + is(sel.anchorOffset, anchorOffset, msg + ": Wrong anchor offset.");
1.73 + isOrIsParent(sel.focusNode, $(focusNode), msg + ": Wrong focus node.");
1.74 + is(sel.focusOffset, $(focusOffset), msg + ": Wrong focus offset.");
1.75 +}
1.76 +
1.77 +function run() {
1.78 + var sel = window.getSelection();
1.79 +
1.80 + // If nothing is focused, selection.modify() should silently fail.
1.81 + sel.removeAllRanges();
1.82 + sel.modify("move", "forward", "character");
1.83 +
1.84 + // Now focus our first div and put the cursor at the beginning of p1.
1.85 + $("c").focus();
1.86 + sel.collapse($("p1"), 0);
1.87 +
1.88 + // We're intentionally inconsistent with the capitalization of "move",
1.89 + // "extend", etc. below to test the case-insensitivity of modify().
1.90 +
1.91 + // If we move backward, selection.modify() shouldn't do anything, since we're
1.92 + // already at the beginning of the frame.
1.93 + isAt("p1", 0, "p1", 0, "test 0a");
1.94 + sel.modify("Move", "Backward", "Character");
1.95 + isAt("p1", 0, "p1", 0, "test 0b");
1.96 +
1.97 + // After this move, the cursor should be at the second character of p1
1.98 + sel.modify("Move", "Forward", "Character");
1.99 + isAt("p1", 1, "p1", 1, "test 1");
1.100 +
1.101 + // Select the first character in p1
1.102 + sel.collapse($("p1"), 0);
1.103 + sel.modify("Extend", "Forward", "Character");
1.104 + isAt("p1", 0, "p1", 1, "test 2");
1.105 + sel.modify("Move", "Forward", "Character");
1.106 + isAt("p1", 2, "p1", 2, "test 2a");
1.107 +
1.108 + // Select all of p1, then move the selection forward one character a few
1.109 + // times.
1.110 + sel.collapse($("p1"), 0);
1.111 + sel.extend($("p1"), 1);
1.112 + sel.modify("move", "forward", "character");
1.113 + isAt("p2", 0, "p2", 0, "test 3a");
1.114 + sel.modify("move", "forward", "character");
1.115 + isAt("p2", 1, "p2", 1, "test 3b");
1.116 +
1.117 + // Put the cursor at the beginning of p3, then extend forward one line.
1.118 + // Now go back twice and forward once. Focus should now be at the end of p3.
1.119 + sel.collapse($("p3"), 0);
1.120 + sel.modify("Extend", "Forward", "Line");
1.121 + sel.modify("extend", "backward", "character");
1.122 + sel.modify("extend", "backward", "character");
1.123 + sel.modify("extend", "forward", "character");
1.124 + isAt("p3", 0, "p3", 14, "test 4");
1.125 +
1.126 + // Put the cursor at the beginning of p3, then go forward a few words
1.127 + sel.collapse($("p3"), 0);
1.128 + sel.modify("Move", "Forward", "Word");
1.129 + isAt("p3", 4, "p3", 4, "test 4a");
1.130 + sel.modify("move", "forward", "word");
1.131 + // Go back and forward so the indexes are correct.
1.132 + sel.modify("move", "backward", "character");
1.133 + sel.modify("move", "forward", "character");
1.134 + isAt("p3", 14, "p3", 14, "test 4b");
1.135 +
1.136 + // Test the lineboundary granularity
1.137 + sel.collapse($("p3"), 0);
1.138 + sel.modify("Move", "Forward", "Lineboundary");
1.139 + // Go back and forward so the indexes are correct.
1.140 + sel.modify("move", "Backward", "character");
1.141 + sel.modify("move", "forward", "character");
1.142 + isAt("p3", 14, "p3", 14, "test 5");
1.143 +
1.144 + //
1.145 + // Test RTL text within a dir=LTR div.
1.146 + //
1.147 + $("ltr").focus();
1.148 + sel.collapse($("l1"), 0);
1.149 + isAt("l1", 0, "l1", 0, "test 6a");
1.150 + sel.modify("Move", "Left", "Character");
1.151 + isAt("l1", 1, "l1", 1, "test 6b");
1.152 + sel.modify("Extend", "Backward", "Character");
1.153 + isAt("l1", 1, "l1", 0, "test 6c");
1.154 + sel.modify("extend", "forward", "character");
1.155 + isAt("l1", 1, "l1", 1, "test 6d");
1.156 + sel.modify("Extend", "Right", "Character");
1.157 + isAt("l1", 1, "l1", 0, "test 6e");
1.158 +
1.159 + sel.collapse($("l1"), 0);
1.160 + sel.modify("move", "left", "character");
1.161 + sel.modify("extend", "right", "Word");
1.162 + isAt("l1", 1, "l1", 3, "test 7a");
1.163 + sel.modify("move", "left", "word");
1.164 + isAt("l1", 3, "l1", 3, "test 7b");
1.165 + sel.modify("move", "forward", "word");
1.166 + isAt("l1", 9, "l1", 9, "test 7c");
1.167 + sel.modify("extend", "backward", "word");
1.168 + isAt("l1", 9, "l1", 4, "test 7d");
1.169 + sel.modify("move", "left", "word");
1.170 + isAt("l1", 3, "l1", 3, "test 7e");
1.171 +
1.172 + sel.collapse($("l1"), 0);
1.173 + sel.modify("extend", "left", "lineboundary");
1.174 + isAt("l1", 0, "l1", 3, "test 8a");
1.175 + sel.modify("move", "forward", "lineboundary");
1.176 + isAt("l1", 9, "l1", 9, "test 8b");
1.177 + sel.modify("extend", "backward", "lineboundary");
1.178 + isAt("l1", 9, "l1", 0, "test 8c");
1.179 + sel.modify("move", "left", "lineboundary");
1.180 + isAt("l1", 3, "l1", 3, "test 8d");
1.181 + sel.modify("extend", "forward", "lineboundary");
1.182 + isAt("l1", 3, "l1", 9, "test 8e");
1.183 +
1.184 + // Put the cursor at the left edge of the first line so that when we go up
1.185 + // and down, where we end up doesn't depend on how the characters line up.
1.186 + sel.collapse($("l1"), 0);
1.187 + sel.modify("move", "left", "lineboundary");
1.188 + isAt("l1", 3, "l1", 3, "test 9a");
1.189 + sel.modify("move", "forward", "Line");
1.190 + isAt("l2", 0, "l2", 0, "test 9b");
1.191 + sel.modify("extend", "backward", "Line");
1.192 + // Apparently going up from the beginning of the line takes us to offset 3 in
1.193 + // the line above. This is a little weird, but it's consistent with how the
1.194 + // keyboard works.
1.195 + isAt("l2", 0, "l1", 3, "test 9c");
1.196 +
1.197 + // Same test as above, now with absolute directions.
1.198 + sel.collapse($("l1"), 0);
1.199 + sel.modify("move", "left", "lineboundary");
1.200 + isAt("l1", 3, "l1", 3, "test 10a");
1.201 + sel.modify("move", "right", "line");
1.202 + isAt("l2", 0, "l2", 0, "test 10b");
1.203 + sel.modify("extend", "left", "line");
1.204 + isAt("l2", 0, "l1", 3, "test 10c");
1.205 +
1.206 + //
1.207 + // Test RTL text within a dir=RTL div.
1.208 + //
1.209 + $("rtl").focus();
1.210 + sel.collapse($("r1"), 0);
1.211 + sel.modify("move", "forward", "character");
1.212 + isAt("r1", 1, "r1", 1, "test 11a");
1.213 + sel.modify("extend", "backward", "character");
1.214 + isAt("r1", 1, "r1", 0, "test 11b");
1.215 + sel.modify("move", "forward", "word");
1.216 + isAt("r1", 6, "r1", 6, "test 11c");
1.217 + sel.modify("extend", "backward", "word");
1.218 + isAt("r1", 6, "r1", 0, "test 11d");
1.219 + sel.modify("extend", "forward", "lineboundary");
1.220 + isAt("r1", 6, "r1", 45, "test 11e");
1.221 +
1.222 + // Same as above, but with absolute directions.
1.223 + sel.collapse($("r1"), 0);
1.224 + sel.modify("move", "left", "character");
1.225 + isAt("r1", 1, "r1", 1, "test 12a");
1.226 + sel.modify("extend", "right", "character");
1.227 + isAt("r1", 1, "r1", 0, "test 12b");
1.228 + sel.modify("move", "left", "word");
1.229 + isAt("r1", 6, "r1", 6, "test 12c");
1.230 + sel.modify("extend", "right", "word");
1.231 + isAt("r1", 6, "r1", 0, "test 12d");
1.232 +
1.233 + // Test that move left/right is correct within the RTL div.
1.234 + sel.collapse($("r1"), 0);
1.235 + sel.modify("extend", "left", "lineboundary");
1.236 + isAt("r1", 0, "r1", 45, "test 13a");
1.237 + sel.modify("move", "right", "lineboundary");
1.238 + isAt("r1", 0, "r1", 0, "test 13b");
1.239 +
1.240 + // Test that up/down at the first/last line correctly wraps to the
1.241 + // beginning/end of the line.
1.242 + sel.collapse($("r1"), 0);
1.243 + sel.modify("move", "forward", "word");
1.244 + isAt("r1", 6, "r1", 6, "test 14a");
1.245 + // Even in RTL text, "left" still means up.
1.246 + sel.modify("extend", "left", "Line");
1.247 + isAt("r1", 6, "r1", 0, "test 14b");
1.248 + sel.modify("move", "right", "line");
1.249 + isAt("r2", 0, "r2", 0, "test 14c");
1.250 + sel.modify("extend", "forward", "line");
1.251 + isAt("r2", 0, "r2", 57, "test 14d");
1.252 + sel.modify("move", "backward", "line");
1.253 + isAt("r1", 45, "r1", 45, "test 14e");
1.254 +
1.255 + // Test some special characters.
1.256 + $("special").focus();
1.257 + sel.collapse($("s1"), 0);
1.258 + sel.modify("move", "forward", "character");
1.259 + sel.modify("move", "forward", "character");
1.260 + sel.modify("move", "forward", "character");
1.261 + isAt("s1", 3, "s1", 3, "test 15a");
1.262 + sel.modify("move", "forward", "character");
1.263 + isAt("s1", 4, "s1", 4, "test 15b");
1.264 + sel.modify("move", "backward", "word");
1.265 + isAt("s1", 2, "s1", 2, "test 15c");
1.266 + sel.modify("move", "forward", "word");
1.267 + sel.modify("move", "forward", "word");
1.268 + sel.modify("move", "forward", "word");
1.269 + isAt("s1", 9, "s1", 9, "test 15d");
1.270 +
1.271 + SimpleTest.finish();
1.272 +}
1.273 +
1.274 +function update_debug_info() {
1.275 + var sel = window.getSelection();
1.276 + document.getElementById("anchor-offset").innerHTML = sel.anchorOffset;
1.277 + document.getElementById("focus-offset").innerHTML = sel.focusOffset;
1.278 + setTimeout(update_debug_info, 100);
1.279 +}
1.280 +
1.281 +setTimeout(update_debug_info, 100);
1.282 +
1.283 +</script>
1.284 +</body>
1.285 +</html>
