92 lines
2.7 KiB
HTML
92 lines
2.7 KiB
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>
|