function checkScroll(x, y, desc) {
is(window.scrollX, x, desc + " - x axis");
is(window.scrollY, y, desc + " - y axis");
}
async function test() { var target = document.getElementById("target");
// drag the page up to scroll down by 50px
let touchEndPromise = promiseTouchEnd(document.body);
ok(await synthesizeNativeTouchDrag(target, 10, 100, 0, -50), "Synthesized native vertical drag (1), waiting for touch-end event...");
await touchEndPromise;
await promiseOnlyApzControllerFlushed();
checkScroll(0, 50, "After first vertical drag, with pan-y" );
// switch style to pan-x
document.body.style.touchAction = "pan-x";
ok(true, "Waiting for pan-x to propagate...");
await promiseAllPaintsDone(null, true);
await promiseOnlyApzControllerFlushed();
// drag the page up to scroll down by 50px, but it won't happen because pan-x
touchEndPromise = promiseTouchEnd(document.body);
ok(await synthesizeNativeTouchDrag(target, 10, 100, 0, -50), "Synthesized native vertical drag (2), waiting for touch-end event...");
await touchEndPromise;
await promiseOnlyApzControllerFlushed();
checkScroll(0, 50, "After second vertical drag, with pan-x");
// drag the page left to scroll right by 50px
touchEndPromise = promiseTouchEnd(document.body);
ok(await synthesizeNativeTouchDrag(target, 100, 10, -50, 0), "Synthesized horizontal drag (1), waiting for touch-end event...");
await touchEndPromise;
await promiseOnlyApzControllerFlushed();
checkScroll(50, 50, "After first horizontal drag, with pan-x");
// drag the page diagonally right/down to scroll up/left by 40px each axis;
// only the x-axis will actually scroll because pan-x
touchEndPromise = promiseTouchEnd(document.body);
ok(await synthesizeNativeTouchDrag(target, 10, 10, 40, 40), "Synthesized diagonal drag (1), waiting for touch-end event...");
await touchEndPromise;
await promiseOnlyApzControllerFlushed();
checkScroll(10, 50, "After first diagonal drag, with pan-x");
// switch style back to pan-y
document.body.style.touchAction = "pan-y";
ok(true, "Waiting for pan-y to propagate...");
await promiseAllPaintsDone(null, true);
await promiseOnlyApzControllerFlushed();
// drag the page diagonally right/down to scroll up/left by 40px each axis;
// only the y-axis will actually scroll because pan-y
touchEndPromise = promiseTouchEnd(document.body);
ok(await synthesizeNativeTouchDrag(target, 10, 10, 40, 40), "Synthesized diagonal drag (2), waiting for touch-end event...");
await touchEndPromise;
await promiseOnlyApzControllerFlushed();
checkScroll(10, 10, "After second diagonal drag, with pan-y");
// switch style to none
document.body.style.touchAction = "none";
ok(true, "Waiting for none to propagate...");
await promiseAllPaintsDone(null, true);
await promiseOnlyApzControllerFlushed();
// drag the page diagonally up/left to scroll down/right by 40px each axis;
// neither will scroll because of touch-action
touchEndPromise = promiseTouchEnd(document.body);
ok(await synthesizeNativeTouchDrag(target, 100, 100, -40, -40), "Synthesized diagonal drag (3), waiting for touch-end event...");
await touchEndPromise;
await promiseOnlyApzControllerFlushed();
checkScroll(10, 10, "After third diagonal drag, with none");
document.body.style.touchAction = "manipulation";
ok(true, "Waiting for manipulation to propagate...");
await promiseAllPaintsDone(null, true);
await promiseOnlyApzControllerFlushed();
// drag the page diagonally up/left to scroll down/right by 40px each axis;
// both will scroll because of touch-action
touchEndPromise = promiseTouchEnd(document.body);
ok(await synthesizeNativeTouchDrag(target, 100, 100, -40, -40), "Synthesized diagonal drag (4), waiting for touch-end event...");
await touchEndPromise;
await promiseOnlyApzControllerFlushed();
checkScroll(50, 50, "After fourth diagonal drag, with manipulation");
}
</script>
</head>
<bodystyle="touch-action: pan-y">
<divstyle="width: 5000px; height: 5000px; background-color: lightgreen;">
This div makes the page scrollable on both axes.<br>
This is the second line of text.<br>
This is the third line of text.<br>
This is the fourth line of text.
</div> <!-- This fixed-position div remains in the same place relative to the browser chrome, so we canuseitasatargetingdeviceforsynthetictouchevents.Thebodywillmovearound aswescroll,sowe'dhavetobeconstantlyadjustingthesyntheticdragcoordinates
if we used that as the target element. -->
<divstyle="position:fixed; left: 10px; top: 10px; width: 1px; height: 1px" id="target"></div>
</body>
</html>
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.