Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-ui/user-select-button.html - WPT Dashboard Interop Dashboard
<!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">
<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>