helper_drag_scroll.html (8783B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width; initial-scale=1.0"> 6 <title>Dragging the mouse on a content-implemented scrollbar</title> 7 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 8 <script type="application/javascript" src="apz_test_utils.js"></script> 9 <script src="/tests/SimpleTest/paint_listener.js"></script> 10 <style> 11 body { 12 background: linear-gradient(135deg, red, blue); 13 } 14 #scrollbar { 15 position:fixed; 16 top: 0; 17 right: 10px; 18 height: 100%; 19 width: 150px; 20 background-color: gray; 21 } 22 </style> 23 <script type="text/javascript"> 24 var bar = null; 25 var mouseDown = false; 26 var mouseDownY = -1; 27 28 async function moveTo(mouseY) { 29 var fraction = (mouseY - bar.getBoundingClientRect().top) / bar.getBoundingClientRect().height; 30 fraction = Math.max(0, fraction); 31 fraction = Math.min(1, fraction); 32 var oldScrollPos = document.scrollingElement.scrollTop; 33 var newScrollPos = fraction * window.scrollMaxY; 34 ok(newScrollPos > oldScrollPos, "Scroll position strictly increased"); 35 // split the scroll in two with a paint in between, just to increase the 36 // complexity of the simulated web content, and to ensure this works as well. 37 document.scrollingElement.scrollTop = (oldScrollPos + newScrollPos) / 2; 38 await promiseAllPaintsDone(); 39 document.scrollingElement.scrollTop = newScrollPos; 40 } 41 42 async function downMouseAndHandleEvent(x, y) { 43 let mouseDownHandledPromise = new Promise(resolve => { 44 bar.addEventListener("mousedown", async function(e) { 45 dump("Got mousedown clientY " + e.clientY + "\n"); 46 mouseDown = true; 47 mouseDownY = e.clientY; 48 await moveTo(e.clientY); 49 resolve(); 50 }, {capture: true, once: true}); 51 }); 52 await synthesizeNativeMouseEventWithAPZ({ 53 target: bar, 54 offsetX: x, 55 offsetY: y, 56 type: "mousedown", 57 }); 58 await mouseDownHandledPromise; 59 } 60 61 async function moveMouseAndHandleEvent(x, y) { 62 let mouseMoveHandledPromise = new Promise(resolve => { 63 async function mouseOnTarget(e) { 64 if (!mouseDown) { 65 return; 66 } 67 dump("Got mousemove clientY " + e.clientY + "\n"); 68 e.stopPropagation(); 69 if (e.clientY == mouseDownY) { 70 dump("Discarding spurious mousemove\n"); 71 return; 72 } 73 await moveTo(e.clientY); 74 handled(); 75 } 76 77 function mouseOffTarget(e) { 78 if (!mouseDown) { 79 return; 80 } 81 ok(false, "The mousemove at " + e.clientY + " was not stopped by the bar listener, and is a glitchy event!"); 82 handled(); 83 } 84 85 function handled() { 86 bar.removeEventListener("mousemove", mouseOnTarget, true); 87 window.removeEventListener("mousemove", mouseOffTarget); 88 resolve(); 89 } 90 91 bar.addEventListener("mousemove", mouseOnTarget, true); 92 window.addEventListener("mousemove", mouseOffTarget); 93 }); 94 await synthesizeNativeMouseEventWithAPZ({ 95 target: bar, 96 offsetX: x, 97 offsetY: y, 98 type: "mousemove", 99 }); 100 await mouseMoveHandledPromise; 101 } 102 103 async function test() { 104 bar = document.getElementById("scrollbar"); 105 mouseDown = false; 106 mouseDownY = -1; 107 108 bar.addEventListener("mouseup", function(e) { 109 mouseDown = false; 110 dump("Got mouseup clientY " + e.clientY + "\n"); 111 }, true); 112 113 // Move the mouse to the "scrollbar" (the div upon which dragging changes scroll position) 114 await promiseNativeMouseEventWithAPZ({ 115 target: bar, 116 offsetX: 10, 117 offsetY: 10, 118 type: "mousemove", 119 }); 120 121 // mouse down 122 await downMouseAndHandleEvent(10, 10); 123 124 // drag vertically by 400px, in 50px increments 125 await moveMouseAndHandleEvent(10, 60); 126 await moveMouseAndHandleEvent(10, 110); 127 await moveMouseAndHandleEvent(10, 160); 128 await moveMouseAndHandleEvent(10, 210); 129 await moveMouseAndHandleEvent(10, 260); 130 await moveMouseAndHandleEvent(10, 310); 131 await moveMouseAndHandleEvent(10, 360); 132 await moveMouseAndHandleEvent(10, 410); 133 // and release 134 await promiseNativeMouseEventWithAPZ({ 135 target: bar, 136 offsetX: 10, 137 offsetY: 410, 138 type: "mouseup", 139 }); 140 } 141 142 waitUntilApzStable() 143 .then(test) 144 .then(subtestDone, subtestFailed); 145 146 </script> 147 </head> 148 <body> 149 150 <div id="scrollbar">Drag up and down on this bar. The background/scrollbar shouldn't glitch</div> 151 This is a tall page<br/> 152 1<br/> 153 2<br/> 154 3<br/> 155 4<br/> 156 5<br/> 157 6<br/> 158 7<br/> 159 8<br/> 160 9<br/> 161 10<br/> 162 11<br/> 163 12<br/> 164 13<br/> 165 14<br/> 166 15<br/> 167 16<br/> 168 17<br/> 169 18<br/> 170 19<br/> 171 20<br/> 172 21<br/> 173 22<br/> 174 23<br/> 175 24<br/> 176 25<br/> 177 26<br/> 178 27<br/> 179 28<br/> 180 29<br/> 181 30<br/> 182 31<br/> 183 32<br/> 184 33<br/> 185 34<br/> 186 35<br/> 187 36<br/> 188 37<br/> 189 38<br/> 190 39<br/> 191 40<br/> 192 41<br/> 193 42<br/> 194 43<br/> 195 44<br/> 196 45<br/> 197 46<br/> 198 47<br/> 199 48<br/> 200 49<br/> 201 50<br/> 202 51<br/> 203 52<br/> 204 53<br/> 205 54<br/> 206 55<br/> 207 56<br/> 208 57<br/> 209 58<br/> 210 59<br/> 211 60<br/> 212 61<br/> 213 62<br/> 214 63<br/> 215 64<br/> 216 65<br/> 217 66<br/> 218 67<br/> 219 68<br/> 220 69<br/> 221 70<br/> 222 71<br/> 223 72<br/> 224 73<br/> 225 74<br/> 226 75<br/> 227 76<br/> 228 77<br/> 229 78<br/> 230 79<br/> 231 80<br/> 232 81<br/> 233 82<br/> 234 83<br/> 235 84<br/> 236 85<br/> 237 86<br/> 238 87<br/> 239 88<br/> 240 89<br/> 241 90<br/> 242 91<br/> 243 92<br/> 244 93<br/> 245 94<br/> 246 95<br/> 247 96<br/> 248 97<br/> 249 98<br/> 250 99<br/> 251 100<br/> 252 101<br/> 253 102<br/> 254 103<br/> 255 104<br/> 256 105<br/> 257 106<br/> 258 107<br/> 259 108<br/> 260 109<br/> 261 110<br/> 262 111<br/> 263 112<br/> 264 113<br/> 265 114<br/> 266 115<br/> 267 116<br/> 268 117<br/> 269 118<br/> 270 119<br/> 271 120<br/> 272 121<br/> 273 122<br/> 274 123<br/> 275 124<br/> 276 125<br/> 277 126<br/> 278 127<br/> 279 128<br/> 280 129<br/> 281 130<br/> 282 131<br/> 283 132<br/> 284 133<br/> 285 134<br/> 286 135<br/> 287 136<br/> 288 137<br/> 289 138<br/> 290 139<br/> 291 140<br/> 292 141<br/> 293 142<br/> 294 143<br/> 295 144<br/> 296 145<br/> 297 146<br/> 298 147<br/> 299 148<br/> 300 149<br/> 301 150<br/> 302 151<br/> 303 152<br/> 304 153<br/> 305 154<br/> 306 155<br/> 307 156<br/> 308 157<br/> 309 158<br/> 310 159<br/> 311 160<br/> 312 161<br/> 313 162<br/> 314 163<br/> 315 164<br/> 316 165<br/> 317 166<br/> 318 167<br/> 319 168<br/> 320 169<br/> 321 170<br/> 322 171<br/> 323 172<br/> 324 173<br/> 325 174<br/> 326 175<br/> 327 176<br/> 328 177<br/> 329 178<br/> 330 179<br/> 331 180<br/> 332 181<br/> 333 182<br/> 334 183<br/> 335 184<br/> 336 185<br/> 337 186<br/> 338 187<br/> 339 188<br/> 340 189<br/> 341 190<br/> 342 191<br/> 343 192<br/> 344 193<br/> 345 194<br/> 346 195<br/> 347 196<br/> 348 197<br/> 349 198<br/> 350 199<br/> 351 200<br/> 352 201<br/> 353 202<br/> 354 203<br/> 355 204<br/> 356 205<br/> 357 206<br/> 358 207<br/> 359 208<br/> 360 209<br/> 361 210<br/> 362 211<br/> 363 212<br/> 364 213<br/> 365 214<br/> 366 215<br/> 367 216<br/> 368 217<br/> 369 218<br/> 370 219<br/> 371 220<br/> 372 221<br/> 373 222<br/> 374 223<br/> 375 224<br/> 376 225<br/> 377 226<br/> 378 227<br/> 379 228<br/> 380 229<br/> 381 230<br/> 382 231<br/> 383 232<br/> 384 233<br/> 385 234<br/> 386 235<br/> 387 236<br/> 388 237<br/> 389 238<br/> 390 239<br/> 391 240<br/> 392 241<br/> 393 242<br/> 394 243<br/> 395 244<br/> 396 245<br/> 397 246<br/> 398 247<br/> 399 248<br/> 400 249<br/> 401 250<br/> 402 251<br/> 403 252<br/> 404 253<br/> 405 254<br/> 406 255<br/> 407 256<br/> 408 257<br/> 409 258<br/> 410 259<br/> 411 260<br/> 412 261<br/> 413 262<br/> 414 263<br/> 415 264<br/> 416 265<br/> 417 266<br/> 418 267<br/> 419 268<br/> 420 269<br/> 421 270<br/> 422 271<br/> 423 272<br/> 424 273<br/> 425 274<br/> 426 275<br/> 427 276<br/> 428 277<br/> 429 278<br/> 430 279<br/> 431 280<br/> 432 281<br/> 433 282<br/> 434 283<br/> 435 284<br/> 436 285<br/> 437 286<br/> 438 287<br/> 439 288<br/> 440 289<br/> 441 290<br/> 442 291<br/> 443 292<br/> 444 293<br/> 445 294<br/> 446 295<br/> 447 296<br/> 448 297<br/> 449 298<br/> 450 299<br/> 451 300<br/> 452 301<br/> 453 302<br/> 454 303<br/> 455 304<br/> 456 305<br/> 457 306<br/> 458 307<br/> 459 308<br/> 460 309<br/> 461 310<br/> 462 311<br/> 463 312<br/> 464 313<br/> 465 314<br/> 466 315<br/> 467 316<br/> 468 317<br/> 469 318<br/> 470 319<br/> 471 320<br/> 472 321<br/> 473 322<br/> 474 323<br/> 475 324<br/> 476 325<br/> 477 326<br/> 478 327<br/> 479 328<br/> 480 329<br/> 481 330<br/> 482 331<br/> 483 332<br/> 484 333<br/> 485 334<br/> 486 335<br/> 487 336<br/> 488 337<br/> 489 338<br/> 490 339<br/> 491 340<br/> 492 341<br/> 493 342<br/> 494 343<br/> 495 344<br/> 496 345<br/> 497 346<br/> 498 347<br/> 499 348<br/> 500 349<br/> 501 350<br/> 502 351<br/> 503 352<br/> 504 353<br/> 505 354<br/> 506 355<br/> 507 356<br/> 508 357<br/> 509 358<br/> 510 359<br/> 511 360<br/> 512 361<br/> 513 362<br/> 514 363<br/> 515 364<br/> 516 365<br/> 517 366<br/> 518 367<br/> 519 368<br/> 520 369<br/> 521 370<br/> 522 371<br/> 523 372<br/> 524 373<br/> 525 374<br/> 526 375<br/> 527 376<br/> 528 377<br/> 529 378<br/> 530 379<br/> 531 380<br/> 532 381<br/> 533 382<br/> 534 383<br/> 535 384<br/> 536 385<br/> 537 386<br/> 538 387<br/> 539 388<br/> 540 389<br/> 541 390<br/> 542 391<br/> 543 392<br/> 544 393<br/> 545 394<br/> 546 395<br/> 547 396<br/> 548 397<br/> 549 398<br/> 550 399<br/> 551 400<br/> 552 401<br/> 553 402<br/> 554 403<br/> 555 404<br/> 556 405<br/> 557 406<br/> 558 407<br/> 559 408<br/> 560 409<br/> 561 410<br/> 562 411<br/> 563 412<br/> 564 413<br/> 565 414<br/> 566 415<br/> 567 416<br/> 568 417<br/> 569 418<br/> 570 419<br/> 571 420<br/> 572 421<br/> 573 422<br/> 574 423<br/> 575 424<br/> 576 425<br/> 577 426<br/> 578 427<br/> 579 428<br/> 580 429<br/> 581 430<br/> 582 431<br/> 583 432<br/> 584 433<br/> 585 434<br/> 586 435<br/> 587 436<br/> 588 437<br/> 589 438<br/> 590 439<br/> 591 440<br/> 592 441<br/> 593 442<br/> 594 443<br/> 595 444<br/> 596 445<br/> 597 446<br/> 598 447<br/> 599 448<br/> 600 449<br/> 601 450<br/> 602 451<br/> 603 452<br/> 604 453<br/> 605 454<br/> 606 455<br/> 607 456<br/> 608 457<br/> 609 458<br/> 610 459<br/> 611 460<br/> 612 461<br/> 613 462<br/> 614 463<br/> 615 464<br/> 616 465<br/> 617 466<br/> 618 467<br/> 619 468<br/> 620 469<br/> 621 470<br/> 622 471<br/> 623 472<br/> 624 473<br/> 625 474<br/> 626 475<br/> 627 476<br/> 628 477<br/> 629 478<br/> 630 479<br/> 631 480<br/> 632 481<br/> 633 482<br/> 634 483<br/> 635 484<br/> 636 485<br/> 637 486<br/> 638 487<br/> 639 488<br/> 640 489<br/> 641 490<br/> 642 491<br/> 643 492<br/> 644 493<br/> 645 494<br/> 646 495<br/> 647 496<br/> 648 497<br/> 649 498<br/> 650 499<br/> 651 652 </body> 653 </html>