dir_auto-textarea-script-mixed.html (3279B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>HTML Test: textarea with dir=auto, script assigns to mixed L and R paragraphs</title> 6 <link rel="match" href="dir_auto-textarea-script-mixed-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 <style> 16 body, textarea { 17 font-size:18px; 18 text-align:left; 19 } 20 textarea { 21 resize: none; 22 } 23 .test, .ref { 24 border: medium solid gray; 25 width: 400px; 26 margin: 20px; 27 } 28 .comments { 29 display: none; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> 35 <div class="comments"> 36 Key to entities used below: 37 ‎ - LRM, the invisible left-to-right mark (strongly LTR). 38 ‏ - RLM, the invisible right-to-left mark (strongly RTL). 39 This test makes sure that the direction is set correctly for a textarea whose value is set 40 dynamically by script. 41 We use text-align:left because neither the dir="auto" nor the unicode-bidi:plaintext 42 specification states whether text-align:start and text-align:end should obey the paragraph 43 direction or the direction property in a unicode-bidi:plaintext element. 44 </div> 45 <div id="test" class="test"> 46 <script> 47 window.onload = function() { 48 var test = document.getElementById('test'); 49 var textareas = test.getElementsByTagName('textarea'); 50 for (var i = 0; i != textareas.length; i++) { 51 var input = textareas[i]; 52 if (input.parentNode.dir == 'ltr') { 53 // Assign a value whose first strong is RTL. 54 input.value = 55 '!\u200F123\u200E@\n' + 56 '@\u200E123\u200F!\n' + 57 '!123\u200F\u200E@\n' + 58 '@123\u200E\u200F!\n'; 59 } else { 60 // Assign a value whose first strong is LTR. 61 input.value = 62 '@\u200E123\u200F!\n' + 63 '!\u200F123\u200E@\n' + 64 '@123\u200E\u200F!\n' + 65 '!123\u200F\u200E@\n'; 66 } 67 } 68 } 69 </script> 70 <div dir="ltr"> 71 <textarea rows="5" dir="auto"> 72 ‎ 73 </textarea> 74 </div> 75 <div dir="rtl"> 76 <textarea rows="5" dir="auto"> 77 ‏ 78 </textarea> 79 </div> 80 </div> 81 <div class="ref"> 82 <div dir="ltr"> 83 <textarea rows="5" dir="rtl"> 84 !123@ 85 !123@ 86 !123@ 87 !123@ 88 </textarea> 89 </div> 90 <div dir="rtl"> 91 <textarea rows="5" dir="ltr"> 92 @123! 93 @123! 94 @123! 95 @123! 96 </textarea> 97 </div> 98 </div> 99 </body> 100 </html>