helper_hittest_bug1730606-1.html (3580B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>A simple hit testing test that doesn't involve any 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 width: 100vw; 23 height: 100vh; 24 background: blue; 25 } 26 #layer2 { 27 position: absolute; 28 top: 100px; 29 left: 100px; 30 width: 100px; 31 height: 100px; 32 background: red; 33 } 34 #layer3 { 35 position: absolute; 36 top: 100px; 37 left: 100px; 38 width: 100px; 39 height: 100px; 40 background: green; 41 overflow: hidden; 42 } 43 #layer4 { 44 position: absolute; 45 top: 50px; 46 left: 50px; 47 width: 100px; 48 height: 100px; 49 background: yellow; 50 overflow: hidden; 51 } 52 </style> 53 </head> 54 <body> 55 <div id="layer1"></div> 56 <div id="layer2"></div> 57 <div id="layer3"> 58 <div class="scrollable-content"></div> 59 </div> 60 <div id="layer4"> 61 <div class="scrollable-content"></div> 62 </div> 63 <div class="scrollable-content"></div> 64 </body> 65 <script type="application/javascript"> 66 67 async function test() { 68 var config = getHitTestConfig(); 69 var utils = config.utils; 70 71 let subframeHitInfo = APZHitResultFlags.VISIBLE; 72 if (!config.activateAllScrollFrames) { 73 subframeHitInfo |= APZHitResultFlags.INACTIVE_SCROLLFRAME; 74 } 75 76 // Initially, the only thing scrollable is the root. 77 checkHitResult(hitTest({x: 175, y: 175}), 78 APZHitResultFlags.VISIBLE, 79 utils.getViewId(document.scrollingElement), 80 utils.getLayersId(), 81 "root scroller"); 82 83 // Make layer3 scrollable. 84 layer3.style.overflow = "auto"; 85 await promiseApzFlushedRepaints(); 86 checkHitResult(hitTest({x: 175, y: 175}), 87 subframeHitInfo, 88 (config.activateAllScrollFrames ? utils.getViewId(layer3) 89 : utils.getViewId(document.scrollingElement)), 90 utils.getLayersId(), 91 "subframe layer3"); 92 93 // At (125, 125), layer4 obscures layer3. layer4 is not scrollable yet, 94 // so we hit the root. 95 checkHitResult(hitTest({x: 125, y: 125}), 96 APZHitResultFlags.VISIBLE, 97 utils.getViewId(document.scrollingElement), 98 utils.getLayersId(), 99 "root scroller"); 100 101 // Make layer4 scrollable as well. Now (125, 125) should hit it. 102 layer4.style.overflow = "auto"; 103 await promiseApzFlushedRepaints(); 104 checkHitResult(hitTest({x: 125, y: 125}), 105 subframeHitInfo, 106 (config.activateAllScrollFrames ? utils.getViewId(layer4) 107 : utils.getViewId(document.scrollingElement)), 108 utils.getLayersId(), 109 "subframe layer4"); 110 111 // Hit-test outside the reach of layer[3,4] but inside root. 112 checkHitResult(hitTest({x: 225, y: 225}), 113 APZHitResultFlags.VISIBLE, 114 utils.getViewId(document.scrollingElement), 115 utils.getLayersId(), 116 "root scroller"); 117 } 118 119 waitUntilApzStable() 120 .then(test) 121 .then(subtestDone, subtestFailed); 122 123 </script> 124 </html>