fix: improper positioning in Safari et al.

In several browsers, getBoundingClientRect returns an object that does
not have x/y properties (see
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect).

As of 0.1.1, passing the result of getBoundingClientRect to the
constructor would cause a type error.

Since it's very easy to extend the return value to have those
properties, we now do that in our constructor, and update our
constructor's typings to accept ClientRect instead of DOMRect.

src/ringside.ts

@@ -1,4 +1,5 @@
 import { DOMRect, RectProps } from './types';
+import { ClientToDOM } from './utils';
 
 export type Orientation = 'top' | 'left' | 'bottom' | 'right';
 export type HAlignment = 'start' | 'center' | 'end';
@@ -45,17 +46,21 @@ class Ringside implements RingsideInterface {
   public readonly rightLane: Lane;
   public readonly bottomLane: Lane;
   public readonly leftLane: Lane;
+  public readonly innerBounds: DOMRect;
+  public readonly outerBounds: DOMRect;
 
   public orientations: Orientation[] = ['top', 'right', 'bottom', 'left'];
   public hAlignments: HAlignment[] = ['start', 'center', 'end'];
   public vAlignments: VAlignment[] = ['top', 'middle', 'bottom'];
 
   constructor(
-    readonly innerBounds: DOMRect,
-    readonly outerBounds: DOMRect,
+    innerBounds: ClientRect,
+    outerBounds: ClientRect,
     readonly height: number,
     readonly width: number,
   ) {
+    this.innerBounds = ClientToDOM(innerBounds);
+    this.outerBounds = ClientToDOM(outerBounds);
     this.topLane = {
       name: 'top',
       x: this.outerBounds.x,

src/utils.ts

@@ -17,3 +17,7 @@ export const rectToDOMRect: (
     right: x + width,
   };
 };
+
+export const ClientToDOM: (rect: ClientRect) => DOMRect = rect => {
+  return rectToDOMRect(rect.left, rect.top, rect.height, rect.width);
+};

test/ringside.test.ts

@@ -103,6 +103,36 @@ describe('Ringside', () => {
         y: 80,
       });
     });
+
+    it('positions given Safari ClientRect bounds', () => {
+      outer = {
+        top: 0,
+        left: 0,
+        right: 600,
+        bottom: 500,
+        height: 500,
+        width: 600,
+      };
+      inner = {
+        top: 200,
+        left: 150,
+        right: 350,
+        bottom: 300,
+        height: 100,
+        width: 200,
+      };
+
+      ringside = new Ringside(inner, outer, height, width);
+      const bottom = ringside.bottom();
+
+      expect(bottom.end.bottom).toEqual({
+        fits: true,
+        height,
+        width,
+        x: 150,
+        y: 300,
+      });
+    });
   });
 
   describe('fit', () => {