Bug 1286882 - Make SVG basic shape elements unselectable. r=dholbert

Differential Revision: https://phabricator.services.mozilla.com/D2038

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Ting-Yu Lin 2018-07-13 18:01:48 +00:00
parent 3eb470a022
commit 5f1b665033
4 changed files with 52 additions and 2 deletions

View File

@ -54,8 +54,8 @@ function selection_is(s, text)
function deselect()
{
// Click outside text to deselect.
click(1, 1);
// Click outside text (and outside all <rect> elements>) to deselect.
click(15, 15);
selection_is("", "deselecting by clicking outside text");
}

View File

@ -46,6 +46,7 @@ class AccessibleCaretSelectionModeTestCase(MarionetteTestCase):
_longtext_html = 'layout/test_carets_longtext.html'
_iframe_html = 'layout/test_carets_iframe.html'
_display_none_html = 'layout/test_carets_display_none.html'
_svg_shapes_html = 'layout/test_carets_svg_shapes.html'
def setUp(self):
# Code to execute before every test is running.
@ -619,3 +620,33 @@ class AccessibleCaretSelectionModeTestCase(MarionetteTestCase):
# Drag the second caret down by 50px.
self.actions.flick(el, caret2_x, caret2_y, caret2_x, caret2_y + 50).perform()
self.assertEqual(target_content, sel.selected_content)
def test_carets_should_not_appear_when_long_pressing_svg_shapes(self):
self.open_test_html(self._svg_shapes_html)
rect = self.marionette.find_element(By.ID, 'rect')
text = self.marionette.find_element(By.ID, 'text')
sel = SelectionManager(text)
num_words_in_text = len(sel.content.split())
# Goal: the carets should not appear when long-pressing on the
# unselectable SVG rect.
# Get the position of the end of last word in text, i.e. the
# position of the second caret when selecting the last word.
self.long_press_on_word(text, num_words_in_text - 1)
(_, _), (x2, y2) = sel.carets_location()
# Long press to select the unselectable SVG rect.
self.long_press_on_location(rect)
(_, _), (x, y) = sel.carets_location()
# Drag the second caret to (x2, y2).
self.actions.flick(text, x, y, x2, y2).perform()
# If the carets should appear on the rect, the selection will be
# extended to cover all the words in text. Assert this should not
# happen.
self.assertNotEqual(sel.content, sel.selected_content.strip())

View File

@ -84,3 +84,10 @@ foreignObject {
/* Don't specify the outline-color, we should always use initial value. */
outline: 1px dotted;
}
/* Make SVG shapes unselectable to avoid triggering AccessibleCaret on tap.
<mesh> will be supported in bug 1238882. */
circle, ellipse, line, mesh, path, polygon, polyline, rect {
-moz-user-select: none;
}

View File

@ -0,0 +1,12 @@
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" id="svg-element" width="200" height="200">
<rect id="rect" x="100" y="100" width="20" height="20"></rect>
</svg>
<p id="text">ABC DEF GHI</p>
</body>
</html>