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