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