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

   1 <!DOCTYPE html>
   2 <head>
   3 <meta charset="utf-8">
   4 <style>
   5 body { overflow: hidden; }
   6 .testDiv {
   7     width: 180px;
   8     height: 20px;
   9     border: 1px solid black;
  10     white-space: nowrap;
  11     overflow: hidden;
  12     margin: 0 0 20px 0;
  13 }
  14
  15 .forcertl {
  16     direction: rtl;
  17     unicode-bidi: bidi-override;
  18 }
  19
  20 .ellipsis {
  21     text-overflow:ellipsis;
  22 }
  23 </style>
  24 </head>
  25 <body>
  26
  27 This tests checks that the text-overflow:ellipsis property is handled correctly
  28 for bidi text.<br><br>
  29
  30 Pass if the ellipsis do not overlap the text and the underlines for the links are
  31 placed under the text and not the ellipsis.
  32 <br><br>
  33
  34 RTL:
  35 <div class="testDiv ellipsis" dir=rtl>
  36 כשהטקסט ערוך מדי נרצה להוסיף אליפסות בסוף שורה
  37 </div>
  38
  39 RTL Override:
  40 <div class="testDiv forcertl ellipsis" dir=rtl>
  41 Lorem ipsum dolor sit amet, consectetur adipiscing
  42 </div>
  43
  44 RTL link:
  45 <div class="testDiv forcertl ellipsis" dir=rtl>
  46 <a href=#>Lorem ipsum dolor sit amet, consectetur adipiscing</a>
  47 </div>
  48
  49 RTL with ltr content:
  50 <div class="testDiv ellipsis" dir=rtl>
  51 Lorem ipsum dolor sit amet, consectetur adipiscing
  52 </div>
  53
  54 RTL link with ltr content:
  55 <div class="testDiv ellipsis" dir=rtl>
  56 <a href=#>Lorem ipsum dolor sit amet, consectetur adipiscing</a>
  57 </div>
  58
  59 LTR link:
  60 <div class="testDiv ellipsis" dir=ltr>
  61 <a href=#>Lorem ipsum dolor sit amet, consectetur adipiscing</a>
  62 </div>
  63
  64 LTR:
  65 <div class="testDiv ellipsis" dir=ltr>
  66 Lorem ipsum dolor sit amet, consectetur adipiscing
  67 </div>
  68
  69 LTR with rtl content:
  70 <div class="testDiv ellipsis" dir=ltr>
  71 כשהטקסט ערוך מדי נרצה להוסיף אליפסות בסוף שורה
  72 </div>
  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>