Bug 1745435 - Make non-draggable & non-editable images easier to sele…

…ct. r=emilio Bug 1550869 made all the non-editable images return a `FrameTarget` with `userFrameEdge=true`. When the user moves the mouse pointer to select an image from its left edge, the mouse pointer needs to reach the right edge of the image in order to complete the selection. This makes it difficult to select an image at the end of a line. This patch restores the behavior to select a non-draggable & non-editable image to it was before bug 1550869. That is, we recognize the image selection when the mouse pointer moves passed the middle point of the image width (`OffsetsForSingleFrame`). Both blink and webkit have the same behavior, but no spec text dictates this behavior, so I mark the wpt test as "tentative". Differential Revision: https://phabricator.services.mozilla.com/D133960
dothq · Dec 16, 2021 · fecb1af · fecb1af
1 parent d1349f3
commit fecb1af
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/layout/generic/nsIFrame.cpp b/layout/generic/nsIFrame.cpp
@@ -5584,10 +5584,12 @@ static FrameTarget GetSelectionClosestFrame(nsIFrame* aFrame,
     }
   }
 
-  // Use frame edge for grid, flex, table, and non-editable image frames.
+  // Use frame edge for grid, flex, table, and non-draggable & non-editable
+  // image frames.
   const bool useFrameEdge =
       aFrame->IsFlexOrGridContainer() || aFrame->IsTableFrame() ||
       (static_cast<nsImageFrame*>(do_QueryFrame(aFrame)) &&
+       !nsContentUtils::ContentIsDraggable(aFrame->GetContent()) &&
        !aFrame->GetContent()->IsEditable());
   return FrameTarget(aFrame, useFrameEdge, false);
 }

diff --git a/testing/web-platform/tests/selection/select-end-of-line-image.tentative.html b/testing/web-platform/tests/selection/select-end-of-line-image.tentative.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <title>Selection: Select the image at the end of the line</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:[email protected]">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1745435">
+
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script src="/resources/testdriver.js"></script>
+  <script src="/resources/testdriver-actions.js"></script>
+  <script src='/resources/testdriver-vendor.js'></script>
+
+  <style>
+  img {
+    inline-size: 100px;
+    block-size: 20px;
+    background: orange;
+  }
+  </style>
+
+  <body>
+    You shouldn't see an orange image at the end of this line
+    <img id="target" src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><text>hello</text></svg>'>
+  </body>
+
+  <script>
+  promise_test(async function() {
+    let target = document.getElementById("target");
+    let actions = new test_driver.Actions();
+
+    // Move the pointer from the left edge of the image, to the right for about
+    // 3/4 width of the image. This should be sufficient to select the image.
+    await actions.pointerMove(0, 10, {origin: target})
+                 .pointerDown()
+                 .pointerMove(75, 10, {origin: target})
+                 .pointerUp()
+                 .send();
+
+    // Delete the image to verify the image is selected. It's tricky to verify
+    // it using Range API.
+    window.getSelection().deleteFromDocument();
+
+    assert_equals(document.getElementById("target"), null,
+                  "The image should be selected and then deleted.")
+  }, "Select image at the end of the line.");
+  </script>
+</html>