Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/textfieldselection/selection.html - WPT Dashboard Interop Dashboard
<!DOCTYPE HTML>
<title>test if select() API returns correct attributes</title>
<meta charset="UTF-8">
<meta name="timeout" content="long">
<link rel="author" title="Koji Tashiro" href="mailto:koji.tashiro@gmail.com">
<link rel="help" href="https://html.spec.whatwg.org/multipage/multipage/association-of-controls-and-forms.html#textFieldSelection">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<script>
var body = document.getElementsByTagName("body").item(0);
var dirs = ['forward', 'backward', 'none'];
var sampleText = "0123456789";
var createInputElement = function(value, append = true) {
var el = document.createElement("input");
el.type = "text";
el.value = value;
el.id = "input" + (append ? "-appended" : "-not-appended");
if (append) {
body.appendChild(el);
}
return el;
};
var createTextareaElement = function(value, append = true) {
var el = document.createElement("textarea");
el.value = value;
el.id = "textarea" + (append ? "-appended" : "-not-appended");
if (append) {
body.appendChild(el);
}
return el;
};
test(function() {
var text = 'a';
for (var i=0; i<255; i++) {
var el = createInputElement(text);
el.select();
var selectionText = el.value.substring(el.selectionStart, el.selectionEnd);
assert_equals(selectionText, text, "Selection text mismatched");
el.parentNode.removeChild(el);
text += 'a';
}
}, "test if selection text is correct for input");
test(function() {
var text = 'a';
for (var i=0; i<255; i++) {
var el = createTextareaElement(text);
el.select();
var selectionText = el.value.substring(el.selectionStart, el.selectionEnd);
assert_equals(selectionText, text, "Selection text mismatched");
el.parentNode.removeChild(el);
text += 'a';
}
}, "test if selection text is correct for textarea");
test(function() {
var text = 'あ';
for (var i=0; i<255; i++) {
var el = createInputElement(text);
el.select();
var selectionText = el.value.substring(el.selectionStart, el.selectionEnd);
assert_equals(selectionText, text, "Selection text mismatched");
el.parentNode.removeChild(el);
text += 'あ';
}
}, "test if non-ascii selection text is correct for input");
test(function() {
var text = 'あ';
for (var i=0; i<255; i++) {
var el = createTextareaElement(text);
el.select();
var selectionText = el.value.substring(el.selectionStart, el.selectionEnd);
assert_equals(selectionText, text, "Selection text mismatched");
el.parentNode.removeChild(el);
text += 'あ';
}
}, "test if non-ascii selection text is correct for textarea");
for (var append of [true, false]) {
test(function() {
var el = createInputElement(sampleText, append);
// If there is no selection, then it must return the offset(in logical order)
// to the character that immediately follows the text entry cursor.
assert_equals(el.selectionStart, el.value.length,
"SelectionStart offset without selection in " + el.id);
el.select();
assert_equals(el.selectionStart, 0, "SelectionStart offset");
el.remove();
}, "test SelectionStart offset for input that is " +
(append ? "appended" : " not appended"));
}
for (var append of [true, false]) {
test(function() {
var el = createTextareaElement(sampleText, append);
// If there is no selection, then it must return the offset(in logical order)
// to the character that immediately follows the text entry cursor.
assert_equals(el.selectionStart, el.value.length,
"SelectionStart offset without selection in " + el.id);
el.select();
assert_equals(el.selectionStart, 0, "SelectionStart offset");
el.remove();
}, "test SelectionStart offset for textarea that is " +
(append ? "appended" : " not appended"));
}
for (var append of [true, false]) {
test(function() {
var el = createInputElement(sampleText, append);
// If there is no selection, then it must return the offset(in logical order)
// to the character that immediately follows the text entry cursor.
assert_equals(el.selectionEnd, el.value.length,
"SelectionEnd offset without selection in " + el.id);
el.select();
assert_equals(el.selectionEnd, el.value.length, "SelectionEnd offset");
el.remove();
}, "test SelectionEnd offset for input that is " +
(append ? "appended" : " not appended"));
}
for (var append of [true, false]) {
test(function() {
var el = createTextareaElement(sampleText, append);
// If there is no selection, then it must return the offset(in logical order)
// to the character that immediately follows the text entry cursor.
assert_equals(el.selectionEnd, el.value.length,
"SelectionEnd offset without selection in " + el.id);
el.select();
assert_equals(el.selectionEnd, el.value.length, "SelectionEnd offset");
el.remove();
}, "test SelectionEnd offset for textarea that is " +
(append ? "appended" : " not appended"));
}
test(function() {
var el = createInputElement(sampleText);
assert_in_array(el.selectionDirection, dirs, "SelectionDirection");
el.select();
assert_in_array(el.selectionDirection, dirs, "SelectionDirection");
el.parentNode.removeChild(el);
}, "test SelectionDirection for input");
test(function() {
var el = createTextareaElement(sampleText);
assert_in_array(el.selectionDirection, dirs, "SelectionDirection");
el.select();
assert_in_array(el.selectionDirection, dirs, "SelectionDirection");
el.parentNode.removeChild(el);
}, "test SelectionDirection for textarea");
promise_test(async () => {
// cause a layout overflow
const el = createInputElement(sampleText.repeat(100));
el.selectionEnd = 0;
await new Promise(requestAnimationFrame);
assert_equals(el.scrollLeft, 0);
el.select();
await new Promise(requestAnimationFrame);
assert_equals(el.scrollLeft, 0);
el.remove();
}, `test scrollLeft for input`);
promise_test(async () => {
// cause a layout overflow
const el = createInputElement(sampleText.repeat(100));
el.scrollLeft = 33;
el.select();
await new Promise(requestAnimationFrame);
assert_equals(el.scrollLeft, 33);
el.remove();
}, `test scrollLeft preservation for input`);
for (const localName of ["input", "textarea"]) {
promise_test(async () => {
const container = document.createElement("div");
container.style.height = "100px";
container.style.overflow = "scroll";
const element = document.createElement(localName);
element.style.marginTop = "120px";
container.append(element);
document.body.append(container);
element.select();
await new Promise(requestAnimationFrame);
assert_equals(container.scrollTop, 0);
container.remove();
}, `test container.scrollTop for ${localName}`);
}
</script>