709477-1.html (2187B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>glyph clipping (test)</title> 5 <style> 6 #clip { position: absolute; 7 overflow: hidden; 8 font-size: 16px; 9 width: 500px; 10 height: 300px;} 11 /* Offsets keep the text far enough away from clip boundaries so that 12 cairo knows the text is within the clip. Non-unit alpha color makes 13 the bug show even without antialiasing. */ 14 #text { position: absolute; 15 left: 100px; 16 top: 100px; 17 color: rgba(0,0,0,0.4)} 18 #cover { position: absolute; 19 top: 90px; 20 left: 120px; 21 height: 50px; 22 width: 60px; 23 background: green; } 24 #mod { position: absolute; 25 top: 400px; 26 left: 0px; 27 height: 2000px; 28 width: 600px; 29 background: green; } 30 </style> 31 <script> 32 33 function doPaint() 34 { 35 window.addEventListener("MozAfterPaint", doScroll); 36 var cover = document.getElementById("cover"); 37 cover.style.background = "transparent"; 38 var mod = document.getElementById("mod"); 39 mod.style.background = "transparent"; 40 } 41 42 async function doScroll() 43 { 44 window.removeEventListener("MozAfterPaint", doScroll); 45 // wait to flush out any more paints 46 await new Promise(resolve => requestAnimationFrame(resolve)); 47 await new Promise(resolve => requestAnimationFrame(resolve)); 48 49 scrollTo(0,1); 50 // scrolling doesn't seem to generate a mozafterpaint, but it should be 51 // handled after one refresh driver tick, and then the reftest harness will 52 // handle making sure everything is sync'ed up for the final snapshot. 53 await new Promise(resolve => requestAnimationFrame(resolve)); 54 await new Promise(resolve => requestAnimationFrame(resolve)); 55 setTimeout(endTest,0); 56 } 57 58 function endTest() 59 { 60 document.documentElement.removeAttribute("class"); 61 } 62 63 document.addEventListener("MozReftestInvalidate", doPaint); 64 </script> 65 </head> 66 <body> 67 <div id="clip"> 68 <div id="text"> 69 Some text that was</br> 70 initially partially covered.</br> 71 </div> 72 </div> 73 <div id="cover"> 74 </div> 75 <div id="mod"> 76 </div> 77 </body> 78 </html>