Bug 1251519 Part 3 - Add regression tests for caret dragging. r?mats draft
authorTing-Yu Lin <tlin@mozilla.com>
Thu, 10 Mar 2016 17:38:32 +0800
changeset 338985 7f13469534ecde47ce7a81c1040990657c3f4c99
parent 338984 9e03b4b71ebdbbde762b84dd1e193cdcb43214d1
child 338986 c50c5c6723f10252b3d71e37de6d62fd81a275f1
push id12625
push usertlin@mozilla.com
push dateThu, 10 Mar 2016 09:49:24 +0000
reviewersmats
bugs1251519
milestone48.0a1
Bug 1251519 Part 3 - Add regression tests for caret dragging. r?mats These tests are added per bug 1251519 comment 10. test_move_cursor_to_front_by_dragging_caret_to_front_br_element() covers example 1, and test_drag_caret_from_front_to_end_across_columns() covers example 3. Example 4 is not easy to write in marionette test since it's difficult to know whether an image is selected. Both tests will fail if we clamp the dragging point by using only the text frame rects as the patch attached in bug 1251519 comment 7. MozReview-Commit-ID: CKZQKGI6YUw
layout/base/tests/marionette/test_accessiblecaret_cursor_mode.py
testing/marionette/harness/marionette/www/test_carets_columns.html
testing/marionette/harness/marionette/www/test_carets_cursor.html
--- a/layout/base/tests/marionette/test_accessiblecaret_cursor_mode.py
+++ b/layout/base/tests/marionette/test_accessiblecaret_cursor_mode.py
@@ -198,8 +198,68 @@ class AccessibleCaretCursorModeTestCase(
         sel.move_cursor_to_front()
         el.tap(*sel.cursor_location())
         x, y = sel.first_caret_location()
 
         # Drag the caret down by 50px, and insert '!'.
         self.actions.flick(el, x, y, x, y + 50).perform()
         self.actions.key_down(content_to_add).key_up(content_to_add).perform()
         self.assertNotEqual(non_target_content, sel.content)
+
+    def test_drag_caret_from_front_to_end_across_columns(self):
+        self.open_test_html('test_carets_columns.html')
+        el = self.marionette.find_element(By.ID, 'columns-inner')
+        sel = SelectionManager(el)
+        content_to_add = '!'
+        target_content = sel.content + content_to_add
+
+        # Goal: the cursor position can be changed by dragging the caret from
+        # the front to the end of the content.
+
+        # Tap to make the cursor appear.
+        before_image_1 = self.marionette.find_element(By.ID, 'before-image-1')
+        before_image_1.tap()
+
+        # Tap the front of the content to make first caret appear.
+        sel.move_cursor_to_front()
+        el.tap(*sel.cursor_location())
+        src_x, src_y = sel.first_caret_location()
+        dest_x, dest_y = el.size['width'], el.size['height']
+
+        # Drag the first caret to the bottom-right corner of the element.
+        self.actions.flick(el, src_x, src_y, dest_x, dest_y).perform()
+
+        self.actions.key_down(content_to_add).key_up(content_to_add).perform()
+        self.assertEqual(target_content, sel.content)
+
+    def test_move_cursor_to_front_by_dragging_caret_to_front_br_element(self):
+        self.open_test_html(self._cursor_html)
+        el = self.marionette.find_element(By.ID, self._contenteditable_id)
+        sel = SelectionManager(el)
+        content_to_add_1 = '!'
+        content_to_add_2 = '\n\n'
+        target_content = content_to_add_1 + content_to_add_2 + sel.content
+
+        # Goal: the cursor position can be changed by dragging the caret from
+        # the end of the content to the front br element. Because we cannot get
+        # caret location if it's on a br element, we need to get the first caret
+        # location then adding the new lines.
+
+        # Get first caret location at the front.
+        el.tap()
+        sel.move_cursor_to_front()
+        dest_x, dest_y = sel.first_caret_location()
+
+        # Append new line to the front of the content.
+        el.send_keys(content_to_add_2);
+
+        # Tap to make first caret appear.
+        el.tap()
+        sel.move_cursor_to_end()
+        sel.move_cursor_by_offset(1, backward=True)
+        el.tap(*sel.cursor_location())
+        src_x, src_y = sel.first_caret_location()
+
+        # Move first caret to the front of the input box.
+        self.actions.flick(el, src_x, src_y, dest_x, dest_y).perform()
+
+        self.actions.key_down(content_to_add_1).key_up(content_to_add_1).perform()
+        self.assertEqual(target_content, sel.content)
new file mode 100644
--- /dev/null
+++ b/testing/marionette/harness/marionette/www/test_carets_columns.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    #columns {
+      -moz-column-count: 2;
+      -webkit-column-count: 2;
+      -moz-column-rule: 1px solid lightgray;
+      -webkit-column-rule: 1px solid lightgray;
+      border: 1px solid lightblue;
+      width: 450px;
+    }
+    </style>
+  </head>
+  <body>
+    <div id="columns">
+      <div id="columns-inner" style="border: 1px solid red;" contenteditable="true">
+        <p id="before-image-1">Before image 1</p>
+        <p><img width="100px" height="30px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="></p>
+        <p>After image 1</p>
+        <p>Before image 2</p>
+        <p><img width="100px" height="30px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="></p>
+        <p>After image 2</p>
+      </div>
+    </div>
+  </body>
+</html>
--- a/testing/marionette/harness/marionette/www/test_carets_cursor.html
+++ b/testing/marionette/harness/marionette/www/test_carets_cursor.html
@@ -1,17 +1,25 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <!DOCTYPE html>
 <html id="html">
   <head>
     <title>Marionette tests for AccessibleCaret in cursor mode</title>
+    <style>
+    .block {
+      width: 10em;
+      height: 6em;
+      word-wrap: break-word;
+      overflow: auto;
+    }
+    </style>
   </head>
   <body>
     <div><input id="input" value="ABCDEFGHI"></div>
-    <br />
+    <br>
     <div><textarea name="textarea" id="textarea" rows="4" cols="6">ABCDEFGHI</textarea></div>
-    <br />
-    <div style="width: 10em; height: 2em; word-wrap: break-word; overflow: auto;" contenteditable="true" id="contenteditable">ABCDEFGHI</div>
+    <br>
+    <div class="block" contenteditable="true" id="contenteditable">ABCDEFGHI</div>
   </body>
 </html>