css/css-ui/user-select-button.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>user-select: auto allows text selection originating from outside of button elements.</title>
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-ui/#propdef-user-select">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=2039690">

<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>
.usa {
  user-select: auto;
}

.ust {
  user-select: text;
}

.usn {
  user-select: none;
}

#empty {
  width: 50px;
  height: 50px;
}
</style>
<div id=empty></div>
<div id=button-auto>A<button class=usa>button</button></div>
<div id=outer-text class=ust>A<button class=usa>button</button></div>
<div id=outer-none class=usn>A<button class=usa>button</button></div>
<script>
async function drag_across(element) {
  const rect = element.getBoundingClientRect();
  const middle = rect.top + rect.height / 2;

  const actions = new test_driver.Actions();
  return actions.pointerMove(rect.left + 2, middle)
               .pointerDown()
               .pointerMove(rect.right - 2, middle)
               .pointerUp()
               .send();
}

async function test(t, element, expected) {
  t.add_cleanup(() => window.getSelection().removeAllRanges());
  await drag_across(element);
  assert_equals(window.getSelection().toString(), expected);
}

promise_test(async t => test(
  t,
  document.getElementById("button-auto").querySelector("button"),
  ""
), "the button text should not be selectable from inside.");

promise_test(async t => test(
  t,
  document.getElementById("button-auto"),
  "Abutton"
), "the button text should be selectable from outside.");

promise_test(async t => test(
  t,
  document.getElementById("outer-text").querySelector("button"),
  ""
), "the button text should not be selectable from inside when the parent is user-select: text.");

promise_test(async t => test(
  t,
  document.getElementById("outer-text"),
  "Abutton"
), "the button text should be selectable from outside when the parent is user-select: text.");

promise_test(async t => test(
  t,
  document.getElementById("outer-none").querySelector("button"),
  ""
), "the button text should not be selectable from inside when the parent is user-select: none.");

promise_test(async t => test(
  t,
  document.getElementById("outer-none"),
  ""
), "the button text should not be selectable from outside when the parent is user-select: none.");
</script>