From 5b2676b55a86d1abb3a24bfdb211bc0f68c6e2f9 Mon Sep 17 00:00:00 2001
From: Jason Williams <jason.williams01@bbc.co.uk>
Date: Mon, 11 Jun 2018 14:01:17 +0100
Subject: [PATCH 1/3] adding movementX and movementY into syntheticMouseEvent

---
 .../src/events/SyntheticMouseEvent.js         | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/react-dom/src/events/SyntheticMouseEvent.js b/packages/react-dom/src/events/SyntheticMouseEvent.js
index d1ff4b32a1777..43bd653fa51f5 100644
--- a/packages/react-dom/src/events/SyntheticMouseEvent.js
+++ b/packages/react-dom/src/events/SyntheticMouseEvent.js
@@ -8,6 +8,9 @@
 import SyntheticUIEvent from './SyntheticUIEvent';
 import getEventModifierState from './getEventModifierState';
 
+let previousScreenX = null;
+let previousScreenY = null;
+
 /**
  * @interface MouseEvent
  * @see http://www.w3.org/TR/DOM-Level-3-Events/
@@ -34,6 +37,24 @@ const SyntheticMouseEvent = SyntheticUIEvent.extend({
         : event.fromElement)
     );
   },
+  movementX: function(event) {
+    if ('movementX' in event) {
+      return event.movementX;
+    }
+
+    const screenX = previousScreenX;
+    previousScreenX = event.ScreenX;
+    return screenX ? event.screenX - screenX : 0;
+  },
+  movementY: function(event) {
+    if ('movementY' in event) {
+      return event.movementY;
+    }
+
+    const screenY = previousScreenY;
+    previousScreenY = event.screenY;
+    return screenY ? event.screenY - screenY : 0;
+  },
 });
 
 export default SyntheticMouseEvent;

From 51bc4153a32065ca6121cd163094c2027c20eaeb Mon Sep 17 00:00:00 2001
From: Jason Williams <jase.williams@gmail.com>
Date: Mon, 11 Jun 2018 21:35:27 +0100
Subject: [PATCH 2/3] fixing case mistake

---
 packages/react-dom/src/events/SyntheticMouseEvent.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/events/SyntheticMouseEvent.js b/packages/react-dom/src/events/SyntheticMouseEvent.js
index 43bd653fa51f5..d3319ec487156 100644
--- a/packages/react-dom/src/events/SyntheticMouseEvent.js
+++ b/packages/react-dom/src/events/SyntheticMouseEvent.js
@@ -43,7 +43,7 @@ const SyntheticMouseEvent = SyntheticUIEvent.extend({
     }
 
     const screenX = previousScreenX;
-    previousScreenX = event.ScreenX;
+    previousScreenX = event.screenX;
     return screenX ? event.screenX - screenX : 0;
   },
   movementY: function(event) {

From 2cff05501fccf5fc9277b089979f6b12231136f7 Mon Sep 17 00:00:00 2001
From: Nathan Hunzaker <nate.hunzaker@gmail.com>
Date: Fri, 15 Jun 2018 09:05:48 -0400
Subject: [PATCH 3/3] Add test fixture for movementX/Y fields

---
 fixtures/dom/src/components/Header.js         |  1 +
 fixtures/dom/src/components/fixtures/index.js |  3 ++
 .../components/fixtures/mouse-events/index.js | 16 +++++++
 .../fixtures/mouse-events/mouse-movement.js   | 48 +++++++++++++++++++
 4 files changed, 68 insertions(+)
 create mode 100644 fixtures/dom/src/components/fixtures/mouse-events/index.js
 create mode 100644 fixtures/dom/src/components/fixtures/mouse-events/mouse-movement.js

diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
index 4a7b1513e66cb..c78eaa6abf40a 100644
--- a/fixtures/dom/src/components/Header.js
+++ b/fixtures/dom/src/components/Header.js
@@ -65,6 +65,7 @@ class Header extends React.Component {
                 <option value="/custom-elements">Custom Elements</option>
                 <option value="/media-events">Media Events</option>
                 <option value="/pointer-events">Pointer Events</option>
+                <option value="/mouse-events">Mouse Events</option>
               </select>
             </label>
             <label htmlFor="react_version">
diff --git a/fixtures/dom/src/components/fixtures/index.js b/fixtures/dom/src/components/fixtures/index.js
index d43a94df3418b..4bbb20180c206 100644
--- a/fixtures/dom/src/components/fixtures/index.js
+++ b/fixtures/dom/src/components/fixtures/index.js
@@ -12,6 +12,7 @@ import EventPooling from './event-pooling';
 import CustomElementFixtures from './custom-elements';
 import MediaEventsFixtures from './media-events';
 import PointerEventsFixtures from './pointer-events';
+import MouseEventsFixtures from './mouse-events';
 
 const React = window.React;
 
@@ -49,6 +50,8 @@ function FixturesPage() {
       return <MediaEventsFixtures />;
     case '/pointer-events':
       return <PointerEventsFixtures />;
+    case '/mouse-events':
+      return <MouseEventsFixtures />;
     default:
       return <p>Please select a test fixture.</p>;
   }
diff --git a/fixtures/dom/src/components/fixtures/mouse-events/index.js b/fixtures/dom/src/components/fixtures/mouse-events/index.js
new file mode 100644
index 0000000000000..e18f8925db187
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/mouse-events/index.js
@@ -0,0 +1,16 @@
+import FixtureSet from '../../FixtureSet';
+import MouseMovement from './mouse-movement';
+
+const React = window.React;
+
+class MouseEvents extends React.Component {
+  render() {
+    return (
+      <FixtureSet title="Mouse Events" description="">
+        <MouseMovement />
+      </FixtureSet>
+    );
+  }
+}
+
+export default MouseEvents;
diff --git a/fixtures/dom/src/components/fixtures/mouse-events/mouse-movement.js b/fixtures/dom/src/components/fixtures/mouse-events/mouse-movement.js
new file mode 100644
index 0000000000000..e6706edc238bf
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/mouse-events/mouse-movement.js
@@ -0,0 +1,48 @@
+import TestCase from '../../TestCase';
+
+const React = window.React;
+
+class MouseMovement extends React.Component {
+  state = {
+    movement: {x: 0, y: 0},
+  };
+
+  onMove = event => {
+    this.setState({x: event.movementX, y: event.movementY});
+  };
+
+  render() {
+    const {x, y} = this.state;
+
+    const boxStyle = {
+      padding: '10px 20px',
+      border: '1px solid #d9d9d9',
+      margin: '10px 0 20px',
+    };
+
+    return (
+      <TestCase
+        title="Mouse Movement"
+        description="We polyfill the movementX and movementY fields."
+        affectedBrowsers="IE, Safari">
+        <TestCase.Steps>
+          <li>Mouse over the box below</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The reported values should equal the pixel (integer) difference
+          between mouse movements positions.
+        </TestCase.ExpectedResult>
+
+        <div style={boxStyle} onMouseMove={this.onMove}>
+          <p>Trace your mouse over this box.</p>
+          <p>
+            Last movement: {x},{y}
+          </p>
+        </div>
+      </TestCase>
+    );
+  }
+}
+
+export default MouseMovement;