Utilize selection_test() in editing/selection/click-in-margins-inside-editable-div.html

This patch changes "click-in-margins-inside-editable-div.html" to utilize
|selection_test()|  for ease of maintenance and help to implementing EditingNG.

Bug: 707656, 679977
Change-Id: I3e7ade497a40b0f0beb22a5213a2e02341f39f5e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2214593
Auto-Submit: Yoshifumi Inoue <yosin@chromium.org>
Reviewed-by: Koji Ishii <kojii@chromium.org>
Commit-Queue: Koji Ishii <kojii@chromium.org>
Cr-Commit-Position: refs/heads/master@{#771689}

third_party/blink/web_tests/editing/selection/click-in-margins-inside-editable-div-expected.txt

-Ensure cursor placement matches IE6/IE7/FF3 when clicking above/below lines in padding.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 0 focusNode: [object Text](XX) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 0 focusNode: [object Text](XX) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 0 focusNode: [object Text](XX) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 0 focusNode: [object Text](XX) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 2 focusNode: [object Text](XX) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 2 focusNode: [object Text](XX) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 2 focusNode: [object Text](XX) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 2 focusNode: [object Text](XX) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 0 focusNode: [object Text](YY) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 0 focusNode: [object Text](YY) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 0 focusNode: [object Text](YY) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 2 focusNode: [object Text](YY) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 2 focusNode: [object Text](YY) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 2 focusNode: [object Text](YY) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 0 focusNode: [object Text](XX) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 1 focusNode: [object Text](XX) focusOffset: 1 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 2 focusNode: [object Text](XX) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 0 focusNode: [object Text](XX) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 2 focusNode: [object Text](XX) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 0 focusNode: [object Text](XX) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 1 focusNode: [object Text](XX) focusOffset: 1 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 2 focusNode: [object Text](XX) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 0 focusNode: [object Text](YY) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 1 focusNode: [object Text](YY) focusOffset: 1 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 2 focusNode: [object Text](YY) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 0 focusNode: [object Text](YY) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 1 focusNode: [object Text](YY) focusOffset: 1 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 2 focusNode: [object Text](YY) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 0 focusNode: [object Text](XX) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 1 focusNode: [object Text](XX) focusOffset: 1 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 2 focusNode: [object Text](XX) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 0 focusNode: [object Text](XX) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 2 focusNode: [object Text](XX) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 0 focusNode: [object Text](XX) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 1 focusNode: [object Text](XX) focusOffset: 1 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](XX) anchorOffset: 2 focusNode: [object Text](XX) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 0 focusNode: [object Text](YY) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 1 focusNode: [object Text](YY) focusOffset: 1 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 2 focusNode: [object Text](YY) focusOffset: 2 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 0 focusNode: [object Text](YY) focusOffset: 0 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 1 focusNode: [object Text](YY) focusOffset: 1 isCollapsed: true]
-PASS Selection is [anchorNode: [object Text](YY) anchorOffset: 2 focusNode: [object Text](YY) focusOffset: 2 isCollapsed: true]
-PASS successfullyParsed is true
-
-TEST COMPLETE
-

third_party/blink/web_tests/editing/selection/click-in-margins-inside-editable-div.html

-<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
-<html>
-<head>
-<script src="../../resources/js-test.js"></script>
-<script src="resources/js-test-selection-shared.js"></script>
-</head>
-<body>
-<p id="description"></p>
-<div id="console"></div>
-<script src="script-tests/click-in-margins-inside-editable-div.js"></script>
-</body>
-</html>
+<!doctype html>
+<script src="../../resources/ahem.js"></script>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../assert_selection.js"></script>
+<script>
+// When clicking between divs separated by margins in an editable
+// text region, the browsers differ in behavior:
+// FF3: vertical padding box + some sort of overhang decent?
+// IE6/IE7: vertical padding box
+// IE8 b2: margin box
+// Safari 3: margin box (but cursor goes at end of line)
+
+// We're going to follow IE 7's behavior and use the padding box height
+// for determining if the click below a div (in the padding/margin region)
+
+// The rules for clicking above or below the text are different on Windows and
+// Mac.
+const kStyleTarget = [
+    'font-family:  Ahem;',
+    'font-size: 20px;',
+    'width: 40px;',
+    'height: 80px;',
+    'padding: 20px;',
+    'background-color: green;',
+].join(' ');
+
+const kStyleXX = [
+    'padding-bottom: 19px;',
+    'border-bottom: 1px solid pink;',
+    'margin-bottom: 20px;',
+].join(' ');
+
+const kStyle = `#target {${kStyleTarget}} #xx {${kStyleXX}}`;
+
+const testCases = [
+    // y=10
+    {
+        x: 10, y: 10,
+        expected: '<div id="xx">|XX</div><div id="yy">YY</div>',
+    },
+    {
+        x: 40, y: 10,
+        expected: '<div id="xx">X|X</div><div id="yy">YY</div>',
+        mac: '<div id="xx">|XX</div><div id="yy">YY</div>',
+        unix: '<div id="xx">|XX</div><div id="yy">YY</div>',
+    },
+    {
+        x: 70, y: 10,
+        expected: '<div id="xx">XX|</div><div id="yy">YY</div>',
+        mac: '<div id="xx">|XX</div><div id="yy">YY</div>',
+        unix: '<div id="xx">|XX</div><div id="yy">YY</div>',
+    },
+    // y=30
+    {
+        x: 10, y: 30,
+        expected: '<div id="xx">|XX</div><div id="yy">YY</div>',
+    },
+    {
+        x: 70, y: 30,
+        expected: '<div id="xx">XX|</div><div id="yy">YY</div>',
+    },
+    // y=50
+    {
+        x: 10, y: 50,
+        expected: '<div id="xx">|XX</div><div id="yy">YY</div>',
+        mac: '<div id="xx">XX|</div><div id="yy">YY</div>',
+        unix: '<div id="xx">XX|</div><div id="yy">YY</div>',
+    },
+    {
+        x: 40, y: 50,
+        expected: '<div id="xx">X|X</div><div id="yy">YY</div>',
+        mac: '<div id="xx">XX|</div><div id="yy">YY</div>',
+        unix: '<div id="xx">XX|</div><div id="yy">YY</div>',
+    },
+    {
+        x: 70, y: 50,
+        expected: '<div id="xx">XX|</div><div id="yy">YY</div>',
+    },
+    // y=70
+    {
+        x: 10, y: 70,
+        expected: '<div id="xx">XX</div><div id="yy">|YY</div>',
+    },
+    {
+        x: 40, y: 70,
+        expected: '<div id="xx">XX</div><div id="yy">Y|Y</div>',
+        mac: '<div id="xx">XX</div><div id="yy">|YY</div>',
+        unix: '<div id="xx">XX</div><div id="yy">|YY</div>',
+    },
+    {
+        x: 70, y: 70,
+        expected: '<div id="xx">XX</div><div id="yy">YY|</div>',
+        mac: '<div id="xx">XX</div><div id="yy">|YY</div>',
+        unix: '<div id="xx">XX</div><div id="yy">|YY</div>',
+    },
+    // y=110
+    {
+        x: 10, y: 110,
+        expected: '<div id="xx">XX</div><div id="yy">|YY</div>',
+        mac: '<div id="xx">XX</div><div id="yy">YY|</div>',
+        unix: '<div id="xx">XX</div><div id="yy">YY|</div>',
+    },
+    {
+        x: 40, y: 110,
+        expected: '<div id="xx">XX</div><div id="yy">Y|Y</div>',
+        mac: '<div id="xx">XX</div><div id="yy">YY|</div>',
+        unix: '<div id="xx">XX</div><div id="yy">YY|</div>',
+    },
+    {
+        x: 70, y: 110,
+        expected: '<div id="xx">XX</div><div id="yy">YY|</div>',
+    },
+];
+
+for (const behavior of ['android', 'mac', 'unix', 'win']) {
+    for (const testCase of testCases) {
+        if (!(behavior in testCase))
+            testCase[behavior] = testCase.expected;
+        selection_test(
+            [
+                `<style>${kStyle}</style>`,
+                '<div contenteditable id="target">',
+                    '<div id="xx">XX</div>',
+                    '<div id="yy">YY</div>',
+                '</div>',
+            ],
+            selection => {
+                if (!window.internals)
+                    throw 'This test requires internals.';
+                if (!window.eventSender)
+                    throw 'This test requires eventSender.';
+                internals.settings.setEditingBehavior(behavior);
+                const target = selection.document.getElementById('target');
+                eventSender.mouseMoveTo(
+                    selection.computeLeft(target) + testCase.x,
+                    selection.computeTop(target) + testCase.y);
+                eventSender.mouseDown();
+                eventSender.mouseUp();
+            },
+            [
+                `<style>${kStyle}</style>`,
+                '<div contenteditable id="target">',
+                    testCase[behavior],
+                '</div>',
+            ],
+            `${behavior}: click at (${testCase.x},${testCase.y})`);
+    }
+}
+</script>

third_party/blink/web_tests/editing/selection/script-tests/click-in-margins-inside-editable-div.js

-description("Ensure cursor placement matches IE6/IE7/FF3 when clicking above/below lines in padding.")
-
-document.body.style.margin = 0;
-
-var div = document.createElement("div");
-div.style.cssText = "font-family: Ahem; font-size: 20px; -webkit-text-fill-color: yellow; width: 40px; height: 80px; padding: 20px; background-color: green;";
-div.contentEditable = true;
-
-var firstText = document.createTextNode("XX");
-var firstDiv = document.createElement("div");
-firstDiv.appendChild(firstText);
-firstDiv.style.cssText = "padding-bottom: 19px; border-bottom: 1px solid pink; margin-bottom: 20px";
-div.appendChild(firstDiv);
-
-var secondText = document.createTextNode("YY");
-var secondDiv = document.createElement("div");
-secondDiv.appendChild(secondText);
-div.appendChild(secondDiv);
-
-document.body.insertBefore(div, document.body.firstChild);
-
-function clickShouldResultInRange(x, y, node, offset) {
-    if (window.eventSender) {
-        clickAt(x, y);
-        assertSelectionAt(node, offset);
-    } else {
-        tests.push({
-            testFunction: function() { assertRange(node, offset); },
-            clickString: " " + x + ", " + y }
-        )
-    }
-}
-
-function printClickStringForWaitingTest()
-{
-    if (!tests[testIndex])
-        return;
-    debug("Waiting for click @ " + tests[testIndex].clickString);
-}
-
-var testIndex = 0;
-var tests = [];
-function runInteractiveTests()
-{
-    testIndex = 0;
-    printClickStringForWaitingTest();
-    document.body.addEventListener("mouseup", function() {
-        debug("Got click @ " + event.clientX + ", " + event.clientY);
-        var test = tests[testIndex];
-        if (test) {
-            test.testFunction();
-            testIndex++;
-            printClickStringForWaitingTest();
-        }
-    }, false);
-}
-
-// When clicking between divs separated by margins in an editable
-// text region, the browsers differ in behavior:
-// FF3: vertical padding box + some sort of overhang decent?
-// IE6/IE7: vertical padding box
-// IE8 b2: margin box
-// Safari 3: margin box (but cursor goes at end of line)
-
-// We're going to follow IE 7's behavior and use the padding box height
-// for determining if the click below a div (in the padding/margin region)
-
-// The rules for clicking above or below the text are different on Windows and Mac.
-function editingTest(editingBehavior)
-{
-    if (window.internals)
-        internals.settings.setEditingBehavior(editingBehavior);
-
-    var expectMacStyleSelection = editingBehavior == "mac";
-
-    clickShouldResultInRange(10, 10, firstText, 0);
-    clickShouldResultInRange(40, 10, firstText, expectMacStyleSelection ? 0 : 1);
-    clickShouldResultInRange(70, 10, firstText, expectMacStyleSelection ? 0 : 2);
-
-    clickShouldResultInRange(10, 30, firstText, 0);
-    clickShouldResultInRange(70, 30, firstText, 2);
-
-    clickShouldResultInRange(10, 50, firstText, expectMacStyleSelection ? 2 : 0);
-    clickShouldResultInRange(40, 50, firstText, expectMacStyleSelection ? 2 : 1);
-    clickShouldResultInRange(70, 50, firstText, 2);
-
-    clickShouldResultInRange(10, 70, secondText, 0);
-    clickShouldResultInRange(40, 70, secondText, expectMacStyleSelection ? 0 : 1);
-    clickShouldResultInRange(70, 70, secondText, expectMacStyleSelection ? 0 : 2);
-
-    clickShouldResultInRange(10, 110, secondText, expectMacStyleSelection ? 2 : 0);
-    clickShouldResultInRange(40, 110, secondText, expectMacStyleSelection ? 2 : 1);
-    clickShouldResultInRange(70, 110, secondText, 2);
-}
-
-editingTest("mac");
-editingTest("win");
-editingTest("android");
-
-// Clean up after ourselves if we're not being run in the browser
-if (window.eventSender) {
-    document.body.removeChild(div);
-} else {
-    runInteractiveTests();
-}
-
-var successfullyParsed = true;