textarea-padding-istart-moves-content-001.tentative.html (1631B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Test: padding-inline-start on a textarea moves the textarea content over, potentially out of the textarea's scrollport</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-istart-moves-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 inline-size: 0; 15 block-size: 10em; 16 17 padding-inline-start: 8em; 18 padding-inline-end: 0; 19 20 /* We expect the textarea's content to overflow in the inline direction, 21 which makes the textarea blank, aside from any scrollbars that might get 22 created by this overflow. We use overflow:hidden here to suppress these 23 scrollbars, so that the reference case can just use a trivial empty 24 textarea (without needing to worry about mocking up scrollbars of 25 precisely the right size). */ 26 overflow: hidden; 27 } 28 .rtl { direction: rtl; } 29 .vlr { writing-mode: vertical-lr; } 30 .vrl { writing-mode: vertical-rl; } 31 .slr { writing-mode: sideways-lr; } 32 .srl { writing-mode: sideways-rl; } 33 </style> 34 35 <textarea>X</textarea> 36 <textarea class="rtl">X</textarea> 37 <br> 38 <textarea class="vlr">X</textarea> 39 <textarea class="vrl">X</textarea> 40 <textarea class="slr">X</textarea> 41 <textarea class="srl">X</textarea> 42 <br> 43 <textarea class="vlr rtl">X</textarea> 44 <textarea class="vrl rtl">X</textarea> 45 <textarea class="slr rtl">X</textarea> 46 <textarea class="srl rtl">X</textarea>