textarea-padding-bend-overlaps-content-001.tentative.html (1460B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Test: padding-block-end on a textarea creates space that content can render into</title> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-textarea-element-2"> 5 <link rel="match" href="textarea-padding-bend-overlaps-content-001-ref.html"> 6 7 <link rel="stylesheet" href="/fonts/ahem.css"> 8 <style> 9 textarea { 10 font: 10px/1 Ahem; 11 12 /* Zero out the content-box, leaving the padding area as the only 13 place where the contents might get rendered. */ 14 block-size: 0; 15 inline-size: 10em; 16 17 padding-block-end: 8em; 18 19 /* The textarea's padding-block-end may create overflow in the block axis, 20 and hence generate a scrollbar in the testcase that's not present in the 21 reference case (and might be hard to properly mock up there). We avoid 22 this problem by suppressing scrollbars using "overflow:hidden": */ 23 overflow: hidden; 24 } 25 .rtl { direction: rtl; } 26 .vlr { writing-mode: vertical-lr; } 27 .vrl { writing-mode: vertical-rl; } 28 .slr { writing-mode: sideways-lr; } 29 .srl { writing-mode: sideways-rl; } 30 </style> 31 32 <textarea>X</textarea> 33 <textarea class="rtl">X</textarea> 34 <br> 35 <textarea class="vlr">X</textarea> 36 <textarea class="vrl">X</textarea> 37 <textarea class="slr">X</textarea> 38 <textarea class="srl">X</textarea> 39 <br> 40 <textarea class="vlr rtl">X</textarea> 41 <textarea class="vrl rtl">X</textarea> 42 <textarea class="slr rtl">X</textarea> 43 <textarea class="srl rtl">X</textarea>