dir_auto-textarea-script-N-EN.html (2680B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>HTML Test: textarea with dir=auto, script assigns to all N+EN</title> 6 <link rel="match" href="dir_auto-textarea-script-N-EN-ref.html" /> 7 <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> 8 <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> 9 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> 10 <link rel="help" href="http://dev.w3.org/csswg/css3-writing-modes/#unicode-bidi0" /> 11 <meta name="assert" content=" 12 When dir='auto', the direction is set according to the first strong character 13 of the text. 14 For textarea and pre elements, the heuristic is applied on a per-paragraph level. 15 If there is no strong character, as in this test, the direction defaults to LTR." /> 16 <style> 17 body, textarea { 18 font-size:18px; 19 text-align:left; 20 } 21 .test, .ref { 22 border: medium solid gray; 23 width: 400px; 24 margin: 20px; 25 } 26 .comments { 27 display: none; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> 33 <div class="comments"> 34 Key to entities used below: 35 ‎ - LRM, the invisible left-to-right mark (strongly LTR). 36 ‏ - RLM, the invisible right-to-left mark (strongly RTL). 37 This test makes sure that the direction is set correctly for a textarea whose value is set 38 dynamically by script. 39 We use text-align:left because neither the dir="auto" nor the unicode-bidi:plaintext 40 specification states whether text-align:start and text-align:end should obey the paragraph 41 direction or the direction property in a unicode-bidi:plaintext element. 42 </div> 43 <div id="test" class="test"> 44 <script> 45 window.onload = function() { 46 var test = document.getElementById('test'); 47 var textareas = test.getElementsByTagName('textarea'); 48 for (var i = 0; i != textareas.length; i++) { 49 textareas[i].value = '@123!\n'; 50 } 51 } 52 </script> 53 <div dir="ltr"> 54 <textarea rows="2" dir="auto"> 55 ‏ 56 </textarea> 57 </div> 58 <div dir="rtl"> 59 <textarea rows="2" dir="auto"> 60 ‏ 61 </textarea> 62 </div> 63 </div> 64 <div class="ref"> 65 <div dir="ltr"> 66 <textarea rows="2" dir="ltr"> 67 @123! 68 </textarea> 69 </div> 70 <div dir="rtl"> 71 <textarea rows="2" dir="ltr"> 72 @123! 73 </textarea> 74 </div> 75 </div> 76 </body> 77 </html>