Carets can split up marriages and families
https://bugs.webkit.org/show_bug.cgi?id=166711
<rdar://problem/29019333>
Reviewed by Alex Christensen.
Source/WTF:
There are four code points which should be allowed to accept emoji modifiers:
- U+1F46A FAMILY
- U+1F46B MAN AND WOMAN HOLDING HANDS
- U+1F46C TWO MEN HOLDING HANDS
- U+1F46D TWO WOMEN HOLDING HANDS
Even though macOS's and iOS's emoji keyboard don't allow users to actually type
these combinations, we may still receive them from other platforms. We should
therefore treat these as joining sequences. Rendering isn't a problem because
the fonts accept the emoji modifiers, but our caret placement code isn't educated
about it. Currently, we treat these emoji groups as ligatures, allowing the caret
to be placed between the two code points, which visually shows as being horizontally
centered in the glyph. Instead, we should treat these code points as accepting
emoji modifiers.
Tests: editing/caret/emoji.html
editing/caret/ios/emoji.html
* wtf/text/TextBreakIterator.cpp:
(WTF::cursorMovementIterator):
LayoutTests:
AFAICT we don't have a test where we arrow-through a set of emoji. We do
have tests where we backspace-through a set of emoji. Add a new test for
the arrow keys.
* platform/ios/TestExpectations:
* platform/mac/editing/caret/emoji-expected.txt: Added.
* editing/caret/emoji.html: Added.
* editing/caret/ios/emoji-expected.txt: Added.
* editing/caret/ios/emoji.html: Added.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@210399 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 3368bd7..5ac5699 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,21 @@
+2017-01-05 Myles C. Maxfield <mmaxfield@apple.com>
+
+ Carets can split up marriages and families
+ https://bugs.webkit.org/show_bug.cgi?id=166711
+ <rdar://problem/29019333>
+
+ Reviewed by Alex Christensen.
+
+ AFAICT we don't have a test where we arrow-through a set of emoji. We do
+ have tests where we backspace-through a set of emoji. Add a new test for
+ the arrow keys.
+
+ * platform/ios/TestExpectations:
+ * platform/mac/editing/caret/emoji-expected.txt: Added.
+ * editing/caret/emoji.html: Added.
+ * editing/caret/ios/emoji-expected.txt: Added.
+ * editing/caret/ios/emoji.html: Added.
+
2017-01-05 Ryan Haddad <ryanhaddad@apple.com>
Rebaseline fast/canvas/webgl/context-creation-attributes.html after r210372.
diff --git a/LayoutTests/editing/caret/emoji.html b/LayoutTests/editing/caret/emoji.html
new file mode 100644
index 0000000..61d5a95
--- /dev/null
+++ b/LayoutTests/editing/caret/emoji.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div id="test" contenteditable="true">👫👫🏻👫🏿👬👬🏻👬🏿👭👭🏻👭🏿👪👪🏻👪🏿
+</div>
+<script src="../../resources/dump-as-markup.js"></script>
+<script>
+Markup.description("This test verifies that deletions are correct over emoji groups and emoji with variations");
+var testElement = document.getElementById('test');
+getSelection().setBaseAndExtent(testElement.firstChild, testElement.firstChild.length, testElement.firstChild, testElement.firstChild.length);
+Markup.dump("test");
+if (window.eventSender) {
+ while (window.getSelection().getRangeAt(0).startOffset > 0) {
+ eventSender.keyDown("leftArrow");
+ Markup.dump("test");
+ }
+}
+
+</script>
+</body>
+</html>
diff --git a/LayoutTests/editing/caret/ios/emoji-expected.html b/LayoutTests/editing/caret/ios/emoji-expected.html
new file mode 100644
index 0000000..9f59e9e
--- /dev/null
+++ b/LayoutTests/editing/caret/ios/emoji-expected.html
@@ -0,0 +1,14 @@
+PASS currentWidth is within 1 of 15
+PASS currentWidth is within 1 of 15
+PASS currentWidth is within 1 of 15
+PASS currentWidth is within 1 of 15
+PASS currentWidth is within 1 of 15
+PASS currentWidth is within 1 of 15
+PASS currentWidth is within 1 of 15
+PASS currentWidth is within 1 of 15
+PASS currentWidth is within 1 of 15
+PASS currentWidth is within 1 of 15
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/editing/caret/ios/emoji.html b/LayoutTests/editing/caret/ios/emoji.html
new file mode 100644
index 0000000..0a8e101
--- /dev/null
+++ b/LayoutTests/editing/caret/ios/emoji.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
+<html>
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+<head>
+ <script src="../../../resources/js-test-pre.js"></script>
+ <style>
+ body {
+ margin: 0;
+ }
+
+ input {
+ width: 100%;
+ height: 50px;
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+
+ div {
+ background-image: linear-gradient(0deg, blue, red);
+ height: 4000px;
+ }
+ </style>
+ <script>
+ window.jsTestIsAsync = true;
+
+ function tapInInputScript(tapX, tapY)
+ {
+ return `
+ var caretPositions = [];
+
+ function pressArrow() {
+ uiController.typeCharacterUsingHardwareKeyboard("leftArrow", function() {
+ uiController.doAfterNextStablePresentationUpdate(function() {
+ var selectionRectLeft = uiController.textSelectionCaretRect.left;
+ var caretPositionsLength = caretPositions.length;
+ if (caretPositionsLength == 0 || caretPositions[caretPositionsLength - 1] != selectionRectLeft) {
+ caretPositions.push(selectionRectLeft);
+ pressArrow();
+ } else
+ uiController.uiScriptComplete(JSON.stringify(caretPositions));
+ });
+ });
+ };
+
+ (function() {
+ uiController.didShowKeyboardCallback = function() {
+ uiController.doAfterNextStablePresentationUpdate(function() {
+ pressArrow();
+ });
+ };
+ uiController.singleTapAtPoint(${tapX}, ${tapY}, function() { });
+ })()`;
+ }
+
+ var pixelWidth;
+ var currentWidth;
+ function run()
+ {
+ if (!window.testRunner || !testRunner.runUIScript) {
+ description("To manually test, place the caret in the field above and use the arrow keys to make sure the carets don't appear in the middle of characters.");
+ return;
+ }
+
+ testRunner.runUIScript(tapInInputScript(window.innerWidth * 2 / 3, 30), caretPositions => {
+ caretPositions = JSON.parse(caretPositions);
+ pixelWidth = -1;
+ for (var i = 0; i < caretPositions.length - 1; ++i) {
+ currentWidth = caretPositions[i] - caretPositions[i + 1];
+ if (pixelWidth == -1)
+ pixelWidth = currentWidth;
+ else
+ shouldBeCloseTo("currentWidth", pixelWidth, 1);
+ }
+ finishJSTest();
+ });
+ }
+ </script>
+</head>
+<body onload=run()>
+ <input value="👫👫🏻👫🏿👬👬🏻👬🏿👭👭🏻👭🏿👪👪🏻👪🏿"></input>
+ <script src="../../../resources/js-test-post.js"></script>
+</body>
+
+</html>
diff --git a/LayoutTests/platform/ios-simulator/TestExpectations b/LayoutTests/platform/ios-simulator/TestExpectations
index 293aa1f..f3b7377 100644
--- a/LayoutTests/platform/ios-simulator/TestExpectations
+++ b/LayoutTests/platform/ios-simulator/TestExpectations
@@ -2770,3 +2770,6 @@
media/encrypted-media/mock-navigator-requestMediaKeySystemAccess.html [ Skip ]
webkit.org/b/166736 fast/scrolling/page-cache-back-overflow-scroll-restore.html [ Skip ]
+
+# editing/caret/ios/emoji.html is used instead.
+editing/caret/emoji.html [ Failure ]
diff --git a/LayoutTests/platform/mac/editing/caret/emoji-expected.txt b/LayoutTests/platform/mac/editing/caret/emoji-expected.txt
new file mode 100644
index 0000000..67b3f93
--- /dev/null
+++ b/LayoutTests/platform/mac/editing/caret/emoji-expected.txt
@@ -0,0 +1,53 @@
+This test verifies that deletions are correct over emoji groups and emoji with variations
+
+Dump of markup 1:
+| "👫👫🏻👫🏿👬👬🏻👬🏿👭👭🏻👭🏿👪👪🏻👪🏿<#selection-caret>
+"
+
+Dump of markup 2:
+| "👫👫🏻👫🏿👬👬🏻👬🏿👭👭🏻👭🏿👪👪🏻<#selection-caret>👪🏿
+"
+
+Dump of markup 3:
+| "👫👫🏻👫🏿👬👬🏻👬🏿👭👭🏻👭🏿👪<#selection-caret>👪🏻👪🏿
+"
+
+Dump of markup 4:
+| "👫👫🏻👫🏿👬👬🏻👬🏿👭👭🏻👭🏿<#selection-caret>👪👪🏻👪🏿
+"
+
+Dump of markup 5:
+| "👫👫🏻👫🏿👬👬🏻👬🏿👭👭🏻<#selection-caret>👭🏿👪👪🏻👪🏿
+"
+
+Dump of markup 6:
+| "👫👫🏻👫🏿👬👬🏻👬🏿👭<#selection-caret>👭🏻👭🏿👪👪🏻👪🏿
+"
+
+Dump of markup 7:
+| "👫👫🏻👫🏿👬👬🏻👬🏿<#selection-caret>👭👭🏻👭🏿👪👪🏻👪🏿
+"
+
+Dump of markup 8:
+| "👫👫🏻👫🏿👬👬🏻<#selection-caret>👬🏿👭👭🏻👭🏿👪👪🏻👪🏿
+"
+
+Dump of markup 9:
+| "👫👫🏻👫🏿👬<#selection-caret>👬🏻👬🏿👭👭🏻👭🏿👪👪🏻👪🏿
+"
+
+Dump of markup 10:
+| "👫👫🏻👫🏿<#selection-caret>👬👬🏻👬🏿👭👭🏻👭🏿👪👪🏻👪🏿
+"
+
+Dump of markup 11:
+| "👫👫🏻<#selection-caret>👫🏿👬👬🏻👬🏿👭👭🏻👭🏿👪👪🏻👪🏿
+"
+
+Dump of markup 12:
+| "👫<#selection-caret>👫🏻👫🏿👬👬🏻👬🏿👭👭🏻👭🏿👪👪🏻👪🏿
+"
+
+Dump of markup 13:
+| "<#selection-caret>👫👫🏻👫🏿👬👬🏻👬🏿👭👭🏻👭🏿👪👪🏻👪🏿
+"
