helper_hittest_pointerevents_svg.html (8195B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Hit-testing a scrollframe covered by nonrectangular and pointer-events:none things</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 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 10 <style> 11 .scroller { 12 overflow: scroll; 13 width: 100px; 14 height: 100px; 15 } 16 17 .scroller > div { 18 height: 200px; 19 background-image: linear-gradient(#fff,#000); 20 } 21 </style> 22 </head> 23 <body> 24 <div id="testcase1"> 25 <div style="width: 100px;height: 50px;display: inline-block;"> 26 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="overflow: visible;background-color: #aa6666;"> 27 <circle cx="80" cy="50" r="50"></circle> 28 </svg> 29 </div> 30 <div class="scroller" style="display: inline-block;"><div></div></div> 31 <div style="width: 100px; height: 100px; display: inline-block; position:relative;"> 32 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="overflow: visible;background-color: #aa6666;"> 33 <circle cx="20" cy="50" r="50"></circle> 34 </svg> 35 </div> 36 </div> 37 38 <div id="testcase2" style="position:relative; height: 110px;"> 39 <div style="width: 100px;height: 100px;position:absolute;pointer-events:none;left: 25px;"> 40 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="background-color: #aa6666;pointer-events: none;"> 41 <circle cx="75" cy="50" r="50" style="pointer-events: auto;"></circle> 42 </svg> 43 </div> 44 <div class="scroller" style="position: absolute; left: 100px;"><div></div></div> 45 <div style="width: 100px;height: 100px; position:absolute;pointer-events:none;left: 175px;"> 46 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="background-color: #aa6666;pointer-events: none;"> 47 <circle cx="45" cy="50" r="50" style="pointer-events: auto;"></circle> 48 </svg> 49 </div> 50 </div> 51 52 <div id="testcase3"> 53 <div style="width: 100px;height: 50px;display: inline-block;"> 54 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="overflow: visible;background-color: #aa6666;"> 55 <rect x="25" y="25" width="100" height="50"></rect> 56 </svg> 57 </div> 58 <div class="scroller" style="display: inline-block;"><div></div></div> 59 <div style="width: 100px; height: 100px; display: inline-block; position:relative;"> 60 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="overflow: visible;background-color: #aa6666;"> 61 <rect x="-30" y="25" width="100" height="50"></rect> 62 </svg> 63 </div> 64 </div> 65 66 <div id="testcase4" style="position:relative; height: 110px;"> 67 <div style="width: 100px;height: 100px;position:absolute;pointer-events:none;left: 25px;"> 68 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="background-color: #aa6666;pointer-events: none;"> 69 <rect x="25" y="25" width="100" height="50" style="pointer-events: auto;"></rect> 70 </svg> 71 </div> 72 <div class="scroller" style="position: absolute; left: 100px;"><div></div></div> 73 <div style="width: 100px;height: 100px; position:absolute;pointer-events:none;left: 175px;"> 74 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="background-color: #aa6666;pointer-events: none;"> 75 <rect x="-25" y="25" width="100" height="50" style="pointer-events: auto;"></rect> 76 </svg> 77 </div> 78 </div> 79 80 <div style="width: 40em;"> 81 Each of the gradients should be scrollable, except where the black stuff on the right cover them. 82 The brown square should not prevent scrolling. Similarly, the content on the left (which goes 83 underneath the scroller) shouldn't matter. 84 </div> 85 <script> 86 87 async function test() { 88 var config = getHitTestConfig(); 89 var utils = config.utils; 90 91 // layerize the scrollable frames 92 for (var scroller of document.querySelectorAll(".scroller")) { 93 utils.setDisplayPortForElement(0, 0, 100, 200, scroller, 1); 94 } 95 await promiseApzFlushedRepaints(); 96 97 var rootViewId = utils.getViewId(document.scrollingElement); 98 for (var testId = 1; testId <= 4; testId++) { 99 var target = document.querySelector(`#testcase${testId} .scroller`); 100 var scrollerViewId = utils.getViewId(target); 101 checkHitResult(hitTest(centerOf(target)), 102 APZHitResultFlags.VISIBLE, 103 scrollerViewId, 104 utils.getLayersId(), 105 `center of scroller in testcase ${testId}`); 106 107 var bounds = target.getBoundingClientRect(); 108 var verticalScrollbarWidth = bounds.width - target.clientWidth; 109 var horizontalScrollbarHeight = bounds.height - target.clientHeight; 110 111 // these points should all hit the target scroller 112 checkHitResult(hitTest({x: bounds.x + 1, y: bounds.y + 1}), 113 APZHitResultFlags.VISIBLE, 114 scrollerViewId, 115 utils.getLayersId(), 116 `top left of scroller in testcase ${testId}`); 117 checkHitResult(hitTest({x: bounds.x + 1, y: bounds.y + (bounds.height / 2)}), 118 APZHitResultFlags.VISIBLE, 119 scrollerViewId, 120 utils.getLayersId(), 121 `middle left of scroller in testcase ${testId}`); 122 checkHitResult(hitTest({x: bounds.x + 1, y: bounds.bottom - horizontalScrollbarHeight - 1}), 123 APZHitResultFlags.VISIBLE, 124 scrollerViewId, 125 utils.getLayersId(), 126 `bottom left (excluding scrollbar) of scroller in testcase ${testId}`); 127 if (horizontalScrollbarHeight > 0) { 128 checkHitResult(hitTest({x: bounds.x + 1, y: bounds.bottom - 1}), 129 APZHitResultFlags.VISIBLE | APZHitResultFlags.SCROLLBAR, 130 scrollerViewId, 131 utils.getLayersId(), 132 `bottom left of scroller in testcase ${testId}`); 133 } 134 135 // With the first two cases (circle masks) WebRender emits dispatch-to-content 136 // regions for the right side, so for now we just test for that. 137 // Eventually WebRender should be able to stop emitting DTC 138 // and we can update this test to be more precise. 139 // For the two rectangular test cases we get precise results rather than 140 // dispatch-to-content. 141 if (testId == 1 || testId == 2) { 142 checkHitResult(hitTest({x: bounds.right - verticalScrollbarWidth - 1, y: bounds.y + 1}), 143 APZHitResultFlags.VISIBLE | APZHitResultFlags.IRREGULAR_AREA, 144 rootViewId, 145 utils.getLayersId(), 146 `top right of scroller in testcase ${testId}`); 147 checkHitResult(hitTest({x: bounds.right - verticalScrollbarWidth - 1, y: bounds.bottom - horizontalScrollbarHeight - 1}), 148 APZHitResultFlags.VISIBLE | APZHitResultFlags.IRREGULAR_AREA, 149 rootViewId, 150 utils.getLayersId(), 151 `bottom right of scroller in testcase ${testId}`); 152 } else { 153 checkHitResult(hitTest({x: bounds.right - verticalScrollbarWidth - 1, y: bounds.y + 1}), 154 APZHitResultFlags.VISIBLE, 155 scrollerViewId, 156 utils.getLayersId(), 157 `top right of scroller in testcase ${testId}`); 158 checkHitResult(hitTest({x: bounds.right - verticalScrollbarWidth - 1, y: bounds.bottom - horizontalScrollbarHeight - 1}), 159 APZHitResultFlags.VISIBLE, 160 scrollerViewId, 161 utils.getLayersId(), 162 `bottom right of scroller in testcase ${testId}`); 163 } 164 165 checkHitResult(hitTest({x: bounds.right - 1, y: bounds.y + (bounds.height / 2)}), 166 APZHitResultFlags.VISIBLE | APZHitResultFlags.IRREGULAR_AREA, 167 rootViewId, 168 utils.getLayersId(), 169 `middle right of scroller in testcase ${testId}`); 170 } 171 } 172 173 waitUntilApzStable() 174 .then(test) 175 .then(subtestDone, subtestFailed); 176 </script> 177 </body></html>