clip-path-scroll.html (928B)
1 <!DOCTYPE html> 2 <title>CSS Masking: Test clip-path property with overflow:scroll</title> 3 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-path-property"> 4 <link rel="match" href="reference/clip-path-scroll-ref.html"> 5 <html class="reftest-wait"> 6 <p>The test passes if there is a green square containing text (which can be scrolled 7 with mouse wheel or touch). No scrollbars should be seen.</p> 8 <div id="target" style="clip-path: polygon(10px 10px, 10px 100px, 100px 100px, 100px 10px); 9 width: 200px; height: 200px; overflow: scroll; background: red"> 10 <div style="position: relative; top: 100px; 11 width: 100px; height: 100px; background: green"> 12 </div> 13 <div style="height: 1000px"></div> 14 </div> 15 <script> 16 requestAnimationFrame(() => { 17 requestAnimationFrame(() => { 18 target.scrollTop = 100; 19 document.documentElement.classList.remove("reftest-wait"); 20 }); 21 }); 22 </script> 23 </html>