187 lines
5.4 KiB
HTML
187 lines
5.4 KiB
HTML
<!DOCTYPE HTML>
|
|
<meta charset=utf-8>
|
|
<title>Selection: stringifier for editable elements</title>
|
|
<!--
|
|
There are two open issues about how this should behave
|
|
https://github.com/w3c/selection-api/issues/83
|
|
https://github.com/w3c/selection-api/issues/7
|
|
-->
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/testdriver.js"></script>
|
|
<script src="/resources/testdriver-vendor.js"></script>
|
|
<script src="/resources/testdriver-actions.js"></script>
|
|
<body>
|
|
<input id="dummyInput"></input>
|
|
|
|
<input id="textInput" value="This is a text">
|
|
<textarea id="textArea" rows="5" cols="40">
|
|
|
|
Line one
|
|
Line two
|
|
|
|
</textarea>
|
|
|
|
<button id="button">Button</button>
|
|
<a id="anchor">Anchor</a>
|
|
<span id="text">Text</span>
|
|
</body>
|
|
<script>
|
|
|
|
function reset() {
|
|
window.getSelection().empty();
|
|
dummyInput.focus();
|
|
}
|
|
|
|
window.onload = () => {
|
|
test(() => {
|
|
reset();
|
|
textInput.select();
|
|
|
|
assert_equals(document.activeElement, textInput);
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "This is a text");
|
|
}, "select the entire input should result all the content");
|
|
|
|
test(() => {
|
|
reset();
|
|
textInput.select();
|
|
dummyInput.focus();
|
|
|
|
assert_equals(document.activeElement, dummyInput);
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "");
|
|
}, "toString() should return empty when the focus is not on the editable content");
|
|
|
|
test(() => {
|
|
reset();
|
|
|
|
textInput.selectionStart = 3;
|
|
textInput.selectionEnd = 7;
|
|
|
|
assert_equals(document.activeElement, dummyInput);
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "");
|
|
|
|
textInput.focus();
|
|
assert_equals(document.activeElement, textInput);
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "s is");
|
|
}, "toString() works with selectionStart and selectionEnd for input");
|
|
|
|
test(() => {
|
|
reset();
|
|
|
|
textArea.select();
|
|
|
|
assert_equals(document.activeElement, textArea);
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "\n Line one\n Line two\n\n ");
|
|
}, "select the entire textarea should result all the content");
|
|
|
|
test(() => {
|
|
reset();
|
|
|
|
textArea.selectionStart = 3;
|
|
textArea.selectionEnd = 12;
|
|
|
|
assert_equals(document.activeElement, dummyInput);
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "");
|
|
|
|
textArea.focus();
|
|
assert_equals(document.activeElement, textArea);
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "Line one\n");
|
|
}, "toString() works with selectionStart and selectionEnd for textarea");
|
|
|
|
test(() => {
|
|
reset();
|
|
textInput.select();
|
|
|
|
button.focus();
|
|
|
|
assert_equals(document.activeElement, button);
|
|
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "This is a text");
|
|
}, "toString() works even if a click just occured on a button");
|
|
|
|
promise_test((t) => {
|
|
reset();
|
|
textInput.select();
|
|
return new Promise(r => {
|
|
anchor.addEventListener("click", function() {
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "This is a text");
|
|
r();
|
|
}, {once: true});
|
|
|
|
anchor.click();
|
|
});
|
|
}, "toString() works for programatically calling .click() on anchor (without href)");
|
|
|
|
promise_test((t) => {
|
|
reset();
|
|
textInput.select();
|
|
return new Promise(r => {
|
|
anchor.addEventListener("click", function() {
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "");
|
|
r();
|
|
}, {once : true});
|
|
|
|
test_driver.click(anchor);
|
|
});
|
|
}, "toString() doesn't work for actual clicking the anchor (without href)");
|
|
|
|
promise_test((t) => {
|
|
reset();
|
|
textInput.select();
|
|
anchor.href = "#";
|
|
return new Promise(r => {
|
|
anchor.addEventListener("click", function() {
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "This is a text");
|
|
r();
|
|
}, {once: true});
|
|
|
|
anchor.click(); // anchor has href now
|
|
});
|
|
}, "toString() works for programatically calling .click() on anchor (with href)");
|
|
|
|
promise_test((t) => {
|
|
reset();
|
|
textInput.select();
|
|
return new Promise(r => {
|
|
anchor.addEventListener("click", function() {
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "This is a text");
|
|
r();
|
|
}, {once : true});
|
|
|
|
test_driver.click(anchor); // anchor has href now
|
|
});
|
|
}, "toString() also works for actual clicking the anchor (with href)");
|
|
|
|
promise_test((t) => {
|
|
reset();
|
|
textInput.select();
|
|
|
|
return new Promise(async r => {
|
|
anchor.addEventListener("click", function() {
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "");
|
|
r();
|
|
}, {once : true});
|
|
|
|
await test_driver.click(text);
|
|
test_driver.click(anchor);
|
|
});
|
|
}, "Click on a text prior to toString() moves the seleciton");
|
|
|
|
promise_test((t) => {
|
|
reset();
|
|
textInput.select();
|
|
|
|
text.style = "user-select: none";
|
|
return new Promise(async r => {
|
|
anchor.addEventListener("click", function() {
|
|
assert_equals(window.getSelection().toString().replace(/\r\n/g, "\n"), "This is a text");
|
|
r();
|
|
}, {once : true});
|
|
|
|
await test_driver.click(text);
|
|
test_driver.click(anchor);
|
|
});
|
|
}, "Click on a `user-select:none` text prior to toString() doesn't move the seleciton");
|
|
};
|
|
</script>
|
|
</html>
|