scroll-rounding.html (2365B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/licenses/publicdomain/ 5 6 Test: 1px scroll rounding at the end position 7 --> 8 <html class="reftest-wait"><head> 9 <title>text-overflow: scroll rounding</title> 10 <style type="text/css"> 11 @font-face { 12 font-family: DejaVuSansMono; 13 src: url(../fonts/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 .test { 20 text-overflow:ellipsis; 21 overflow:auto; 22 width:100px; 23 height:50px; 24 border:1px solid black; 25 white-space:pre; 26 margin-left:90px; 27 margin-bottom:20px; 28 } 29 30 .rtl { 31 direction:rtl; margin-left:0; 32 } 33 .ltr { 34 direction:ltr; 35 } 36 37 .t1 {width:100.1px;} 38 .t2 {width:100.2px;} 39 .t4 {width:100.4px;} 40 41 s {position:absolute; background:black; z-index:1; } 42 #mask1 {top:0; left:60px; width:70px; height:100%; } 43 #mask2 {top:30px; left:0; width:100%; height:30px; } 44 #mask3 {top:100px; left:0; width:100%; height:30px; } 45 #mask4 {top:170px; left:0; width:100%; height:30px; } 46 #mask5 {top:240px; left:0; width:100%; height:30px; } 47 #mask6 {top:320px; left:0; width:100%; height:30px; } 48 #mask7 {top:390px; left:0; width:100%; height:30px; } 49 #mask8 {top:460px; left:0; width:100%; height:30px; } 50 #mask9 {top:530px; left:0; width:100%; height:30px; } 51 </style> 52 <script> 53 function scrolldivs() { 54 var divs = document.getElementsByTagName('div'); 55 for (i = 0; i < divs.length; ++i) { 56 if (window.getComputedStyle(divs[i]).direction == 'ltr') 57 divs[i].scrollLeft = 99999999; 58 else 59 divs[i].scrollLeft = -99999999; 60 } 61 document.documentElement.removeAttribute('class'); 62 } 63 </script> 64 65 </head><body onload="scrolldivs()"> 66 67 <s id="mask1"></s> 68 <s id="mask2"></s> 69 <s id="mask3"></s> 70 <s id="mask4"></s> 71 <s id="mask5"></s> 72 <s id="mask6"></s> 73 <s id="mask7"></s> 74 <s id="mask8"></s> 75 <s id="mask9"></s> 76 77 <div class="test">HelloKittyוסוכנויות</div> 78 <div class="test rtl">HelloKittyוסוכנויות</div> 79 <div class="test t1">HelloKittyוסוכנויות</div> 80 <div class="test rtl t1">HelloKittyוסוכנויות</div> 81 <div class="test t2">HelloKittyוסוכנויות</div> 82 <div class="test rtl t2">HelloKittyוסוכנויות</div> 83 <div class="test t4">HelloKittyוסוכנויות</div> 84 <div class="test rtl t4">HelloKittyוסוכנויות</div> 85 </body> 86 </html>