Provide DOMRect implementation for IE11

packages/dom/src/dom.js

@@ -7,9 +7,36 @@ import tinymce from 'tinymce';
 /**
  * Browser dependencies
  */
-const { getComputedStyle, DOMRect } = window;
+const { getComputedStyle } = window;
 const { TEXT_NODE, ELEMENT_NODE } = window.Node;
 
+/**
+ * A DOMRect implementation for browsers that don't provide one.
+ *
+ * This DOMRect implementation attempts to follow the DOMRect interface
+ * as described in the Geometry Interfaces draft recommendation:
+ * https://drafts.fxtf.org/geometry/#DOMRect
+ *
+ * This is an implementation detail but is exported for unit test.
+ *
+ * @private
+ */
+export const DOMRectImplementation = class DOMRect {
+	constructor( x, y, width, height ) {
+		this.x = x;
+		this.y = y;
+		this.width = width;
+		this.height = height;
+		this.left = x + Math.min( 0, width );
+		this.right = x + Math.max( 0, width );
+		this.top = y + Math.min( 0, height );
+		this.bottom = y + Math.max( 0, height );
+	}
+};
+
+// DOMRect isn't provided in IE, so we need to provide an implementation.
+const DOMRect = window.DOMRect || DOMRectImplementation;
+
 /**
  * Check whether the caret is horizontally at the edge of the container.
  *

packages/dom/src/test/dom.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { isHorizontalEdge, placeCaretAtHorizontalEdge, isTextField } from '../dom';
+import { isHorizontalEdge, placeCaretAtHorizontalEdge, isTextField, DOMRectImplementation } from '../dom';
 
 describe( 'DOM', () => {
 	let parent;
@@ -15,6 +15,37 @@ describe( 'DOM', () => {
 		parent.remove();
 	} );
 
+	describe( 'DOMRectImplementation', () => {
+		it( 'should have specified x, y, width, and height properties', () => {
+			const domRect = new DOMRectImplementation( 12, 34, 56, 78 );
+			expect( domRect.x ).toBe( 12 );
+			expect( domRect.y ).toBe( 34 );
+			expect( domRect.width ).toBe( 56 );
+			expect( domRect.height ).toBe( 78 );
+		} );
+
+		it( 'should have correct `left` and `right` when `width` is positive', () => {
+			const domRect = new DOMRectImplementation( 100, 0, 200, 0 );
+			expect( domRect.left ).toBe( /* x */ 100 );
+			expect( domRect.right ).toBe( /* x + width */ 300 );
+		} );
+		it( 'should have correct `left` and `right` when `width` is negative', () => {
+			const domRect = new DOMRectImplementation( 100, 0, -200, 0 );
+			expect( domRect.left ).toBe( /* x + width */ -100 );
+			expect( domRect.right ).toBe( /* x */ 100 );
+		} );
+		it( 'should have correct `top` and `bottom` when `height` is positive', () => {
+			const domRect = new DOMRectImplementation( 0, 100, 0, 200 );
+			expect( domRect.top ).toBe( /* y */ 100 );
+			expect( domRect.bottom ).toBe( /* y + height */ 300 );
+		} );
+		it( 'should have correct `top` and `bottom` when `height` is negative', () => {
+			const domRect = new DOMRectImplementation( 0, 100, 0, -200 );
+			expect( domRect.top ).toBe( /* y + height */ -100 );
+			expect( domRect.bottom ).toBe( /* y */ 100 );
+		} );
+	} );
+
 	describe( 'isHorizontalEdge', () => {
 		it( 'Should return true for empty input', () => {
 			const input = document.createElement( 'input' );