Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /editing/other/input-in-text-control-which-is-also-editing-host.tentative.html?textcontrol=password - WPT Dashboard Interop Dashboard
- /editing/other/input-in-text-control-which-is-also-editing-host.tentative.html?textcontrol=text - WPT Dashboard Interop Dashboard
- /editing/other/input-in-text-control-which-is-also-editing-host.tentative.html?textcontrol=textarea - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="timeout" content="long">
<meta name="variant" content="?textcontrol=text">
<meta name="variant" content="?textcontrol=password">
<meta name="variant" content="?textcontrol=textarea">
<title>Check whether a text control element handles user input when it's an editing host</title>
<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>
</head>
<body>
<div></div>
<script>
const searchParams = new URLSearchParams(document.location.search);
const textControlType = searchParams.get("textcontrol");
const textControlDescription =
textControlType == "textarea"
? "<textarea contenteditable>"
: `<input type="${textControlType}" contenteditable>`;
const div = document.querySelector("div");
function createTextControl() {
const textControl = document.createElement(
textControlType == "textarea" ? "textarea" : "input"
);
if (textControlType != "textarea") {
textControl.type = textControlType;
}
return textControl;
}
promise_test(async t => {
const textControl = createTextControl();
div.appendChild(textControl);
textControl.setAttribute("contenteditable", "");
textControl.focus();
await (new test_driver.Actions()
.keyDown("a")
.keyUp("a")
.keyDown("b")
.keyUp("b")
.keyDown("c")
.keyUp("c")
.send());
assert_equals(
textControl.value,
"abc",
`${t.name}: The text control value should be updated`
);
assert_equals(
document.querySelector("div").textContent.trim(),
"",
`${t.name}: No text should be inserted as a child of the text control`
);
textControl.remove();
}, `User typing in ${textControlDescription} should update the value`);
promise_test(async t => {
const textControl = createTextControl();
div.appendChild(textControl);
textControl.setAttribute("contenteditable", "");
textControl.focus();
document.execCommand("insertText", false, "abc");
assert_equals(
textControl.value,
"abc",
`${t.name}: The text control value should be updated`
);
assert_equals(
div.textContent.trim(),
"",
`${t.name}: No text should be inserted as a child of the text control`
);
textControl.remove();
}, `execCommand("insertText") in ${textControlDescription} should update the value`);
promise_test(async t => {
const textControl = createTextControl();
div.appendChild(textControl);
textControl.focus();
textControl.setAttribute("contenteditable", "");
await (new test_driver.Actions()
.keyDown("a")
.keyUp("a")
.keyDown("b")
.keyUp("b")
.keyDown("c")
.keyUp("c")
.send());
assert_equals(
textControl.value,
"abc",
`${t.name}: The text control value should be updated`
);
assert_equals(
div.textContent.trim(),
"",
`${t.name}: No text should be inserted as a child of the text control`
);
textControl.remove();
}, `User typing in ${textControlDescription} should update the value (became an editing host during focused)`);
promise_test(async t => {
const textControl = createTextControl();
div.appendChild(textControl);
textControl.focus();
textControl.setAttribute("contenteditable", "");
document.execCommand("insertText", false, "abc");
assert_equals(
textControl.value,
"abc",
`${t.name}: The text control value should be updated`
);
assert_equals(
div.textContent.trim(),
"",
`${t.name}: No text should be inserted as a child of the text control`
);
textControl.remove();
}, `execCommand("insertText") in ${textControlDescription} should update the value (became an editing host during focused)`);
if (textControlType != "textarea") {
promise_test(async t => {
const textControl = createTextControl();
textControl.type = "button";
div.appendChild(textControl);
textControl.setAttribute("contenteditable", "");
textControl.focus();
textControl.type = textControlType;
await (new test_driver.Actions()
.keyDown("a")
.keyUp("a")
.keyDown("b")
.keyUp("b")
.keyDown("c")
.keyUp("c")
.send());
assert_equals(
textControl.value,
"abc",
`${t.name}: The text control value should be updated`
);
assert_equals(
document.querySelector("div").textContent.trim(),
"",
`${t.name}: No text should be inserted as a child of the text control`
);
textControl.remove();
}, `User typing in ${
textControlDescription
} should update the value (became an editing host during focused and different type)`);
promise_test(async t => {
const textControl = createTextControl();
textControl.type = "button";
div.appendChild(textControl);
textControl.setAttribute("contenteditable", "");
textControl.focus();
textControl.type = textControlType;
document.execCommand("insertText", false, "abc");
assert_equals(
textControl.value,
"abc",
`${t.name}: The text control value should be updated`
);
assert_equals(
div.textContent.trim(),
"",
`${t.name}: No text should be inserted as a child of the text control`
);
textControl.remove();
}, `execCommand("insertText") in ${
textControlDescription
} should update the value (became an editing host during focused and different type)`);
}
</script>
</body>
</html>