Bug 1761839 - Prevent undesired interactions between backdrop and selection. r=sefeng

Our selection code doesn't deal too well with pseudo frames in the top
layer. This prevents the bad interaction.

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

layout/style/res/ua.css

@@ -403,6 +403,8 @@ xul|*:fullscreen:not(:root, [hidden="true"]) {
   position: fixed;
   top: 0; left: 0;
   right: 0; bottom: 0;
+  /* This prevents undesired interactions with the selection code. */
+  user-select: none;
 }
 
 *|*:-moz-full-screen:not(:root)::backdrop {

testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-selection.html

@@ -37,14 +37,32 @@ function selectSomeText() {
     .send();
 }
 
+function clickOnBackdrop() {
+  getSelection().removeAllRanges();
+
+  return new test_driver.Actions()
+    .pointerMove(10, 10)
+    .pointerDown()
+    .pointerUp()
+    .send();
+}
+
 promise_test(async function() {
   await selectSomeText();
   assert_equals(getSelection().toString(), "345678");
 }, "By default, text inside a modal dialog can be selected");
 
+promise_test(async function() {
+  await clickOnBackdrop();
+  assert_equals(getSelection().toString(), "");
+}, "Clicking on backdrop doesn't select text");
+
 promise_test(async function() {
   dialog.style.userSelect = "none";
+
   await selectSomeText();
   assert_equals(getSelection().toString(), "");
+
+  dialog.style.userSelect = "";
 }, "'user-select: none' prevents text from being selected");
 </script>