text-input-block-size.optional.html (2062B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <meta name="flags" content="ahem"> 4 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 5 <link rel="help" href="https://html.spec.whatwg.org/#the-input-element"> 6 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow"> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 8 <title>Test block-size of text-based inputs is consistent across writing-modes</title> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 12 <style> 13 input { 14 appearance: none; 15 font: 30px/1 Ahem; 16 } 17 </style> 18 19 <input id="horizontalInput"> 20 <input id="verticalInput"> 21 22 <script> 23 setup({ explicit_done: true }); 24 document.fonts.ready.then(() => { 25 for (const inputType of ["text", "email", "password", "search", "tel", "url", "number"]) { 26 horizontalInput.type = inputType; 27 verticalInput.type = inputType; 28 for (const writingMode of ["vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) { 29 if (!CSS.supports(`writing-mode: ${writingMode}`)) 30 continue; 31 test(t => { 32 verticalInput.style.writingMode = writingMode; 33 t.add_cleanup(() => { 34 verticalInput.removeAttribute("style"); 35 }); 36 37 const verticalRect = verticalInput.getBoundingClientRect(); 38 assert_true( 39 verticalRect.width < verticalRect.height, 40 "input has correct aspect ratio for default input size" 41 ); 42 43 const horizontalRect = horizontalInput.getBoundingClientRect(); 44 assert_equals( 45 Math.round(verticalRect.width), 46 Math.round(horizontalRect.height), 47 "width of vertical input matches height of horizontal input" 48 ); 49 }, `Test input[type=${inputType}] block-size in writing-mode: ${writingMode}`); 50 } 51 } 52 done(); 53 }); 54 </script>