masklayer-2.html (1199B)
1 <!DOCTYPE html> 2 <html lang="en" reftest-async-scroll> 3 <meta charset="utf-8"> 4 <title>Moving a layer in a box with a rounded clip shouldn't invalidate.</title> 5 6 <style> 7 8 #scrollbox { 9 position: absolute; 10 top: 50px; 11 left: 50px; 12 width: 300px; 13 height: 200px; 14 background-color: #DDD; 15 overflow: auto; 16 border-radius: 10px; 17 } 18 19 #scrollable { 20 width: 600px; 21 } 22 23 #scrolledLayer { 24 margin-top: 50px; 25 margin-left: 100px; 26 box-model: border-box; 27 border: 1px solid lime; 28 width: 100px; 29 height: 100px; 30 } 31 32 </style> 33 34 <body> 35 36 <div id="scrollbox" reftest-displayport-x="0" 37 reftest-displayport-y="0" 38 reftest-displayport-w="300" 39 reftest-displayport-h="200"> 40 <div id="scrollable"> 41 <div id="scrolledLayer" class="reftest-no-paint"></div> 42 </div> 43 </div> 44 45 <script> 46 47 var scrollbox = document.getElementById("scrollbox"); 48 49 function doTest() { 50 scrollbox.scrollLeft = 0; 51 document.documentElement.removeAttribute("class"); 52 } 53 54 // Make #scrollbox have active scrolling 55 scrollbox.scrollLeft = 60; 56 scrollbox.offsetLeft; 57 scrollbox.scrollLeft = 40; 58 scrollbox.offsetLeft; 59 60 document.addEventListener("MozReftestInvalidate", doTest); 61 62 </script>