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

   1 <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=utf8">
   2 <head>
   3 <style>
   4 .testDiv {
   5     height: 308px;
   6     border: 1px solid black;
   7     white-space: nowrap;
   8     overflow: hidden;
   9     margin: 0 0 20px 0;
  10     text-align: center;
  11     text-overflow: ellipsis;
  12     -webkit-writing-mode: vertical-rl;
  13     -webkit-text-orientation: sideways-right;
  14     text-rendering: optimizeLegibility;
  15 }
  16
  17 .rtl {
  18     direction: rtl;
  19     unicode-bidi: bidi-override;
  20 }
  21 </style>
  22 </head>
  23 <body>
  24
  25 <h3>Single line</h3>
  26 <div class="testDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  27
  28 <h3>Multi line</h3>
  29 <div class="testDiv">
  30         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  31         orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  32     rem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  33         em ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  34 </div>
  35
  36 <h3>Containing replaced content</h3>
  37 <div class="testDiv">Lorem ipsum dolor sit amet, <img src="resources/greenbox.png"> consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  38
  39
  40 <h3>Containing replaced content blocking the ellipsis</h3>
  41 <div class="testDiv">Lorem ipsum dolor sit amet, consectetur ad<img src="resources/greenbox.png">ipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  42
  43
  44 <h3>Right-To-Left single line</h3>
  45 <div class="testDiv rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  46
  47
  48 <h3>Right-To-Left Multi line</h3>
  49 <div class="testDiv rtl">
  50         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  51         orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  52     rem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  53         em ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
  54 </div>
  55
  56
  57 <h3>Right-To-Left containing replaced content</h3>
  58 <div class="testDiv rtl">Lorem ipsum dolor sit amet, <img src="resources/greenbox.png"> consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  59
  60 <h3>Right-To-Left containing replaced content blocking the ellipsis</h3>
  61 <div class="testDiv rtl">Lorem ipsum dolor sit amet, consectetur ad<img src="resources/greenbox.png">ipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
  62
  63 </body>
  64 </html>