helper_hittest_bug1730606-4.html (4999B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>A hit testing test involving a scenario with a scale transform</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 /* 11 * This test tries to approximate the layer structure of 12 * APZHitTestingTester.ComplexMultiLayerTree from TestHitTesting.cpp. 13 * 14 * Notes: 15 * - The elements are named after the layers in the testcase 16 * (e.g. "layer1"), but where multiple elements share an APZC, 17 * new elements named "scroller1" etc. are introduced to be 18 * the scroll containers. 19 * - overflow: hidden is used to avoid spurious scrollbar layers. 20 * To trigger APZC creation, the test code explicitly sets display 21 * port margins. 22 * - Perspective transforms are used to force an element to be 23 * layerized if it otherwise wouldn't. 24 * - One difference is that the entire contents of the APZC that 25 * scrolls layer{4,6,8} is shifted to the right by 100px. 26 * Otherwise, the dimensions of the layers make it such that 27 * this APZC's composition bounds covers up layers{1,2,3} 28 * and those cannot be hit. 29 */ 30 body, html { 31 margin: 0; 32 padding: 0; 33 width: 100%; 34 height: 100%; 35 } 36 #scroller1 { 37 position: absolute; 38 left: 0; 39 top: 0; 40 width: 250px; 41 height: 350px; 42 overflow: hidden; 43 } 44 #layer1 { 45 position: absolute; 46 left: 0px; 47 top: 0px; 48 width: 100px; 49 height: 100px; 50 background: red; 51 } 52 #layer2 { 53 position: absolute; 54 left: 50px; 55 top: 50px; 56 width: 200px; 57 height: 300px; 58 background: yellow; 59 transform: scale(1.0); 60 perspective: 10px; 61 } 62 #layer3 { 63 position: absolute; 64 left: 10px; 65 top: 10px; 66 width: 10px; 67 height: 10px; 68 background: green; 69 transform: scale(1.0); 70 perspective: 10px; 71 } 72 #scroller2 { 73 position: absolute; 74 left: 100px; 75 top: 0px; 76 width: 300px; 77 height: 400px; 78 overflow: hidden; 79 } 80 #layer4 { 81 position: absolute; 82 left: 0px; 83 top: 200px; 84 width: 100px; 85 height: 100px; 86 background: purple; 87 } 88 #layer5 { 89 position: absolute; 90 left: 200px; 91 top: 0px; 92 width: 100px; 93 height: 400px; 94 background: pink; 95 transform: scale(1.0); 96 perspective: 10px; 97 } 98 #layer6 { 99 position: absolute; 100 left: 0px; 101 top: 0px; 102 width: 100px; 103 height: 200px; 104 background: orange; 105 } 106 #layer7 { 107 position: absolute; 108 left: 0px; 109 top: 0px; 110 width: 100px; 111 height: 200px; 112 background: navy; 113 overflow: hidden; 114 } 115 #layer8 { 116 position: absolute; 117 left: 0px; 118 top: 200px; 119 width: 100px; 120 height: 100px; 121 background: lightgreen; 122 transform: scale(1.0); 123 perspective: 10px; 124 } 125 #layer9 { 126 position: absolute; 127 left: 0px; 128 top: 300px; 129 width: 100px; 130 height: 100px; 131 background: turquoise; 132 overflow: hidden; 133 } 134 </style> 135 </head> 136 <body> 137 <div id="scroller1"> 138 <div id="layer1"></div> 139 <div id="layer2"> 140 <div id="layer3"></div> 141 </div> 142 </div> 143 <div id="scroller2"> 144 <div id="layer4"></div> 145 <div id="layer5"> 146 <div id="layer6"> 147 <div id="layer7"></div> 148 </div> 149 <div id="layer8"></div> 150 <div id="layer9"></div> 151 </div> 152 </div> 153 </body> 154 <script type="application/javascript"> 155 156 async function test() { 157 var config = getHitTestConfig(); 158 var utils = config.utils; 159 160 // Trigger APZC creation. 161 utils.setDisplayPortForElement(0, 0, 250, 350, scroller1, 1); 162 await promiseApzFlushedRepaints(); 163 utils.setDisplayPortForElement(0, 0, 300, 400, scroller2, 1); 164 await promiseApzFlushedRepaints(); 165 utils.setDisplayPortForElement(0, 0, 100, 200, layer7, 1); 166 await promiseApzFlushedRepaints(); 167 utils.setDisplayPortForElement(0, 0, 100, 200, layer9, 1); 168 await promiseApzFlushedRepaints(); 169 170 checkHitResult(hitTest({x: 25, y: 25}), 171 APZHitResultFlags.VISIBLE, 172 utils.getViewId(scroller1), 173 utils.getLayersId(), 174 "scroller1"); 175 176 checkHitResult(hitTest({x: 350, y: 100}), 177 APZHitResultFlags.VISIBLE, 178 utils.getViewId(layer7), 179 utils.getLayersId(), 180 "layer7"); 181 182 checkHitResult(hitTest({x: 375, y: 375}), 183 APZHitResultFlags.VISIBLE, 184 utils.getViewId(layer9), 185 utils.getLayersId(), 186 "layer7"); 187 } 188 189 waitUntilApzStable() 190 .then(test) 191 .then(subtestDone, subtestFailed); 192 193 </script> 194 </html>