third_party/WebKit/LayoutTests/fast/css/text-overflow-input.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>text-overflow on form controls</title>
   5 <style>
   6 .ellipsis {
   7     text-overflow: ellipsis;
   8 }
   9 .clip {
  10     text-overflow: clip;
  11 }
  12 .rtl {
  13     direction: rtl;
  14 }
  15 </style>
  16 </head>
  17 <body>
  18     <p>This test is a basic check for using text-overflow.</p>
  19     <p>
  20         Apply "text-overflow:clip" to inputs. The following input should be clipped:<br/>
  21         <input type="text" class="clip" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  22         <input type="search" class="clip" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  23         <input type="text" class="clip" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  24         <input type="search" class="clip" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  25         <input type="password" class="clip" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /><br/>
  26         <input type="text" class="clip rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  27         <input type="search" class="clip rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  28         <input type="text" class="clip rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  29         <input type="search" class="clip rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  30         <input type="password" class="clip rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  31     </p>
  32     <p>
  33         Apply "text-overflow:ellipsis" to inputs. The following input should show an ellipsis:<br/>
  34         <input type="text" class="ellipsis" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  35         <input type="search" class="ellipsis" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  36         <input type="text" class="ellipsis" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  37         <input type="search" class="ellipsis" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  38         <input type="password" class="ellipsis" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /><br/>
  39         <input type="text" class="ellipsis rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  40         <input type="search" class="ellipsis rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  41         <input type="text" class="ellipsis rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  42         <input type="search" class="ellipsis rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  43         <input type="password" class="ellipsis rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  44     </p>
  45     <p>
  46         Dynamic style change text-overflow:<br/>
  47         Clip to ellipsis (should show ellipsis):
  48         <input type="text" class="text1" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: clip" />
  49         <input type="text" class="text1" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: clip" />
  50         <br/>
  51         Ellipsis to clip (should not show ellipsis):
  52         <input type="text" class="text2" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: ellipsis" />
  53         <input type="text" class="text2" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: ellipsis" />
  54         <br/>
  55         <script>
  56         function iterateOverElements(className, setValue) {
  57             var nodeList = document.getElementsByClassName(className);
  58             for (var i = 0; i < nodeList.length; ++i)
  59                 nodeList[i].style.textOverflow = setValue;
  60         }
  61         iterateOverElements("text1", "ellipsis");
  62         iterateOverElements("text2", "clip");
  63         </script>
  64     </p>
  65 </body>
  66 </html>