diff options
Diffstat (limited to 'gfx/layers/apz/test/mochitest/helper_drag_scroll.html')
| -rw-r--r-- | gfx/layers/apz/test/mochitest/helper_drag_scroll.html | 653 |
1 files changed, 653 insertions, 0 deletions
diff --git a/gfx/layers/apz/test/mochitest/helper_drag_scroll.html b/gfx/layers/apz/test/mochitest/helper_drag_scroll.html new file mode 100644 index 0000000000..15ca680ad6 --- /dev/null +++ b/gfx/layers/apz/test/mochitest/helper_drag_scroll.html @@ -0,0 +1,653 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width; initial-scale=1.0"> + <title>Dragging the mouse on a content-implemented scrollbar</title> + <script type="application/javascript" src="apz_test_native_event_utils.js"></script> + <script type="application/javascript" src="apz_test_utils.js"></script> + <script src="/tests/SimpleTest/paint_listener.js"></script> + <style> + body { + background: linear-gradient(135deg, red, blue); + } + #scrollbar { + position:fixed; + top: 0; + right: 10px; + height: 100%; + width: 150px; + background-color: gray; + } + </style> + <script type="text/javascript"> +var bar = null; +var mouseDown = false; +var mouseDownY = -1; + +async function moveTo(mouseY) { + var fraction = (mouseY - bar.getBoundingClientRect().top) / bar.getBoundingClientRect().height; + fraction = Math.max(0, fraction); + fraction = Math.min(1, fraction); + var oldScrollPos = document.scrollingElement.scrollTop; + var newScrollPos = fraction * window.scrollMaxY; + ok(newScrollPos > oldScrollPos, "Scroll position strictly increased"); + // split the scroll in two with a paint in between, just to increase the + // complexity of the simulated web content, and to ensure this works as well. + document.scrollingElement.scrollTop = (oldScrollPos + newScrollPos) / 2; + await promiseAllPaintsDone(); + document.scrollingElement.scrollTop = newScrollPos; +} + +async function downMouseAndHandleEvent(x, y) { + let mouseDownHandledPromise = new Promise(resolve => { + bar.addEventListener("mousedown", async function(e) { + dump("Got mousedown clientY " + e.clientY + "\n"); + mouseDown = true; + mouseDownY = e.clientY; + await moveTo(e.clientY); + resolve(); + }, {capture: true, once: true}); + }); + await synthesizeNativeMouseEventWithAPZ({ + target: bar, + offsetX: x, + offsetY: y, + type: "mousedown", + }); + await mouseDownHandledPromise; +} + +async function moveMouseAndHandleEvent(x, y) { + let mouseMoveHandledPromise = new Promise(resolve => { + async function mouseOnTarget(e) { + if (!mouseDown) { + return; + } + dump("Got mousemove clientY " + e.clientY + "\n"); + e.stopPropagation(); + if (e.clientY == mouseDownY) { + dump("Discarding spurious mousemove\n"); + return; + } + await moveTo(e.clientY); + handled(); + } + + function mouseOffTarget(e) { + if (!mouseDown) { + return; + } + ok(false, "The mousemove at " + e.clientY + " was not stopped by the bar listener, and is a glitchy event!"); + handled(); + } + + function handled() { + bar.removeEventListener("mousemove", mouseOnTarget, true); + window.removeEventListener("mousemove", mouseOffTarget); + resolve(); + } + + bar.addEventListener("mousemove", mouseOnTarget, true); + window.addEventListener("mousemove", mouseOffTarget); + }); + await synthesizeNativeMouseEventWithAPZ({ + target: bar, + offsetX: x, + offsetY: y, + type: "mousemove", + }); + await mouseMoveHandledPromise; +} + +async function test() { + bar = document.getElementById("scrollbar"); + mouseDown = false; + mouseDownY = -1; + + bar.addEventListener("mouseup", function(e) { + mouseDown = false; + dump("Got mouseup clientY " + e.clientY + "\n"); + }, true); + + // Move the mouse to the "scrollbar" (the div upon which dragging changes scroll position) + await promiseNativeMouseEventWithAPZ({ + target: bar, + offsetX: 10, + offsetY: 10, + type: "mousemove", + }); + + // mouse down + await downMouseAndHandleEvent(10, 10); + + // drag vertically by 400px, in 50px increments + await moveMouseAndHandleEvent(10, 60); + await moveMouseAndHandleEvent(10, 110); + await moveMouseAndHandleEvent(10, 160); + await moveMouseAndHandleEvent(10, 210); + await moveMouseAndHandleEvent(10, 260); + await moveMouseAndHandleEvent(10, 310); + await moveMouseAndHandleEvent(10, 360); + await moveMouseAndHandleEvent(10, 410); + // and release + await promiseNativeMouseEventWithAPZ({ + target: bar, + offsetX: 10, + offsetY: 410, + type: "mouseup", + }); +} + +waitUntilApzStable() +.then(test) +.then(subtestDone, subtestFailed); + + </script> +</head> +<body> + +<div id="scrollbar">Drag up and down on this bar. The background/scrollbar shouldn't glitch</div> +This is a tall page<br/> +1<br/> +2<br/> +3<br/> +4<br/> +5<br/> +6<br/> +7<br/> +8<br/> +9<br/> +10<br/> +11<br/> +12<br/> +13<br/> +14<br/> +15<br/> +16<br/> +17<br/> +18<br/> +19<br/> +20<br/> +21<br/> +22<br/> +23<br/> +24<br/> +25<br/> +26<br/> +27<br/> +28<br/> +29<br/> +30<br/> +31<br/> +32<br/> +33<br/> +34<br/> +35<br/> +36<br/> +37<br/> +38<br/> +39<br/> +40<br/> +41<br/> +42<br/> +43<br/> +44<br/> +45<br/> +46<br/> +47<br/> +48<br/> +49<br/> +50<br/> +51<br/> +52<br/> +53<br/> +54<br/> +55<br/> +56<br/> +57<br/> +58<br/> +59<br/> +60<br/> +61<br/> +62<br/> +63<br/> +64<br/> +65<br/> +66<br/> +67<br/> +68<br/> +69<br/> +70<br/> +71<br/> +72<br/> +73<br/> +74<br/> +75<br/> +76<br/> +77<br/> +78<br/> +79<br/> +80<br/> +81<br/> +82<br/> +83<br/> +84<br/> +85<br/> +86<br/> +87<br/> +88<br/> +89<br/> +90<br/> +91<br/> +92<br/> +93<br/> +94<br/> +95<br/> +96<br/> +97<br/> +98<br/> +99<br/> +100<br/> +101<br/> +102<br/> +103<br/> +104<br/> +105<br/> +106<br/> +107<br/> +108<br/> +109<br/> +110<br/> +111<br/> +112<br/> +113<br/> +114<br/> +115<br/> +116<br/> +117<br/> +118<br/> +119<br/> +120<br/> +121<br/> +122<br/> +123<br/> +124<br/> +125<br/> +126<br/> +127<br/> +128<br/> +129<br/> +130<br/> +131<br/> +132<br/> +133<br/> +134<br/> +135<br/> +136<br/> +137<br/> +138<br/> +139<br/> +140<br/> +141<br/> +142<br/> +143<br/> +144<br/> +145<br/> +146<br/> +147<br/> +148<br/> +149<br/> +150<br/> +151<br/> +152<br/> +153<br/> +154<br/> +155<br/> +156<br/> +157<br/> +158<br/> +159<br/> +160<br/> +161<br/> +162<br/> +163<br/> +164<br/> +165<br/> +166<br/> +167<br/> +168<br/> +169<br/> +170<br/> +171<br/> +172<br/> +173<br/> +174<br/> +175<br/> +176<br/> +177<br/> +178<br/> +179<br/> +180<br/> +181<br/> +182<br/> +183<br/> +184<br/> +185<br/> +186<br/> +187<br/> +188<br/> +189<br/> +190<br/> +191<br/> +192<br/> +193<br/> +194<br/> +195<br/> +196<br/> +197<br/> +198<br/> +199<br/> +200<br/> +201<br/> +202<br/> +203<br/> +204<br/> +205<br/> +206<br/> +207<br/> +208<br/> +209<br/> +210<br/> +211<br/> +212<br/> +213<br/> +214<br/> +215<br/> +216<br/> +217<br/> +218<br/> +219<br/> +220<br/> +221<br/> +222<br/> +223<br/> +224<br/> +225<br/> +226<br/> +227<br/> +228<br/> +229<br/> +230<br/> +231<br/> +232<br/> +233<br/> +234<br/> +235<br/> +236<br/> +237<br/> +238<br/> +239<br/> +240<br/> +241<br/> +242<br/> +243<br/> +244<br/> +245<br/> +246<br/> +247<br/> +248<br/> +249<br/> +250<br/> +251<br/> +252<br/> +253<br/> +254<br/> +255<br/> +256<br/> +257<br/> +258<br/> +259<br/> +260<br/> +261<br/> +262<br/> +263<br/> +264<br/> +265<br/> +266<br/> +267<br/> +268<br/> +269<br/> +270<br/> +271<br/> +272<br/> +273<br/> +274<br/> +275<br/> +276<br/> +277<br/> +278<br/> +279<br/> +280<br/> +281<br/> +282<br/> +283<br/> +284<br/> +285<br/> +286<br/> +287<br/> +288<br/> +289<br/> +290<br/> +291<br/> +292<br/> +293<br/> +294<br/> +295<br/> +296<br/> +297<br/> +298<br/> +299<br/> +300<br/> +301<br/> +302<br/> +303<br/> +304<br/> +305<br/> +306<br/> +307<br/> +308<br/> +309<br/> +310<br/> +311<br/> +312<br/> +313<br/> +314<br/> +315<br/> +316<br/> +317<br/> +318<br/> +319<br/> +320<br/> +321<br/> +322<br/> +323<br/> +324<br/> +325<br/> +326<br/> +327<br/> +328<br/> +329<br/> +330<br/> +331<br/> +332<br/> +333<br/> +334<br/> +335<br/> +336<br/> +337<br/> +338<br/> +339<br/> +340<br/> +341<br/> +342<br/> +343<br/> +344<br/> +345<br/> +346<br/> +347<br/> +348<br/> +349<br/> +350<br/> +351<br/> +352<br/> +353<br/> +354<br/> +355<br/> +356<br/> +357<br/> +358<br/> +359<br/> +360<br/> +361<br/> +362<br/> +363<br/> +364<br/> +365<br/> +366<br/> +367<br/> +368<br/> +369<br/> +370<br/> +371<br/> +372<br/> +373<br/> +374<br/> +375<br/> +376<br/> +377<br/> +378<br/> +379<br/> +380<br/> +381<br/> +382<br/> +383<br/> +384<br/> +385<br/> +386<br/> +387<br/> +388<br/> +389<br/> +390<br/> +391<br/> +392<br/> +393<br/> +394<br/> +395<br/> +396<br/> +397<br/> +398<br/> +399<br/> +400<br/> +401<br/> +402<br/> +403<br/> +404<br/> +405<br/> +406<br/> +407<br/> +408<br/> +409<br/> +410<br/> +411<br/> +412<br/> +413<br/> +414<br/> +415<br/> +416<br/> +417<br/> +418<br/> +419<br/> +420<br/> +421<br/> +422<br/> +423<br/> +424<br/> +425<br/> +426<br/> +427<br/> +428<br/> +429<br/> +430<br/> +431<br/> +432<br/> +433<br/> +434<br/> +435<br/> +436<br/> +437<br/> +438<br/> +439<br/> +440<br/> +441<br/> +442<br/> +443<br/> +444<br/> +445<br/> +446<br/> +447<br/> +448<br/> +449<br/> +450<br/> +451<br/> +452<br/> +453<br/> +454<br/> +455<br/> +456<br/> +457<br/> +458<br/> +459<br/> +460<br/> +461<br/> +462<br/> +463<br/> +464<br/> +465<br/> +466<br/> +467<br/> +468<br/> +469<br/> +470<br/> +471<br/> +472<br/> +473<br/> +474<br/> +475<br/> +476<br/> +477<br/> +478<br/> +479<br/> +480<br/> +481<br/> +482<br/> +483<br/> +484<br/> +485<br/> +486<br/> +487<br/> +488<br/> +489<br/> +490<br/> +491<br/> +492<br/> +493<br/> +494<br/> +495<br/> +496<br/> +497<br/> +498<br/> +499<br/> + +</body> +</html> |