/webkit-efl/LayoutTests/fast/css/text-overflow-input.html

https://review.tizen.org/git/ · HTML · 66 lines · 66 code · 0 blank · 0 comment · 0 complexity · 173f481cb496218059397a5971e4d7aa MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <title>text-overflow on form controls</title>
    5. 

  5. <style>
    6. 

  6. .ellipsis {
    7. 

  7.     text-overflow: ellipsis;
    8. 

  8. }
    9. 

  9. .clip {
    10. 

  10.     text-overflow: clip;
    11. 

  11. }
    12. 

  12. .rtl {
    13. 

  13.     direction: rtl;
    14. 

  14. }
    15. 

  15. </style>
    16. 

  16. </head>
    17. 

  17. <body>
    18. 

  18.     <p>This test is a basic check for using text-overflow.</p>
    19. 

  19.     <p>
    20. 

  20.         Apply "text-overflow:clip" to inputs. The following input should be clipped:<br/>
    21. 

  21.         <input type="text" class="clip" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    22. 

  22.         <input type="search" class="clip" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    23. 

  23.         <input type="text" class="clip" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    24. 

  24.         <input type="search" class="clip" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    25. 

  25.         <input type="password" class="clip" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /><br/>
    26. 

  26.         <input type="text" class="clip rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    27. 

  27.         <input type="search" class="clip rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    28. 

  28.         <input type="text" class="clip rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    29. 

  29.         <input type="search" class="clip rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    30. 

  30.         <input type="password" class="clip rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    31. 

  31.     </p>
    32. 

  32.     <p>
    33. 

  33.         Apply "text-overflow:ellipsis" to inputs. The following input should show an ellipsis:<br/>
    34. 

  34.         <input type="text" class="ellipsis" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    35. 

  35.         <input type="search" class="ellipsis" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    36. 

  36.         <input type="text" class="ellipsis" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    37. 

  37.         <input type="search" class="ellipsis" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    38. 

  38.         <input type="password" class="ellipsis" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /><br/>
    39. 

  39.         <input type="text" class="ellipsis rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    40. 

  40.         <input type="search" class="ellipsis rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    41. 

  41.         <input type="text" class="ellipsis rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    42. 

  42.         <input type="search" class="ellipsis rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    43. 

  43.         <input type="password" class="ellipsis rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    44. 

  44.     </p>
    45. 

  45.     <p>
    46. 

  46.         Dynamic style change text-overflow:<br/>
    47. 

  47.         Clip to ellipsis (should show ellipsis):
    48. 

  48.         <input type="text" class="text1" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: clip" />
    49. 

  49.         <input type="text" class="text1" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: clip" />
    50. 

  50.         <br/>
    51. 

  51.         Ellipsis to clip (should not show ellipsis):
    52. 

  52.         <input type="text" class="text2" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: ellipsis" />
    53. 

  53.         <input type="text" class="text2" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: ellipsis" />
    54. 

  54.         <br/>
    55. 

  55.         <script>
    56. 

  56.         function iterateOverElements(className, setValue) {
    57. 

  57.             var nodeList = document.getElementsByClassName(className);
    58. 

  58.             for (var i = 0; i < nodeList.length; ++i)
    59. 

  59.                 nodeList[i].style.textOverflow = setValue;
    60. 

  60.         }
    61. 

  61.         iterateOverElements("text1", "ellipsis");
    62. 

  62.         iterateOverElements("text2", "clip");
    63. 

  63.         </script>
    64. 

  64.     </p>
    65. 

  65. </body>
    66. 

  66. </html>
    67.