text-input-baseline.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-writing-modes/forms/text-input-baseline.html - WPT Dashboard Interop Dashboard

<!doctype html>

<link rel="author" title="Di Zhang" href="dizhangg@chromium.org">

<link rel="help" href="https://html.spec.whatwg.org/#the-input-element">

<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-baselines">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">

<title>CSS Writing Modes: Test that typing inside text inputs shouldn't change text baseline</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

input, span {

  font-size: 30px/1 Ahem;

</style>

<div id="container">

<span id="testText">foo</span>

<input id="testInput">

</div>

<script>

for (const inputType of ["text", "password", "search", "number", "email", "tel", "url"]) {

    testInput.type = inputType;

    for (const writingMode of ["vertical-lr", "vertical-rl", "horizontal-tb"]) {

        if (!CSS.supports("writing-mode", writingMode))

            continue;

        promise_test(async t => {

            container.style.writingMode = writingMode;

            t.add_cleanup(() => {

                container.removeAttribute("style");

                testInput.value = '';

});

            const { top: beforeInputTop, right: beforeInputRight } = testInput.getBoundingClientRect();

            const { top: beforeTextTop, right: beforeTextRight } = testText.getBoundingClientRect();

            testInput.value = '11'

            const { top: afterInputTop, right: afterInputRight } = testInput.getBoundingClientRect();

            const { top: afterTextTop, right: afterTextRight } = testText.getBoundingClientRect();

            assert_approx_equals(beforeInputTop, afterInputTop, 1, `Typing in ${inputType} should not move input position top`);

            assert_approx_equals(beforeInputRight, afterInputRight, 1, `Typing in ${inputType} should not move input position right`);

            assert_approx_equals(beforeTextTop, afterTextTop, 1, `Typing in ${inputType} should not move text position top`);

            assert_approx_equals(beforeTextRight, afterTextRight, 1, `Typing in ${inputType} should not move text position right`);

        }, `input[type=${inputType}] in ${writingMode}: typing characters in input should not change location of elements within container.`);

</script>