| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>text-overflow on form controls</title> |
| <style> |
| .ellipsis { |
| text-overflow: ellipsis; |
| } |
| .clip { |
| text-overflow: clip; |
| } |
| .rtl { |
| direction: rtl; |
| } |
| </style> |
| </head> |
| <body> |
| <p>This test is a basic check for using text-overflow.</p> |
| <p> |
| Apply "text-overflow:clip" to inputs. The following input should be clipped:<br/> |
| <input type="text" class="clip" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="search" class="clip" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="text" class="clip" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="search" class="clip" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="password" class="clip" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /><br/> |
| <input type="text" class="clip rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="search" class="clip rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="text" class="clip rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="search" class="clip rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="password" class="clip rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| </p> |
| <p> |
| Apply "text-overflow:ellipsis" to inputs. The following input should show an ellipsis:<br/> |
| <input type="text" class="ellipsis" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="search" class="ellipsis" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="text" class="ellipsis" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="search" class="ellipsis" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="password" class="ellipsis" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /><br/> |
| <input type="text" class="ellipsis rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="search" class="ellipsis rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="text" class="ellipsis rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="search" class="ellipsis rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| <input type="password" class="ellipsis rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /> |
| </p> |
| <p> |
| Dynamic style change text-overflow:<br/> |
| Clip to ellipsis (should show ellipsis): |
| <input type="text" class="text1" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: clip" /> |
| <input type="text" class="text1" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: clip" /> |
| <br/> |
| Ellipsis to clip (should not show ellipsis): |
| <input type="text" class="text2" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: ellipsis" /> |
| <input type="text" class="text2" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: ellipsis" /> |
| <br/> |
| <script> |
| function iterateOverElements(className, setValue) { |
| var nodeList = document.getElementsByClassName(className); |
| for (var i = 0; i < nodeList.length; ++i) |
| nodeList[i].style.textOverflow = setValue; |
| } |
| iterateOverElements("text1", "ellipsis"); |
| iterateOverElements("text2", "clip"); |
| </script> |
| </p> |
| </body> |
| </html> |
