helper_hittest_bug1730606-2.html (5342B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>A more involved hit testing test that involves css and async transforms</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 body, html { 11 margin: 0; 12 padding: 0; 13 width: 100%; 14 height: 100%; 15 } 16 .scrollable-content { 17 width: 200%; 18 height: 200%; 19 } 20 #layer1 { 21 position: absolute; 22 top: 20px; 23 left: 20px; 24 width: 100px; 25 height: 100px; 26 background: red; 27 overflow: auto; 28 } 29 #layer2 { 30 position: absolute; 31 top: 140px; 32 left: 40px; 33 width: 100px; 34 height: 100px; 35 background: green; 36 transform: scale(2.0, 1.0); 37 transform-origin: 0 0; 38 } 39 #layer3 { 40 position: absolute; 41 top: 0px; 42 left: 0px; 43 width: 100px; 44 height: 100px; 45 background: yellow; 46 overflow: auto; 47 } 48 </style> 49 </head> 50 <body> 51 <div id="layer1"> 52 <div class="scrollable-content"></div> 53 </div> 54 <div id="layer2"> 55 <div id="layer3"> 56 <div class="scrollable-content"></div> 57 </div> 58 </div> 59 <div class="scrollable-content"></div> 60 </body> 61 <script type="application/javascript"> 62 63 async function test() { 64 var config = getHitTestConfig(); 65 var utils = config.utils; 66 67 let subframeHitInfo = APZHitResultFlags.VISIBLE; 68 if (!config.activateAllScrollFrames) { 69 subframeHitInfo |= APZHitResultFlags.INACTIVE_SCROLLFRAME; 70 } 71 72 // Hit an area that's clearly on the root and not any of the child layers. 73 checkHitResult(hitTest({x: 150, y: 70}), 74 APZHitResultFlags.VISIBLE, 75 utils.getViewId(document.scrollingElement), 76 utils.getLayersId(), 77 "root scroller"); 78 79 // Hit an area on the root that would be on layer3 if layer2 weren't transformed. 80 checkHitResult(hitTest({x: 30, y: 190}), 81 APZHitResultFlags.VISIBLE, 82 utils.getViewId(document.scrollingElement), 83 utils.getLayersId(), 84 "root scroller (area revealed by transform)"); 85 86 // Hit an area on layer1. 87 checkHitResult(hitTest({x: 70, y: 70}), 88 subframeHitInfo, 89 (config.activateAllScrollFrames ? utils.getViewId(layer1) 90 : utils.getViewId(document.scrollingElement)), 91 utils.getLayersId(), 92 "layer1"); 93 94 // Hit an area on layer3. 95 checkHitResult(hitTest({x: 60, y: 190}), 96 subframeHitInfo, 97 (config.activateAllScrollFrames ? utils.getViewId(layer3) 98 : utils.getViewId(document.scrollingElement)), 99 utils.getLayersId(), 100 "layer3"); 101 102 // Hit an area on layer3 that would be on the root if layer2 weren't transformed. 103 checkHitResult(hitTest({x: 150, y: 190}), 104 subframeHitInfo, 105 (config.activateAllScrollFrames ? utils.getViewId(layer3) 106 : utils.getViewId(document.scrollingElement)), 107 utils.getLayersId(), 108 "layer3"); 109 110 // Scroll the root upwards by 120 pixels. This scrolls layer1 out of view. 111 utils.setAsyncScrollOffset(document.scrollingElement, 0, 120); 112 // Give WebRender a chance to sample the test async scroll offset. 113 utils.advanceTimeAndRefresh(16); 114 utils.restoreNormalRefresh(); 115 116 // Hit where layers3 used to be. It should now hit the root. 117 checkHitResult(hitTest({x: 60, y: 190}), 118 APZHitResultFlags.VISIBLE, 119 utils.getViewId(document.scrollingElement), 120 utils.getLayersId(), 121 "root scroller (after async scroll)"); 122 123 // Hit where layers1 used to be and where layers3 should now be. 124 checkHitResult(hitTest({x: 70, y: 70}), 125 subframeHitInfo, 126 (config.activateAllScrollFrames ? utils.getViewId(layer3) 127 : utils.getViewId(document.scrollingElement)), 128 utils.getLayersId(), 129 "layer3 (after async scroll)"); 130 131 // Scroll the root upwards by an additional 120 pixels. 132 utils.setAsyncScrollOffset(document.scrollingElement, 0, 240); 133 // Give WebRender a chance to sample the test async scroll offset. 134 utils.advanceTimeAndRefresh(16); 135 utils.restoreNormalRefresh(); 136 137 // Hit where layers3 used to be. It should now hit the root. 138 checkHitResult(hitTest({x: 60, y: 190}), 139 APZHitResultFlags.VISIBLE, 140 utils.getViewId(document.scrollingElement), 141 utils.getLayersId(), 142 "root scroller (after second async scroll)"); 143 144 // Hit where layers2 used to be. It should now hit the root. 145 checkHitResult(hitTest({x: 70, y: 70}), 146 APZHitResultFlags.VISIBLE, 147 utils.getViewId(document.scrollingElement), 148 utils.getLayersId(), 149 "root scroller (after second async scroll)"); 150 } 151 152 waitUntilApzStable() 153 .then(test) 154 .then(subtestDone, subtestFailed); 155 156 </script> 157 </html>