helper_bug1271432.html (6144B)
1 <head> 2 <title>Ensure that the hit region doesn't get unexpectedly expanded</title> 3 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 4 <script type="application/javascript" src="apz_test_utils.js"></script> 5 <script src="/tests/SimpleTest/paint_listener.js"></script> 6 <script type="application/javascript"> 7 async function test() { 8 var scroller = document.getElementById("scroller"); 9 var scrollerPos = scroller.scrollTop; 10 var dx = 100, dy = 50; 11 12 is(window.scrollY, 0, "Initial page scroll position should be 0"); 13 is(scrollerPos, 0, "Initial scroller position should be 0"); 14 15 await promiseMoveMouseAndScrollWheelOver(scroller, dx, dy); 16 17 is(window.scrollY, 0, "Page scroll position should still be 0"); 18 ok(scroller.scrollTop > scrollerPos, "Scroller should have scrolled"); 19 20 // wait for it to layerize fully and then try again 21 await promiseAllPaintsDone(); 22 await promiseOnlyApzControllerFlushed(); 23 scrollerPos = scroller.scrollTop; 24 25 await promiseMoveMouseAndScrollWheelOver(scroller, dx, dy); 26 is(window.scrollY, 0, "Page scroll position should still be 0 after layerization"); 27 ok(scroller.scrollTop > scrollerPos, "Scroller should have continued scrolling"); 28 } 29 30 waitUntilApzStable() 31 .then(test) 32 .then(subtestDone, subtestFailed); 33 34 </script> 35 <style> 36 a#with_after_content { 37 background-color: #F16725; 38 opacity: 0.8; 39 display: inline-block; 40 margin-top: 40px; 41 margin-left: 40px; 42 } 43 a#with_after_content::after { 44 content: " "; 45 position: absolute; 46 width: 0px; 47 height: 0px; 48 bottom: 40px; 49 z-index: -1; 50 right: 40px; 51 background-color: transparent; 52 border-style: solid; 53 border-width: 15px 15px 15px 0; 54 border-color: #d54e0e transparent transparent transparent; 55 box-shadow: none; 56 box-sizing: border-box; 57 } 58 div#scroller { 59 overflow-y: scroll; 60 width: 50%; 61 height: 50%; 62 } 63 </style> 64 </head> 65 <body> 66 <a id="with_after_content">Some text</a> 67 68 <div id="scroller"> 69 Scrolling on the very left edge of this div will work. 70 Scrolling on the right side of this div (starting with the left edge of the orange box above) should work, but doesn't.<br/> 71 0<br> 72 1<br> 73 2<br> 74 3<br> 75 4<br> 76 5<br> 77 6<br> 78 7<br> 79 8<br> 80 9<br> 81 10<br> 82 11<br> 83 12<br> 84 13<br> 85 14<br> 86 15<br> 87 16<br> 88 17<br> 89 18<br> 90 19<br> 91 20<br> 92 21<br> 93 22<br> 94 23<br> 95 24<br> 96 25<br> 97 26<br> 98 27<br> 99 28<br> 100 29<br> 101 30<br> 102 31<br> 103 32<br> 104 33<br> 105 34<br> 106 35<br> 107 36<br> 108 37<br> 109 38<br> 110 39<br> 111 40<br> 112 41<br> 113 42<br> 114 43<br> 115 44<br> 116 45<br> 117 46<br> 118 47<br> 119 48<br> 120 49<br> 121 50<br> 122 51<br> 123 52<br> 124 53<br> 125 54<br> 126 55<br> 127 56<br> 128 57<br> 129 58<br> 130 59<br> 131 60<br> 132 61<br> 133 62<br> 134 63<br> 135 64<br> 136 65<br> 137 66<br> 138 67<br> 139 68<br> 140 69<br> 141 70<br> 142 71<br> 143 72<br> 144 73<br> 145 74<br> 146 75<br> 147 76<br> 148 77<br> 149 78<br> 150 79<br> 151 80<br> 152 81<br> 153 82<br> 154 83<br> 155 84<br> 156 85<br> 157 86<br> 158 87<br> 159 88<br> 160 89<br> 161 90<br> 162 91<br> 163 92<br> 164 93<br> 165 94<br> 166 95<br> 167 96<br> 168 97<br> 169 98<br> 170 99<br> 171 100<br> 172 101<br> 173 102<br> 174 103<br> 175 104<br> 176 105<br> 177 106<br> 178 107<br> 179 108<br> 180 109<br> 181 110<br> 182 111<br> 183 112<br> 184 113<br> 185 114<br> 186 115<br> 187 116<br> 188 117<br> 189 118<br> 190 119<br> 191 120<br> 192 121<br> 193 122<br> 194 123<br> 195 124<br> 196 125<br> 197 126<br> 198 127<br> 199 128<br> 200 129<br> 201 130<br> 202 131<br> 203 132<br> 204 133<br> 205 134<br> 206 135<br> 207 136<br> 208 137<br> 209 138<br> 210 139<br> 211 140<br> 212 141<br> 213 142<br> 214 143<br> 215 144<br> 216 145<br> 217 146<br> 218 147<br> 219 148<br> 220 149<br> 221 150<br> 222 151<br> 223 152<br> 224 153<br> 225 154<br> 226 155<br> 227 156<br> 228 157<br> 229 158<br> 230 159<br> 231 160<br> 232 161<br> 233 162<br> 234 163<br> 235 164<br> 236 165<br> 237 166<br> 238 167<br> 239 168<br> 240 169<br> 241 170<br> 242 171<br> 243 172<br> 244 173<br> 245 174<br> 246 175<br> 247 176<br> 248 177<br> 249 178<br> 250 179<br> 251 180<br> 252 181<br> 253 182<br> 254 183<br> 255 184<br> 256 185<br> 257 186<br> 258 187<br> 259 188<br> 260 189<br> 261 190<br> 262 191<br> 263 192<br> 264 193<br> 265 194<br> 266 195<br> 267 196<br> 268 197<br> 269 198<br> 270 199<br> 271 200<br> 272 201<br> 273 202<br> 274 203<br> 275 204<br> 276 205<br> 277 206<br> 278 207<br> 279 208<br> 280 209<br> 281 210<br> 282 211<br> 283 212<br> 284 213<br> 285 214<br> 286 215<br> 287 216<br> 288 217<br> 289 218<br> 290 219<br> 291 220<br> 292 221<br> 293 222<br> 294 223<br> 295 224<br> 296 225<br> 297 226<br> 298 227<br> 299 228<br> 300 229<br> 301 230<br> 302 231<br> 303 232<br> 304 233<br> 305 234<br> 306 235<br> 307 236<br> 308 237<br> 309 238<br> 310 239<br> 311 240<br> 312 241<br> 313 242<br> 314 243<br> 315 244<br> 316 245<br> 317 246<br> 318 247<br> 319 248<br> 320 249<br> 321 250<br> 322 251<br> 323 252<br> 324 253<br> 325 254<br> 326 255<br> 327 256<br> 328 257<br> 329 258<br> 330 259<br> 331 260<br> 332 261<br> 333 262<br> 334 263<br> 335 264<br> 336 265<br> 337 266<br> 338 267<br> 339 268<br> 340 269<br> 341 270<br> 342 271<br> 343 272<br> 344 273<br> 345 274<br> 346 275<br> 347 276<br> 348 277<br> 349 278<br> 350 279<br> 351 280<br> 352 281<br> 353 282<br> 354 283<br> 355 284<br> 356 285<br> 357 286<br> 358 287<br> 359 288<br> 360 289<br> 361 290<br> 362 291<br> 363 292<br> 364 293<br> 365 294<br> 366 295<br> 367 296<br> 368 297<br> 369 298<br> 370 299<br> 371 300<br> 372 301<br> 373 302<br> 374 303<br> 375 304<br> 376 305<br> 377 306<br> 378 307<br> 379 308<br> 380 309<br> 381 310<br> 382 311<br> 383 312<br> 384 313<br> 385 314<br> 386 315<br> 387 316<br> 388 317<br> 389 318<br> 390 319<br> 391 320<br> 392 321<br> 393 322<br> 394 323<br> 395 324<br> 396 325<br> 397 326<br> 398 327<br> 399 328<br> 400 329<br> 401 330<br> 402 331<br> 403 332<br> 404 333<br> 405 334<br> 406 335<br> 407 336<br> 408 337<br> 409 338<br> 410 339<br> 411 340<br> 412 341<br> 413 342<br> 414 343<br> 415 344<br> 416 345<br> 417 346<br> 418 347<br> 419 348<br> 420 349<br> 421 350<br> 422 351<br> 423 352<br> 424 353<br> 425 354<br> 426 355<br> 427 356<br> 428 357<br> 429 358<br> 430 359<br> 431 360<br> 432 361<br> 433 362<br> 434 363<br> 435 364<br> 436 365<br> 437 366<br> 438 367<br> 439 368<br> 440 369<br> 441 370<br> 442 371<br> 443 372<br> 444 373<br> 445 374<br> 446 375<br> 447 376<br> 448 377<br> 449 378<br> 450 379<br> 451 380<br> 452 381<br> 453 382<br> 454 383<br> 455 384<br> 456 385<br> 457 386<br> 458 387<br> 459 388<br> 460 389<br> 461 390<br> 462 391<br> 463 392<br> 464 393<br> 465 394<br> 466 395<br> 467 396<br> 468 397<br> 469 398<br> 470 399<br> 471 400<br> 472 401<br> 473 402<br> 474 403<br> 475 404<br> 476 405<br> 477 406<br> 478 407<br> 479 408<br> 480 409<br> 481 410<br> 482 411<br> 483 412<br> 484 413<br> 485 414<br> 486 415<br> 487 416<br> 488 417<br> 489 418<br> 490 419<br> 491 420<br> 492 421<br> 493 422<br> 494 423<br> 495 424<br> 496 425<br> 497 426<br> 498 427<br> 499 428<br> 500 429<br> 501 430<br> 502 431<br> 503 432<br> 504 433<br> 505 434<br> 506 435<br> 507 436<br> 508 437<br> 509 438<br> 510 439<br> 511 440<br> 512 441<br> 513 442<br> 514 443<br> 515 444<br> 516 445<br> 517 446<br> 518 447<br> 519 448<br> 520 449<br> 521 450<br> 522 451<br> 523 452<br> 524 453<br> 525 454<br> 526 455<br> 527 456<br> 528 457<br> 529 458<br> 530 459<br> 531 460<br> 532 461<br> 533 462<br> 534 463<br> 535 464<br> 536 465<br> 537 466<br> 538 467<br> 539 468<br> 540 469<br> 541 470<br> 542 471<br> 543 472<br> 544 473<br> 545 474<br> 546 475<br> 547 476<br> 548 477<br> 549 478<br> 550 479<br> 551 480<br> 552 481<br> 553 482<br> 554 483<br> 555 484<br> 556 485<br> 557 486<br> 558 487<br> 559 488<br> 560 489<br> 561 490<br> 562 491<br> 563 492<br> 564 493<br> 565 494<br> 566 495<br> 567 496<br> 568 497<br> 569 498<br> 570 499<br> 571 </div> 572 <div style="height: 1000px">this div makes the page scrollable</div> 573 </body>