/third_party/WebKit/LayoutTests/imported/web-platform-tests/html/dom/elements/global-attributes/dir_auto-textarea-script-mixed.html

https://gitlab.com/jonnialva90/iridium-browser · HTML · 100 lines · 100 code · 0 blank · 0 comment · 0 complexity · 58838eff38f933239893e6040cb1a557 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8" />
    5. 

  5.     <title>HTML Test: textarea with dir=auto, script assigns to mixed L and R paragraphs</title>
    6. 

  6.     <link rel="match" href="dir_auto-textarea-script-mixed-ref.html" />
    7. 

  7.     <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" />
    8. 

  8.     <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" />
    9. 

  9.     <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" />
    10. 

  10.     <link rel="help" href="http://dev.w3.org/csswg/css3-writing-modes/#unicode-bidi0" />
    11. 

  11.     <meta name="assert" content="
    12. 

  12.       When dir='auto', the direction is set according to the first strong character
    13. 

  13.       of the text.
    14. 

  14.       For textarea and pre elements, the heuristic is applied on a per-paragraph level." />
    15. 

  15.     <style>
    16. 

  16.       body, textarea {
    17. 

  17.         font-size:18px;
    18. 

  18.         text-align:left;
    19. 

  19.       }
    20. 

  20.       textarea {
    21. 

  21.         resize: none;
    22. 

  22.       }
    23. 

  23.       .test, .ref {
    24. 

  24.         border: medium solid gray;
    25. 

  25.         width: 400px;
    26. 

  26.         margin: 20px;
    27. 

  27.       }
    28. 

  28.       .comments {
    29. 

  29.         display: none;
    30. 

  30.       }
    31. 

  31.     </style>
    32. 

  32.   </head>
    33. 

  33.   <body>
    34. 

  34.     <div class="instructions" style="display:none"><p>Test passes if the two boxes below look exactly the same.</p></div>
    35. 

  35.     <div class="comments">
    36. 

  36.       Key to entities used below:
    37. 

  37.         &#x200E; - LRM, the invisible left-to-right mark (strongly LTR).
    38. 

  38.         &#x200F; - RLM, the invisible right-to-left mark (strongly RTL).
    39. 

  39.       This test makes sure that the direction is set correctly for a textarea whose value is set
    40. 

  40.       dynamically by script.
    41. 

  41.       We use text-align:left because neither the dir="auto" nor the unicode-bidi:plaintext
    42. 

  42.       specification states whether text-align:start and text-align:end should obey the paragraph
    43. 

  43.       direction or the direction property in a unicode-bidi:plaintext element.
    44. 

  44.     </div>
    45. 

  45.     <div id="test" class="test">
    46. 

  46.       <script>
    47. 

  47.         window.onload = function() {
    48. 

  48.           var test = document.getElementById('test');
    49. 

  49.           var textareas = test.getElementsByTagName('textarea');
    50. 

  50.           for (var i = 0; i != textareas.length; i++) {
    51. 

  51.             var input = textareas[i];
    52. 

  52.             if (input.parentNode.dir == 'ltr') {
    53. 

  53.               // Assign a value whose first strong is RTL.
    54. 

  54.               input.value =
    55. 

  55.                   '!\u200F123\u200E@\n' +
    56. 

  56.                   '@\u200E123\u200F!\n' +
    57. 

  57.                   '!123\u200F\u200E@\n' +
    58. 

  58.                   '@123\u200E\u200F!\n';
    59. 

  59.             } else {
    60. 

  60.               // Assign a value whose first strong is LTR.
    61. 

  61.               input.value =
    62. 

  62.                   '@\u200E123\u200F!\n' +
    63. 

  63.                   '!\u200F123\u200E@\n' +
    64. 

  64.                   '@123\u200E\u200F!\n' +
    65. 

  65.                   '!123\u200F\u200E@\n';
    66. 

  66.             }
    67. 

  67.           }
    68. 

  68.         }
    69. 

  69.       </script>
    70. 

  70.       <div dir="ltr">
    71. 

  71.         <textarea rows="5" dir="auto">
    72. 

  72. &#x200E;
    73. 

  73.         </textarea>
    74. 

  74.       </div>
    75. 

  75.       <div dir="rtl">
    76. 

  76.         <textarea rows="5" dir="auto">
    77. 

  77. &#x200F;
    78. 

  78.         </textarea>
    79. 

  79.       </div>
    80. 

  80.     </div>
    81. 

  81.     <div class="ref">
    82. 

  82.       <div dir="ltr">
    83. 

  83.         <textarea rows="5" dir="rtl">
    84. 

  84. !123@
    85. 

  85. !123@
    86. 

  86. !123@
    87. 

  87. !123@
    88. 

  88.         </textarea>
    89. 

  89.       </div>
    90. 

  90.       <div dir="rtl">
    91. 

  91.         <textarea rows="5" dir="ltr">
    92. 

  92. @123!
    93. 

  93. @123!
    94. 

  94. @123!
    95. 

  95. @123!
    96. 

  96.         </textarea>
    97. 

  97.       </div>
    98. 

  98.     </div>
    99. 

  99.   </body>
    100. 

  100. </html>
    101.