scrollable-overflow-padding-input.html (1342B)
1 <!DOCTYPE html> 2 <title>CSS Overflow Test: Ensure that padding inflation does not cause block-direction scroll in input elements.</title> 3 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1932840"> 6 <link rel="stylesheet" href="/fonts/ahem.css"> 7 <style> 8 input.test { 9 width: 100px; 10 height: 100px; 11 font: 105px/1 Ahem; 12 padding: 10px; 13 } 14 15 textarea.test { 16 width: 100px; 17 height: 100px; 18 font: 105px/1 Ahem; 19 padding: 10px; 20 } 21 22 input[type="search"].test { 23 box-sizing: content-box; 24 } 25 </style> 26 <script src="/resources/testharness.js"></script> 27 <script src="/resources/testharnessreport.js"></script> 28 <script src="/resources/check-layout-th.js"></script> 29 <body onload="checkLayout('.test')"> 30 <input type="text" value="X" class="test" data-expected-scroll-height="120"><br> 31 <input type="number" value="1" class="test" data-expected-scroll-height="120"><br> 32 <input type="password" value="X" class="test" data-expected-scroll-height="120"><br> 33 <input type="search" class="test" value="X" data-expected-scroll-height="120"><br> 34 <!-- textarea is meant to scroll, so it gets padding inflation. --> 35 <textarea class="test" data-expected-scroll-height="125">X</textarea><br> 36 </body>