textarea-rows-cols-sizing.html (4137B)
1 <!doctype html> 2 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 3 <link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element"> 4 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow"> 5 <title>Textarea rows/cols size mapping in different writing modes</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <textarea></textarea> 10 11 <script> 12 for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) { 13 if (!CSS.supports(`writing-mode: ${writingMode}`)) 14 continue; 15 16 const isHorizontal = writingMode === "horizontal-tb"; 17 const textarea = document.querySelector("textarea"); 18 19 test(t => { 20 textarea.style.writingMode = writingMode; 21 t.add_cleanup(() => { 22 textarea.removeAttribute("style"); 23 textarea.removeAttribute("rows"); 24 }); 25 26 const rowsDimension = isHorizontal ? "height" : "width"; 27 const colsDimension = isHorizontal ? "width" : "height"; 28 29 let previousRect = textarea.getBoundingClientRect(); 30 textarea.rows = 10; 31 assert_equals( 32 textarea.getBoundingClientRect()[colsDimension], 33 previousRect[colsDimension], 34 `${colsDimension} shouldn't change when changing rows` 35 ); 36 previousRect = textarea.getBoundingClientRect(); 37 38 textarea.rows = 9; 39 assert_true( 40 textarea.getBoundingClientRect()[rowsDimension] < previousRect[rowsDimension], 41 `${rowsDimension} should decrease when decreasing rows` 42 ); 43 assert_equals( 44 textarea.getBoundingClientRect()[colsDimension], 45 previousRect[colsDimension], 46 `${colsDimension} shouldn't change when changing rows` 47 ); 48 previousRect = textarea.getBoundingClientRect(); 49 50 textarea.rows = 11; 51 assert_true( 52 textarea.getBoundingClientRect()[rowsDimension] > previousRect[rowsDimension], 53 `${rowsDimension} should increase when increasing rows` 54 ); 55 assert_equals( 56 textarea.getBoundingClientRect()[colsDimension], 57 previousRect[colsDimension], 58 `${colsDimension} shouldn't change when changing rows` 59 ); 60 }, `textarea[style="writing-mode: ${writingMode}"] rows attribute changes the size correctly`); 61 62 test(t => { 63 textarea.style.writingMode = writingMode; 64 t.add_cleanup(() => { 65 textarea.removeAttribute("style"); 66 textarea.removeAttribute("cols"); 67 }); 68 69 const rowsDimension = isHorizontal ? "height" : "width"; 70 const colsDimension = isHorizontal ? "width" : "height"; 71 72 let previousRect = textarea.getBoundingClientRect(); 73 textarea.cols = 40; 74 assert_equals( 75 textarea.getBoundingClientRect()[rowsDimension], 76 previousRect[rowsDimension], 77 `${rowsDimension} shouldn't change when changing cols` 78 ); 79 previousRect = textarea.getBoundingClientRect(); 80 81 textarea.cols = 30; 82 assert_true( 83 textarea.getBoundingClientRect()[colsDimension] < previousRect[colsDimension], 84 `${colsDimension} should decrease when decreasing cols` 85 ); 86 assert_equals( 87 textarea.getBoundingClientRect()[rowsDimension], 88 previousRect[rowsDimension], 89 `${rowsDimension} shouldn't change when changing cols` 90 ); 91 previousRect = textarea.getBoundingClientRect(); 92 93 textarea.cols = 50; 94 assert_true( 95 textarea.getBoundingClientRect()[colsDimension] > previousRect[colsDimension], 96 `${colsDimension} should increase when increasing cols` 97 ); 98 assert_equals( 99 textarea.getBoundingClientRect()[rowsDimension], 100 previousRect[rowsDimension], 101 `${rowsDimension} shouldn't change when changing cols` 102 ); 103 }, `textarea[style="writing-mode: ${writingMode}"] cols attribute changes the size correctly`); 104 }; 105 </script>