text-input-baseline.html (2300B)
1 <!doctype html> 2 <link rel="author" title="Di Zhang" href="dizhangg@chromium.org"> 3 <link rel="help" href="https://html.spec.whatwg.org/#the-input-element"> 4 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-baselines"> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 6 <title>CSS Writing Modes: Test that typing inside text inputs shouldn't change text baseline</title> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <style> 11 input, span { 12 font-size: 30px/1 Ahem; 13 } 14 </style> 15 <div id="container"> 16 <span id="testText">foo</span> 17 <input id="testInput"> 18 </div> 19 20 <script> 21 for (const inputType of ["text", "password", "search", "number", "email", "tel", "url"]) { 22 testInput.type = inputType; 23 for (const writingMode of ["vertical-lr", "vertical-rl", "horizontal-tb"]) { 24 if (!CSS.supports("writing-mode", writingMode)) 25 continue; 26 promise_test(async t => { 27 container.style.writingMode = writingMode; 28 t.add_cleanup(() => { 29 container.removeAttribute("style"); 30 testInput.value = ''; 31 }); 32 const { top: beforeInputTop, right: beforeInputRight } = testInput.getBoundingClientRect(); 33 const { top: beforeTextTop, right: beforeTextRight } = testText.getBoundingClientRect(); 34 35 testInput.value = '11' 36 37 const { top: afterInputTop, right: afterInputRight } = testInput.getBoundingClientRect(); 38 const { top: afterTextTop, right: afterTextRight } = testText.getBoundingClientRect(); 39 40 assert_approx_equals(beforeInputTop, afterInputTop, 1, `Typing in ${inputType} should not move input position top`); 41 assert_approx_equals(beforeInputRight, afterInputRight, 1, `Typing in ${inputType} should not move input position right`); 42 assert_approx_equals(beforeTextTop, afterTextTop, 1, `Typing in ${inputType} should not move text position top`); 43 assert_approx_equals(beforeTextRight, afterTextRight, 1, `Typing in ${inputType} should not move text position right`); 44 }, `input[type=${inputType}] in ${writingMode}: typing characters in input should not change location of elements within container.`); 45 } 46 } 47 </script>