Handle object-fit gracefully for older browsers. (#12)

This fixes an Error being thrown in IE since it does not support object-fit.

Author: Sepand Parhami

src/img-dimensions.ts

@@ -102,11 +102,15 @@ function getDimensionsForObjectFitScaleDown(
  * that constrains the size with the CSS `object-fit` property.
  * @param img The HTMLImageElement
  * @param containerSize The size of the container element.
+ * @param objectFit An optional object-fit value to use. Defaults to the
+ *    `img`'s current `object-fit`.
  * @return The width/height of the "actual" image.
  */
 export function getRenderedDimensions(
-    img: HTMLImageElement, containerSize: Size): Size {
-  const objectFit = getComputedStyle(img).getPropertyValue('object-fit');
+    img: HTMLImageElement,
+    containerSize: Size,
+    objectFit: string|null = getComputedStyle(img).getPropertyValue('object-fit'),
+): Size {
   const naturalSize = {
     width: img.naturalWidth,
     height: img.naturalHeight,
@@ -123,6 +127,11 @@ export function getRenderedDimensions(
       return getDimensionsForObjectFitNone(naturalSize);
     case 'scale-down':
       return getDimensionsForObjectFitScaleDown(naturalSize, containerSize);
+    case '':
+    case null:
+      // For browsers that do not support `object-fit`, default to `fill`
+      // behavior.
+      return getDimensionsForObjectFitFill(containerSize);
     default:
       throw new Error(`object-fit: ${objectFit} not supported`);
   }

src/test-img-dimensions.ts

@@ -74,6 +74,24 @@ describe('getDimensions', () => {
     });
   });
 
+  describe('unsupported object-fit', () => {
+    it('should return the requested dimensions for blank', async () => {
+      await updateImg(img, 'fill', threeByFourUri);
+    
+      const {width, height} = getRenderedDimensions(img, dimensions(10, 10), '');
+      expect(width).to.equal(10);
+      expect(height).to.equal(10);
+    });
+
+    it('should return the requested dimensions for null', async () => {
+      await updateImg(img, 'fill', threeByFourUri);
+    
+      const {width, height} = getRenderedDimensions(img, dimensions(10, 10), null);
+      expect(width).to.equal(10);
+      expect(height).to.equal(10);
+    });
+  });
+
   describe('object-fit: contain', () => {
     it('should return the correct dimensions when constrained by width', async () => {
       await updateImg(img, 'contain', threeByFourUri);