helper_hittest_hoisted_scrollinfo.html (2795B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Hit-testing on a scrollframe forced to be inactive by being inside a filter</title> 5 <script type="application/javascript" src="apz_test_utils.js"></script> 6 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 7 <script src="/tests/SimpleTest/paint_listener.js"></script> 8 <meta name="viewport" content="width=device-width"/> 9 <style> 10 #withfilter { 11 filter: url(#menushadow); 12 } 13 14 #scroller { 15 width: 300px; 16 height: 500px; 17 overflow: scroll; 18 } 19 20 .spacer { 21 height: 1000px; 22 background-image: linear-gradient(red, blue); 23 } 24 </style> 25 </head> 26 <body> 27 <div id="withfilter"> 28 <div id="scroller"> 29 <div class="spacer"></div> 30 </div> 31 </div> 32 <!-- the SVG below copied directly from the Gecko Profiler code that 33 demonstrated the original bug. It basically generates a bit of a "drop 34 shadow" effect on the div it's applied to. Original SVG can be found at 35 https://github.com/firefox-devtools/profiler/blame/624f71bce5469cf4f8b2be720e929ba69fa6bfdc/res/img/svg/shadowfilter.svg --> 36 <svg xmlns="http://www.w3.org/2000/svg"> 37 <defs> 38 <filter id="menushadow" color-interpolation-filters="sRGB" x="-10" y="-10" width="30" height="30"> 39 <feComponentTransfer in="SourceAlpha"> 40 <feFuncA type="linear" slope="0.3"/> 41 </feComponentTransfer> 42 <feGaussianBlur stdDeviation="5"/> 43 <feOffset dy="10" result="shadow"/> 44 <feComponentTransfer in="SourceAlpha"> 45 <feFuncA type="linear" slope="0.1"/> 46 </feComponentTransfer> 47 <feMorphology operator="dilate" radius="0.5" result="rim"/> 48 <feMerge><feMergeNode in="shadow"/><feMergeNode in="rim"/></feMerge> 49 <feComposite operator="arithmetic" in2="SourceAlpha" k2="1" k3="-0.1"/> 50 <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge> 51 </filter> 52 </defs> 53 </svg> 54 </body> 55 <script type="application/javascript"> 56 async function test() { 57 var config = getHitTestConfig(); 58 var utils = config.utils; 59 60 // layerize the scrollable frame. It's inside the filter so this 61 // shouldn't actually change the fact that it will still be main-thread 62 // scrolled. 63 var scroller = document.querySelector("#scroller"); 64 utils.setDisplayPortForElement(0, 0, 300, 500, scroller, 1); 65 await promiseApzFlushedRepaints(); 66 67 var expectedHitFlags = 68 APZHitResultFlags.VISIBLE | APZHitResultFlags.INACTIVE_SCROLLFRAME; 69 checkHitResult(hitTest(centerOf(scroller)), 70 expectedHitFlags, 71 utils.getViewId(scroller), 72 utils.getLayersId(), 73 "scrollable content inside a filter"); 74 } 75 76 waitUntilApzStable() 77 .then(test) 78 .then(subtestDone, subtestFailed); 79 80 </script> 81 </html>