field-sizing-textarea.html (5805B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-ui-4/#field-sizing"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 textarea { 7 font-family: monospace; 8 } 9 10 .disable-default { 11 field-sizing: content; 12 } 13 14 .small-placeholder { 15 font-size: 32px; 16 } 17 .small-placeholder::placeholder { 18 font-size: 16px; 19 } 20 21 .large-placeholder { 22 font-size: 20px; 23 } 24 .large-placeholder::placeholder { 25 font-size: 40px; 26 } 27 </style> 28 <body> 29 <div id="container"></div> 30 <script> 31 const DISABLE = 'class="disable-default"'; 32 const LONG_TEXT = 'The quick brown fox jumps over the lazy dog.'; 33 34 function addElements(source) { 35 const container = document.querySelector('#container'); 36 container.innerHTML = source + source; 37 container.lastElementChild.classList.add('disable-default'); 38 return { 39 fixed: container.firstElementChild, 40 content: container.lastElementChild 41 }; 42 } 43 44 function addTwoElements(source1, source2) { 45 const container = document.querySelector('#container'); 46 container.innerHTML = source1 + source2; 47 return { 48 e1: container.firstElementChild, 49 e2: container.lastElementChild 50 }; 51 } 52 53 test(() => { 54 let pair = addElements('<textarea></textarea>'); 55 // Historically a <textarea> has approximately 20ch x 2lh size by default. 56 // A <textarea> with field-sizing:content must be samller than the default. 57 assert_less_than(pair.content.offsetWidth, pair.fixed.offsetWidth); 58 assert_less_than(pair.content.offsetHeight, pair.fixed.offsetHeight); 59 60 pair = addTwoElements(`<textarea ${DISABLE}></textarea>`, `<textarea ${DISABLE}>foo</textarea>`); 61 assert_less_than(pair.e1.offsetWidth, pair.e2.offsetWidth); 62 assert_equals(pair.e1.offsetHeight, pair.e2.offsetHeight); 63 }, 'Empty value'); 64 65 test(() => { 66 let pair = addElements('<textarea cols="10" rows="3"></textarea>'); 67 assert_less_than(pair.content.offsetWidth, pair.fixed.offsetWidth); 68 assert_less_than(pair.content.offsetHeight, pair.fixed.offsetHeight); 69 }, 'Empty value with cols/rows'); 70 71 test(() => { 72 let pair = addElements(`<textarea>${LONG_TEXT}</textarea>`); 73 assert_greater_than(pair.content.offsetWidth, pair.fixed.offsetWidth); 74 pair = addElements(`<textarea placeholder="${LONG_TEXT}"></textarea>`); 75 assert_greater_than(pair.content.offsetWidth, pair.fixed.offsetWidth); 76 }, 'Auto width and auto height with a long text'); 77 78 test(() => { 79 let pair = addElements('<textarea style="width:20ch; height:2lh"></textarea>'); 80 assert_equals(pair.content.offsetWidth, pair.fixed.offsetWidth); 81 assert_equals(pair.content.offsetHeight, pair.fixed.offsetHeight); 82 83 pair = addElements(`<textarea style="width:20ch; height:2lh">${LONG_TEXT}</textarea>`); 84 assert_equals(pair.content.offsetWidth, pair.fixed.offsetWidth); 85 assert_equals(pair.content.offsetHeight, pair.fixed.offsetHeight); 86 87 pair = addElements(`<textarea style="width:20ch; height:2lh" placeholder="${LONG_TEXT}"></textarea>`); 88 assert_equals(pair.content.offsetWidth, pair.fixed.offsetWidth); 89 assert_equals(pair.content.offsetHeight, pair.fixed.offsetHeight); 90 }, 'Explicit width and heigth'); 91 92 test(() => { 93 let pair = addElements('<textarea style="width:20ch"></textarea>'); 94 assert_equals(pair.content.offsetWidth, pair.fixed.offsetWidth); 95 assert_less_than(pair.content.offsetHeight, pair.fixed.offsetHeight); 96 97 pair = addElements(`<textarea style="width:20ch">${LONG_TEXT}</textarea>`); 98 assert_equals(pair.content.offsetWidth, pair.fixed.offsetWidth); 99 assert_greater_than(pair.content.offsetHeight, pair.fixed.offsetHeight); 100 101 pair = addElements(`<textarea style="width:20ch" placeholder="${LONG_TEXT}"></textarea>`); 102 assert_equals(pair.content.offsetWidth, pair.fixed.offsetWidth); 103 assert_greater_than(pair.content.offsetHeight, pair.fixed.offsetHeight); 104 }, 'Explicit width and auto height'); 105 106 test(() => { 107 let pair = addElements('<textarea style="height:2lh"></textarea>'); 108 assert_less_than(pair.content.offsetWidth, pair.fixed.offsetWidth); 109 assert_equals(pair.content.offsetHeight, pair.fixed.offsetHeight); 110 111 pair = addElements(`<textarea style="height:2lh">${LONG_TEXT}</textarea>`); 112 assert_greater_than(pair.content.offsetWidth, pair.fixed.offsetWidth); 113 assert_equals(pair.content.offsetHeight, pair.fixed.offsetHeight); 114 115 pair = addElements(`<textarea style="height:2lh" placeholder="${LONG_TEXT}"></textarea>`); 116 assert_greater_than(pair.content.offsetWidth, pair.fixed.offsetWidth); 117 assert_equals(pair.content.offsetHeight, pair.fixed.offsetHeight); 118 }, 'Explicit height and auto width'); 119 120 test(() => { 121 let pair = addTwoElements(`<textarea class="disable-default small-placeholder"></textarea>`, 122 `<textarea class="disable-default small-placeholder" placeholder="foo"></textarea>`); 123 assert_less_than(pair.e1.offsetWidth, pair.e2.offsetWidth); 124 assert_equals(pair.e1.offsetHeight, pair.e2.offsetHeight); 125 }, 'Text caret is taller than the placeholder'); 126 127 test(() => { 128 let pair = addTwoElements(`<textarea class="disable-default large-placeholder"></textarea>`, 129 `<textarea class="disable-default large-placeholder" placeholder="foo"></textarea>`); 130 assert_less_than(pair.e1.offsetWidth, pair.e2.offsetWidth, 'width'); 131 assert_less_than(pair.e1.offsetHeight, pair.e2.offsetHeight, 'height'); 132 }, 'Text caret is shorter than the placeholder'); 133 134 test(() => { 135 const container = document.querySelector('#container'); 136 container.innerHTML = '<textarea></textarea>'; 137 const element = container.firstChild; 138 const w = element.offsetWidth; 139 const h = element.offsetHeight; 140 element.classList.add('disable-default'); 141 assert_less_than(element.offsetWidth, w); 142 assert_less_than(element.offsetHeight, h); 143 }, 'Update field-sizing property dynamically'); 144 </script> 145 </body>