textarea-cols-rows.html (2565B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://html.spec.whatwg.org/C/#the-textarea-element-2"> 3 <title>Test `cols` `rows` attributes behaivor</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <body> 7 8 <textarea id="missing"></textarea> 9 <textarea id="invalid" cols="-1" rows="-1"></textarea> 10 <textarea id="computed" style="border:none; padding:0;" cols="19" rows="5"></textarea> 11 <textarea id="computedNone" style="display:none" cols="17" rows="7"></textarea> 12 13 <textarea id="cols0" cols="0"></textarea> 14 <textarea id="cols1" cols="1"></textarea> 15 <textarea id="cols10" cols="10"></textarea> 16 <textarea id="cols20" cols="20"></textarea> 17 <textarea id="cols21" cols="21"></textarea> 18 19 <textarea id="rows0" rows="0"></textarea> 20 <textarea id="rows1" rows="1"></textarea> 21 <textarea id="rows2" rows="2"></textarea> 22 <textarea id="rows3" rows="3"></textarea> 23 24 <script> 25 test(() => { 26 assert_equals(missing.offsetWidth, cols20.offsetWidth); 27 assert_equals(missing.offsetHeight, rows2.offsetHeight); 28 }, 'A misssing attribute is equivalent to cols=20 rows=2'); 29 30 test(() => { 31 assert_equals(invalid.offsetWidth, cols20.offsetWidth); 32 assert_equals(invalid.offsetHeight, rows2.offsetHeight); 33 assert_equals(cols0.offsetWidth, cols20.offsetWidth); 34 assert_equals(rows0.offsetHeight, rows2.offsetHeight); 35 }, 'An invalid attribute value is equivalent to cols=20 rows=2'); 36 37 test(() => { 38 assert_less_than(cols1.offsetWidth, cols10.offsetWidth, '1 < 10'); 39 assert_less_than(cols10.offsetWidth, cols20.offsetWidth, '10 < 20'); 40 assert_less_than(cols20.offsetWidth, cols21.offsetWidth, '20 < 21'); 41 }, 'The width depends on a cols attribute'); 42 43 test(() => { 44 assert_less_than(rows1.offsetHeight, rows2.offsetHeight, '1 < 2'); 45 assert_less_than(rows2.offsetHeight, rows3.offsetHeight, '2 < 3'); 46 }, 'The height depends on a rows attribute'); 47 48 test(() => { 49 const computedWidth = getComputedStyle(computed).width; 50 assert_equals(computed.offsetWidth, 51 Math.round(computedWidth.substring(0, computedWidth.length - 2))); 52 53 const computedHeight = getComputedStyle(computed).height; 54 assert_equals(computed.offsetHeight, 55 Math.round(computedHeight.substring(0, computedHeight.length - 2))); 56 }, 'Cols/rows attribute values affect layout-dependent computed style'); 57 58 test(() => { 59 const computedNoneStyle = getComputedStyle(computedNone); 60 assert_equals(computedNoneStyle.width, 'auto'); 61 assert_equals(computedNoneStyle.height, 'auto'); 62 }, 'Cols/rows attribute values are not presentational hints'); 63 </script>