[InputEvent] Rewrite typing and getTargetRanges() tests into WPT

* 'input-events-typing-manual.html' passes on both Chrome and Safari. * 'input-events-get-target-ranges-manual.html' fails on Safari. Bug: 652439 Change-Id: I0d2fd6281e2ed615890278b7f6417ba41f3ed22a Reviewed-on: https://chromium-review.googlesource.com/666197 Commit-Queue: Chong Zhang <[email protected]> Reviewed-by: Philip Jägenstedt <[email protected]> Cr-Commit-Position: refs/heads/master@{#502325}
travisleithead · Sep 15, 2017 · 2bbabd7 · 2bbabd7
1 parent 3fb46f6
commit 2bbabd7
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 38 deletions.
diff --git a/input-events/input-events-get-target-ranges-manual.html b/input-events/input-events-get-target-ranges-manual.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>InputEvent.getTargetRanges() behavior</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<p>To manually run this test, please follow the steps below:<br/>
+1. Place caret at the end of 'hel<i>lo wo</i><b>rld</b>'.<br/>
+2. Press Ctrl-Backspace (Alt-Backspace on macOS) to delete word backwards.<br/>
+3. Place caret at the end of 'test2' => Press 'a' key.<br/>
+4. Select 'test2a' => Press 'b' key.<br/>
+5. Select 'b' => Bold text through context menu or Command-b on macOS.<br/>
+6. Place caret at the end of 'test3' => Press 'a' key => Press Backspace key.<br/>
+<br/>
+If a "PASS" result appears the test passes, otherwise it fails</p>
+<p id="test1_editable" contenteditable>hel<i>lo wo</i><b>rld</b></p>
+<p id="test2_editable" contenteditable>test2</p>
+<textarea id="test3_plain">test3</textarea>
+<script>
+async_test(t => {
+    const test1_editable = document.getElementById('test1_editable');
+    let lastBeforeInput;
+    test1_editable.addEventListener('beforeinput', t.step_func(event => {
+        assert_equals(event.inputType, 'deleteWordBackward');
+        const ranges = event.getTargetRanges();
+        assert_equals(ranges.length, 1);
+        const range = ranges[0];
+        assert_true(range instanceof StaticRange);
+        assert_equals(range.startOffset, 3);
+        assert_equals(range.startContainer.textContent, 'lo wo');
+        assert_equals(range.endOffset, 3);
+        assert_equals(range.endContainer.textContent, 'rld');
+        assert_equals(test1_editable.innerHTML, 'hel<i>lo wo</i><b>rld</b>');
+        lastBeforeInput = event;
+    }));
+
+    test1_editable.addEventListener('input', t.step_func(event => {
+        assert_equals(event.inputType, 'deleteWordBackward');
+        assert_equals(test1_editable.innerHTML, 'hel<i>lo&nbsp;</i>');
+        assert_equals(lastBeforeInput.inputType, 'deleteWordBackward');
+        assert_equals(lastBeforeInput.getTargetRanges().length, 0,
+            'getTargetRanges() should be empty after the event has finished dispatching.');
+        t.done();
+    }));
+}, 'getTargetRanges() returns correct range and cleared after dispatch.');
+
+async_test(t => {
+    const expectedEventLog = ['test2-5-test2-5', 'test2a-0-test2a-6', 'b-0-b-1'];
+    const actualEventLog = [];
+
+    const test2_editable = document.getElementById('test2_editable');
+    test2_editable.addEventListener('beforeinput', t.step_func(event => {
+        const ranges = event.getTargetRanges();
+        assert_equals(ranges.length, 1);
+        const range = ranges[0];
+        actualEventLog.push(
+            `${range.startContainer.textContent}-${range.startOffset}-${range.endContainer.textContent}-${range.endOffset}`);
+
+        if (actualEventLog.length == expectedEventLog.length) {
+            assert_array_equals(actualEventLog, expectedEventLog,
+                `Expected: ${expectedEventLog}; Actual: ${actualEventLog}.`);
+            t.done();
+        }
+    }));
+}, 'Actions other than deletion should have current selection as target ranges.');
+
+async_test(t => {
+    const test3_plain = document.getElementById('test3_plain');
+    test3_plain.addEventListener('beforeinput', t.step_func(event => {
+        assert_equals(event.getTargetRanges().length, 0,
+            'getTargetRanges() should return empty array on textarea.');
+
+        if (event.inputType === 'deleteContentBackward')
+            t.done();
+    }));
+}, 'Textarea should have empty target range.');
+</script>
diff --git a/input-events/input-events-typing-data-manual.html b/input-events/input-events-typing-data-manual.html
diff --git a/input-events/input-events-typing-manual.html b/input-events/input-events-typing-manual.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>InputEvent have correct data/order when typing on textarea and contenteditable</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<p>To manually run this test, please follow the steps below:<br/>
+1. Focus the first box and press key 'a' and then Shift-'b'.<br/>
+2. Focus the second box and press key 'c' and then Shift-'d'.<br/>
+<br/>
+If a "PASS" result appears the test passes, otherwise it fails</p>
+<textarea id='plain'></textarea>
+<div id='rich' style='border-style: solid;' contenteditable><br></div>
+<script>
+async_test(t => {
+    const expectedResult = [
+        // Pressing 'a'.
+        'plain-keydown-a',
+        'plain-keypress-a',
+        'plain-beforeinput-a',
+        'plain-input-a',
+        'plain-keyup-a',
+        // Pressing Shift-'b'.
+        'plain-keydown-B',
+        'plain-keypress-B',
+        'plain-beforeinput-B',
+        'plain-input-B',
+        'plain-keyup-B',
+        // Pressing 'c'.
+        'rich-keydown-c',
+        'rich-keypress-c',
+        'rich-beforeinput-c',
+        'rich-input-c',
+        'rich-keyup-c',
+        // Pressing Shift-'d'.
+        'rich-keydown-D',
+        'rich-keypress-D',
+        'rich-beforeinput-D',
+        'rich-input-D',
+        'rich-keyup-D',
+    ];
+    let eventCounter = 0;
+
+    for (const targetId of ['plain', 'rich']) {
+        for (const eventType of ['beforeinput', 'input', 'keydown', 'keypress', 'keyup']) {
+            document.getElementById(targetId).addEventListener(eventType, t.step_func(event => {
+                if (event.key === 'Shift')
+                    return;
+                assert_equals(`${targetId}-${event.type}-${event.data || event.key}`, expectedResult[eventCounter]);
+                if (event instanceof InputEvent) {
+                    assert_equals(event.dataTransfer, null,
+                        'Plain text editing should have null |dataTransfer| field')
+                }
+                ++eventCounter;
+                if (eventCounter === expectedResult.length)
+                    t.done();
+            }));
+        }
+    }
+});
+</script>