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

   1 <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=utf8">
   2 <head>
   3 <style>
   4 body { overflow: hidden; }
   5 .testDiv {
   6     width: 180px;
   7     height: 20px;
   8     border: 1px solid black;
   9     white-space: nowrap;
  10     overflow: hidden;
  11     margin: 0 0 20px 0;
  12 }
  13
  14 .forcertl {
  15     direction: rtl;
  16     unicode-bidi: bidi-override;
  17 }
  18
  19 .ellipsis {
  20     text-overflow:ellipsis;
  21 }
  22 </style>
  23 </head>
  24 <body>
  25
  26 This tests checks that the text-overflow:ellipsis property is handled correctly
  27 for bidi text.<br><br>
  28
  29 Pass if the ellipsis do not overlap the text and the underlines for the links are
  30 placed under the text and not the ellipsis.
  31 <br><br>
  32
  33 RTL:
  34 <div class="testDiv ellipsis" dir=rtl>
  35 כשהטקסט ערוך מדי נרצה להוסיף אליפסות בסוף שורה
  36 </div>
  37
  38 RTL Override:
  39 <div class="testDiv forcertl ellipsis" dir=rtl>
  40 Lorem ipsum dolor sit amet, consectetur adipiscing
  41 </div>
  42
  43 RTL link:
  44 <div class="testDiv forcertl ellipsis" dir=rtl>
  45 <a href=#>Lorem ipsum dolor sit amet, consectetur adipiscing</a>
  46 </div>
  47
  48 RTL with ltr content:
  49 <div class="testDiv ellipsis" dir=rtl>
  50 Lorem ipsum dolor sit amet, consectetur adipiscing
  51 </div>
  52
  53 RTL link with ltr content:
  54 <div class="testDiv ellipsis" dir=rtl>
  55 <a href=#>Lorem ipsum dolor sit amet, consectetur adipiscing</a>
  56 </div>
  57
  58 LTR link:
  59 <div class="testDiv ellipsis" dir=ltr>
  60 <a href=#>Lorem ipsum dolor sit amet, consectetur adipiscing</a>
  61 </div>
  62
  63 LTR:
  64 <div class="testDiv ellipsis" dir=ltr>
  65 Lorem ipsum dolor sit amet, consectetur adipiscing
  66 </div>
  67
  68 LTR with rtl content:
  69 <div class="testDiv ellipsis" dir=ltr>
  70 כשהטקסט ערוך מדי נרצה להוסיף אליפסות בסוף שורה
  71 </div>
  72
  73
  74 LTR with forced rtl content:
  75 <div class="testDiv ellipsis" dir=ltr>
  76 <span class=forcertl dir=rtl>
  77 Lorem ipsum dolor sit amet, consectetur adipiscing
  78 </span>
  79 </div>
  80
  81 LTR link with rtl content:
  82 <div class="testDiv ellipsis" dir=ltr>
  83 <a href=#>
  84 כשהטקסט ערוך מדי נרצה להוסיף אליפסות בסוף שורה
  85 </a>
  86 </div>
  87
  88 LTR link with forced rtl content:
  89 <div class="testDiv ellipsis" dir=ltr>
  90 <a href=#>
  91 <span class=forcertl dir=rtl>
  92 Lorem ipsum dolor sit amet, consectetur adipiscing
  93 </span>
  94 </a>
  95 </div>