| <!doctype html> |
| <html> |
| <head> |
| <title>Composited scrolling ignores CSS clip</title> |
| <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1058870"> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src='../../resources/gesture-util.js'></script> |
| <style> |
| .behindscroller { |
| width: 200px; |
| height: 400px; |
| background: lightgreen; |
| position: absolute; |
| top: 50px; |
| left: 0; |
| } |
| .scroller { |
| width: 200px; |
| height: 400px; |
| overflow-y: scroll; |
| clip-path: circle(220px at 0 150px); |
| position: absolute; |
| top: 50px; |
| left: 0; |
| } |
| </style> |
| </head> |
| <body onload="onLoad()"> |
| <div id="behindscroller" class="behindscroller"></div> |
| <div id="scroller" class="scroller"> |
| <div id="forcescroll" style="height: 1000px; width: 100%; background: linear-gradient(grey, white)"></div> |
| </div> |
| You should not be able to wheel scroll with the mouse cursor in the green area. |
| </body> |
| <script> |
| function onLoad(){ |
| var behindscroller= document.getElementById("behindscroller"); |
| var behindscrollerRect = behindscroller.getBoundingClientRect(); |
| |
| async function scroll(x, y) { |
| const distance = 10; |
| const input_source = GestureSourceType.MOUSE_INPUT; |
| const direction = "down"; |
| const scroll_speed = SPEED_INSTANT; |
| |
| await smoothScroll(distance, x, y, input_source, direction, |
| scroll_speed, |
| true /* precise_scrolling_deltas */, |
| false /* scroll_by_page */); |
| } |
| |
| if(window.promise_test){ |
| promise_test(function() { |
| return new Promise(async function(resolve, reject) { |
| var x = behindscrollerRect.right - 10; |
| var y = behindscrollerRect.top + 5; |
| await scroll(x, y); |
| await conditionHolds( () => { |
| return scroller.scrollTop == 0; |
| }).then(resolve, reject); |
| }); |
| }, "No scrolling in clipped out region 1"); |
| |
| promise_test(function() { |
| return new Promise(async function(resolve, reject) { |
| var x = behindscrollerRect.left + 5; |
| var y = behindscrollerRect.bottom - 5; |
| await scroll(x, y); |
| await conditionHolds( () => { |
| return scroller.scrollTop == 0; |
| }).then(resolve, reject); |
| }); |
| }, "No scrolling in clipped out region 2"); |
| |
| promise_test(function() { |
| return new Promise(async function(resolve, reject) { |
| var x = behindscrollerRect.left + 10; |
| var y = behindscrollerRect.top + 10; |
| await scroll(x, y); |
| await conditionHolds( () => { |
| return scroller.scrollTop > 0; |
| }).then(resolve, reject); |
| }); |
| }, "Scrolled in scroller region not clipped out"); |
| |
| promise_test(function() { |
| return new Promise(async function(resolve, reject) { |
| var x = behindscrollerRect.right - 10; |
| var y = behindscrollerRect.top + 100; |
| await scroll(x, y); |
| await conditionHolds( () => { |
| return scroller.scrollTop > 0; |
| }).then(resolve, reject); |
| }); |
| }, "Scrolled in scrollbar region not clipped out"); |
| } |
| } |
| </script> |
| </html> |
