diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js
new file mode 100644
index 00000000000..854494e7184
--- /dev/null
+++ b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js
@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
+
+import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest';
+import RNTesterPlatformTestEventRecorder from '../PlatformTest/RNTesterPlatformTestEventRecorder';
+import * as React from 'react';
+import {useCallback, useState} from 'react';
+import {View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+ a: {
+ width: 200,
+ height: 120,
+ backgroundColor: 'blue',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ b: {
+ height: 60,
+ width: 100,
+ backgroundColor: 'green',
+ },
+ c: {
+ height: 120,
+ width: 200,
+ backgroundColor: 'yellow',
+ },
+});
+
+const relevantEvents = [
+ 'pointerMove',
+ 'pointerOver',
+ 'pointerEnter',
+ 'pointerOut',
+ 'pointerLeave',
+];
+
+const expected = [
+ {type: 'pointerOver', target: 'a'},
+ {type: 'pointerEnter', target: 'a'},
+ {type: 'pointerMove', target: 'a', optional: true},
+ {type: 'pointerOut', target: 'a'},
+ {type: 'pointerOver', target: 'b'},
+ {type: 'pointerEnter', target: 'b'},
+ {type: 'pointerMove', target: 'b', optional: true},
+ {type: 'pointerOut', target: 'b'},
+ {type: 'pointerLeave', target: 'b'},
+ {type: 'pointerOver', target: 'a'},
+ {type: 'pointerMove', target: 'a', optional: true},
+ {type: 'pointerOut', target: 'a'},
+ {type: 'pointerLeave', target: 'a'},
+ {type: 'pointerOver', target: 'c'},
+ {type: 'pointerEnter', target: 'c'},
+ {type: 'pointerMove', target: 'c', optional: true},
+ {type: 'pointerOut', target: 'c'},
+ {type: 'pointerLeave', target: 'c'},
+];
+
+const targetNames = ['a', 'b', 'c'];
+
+// adapted from https://github.com/web-platform-tests/wpt/blob/master/uievents/order-of-events/mouse-events/mousemove-between.html
+function PointerEventPointerMoveBetweenTestCase(
+ props: PlatformTestComponentBaseProps,
+) {
+ const {harness} = props;
+
+ const pointermove_between = harness.useAsyncTest(
+ 'Pointermove events between elements should fire in the correct order.',
+ );
+
+ const [eventRecorder] = useState(
+ () =>
+ new RNTesterPlatformTestEventRecorder({
+ mergeEventTypes: ['pointerMove'],
+ relevantEvents,
+ }),
+ );
+
+ const eventHandler = useCallback(
+ (event: PointerEvent, eventType: string, eventTarget: string) => {
+ event.stopPropagation();
+ if (eventTarget === 'c' && eventType === 'pointerLeave') {
+ pointermove_between.step(({assert_true}) => {
+ assert_true(
+ eventRecorder.checkRecords(expected),
+ 'Expected events to occur in the correct order',
+ );
+ });
+ pointermove_between.done();
+ }
+ },
+ [eventRecorder, pointermove_between],
+ );
+
+ const eventProps = eventRecorder.useRecorderTestEventHandlers(
+ targetNames,
+ eventHandler,
+ );
+
+ return (
+ <>
+
+
+
+
+ >
+ );
+}
+
+type Props = $ReadOnly<{}>;
+export default function PointerEventPointerMoveBetween(
+ props: Props,
+): React.MixedElement {
+ return (
+
+ );
+}
diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js
index 0d28e366590..275f65845c7 100644
--- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js
+++ b/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js
@@ -20,6 +20,7 @@ import PointerEventAttributesNoHoverPointers from './W3CPointerEventPlatformTest
import PointerEventPointerMoveOnChordedMouseButton from './W3CPointerEventPlatformTests/PointerEventPointerMoveOnChordedMouseButton';
import PointerEventPointerMoveAcross from './W3CPointerEventPlatformTests/PointerEventPointerMoveAcross';
import PointerEventPointerMoveEventOrder from './W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder';
+import PointerEventPointerMoveBetween from './W3CPointerEventPlatformTests/PointerEventPointerMoveBetween';
import EventfulView from './W3CPointerEventsEventfulView';
function AbsoluteChildExample({log}: {log: string => void}) {
@@ -212,6 +213,14 @@ export default {
return ;
},
},
+ {
+ name: 'pointerevent_pointermove_between',
+ description: '',
+ title: 'Pointermove handling between elements',
+ render(): React.Node {
+ return ;
+ },
+ },
{
name: 'pointerevent_pointermove_event_order',
description: '',