layout/reftests/text-overflow/xulscroll.html

   1 <!-- Any copyright is dedicated to the Public Domain.
   2    - http://creativecommons.org/publicdomain/zero/1.0/ -->
   3 <!DOCTYPE HTML>
   4 <html class="reftest-wait"><head>
   5     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   6     <title>Testcase for bug 672944</title>
   7     <style type="text/css">
   8 @font-face {
   9   font-family: DejaVuSansMono;
  10   src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
  11 }
  12 html,body {
  13     color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
  14 }
  15
  16   .bacon {
  17     white-space:    nowrap;
  18     text-overflow:  ellipsis ellipsis;
  19     overflow:       hidden;
  20     width:          30ch;
  21     display:        -moz-box;
  22     background:     lime;
  23     margin-bottom:  1em;
  24   }
  25
  26   .auto {
  27     overflow-x:       auto;
  28     padding-bottom: 2ch;
  29     width:          29.5ch;
  30     text-overflow:  "" "";
  31   }
  32   .scroll {
  33     overflow:       auto;
  34     padding:        2ch;
  35     border:         3px solid black;
  36     text-overflow:  "" "";
  37   }
  38   .scroll2 {
  39     overflow:       auto;
  40     padding:        3ch;
  41     text-overflow:  "" "";
  42   }
  43   .scroll3 {
  44     overflow:       auto;
  45     padding:        2ch;
  46     text-indent:    -3ch;
  47     text-overflow:  "" "";
  48   }
  49   .scroll4 {
  50     overflow:       auto;
  51     padding:        2ch 0.2ch;
  52     text-overflow:  "" "";
  53   }
  54 span { background-color:white; }
  55
  56 #block-hover {
  57   position:fixed;
  58   top:0;left:0;width:100%;height:100%;
  59 }
  60     </style>
  61     <script type="text/javascript">
  62 function init() {
  63
  64   // The behaviour of this test may be subtly different when this code runs
  65   // before the first paint vs after the first paint. If you encounter
  66   // intermittent failures in this reftest, you might have luck turning it into
  67   // a reliable failure by wrapping this function body in a
  68   // requestAnimationFrame callback to force it to run after the first paint.
  69   // Alternatively you might need to force it to run before the first paint,
  70   // perhaps by running it inline (not as an onload handler) or something.
  71
  72   // workaround bug 936936
  73   document.body.style.display = "block";
  74   document.body.getBoundingClientRect();
  75
  76   document.getElementById('rtl_auto').scrollLeft=999999;
  77
  78   document.documentElement.removeAttribute('class');
  79 }
  80     </script>
  81 </head>
  82 <body onload="init();" style="display: inline;">
  83
  84 <div style="float:right;" dir="rtl">
  85   <div class="bacon"><span>1Beef hamburger bacon tri-tip, jowl biltong tail ribeye ham</span></div><br>
  86   <div id="rtl_auto" class="bacon auto"><span>2Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
  87   <div class="bacon scroll"><span>3Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
  88   <div class="bacon scroll2"><span>4Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
  89   <div class="bacon scroll3"><span>5Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
  90   <div class="bacon scroll4"><span>6Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
  91 </div>
  92
  93 <div>
  94   <div class="bacon"><span>1Beef hamburger bacon tri-tip, jowl biltong tail ribeye ham</span></div><br>
  95   <div class="bacon auto"><span>2Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
  96   <div class="bacon scroll"><span>3Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
  97   <div class="bacon scroll2"><span>4Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
  98   <div class="bacon scroll3"><span>5Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
  99   <div class="bacon scroll4"><span>6Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
 100 </div>
 101
 102 <div id="block-hover"></div>
 103 </body>
 104 </html>