Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /selection/stringifier_editable_element.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Selection: stringifier for editable elements</title>
<!--
There are two open issues about how this should behave
-->
<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>