summaryrefslogtreecommitdiffstats
path: root/gfx/layers/apz/test/mochitest/helper_hittest_touchaction.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /gfx/layers/apz/test/mochitest/helper_hittest_touchaction.html
parentInitial commit. (diff)
downloadfirefox-upstream.tar.xz
firefox-upstream.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'gfx/layers/apz/test/mochitest/helper_hittest_touchaction.html')
-rw-r--r--gfx/layers/apz/test/mochitest/helper_hittest_touchaction.html353
1 files changed, 353 insertions, 0 deletions
diff --git a/gfx/layers/apz/test/mochitest/helper_hittest_touchaction.html b/gfx/layers/apz/test/mochitest/helper_hittest_touchaction.html
new file mode 100644
index 0000000000..acabfcc07b
--- /dev/null
+++ b/gfx/layers/apz/test/mochitest/helper_hittest_touchaction.html
@@ -0,0 +1,353 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Testing APZ hit-test with touch-action boxes</title>
+ <script type="application/javascript" src="apz_test_utils.js"></script>
+ <script type="application/javascript" src="apz_test_native_event_utils.js"></script>
+ <script src="/tests/SimpleTest/paint_listener.js"></script>
+ <meta name="viewport" content="width=device-width"/>
+ <style>
+.taBox {
+ width: 20px;
+ height: 20px;
+ background-color: green;
+ display: inline-block;
+}
+.taBox > div {
+ /* make sure this doesn't obscure the center of the enclosing taBox */
+ width: 5px;
+ height: 5px;
+ background-color: blue;
+}
+
+.taBigBox {
+ width: 150px;
+ height: 150px;
+ background-color: green;
+ display: inline-block;
+}
+.taBigBox > div {
+ width: 40px;
+ height: 40px;
+ overflow: auto;
+}
+.taBigBox > div > div {
+ width: 100px;
+ height: 100px;
+}
+ </style>
+</head>
+<body>
+<!-- Create a bunch of divs for hit-testing. Some of the divs also
+ contain nested divs to test inheritance/combination of touch-action
+ properties. This is not an exhaustive list of all the possible
+ combinations but it's assorted enough to provide good coverage. -->
+ <div id="taNone" class="taBox" style="touch-action: none">
+ <div id="taInnerNonePanX" style="touch-action: pan-x"></div>
+ <div id="taInnerNoneManip" style="touch-action: manipulation"></div>
+ </div>
+ <div id="taPanX" class="taBox" style="touch-action: pan-x">
+ <div id="taInnerPanXY" style="touch-action: pan-y"></div>
+ <div id="taInnerPanXManip" style="touch-action: manipulation"></div>
+ </div>
+ <div id="taPanY" class="taBox" style="touch-action: pan-y">
+ <div id="taInnerPanYX" style="touch-action: pan-x"></div>
+ <div id="taInnerPanYY" style="touch-action: pan-y"></div>
+ </div>
+ <div id="taPanXY" class="taBox" style="touch-action: pan-x pan-y">
+ <div id="taInnerPanXYNone" style="touch-action: none"></div>
+ </div>
+ <div id="taManip" class="taBox" style="touch-action: manipulation">
+ <div id="taInnerManipPanX" style="touch-action: pan-x"></div>
+ <div id="taInnerManipNone" style="touch-action: none"></div>
+ <div id="taInnerManipListener" ontouchstart="return false;"></div>
+ </div>
+ <div id="taListener" class="taBox" ontouchstart="return false;">
+ <div id="taInnerListenerPanX" style="touch-action: pan-x"></div>
+ </div>
+ <div id="taPinchZoom" class="taBox" style="touch-action: pinch-zoom">
+ </div>
+
+ <br/>
+
+ <!-- More divs for hit-testing. These comprise one big outer div with
+ a touch-action property, then inside is a scrollable div, possibly with
+ a touch-action of its own, and inside that is another div to make the
+ scrollable div scrollable. Note that the touch-action for an element
+ includes the restrictions from all ancestor elements up to and including
+ the element that has the default action for that touch-action property.
+ Panning actions therefore get inherited from the nearest scrollframe
+ downwards, while zooming actions get inherited from the root content
+ element (because that's the only one that has zooming as the default action)
+ downwards. In effect, any pan restrictions on the outer div should not
+ apply to the inner div, but zooming restrictions should. Also, the
+ touch-action on the scrollable div itself should apply to user interaction
+ inside the scrollable div. -->
+ <div id="taOuterPanX" class="taBigBox" style="touch-action: pan-x">
+ <div id="taScrollerPanY" style="touch-action: pan-y">
+ <div></div>
+ </div>
+ <div id="taScroller">
+ <div style="touch-action: pan-y"></div>
+ </div>
+ <div id="taScroller2">
+ <div></div>
+ </div>
+ </div>
+ <div id="taOuterManipulation" class="taBigBox" style="touch-action: manipulation">
+ <div id="taScrollerPanX" style="touch-action: pan-x">
+ <div></div>
+ </div>
+ <div id="taScroller3">
+ <div></div>
+ </div>
+ <div id="taScroller4" style="touch-action: pan-y">
+ <div style="overflow:hidden"></div>
+ </div>
+ </div>
+</body>
+<script type="application/javascript">
+
+var config = getHitTestConfig();
+
+async function test() {
+ for (var scroller of document.querySelectorAll(".taBigBox > div")) {
+ // layerize all the scrollable divs
+ config.utils.setDisplayPortForElement(0, 0, 100, 100, scroller, 1);
+ }
+ await promiseApzFlushedRepaints();
+
+ var scrollId = config.utils.getViewId(document.scrollingElement);
+ var layersId = config.utils.getLayersId();
+
+ checkHitResult(
+ hitTest(centerOf("taNone")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_X_DISABLED |
+ APZHitResultFlags.PAN_Y_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: none");
+ checkHitResult(
+ hitTest(centerOf("taInnerNonePanX")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_X_DISABLED |
+ APZHitResultFlags.PAN_Y_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: pan-x inside touch-action: none");
+ checkHitResult(
+ hitTest(centerOf("taInnerNoneManip")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_X_DISABLED |
+ APZHitResultFlags.PAN_Y_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: manipulation inside touch-action: none");
+
+ checkHitResult(
+ hitTest(centerOf("taPanX")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_Y_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: pan-x");
+ checkHitResult(
+ hitTest(centerOf("taInnerPanXY")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_X_DISABLED |
+ APZHitResultFlags.PAN_Y_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: pan-y inside touch-action: pan-x");
+ checkHitResult(
+ hitTest(centerOf("taInnerPanXManip")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_Y_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: manipulation inside touch-action: pan-x");
+
+ checkHitResult(
+ hitTest(centerOf("taPanY")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_X_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: pan-y");
+ checkHitResult(
+ hitTest(centerOf("taInnerPanYX")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_X_DISABLED |
+ APZHitResultFlags.PAN_Y_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: pan-x inside touch-action: pan-y");
+ checkHitResult(
+ hitTest(centerOf("taInnerPanYY")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_X_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: pan-y inside touch-action: pan-y");
+
+ checkHitResult(
+ hitTest(centerOf("taPanXY")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: pan-x pan-y");
+ checkHitResult(
+ hitTest(centerOf("taInnerPanXYNone")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_X_DISABLED |
+ APZHitResultFlags.PAN_Y_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: none inside touch-action: pan-x pan-y");
+
+ checkHitResult(
+ hitTest(centerOf("taManip")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: manipulation");
+ checkHitResult(
+ hitTest(centerOf("taInnerManipPanX")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_Y_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: pan-x inside touch-action: manipulation");
+ checkHitResult(
+ hitTest(centerOf("taInnerManipNone")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_X_DISABLED |
+ APZHitResultFlags.PAN_Y_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: none inside touch-action: manipulation");
+ checkHitResult(
+ hitTest(centerOf("taInnerManipListener")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.APZ_AWARE_LISTENERS |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "div with touch listener inside touch-action: manipulation");
+
+ checkHitResult(
+ hitTest(centerOf("taListener")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.APZ_AWARE_LISTENERS,
+ scrollId,
+ layersId,
+ "div with touch listener");
+ checkHitResult(
+ hitTest(centerOf("taInnerListenerPanX")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.APZ_AWARE_LISTENERS |
+ APZHitResultFlags.PAN_Y_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: pan-x inside div with touch listener");
+
+ checkHitResult(
+ hitTest(centerOf("taPinchZoom")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_Y_DISABLED |
+ APZHitResultFlags.PAN_X_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ scrollId,
+ layersId,
+ "touch-action: pinch-zoom inside div with touch listener");
+
+ checkHitResult(
+ hitTest(centerOf("taScrollerPanY")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_X_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ config.utils.getViewId(document.getElementById("taScrollerPanY")),
+ layersId,
+ "touch-action: pan-y on scroller");
+ checkHitResult(
+ hitTest(centerOf("taScroller")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_X_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ config.utils.getViewId(document.getElementById("taScroller")),
+ layersId,
+ "touch-action: pan-y on div inside scroller");
+ checkHitResult(
+ hitTest(centerOf("taScroller2")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ config.utils.getViewId(document.getElementById("taScroller2")),
+ layersId,
+ "zooming restrictions from pan-x outside scroller get inherited in");
+
+ checkHitResult(
+ hitTest(centerOf("taScrollerPanX")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_Y_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ config.utils.getViewId(document.getElementById("taScrollerPanX")),
+ layersId,
+ "touch-action: pan-x on scroller inside manipulation");
+ checkHitResult(
+ hitTest(centerOf("taScroller3")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ config.utils.getViewId(document.getElementById("taScroller3")),
+ layersId,
+ "touch-action: manipulation outside scroller gets inherited in");
+ checkHitResult(
+ hitTest(centerOf("taScroller4")),
+ APZHitResultFlags.VISIBLE |
+ APZHitResultFlags.PAN_X_DISABLED |
+ APZHitResultFlags.PINCH_ZOOM_DISABLED |
+ APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
+ config.utils.getViewId(document.getElementById("taScroller4")),
+ layersId,
+ "overflow:hidden div doesn't reset pan-x/pan-y from enclosing scroller");
+}
+
+waitUntilApzStable()
+ .then(test)
+ .then(subtestDone, subtestFailed);
+
+</script>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-01 05:31:55 +0000