scroll-rounding-ref.html (2339B)
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 overflow:auto; 21 width:100px; 22 height:50px; 23 border:1px solid black; 24 white-space:pre; 25 margin-left:90px; 26 margin-bottom:20px; 27 } 28 29 .rtl { 30 direction:rtl; margin-left:0; 31 } 32 .ltr { 33 direction:ltr; 34 } 35 36 .t1 {width:100.1px;} 37 .t2 {width:100.2px;} 38 .t4 {width:100.4px;} 39 40 s {position:absolute; background:black; z-index:1; } 41 #mask1 {top:0; left:60px; width:70px; height:100%; } 42 #mask2 {top:30px; left:0; width:100%; height:30px; } 43 #mask3 {top:100px; left:0; width:100%; height:30px; } 44 #mask4 {top:170px; left:0; width:100%; height:30px; } 45 #mask5 {top:240px; left:0; width:100%; height:30px; } 46 #mask6 {top:320px; left:0; width:100%; height:30px; } 47 #mask7 {top:390px; left:0; width:100%; height:30px; } 48 #mask8 {top:460px; left:0; width:100%; height:30px; } 49 #mask9 {top:530px; left:0; width:100%; height:30px; } 50 </style> 51 <script> 52 function scrolldivs() { 53 var divs = document.getElementsByTagName('div'); 54 for (i = 0; i < divs.length; ++i) { 55 if (window.getComputedStyle(divs[i]).direction == 'ltr') 56 divs[i].scrollLeft = 99999999; 57 else 58 divs[i].scrollLeft = -99999999; 59 } 60 document.documentElement.removeAttribute('class'); 61 } 62 </script> 63 64 </head><body onload="scrolldivs()"> 65 66 <s id="mask1"></s> 67 <s id="mask2"></s> 68 <s id="mask3"></s> 69 <s id="mask4"></s> 70 <s id="mask5"></s> 71 <s id="mask6"></s> 72 <s id="mask7"></s> 73 <s id="mask8"></s> 74 <s id="mask9"></s> 75 76 <div class="test">HelloKittyוסוכנויות</div> 77 <div class="test rtl">HelloKittyוסוכנויות</div> 78 <div class="test t1">HelloKittyוסוכנויות</div> 79 <div class="test rtl t1">HelloKittyוסוכנויות</div> 80 <div class="test t2">HelloKittyוסוכנויות</div> 81 <div class="test rtl t2">HelloKittyוסוכנויות</div> 82 <div class="test t4">HelloKittyוסוכנויות</div> 83 <div class="test rtl t4">HelloKittyוסוכנויות</div> 84 </body> 85 </html>