<!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>