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