blob: 808a32f9ad25ea92cd939f5957eeee188be78398 [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<meta name="viewport" content="width=device-width">
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/ui-helper.js"></script>
<script>
jsTestIsAsync = true;
function getLabelTextAfterFocusingInput() {
return new Promise(async (resolve) => {
await UIHelper.activateAndWaitForInputSessionAt(75, 75);
const labelText = await UIHelper.formInputLabel();
field.blur();
await UIHelper.waitForKeyboardToHide();
resolve(labelText);
});
}
async function runTest() {
if (!window.testRunner) {
description(`This test requires WebKitTestRunner.`);
return;
}
missingLabel.textContent = await getLabelTextAfterFocusingInput();
field.setAttribute("placeholder", "test label 1");
labelFromPlaceholder.textContent = await getLabelTextAfterFocusingInput();
field.setAttribute("title", "test label 2");
labelFromTitle.textContent = await getLabelTextAfterFocusingInput();
field.setAttribute("aria-label", "test label 3");
labelFromAriaLabel.textContent = await getLabelTextAfterFocusingInput();
label.setAttribute("for", "field");
labelFromLabelElement.textContent = await getLabelTextAfterFocusingInput();
finishJSTest();
}
</script>
</head>
<body onload="runTest()">
<input id="field" style="width: 320px; height: 568px;"></input>
<label id="label">test label 4</label>
<div>Label text should be missing: "<code id="missingLabel"></code>"</div>
<div>Label text should use the placeholder: "<code id="labelFromPlaceholder"></code>"</div>
<div>Label text should use the title: "<code id="labelFromTitle"></code>"</div>
<div>Label text should use the accessibility label: "<code id="labelFromAriaLabel"></code>"</div>
<div>Label text should use the associated label: "<code id="labelFromLabelElement"></code>"</div>
</body>
</html>