layout/reftests/text-overflow/single-value-ref.html

   1 <!DOCTYPE HTML>
   2 <!--
   3     Any copyright is dedicated to the Public Domain.
   4     http://creativecommons.org/licenses/publicdomain/
   5
   6     Test: text-overflow: <single value>, scrolled and non-scrolled tests, (bug 684266)
   7 -->
   8 <html class="reftest-wait"><head>
   9 <title>text-overflow: &lt;single value&gt;, scrolled and non-scrolled tests, (bug 684266)</title>
  10 <style type="text/css">
  11 @font-face {
  12   font-family: DejaVuSansMono;
  13   src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
  14 }
  15 html,body {
  16     color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
  17 }
  18
  19 body {padding:10px 40px;}
  20
  21 div {
  22   width:100px;
  23   white-space:nowrap;
  24 }
  25 .hidden {overflow:hidden}
  26 .auto {overflow:auto}
  27 .autolong {overflow:auto; width:100%;}
  28 .scroll {overflow:scroll}
  29
  30 .ltr { direction:ltr; unicode-bidi: bidi-override; }
  31 .rtl { direction:rtl; unicode-bidi: bidi-override; }
  32
  33 .ltr.p { text-indent: -5px; padding-left: 40px; } /* overflow into padding, but not outside the padding edge */
  34 .rtl.p { text-indent: -5px; padding-right: 40px; } /* overflow into padding, but not outside the padding edge */
  35
  36 .s { text-indent: -5px; } /* overflow start edge outside the padding edge */
  37
  38 div.ltr {
  39   text-overflow: clip ellipsis;
  40 }
  41 div.rtl {
  42   text-overflow: ellipsis clip;
  43 }
  44
  45 </style>
  46
  47 <script>
  48 function scrolldivs() {
  49  var divs = document.getElementsByTagName('div');
  50   for (i = 0; i < divs.length; ++i) {
  51     var elm = divs[i];
  52     if (elm.hasAttribute('scroll')) {
  53       if (window.getComputedStyle(elm).direction == 'ltr')
  54         elm.scrollLeft = 8;
  55       else
  56         elm.scrollLeft = -8;
  57     }
  58   }
  59   document.documentElement.removeAttribute('class');
  60 }
  61 window.addEventListener("MozReftestInvalidate", scrolldivs);
  62 </script>
  63 </head>
  64 <body>
  65
  66     <div class="ltr start p hidden">A long line that does not break (overflow:hidden)</div>
  67     <div class="ltr start p auto">A long line that does not break (overflow:auto)</div>
  68     <div class="ltr start p autolong">A long line that does not break (overflow:auto)</div>
  69     <div class="ltr start p scroll">A long line that does not break (overflow:scroll)</div>
  70     <div class="ltr start s hidden">A long line that does not break (overflow:hidden)</div>
  71     <div class="ltr start s auto">A long line that does not break (overflow:auto)</div>
  72     <div class="ltr start s autolong">A long line that does not break (overflow:auto)</div>
  73     <div class="ltr start s scroll">A long line that does not break (overflow:scroll)</div>
  74
  75     <div scroll class="ltr start p hidden">A long line that does not break (overflow:hidden)</div>
  76     <div scroll class="ltr start p auto">A long line that does not break (overflow:auto)</div>
  77     <div scroll class="ltr start p autolong">A long line that does not break (overflow:auto)</div>
  78     <div scroll class="ltr start p scroll">A long line that does not break (overflow:scroll)</div>
  79     <div scroll class="ltr start s hidden">A long line that does not break (overflow:hidden)</div>
  80     <div scroll class="ltr start s auto">A long line that does not break (overflow:auto)</div>
  81     <div scroll class="ltr start s autolong">A long line that does not break (overflow:auto)</div>
  82     <div scroll class="ltr start s scroll">A long line that does not break (overflow:scroll)</div>
  83
  84 <div class="rtl" style="float:right">
  85     <div class="rtl start p hidden">A long line that does not break (overflow:hidden)</div>
  86     <div class="rtl start p auto">A long line that does not break (overflow:auto)</div>
  87     <div class="rtl start p autolong">A long line that does not break (overflow:auto)</div>
  88     <div class="rtl start p scroll">A long line that does not break (overflow:scroll)</div>
  89     <div class="rtl start s hidden">A long line that does not break (overflow:hidden)</div>
  90     <div class="rtl start s auto">A long line that does not break (overflow:auto)</div>
  91     <div class="rtl start s autolong">A long line that does not break (overflow:auto)</div>
  92     <div class="rtl start s scroll">A long line that does not break (overflow:scroll)</div>
  93
  94     <div scroll class="rtl start p hidden">A long line that does not break (overflow:hidden)</div>
  95     <div scroll class="rtl start p auto">A long line that does not break (overflow:auto)</div>
  96     <div scroll class="rtl start p autolong">A long line that does not break (overflow:auto)</div>
  97     <div scroll class="rtl start p scroll">A long line that does not break (overflow:scroll)</div>
  98     <div scroll class="rtl start s hidden">A long line that does not break (overflow:hidden)</div>
  99     <div scroll class="rtl start s auto">A long line that does not break (overflow:auto)</div>
 100     <div scroll class="rtl start s autolong">A long line that does not break (overflow:auto)</div>
 101     <div scroll class="rtl start s scroll">A long line that does not break (overflow:scroll)</div>
 102 </div>
 103
 104
 105 </body>
 106 </hml>