update cropperjs to the recent version

39 files changed, 1645 insertions, 0 deletions

diff --git a/library/cropperjs/test/specs/options/aspectRatio.spec.js b/library/cropperjs/test/specs/options/aspectRatio.spec.js
new file mode 100644
index 000000000..4524d2810
--- /dev/null
+++ b/library/cropperjs/test/specs/options/aspectRatio.spec.js
@@ -0,0 +1,24 @@
+describe('aspectRatio (option)', () => {
+  it('should be `NaN` by default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.aspectRatio).to.be.NaN;
+  });
+
+  it('should match the given aspect ratio', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      aspectRatio: 1,
+
+      crop() {
+        const cropBoxData = cropper.getCropBoxData();
+
+        expect(cropBoxData.width).to.equal(cropBoxData.height);
+        done();
+      },
+    });
+
+    expect(cropper.options.aspectRatio).to.equal(1);
+  });
+});
diff --git a/library/cropperjs/test/specs/options/autoCrop.spec.js b/library/cropperjs/test/specs/options/autoCrop.spec.js
new file mode 100644
index 000000000..19899e94d
--- /dev/null
+++ b/library/cropperjs/test/specs/options/autoCrop.spec.js
@@ -0,0 +1,29 @@
+describe('autoCrop (option)', () => {
+  it('should crop automatically by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        expect(cropper.cropped).to.be.true;
+        expect(window.getComputedStyle(cropper.cropBox).display).to.not.equal('none');
+        done();
+      },
+    });
+
+    expect(cropper.options.autoCrop).to.be.true;
+  });
+
+  it('should not crop automatically', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      autoCrop: false,
+
+      ready() {
+        expect(cropper.cropped).to.be.false;
+        expect(window.getComputedStyle(cropper.cropBox).display).to.equal('none');
+        done();
+      },
+    });
+
+    expect(cropper.options.autoCrop).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/autoCropArea.spec.js b/library/cropperjs/test/specs/options/autoCropArea.spec.js
new file mode 100644
index 000000000..40513f4f3
--- /dev/null
+++ b/library/cropperjs/test/specs/options/autoCropArea.spec.js
@@ -0,0 +1,35 @@
+describe('autoCropArea (option)', () => {
+  it('should be 80% by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const canvasData = cropper.getCanvasData();
+        const cropBoxData = cropper.getCropBoxData();
+
+        expect(canvasData.width * 0.8).to.equal(cropBoxData.width);
+        expect(canvasData.height * 0.8).to.equal(cropBoxData.height);
+        done();
+      },
+    });
+
+    expect(cropper.options.autoCropArea).to.equal(0.8);
+  });
+
+  it('should be 100%', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      autoCropArea: 1,
+
+      ready() {
+        const canvasData = cropper.getCanvasData();
+        const cropBoxData = cropper.getCropBoxData();
+
+        expect(canvasData.width).to.equal(cropBoxData.width);
+        expect(canvasData.height).to.equal(cropBoxData.height);
+        done();
+      },
+    });
+
+    expect(cropper.options.autoCropArea).to.equal(1);
+  });
+});
diff --git a/library/cropperjs/test/specs/options/background.spec.js b/library/cropperjs/test/specs/options/background.spec.js
new file mode 100644
index 000000000..d1f9866e2
--- /dev/null
+++ b/library/cropperjs/test/specs/options/background.spec.js
@@ -0,0 +1,27 @@
+describe('background (option)', () => {
+  it('should show the background by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        expect(window.getComputedStyle(cropper.cropper).backgroundImage).to.not.equal('none');
+        done();
+      },
+    });
+
+    expect(cropper.options.background).to.be.true;
+  });
+
+  it('should not show the background', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      background: false,
+
+      ready() {
+        expect(window.getComputedStyle(cropper.cropper).backgroundImage).to.equal('none');
+        done();
+      },
+    });
+
+    expect(cropper.options.background).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/center.spec.js b/library/cropperjs/test/specs/options/center.spec.js
new file mode 100644
index 000000000..37551435e
--- /dev/null
+++ b/library/cropperjs/test/specs/options/center.spec.js
@@ -0,0 +1,31 @@
+describe('center (option)', () => {
+  it('should show the center cross hair by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const center = cropper.cropper.querySelector('.cropper-center');
+
+        expect(window.getComputedStyle(center).display).to.not.equal('none');
+        done();
+      },
+    });
+
+    expect(cropper.options.center).to.be.true;
+  });
+
+  it('should hide the center cross hair', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      center: false,
+
+      ready() {
+        const center = cropper.cropper.querySelector('.cropper-center');
+
+        expect(window.getComputedStyle(center).display).to.equal('none');
+        done();
+      },
+    });
+
+    expect(cropper.options.center).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/checkCrossOrigin.spec.js b/library/cropperjs/test/specs/options/checkCrossOrigin.spec.js
new file mode 100644
index 000000000..52d9b4682
--- /dev/null
+++ b/library/cropperjs/test/specs/options/checkCrossOrigin.spec.js
@@ -0,0 +1,49 @@
+describe('checkCrossOrigin (option)', () => {
+  const crossOriginImageURL = 'https://fengyuanchen.github.io/cropperjs/images/picture.jpg';
+
+  it('should check cross origin by default', (done) => {
+    const image = window.createImage({
+      src: crossOriginImageURL,
+    });
+    const cropper = new Cropper(image, {
+      ready() {
+        expect(cropper.image.crossOrigin).to.equal('anonymous');
+        expect(cropper.image.src).to.include('timestamp');
+        done();
+      },
+    });
+
+    expect(cropper.options.checkCrossOrigin).to.be.true;
+  });
+
+  it('should not check cross origin', (done) => {
+    const image = window.createImage({
+      src: crossOriginImageURL,
+    });
+    const cropper = new Cropper(image, {
+      checkCrossOrigin: false,
+
+      ready() {
+        expect(cropper.image.crossOrigin).to.be.null;
+        expect(cropper.image.src).to.not.include('timestamp');
+        done();
+      },
+    });
+
+    expect(cropper.options.checkCrossOrigin).to.be.false;
+  });
+
+  it('should add timestamp even though the image has the `crossOrigin` attribute', (done) => {
+    const image = window.createImage({
+      src: crossOriginImageURL,
+      crossOrigin: 'anonymous',
+    });
+    const cropper = new Cropper(image, {
+      ready() {
+        expect(cropper.image.crossOrigin).to.equal('anonymous');
+        expect(cropper.image.src).to.include('timestamp');
+        done();
+      },
+    });
+  });
+});
diff --git a/library/cropperjs/test/specs/options/checkOrientation.spec.js b/library/cropperjs/test/specs/options/checkOrientation.spec.js
new file mode 100644
index 000000000..6f37e6db2
--- /dev/null
+++ b/library/cropperjs/test/specs/options/checkOrientation.spec.js
@@ -0,0 +1,45 @@
+describe('checkOrientation (option)', () => {
+  const imageURL = '/base/docs/images/picture-3.jpg';
+
+  it('should check orientation be default', (done) => {
+    const image = window.createImage({
+      src: imageURL,
+    });
+    const cropper = new Cropper(image, {
+      ready() {
+        expect(cropper.getData().rotate).to.not.equal(0);
+        done();
+      },
+    });
+
+    expect(cropper.options.checkOrientation).to.be.true;
+  });
+
+  it('should not check orientation', (done) => {
+    const image = window.createImage({
+      src: imageURL,
+    });
+    const cropper = new Cropper(image, {
+      checkOrientation: false,
+
+      ready() {
+        expect(cropper.getData().rotate).to.equal(0);
+        done();
+      },
+    });
+
+    expect(cropper.options.checkOrientation).to.be.false;
+  });
+
+  it('should not check orientation when it is not rotatable and not scalable', () => {
+    const image = window.createImage({
+      src: imageURL,
+    });
+    const cropper = new Cropper(image, {
+      rotatable: false,
+      scalable: false,
+    });
+
+    expect(cropper.options.checkOrientation).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/crop.spec.js b/library/cropperjs/test/specs/options/crop.spec.js
new file mode 100644
index 000000000..a3e11f2d7
--- /dev/null
+++ b/library/cropperjs/test/specs/options/crop.spec.js
@@ -0,0 +1,28 @@
+describe('crop (option)', () => {
+  it('should be `null` be default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.crop).to.be.null;
+  });
+
+  it('should execute the `crop` hook function', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      crop(event) {
+        expect(event.type).to.equal('crop');
+        expect(event.detail).to.be.an('object').that.has.all.keys(['x', 'y', 'width', 'height', 'rotate', 'scaleX', 'scaleY']);
+        expect(event.detail.x).to.be.a('number');
+        expect(event.detail.y).to.be.a('number');
+        expect(event.detail.width).to.be.a('number');
+        expect(event.detail.height).to.be.a('number');
+        expect(event.detail.rotate).to.be.a('number');
+        expect(event.detail.scaleX).to.be.a('number');
+        expect(event.detail.scaleY).to.be.a('number');
+        done();
+      },
+    });
+
+    expect(cropper.options.crop).to.be.a('function');
+  });
+});
diff --git a/library/cropperjs/test/specs/options/cropBoxMovable.spec.js b/library/cropperjs/test/specs/options/cropBoxMovable.spec.js
new file mode 100644
index 000000000..8a1e52cc4
--- /dev/null
+++ b/library/cropperjs/test/specs/options/cropBoxMovable.spec.js
@@ -0,0 +1,31 @@
+describe('cropBoxMovable (option)', () => {
+  it('should by movable by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const face = cropper.cropper.querySelector('.cropper-face');
+
+        expect(face.dataset.cropperAction).to.equal('all');
+        done();
+      },
+    });
+
+    expect(cropper.options.cropBoxMovable).to.be.true;
+  });
+
+  it('should not be movable', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      cropBoxMovable: false,
+
+      ready() {
+        const face = cropper.cropper.querySelector('.cropper-face');
+
+        expect(face.dataset.cropperAction).to.not.equal('all');
+        done();
+      },
+    });
+
+    expect(cropper.options.cropBoxMovable).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/cropBoxResizable.spec.js b/library/cropperjs/test/specs/options/cropBoxResizable.spec.js
new file mode 100644
index 000000000..2955a0407
--- /dev/null
+++ b/library/cropperjs/test/specs/options/cropBoxResizable.spec.js
@@ -0,0 +1,31 @@
+describe('cropBoxResizable (option)', () => {
+  it('should be resizable by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        Array.from(cropper.cropper.querySelectorAll('.cropper-line, .cropper-point')).forEach((handler) => {
+          expect(window.getComputedStyle(handler).display).to.not.equal('none');
+        });
+        done();
+      },
+    });
+
+    expect(cropper.options.cropBoxResizable).to.be.true;
+  });
+
+  it('should not be resizable', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      cropBoxResizable: false,
+
+      ready() {
+        Array.from(cropper.cropper.querySelectorAll('.cropper-line, .cropper-point')).forEach((handler) => {
+          expect(window.getComputedStyle(handler).display).to.equal('none');
+        });
+        done();
+      },
+    });
+
+    expect(cropper.options.cropBoxResizable).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/cropend.spec.js b/library/cropperjs/test/specs/options/cropend.spec.js
new file mode 100644
index 000000000..c2e9f0f01
--- /dev/null
+++ b/library/cropperjs/test/specs/options/cropend.spec.js
@@ -0,0 +1,35 @@
+describe('cropend (option)', () => {
+  const POINTER_DOWN = window.PointerEvent ? 'pointerdown' : 'mousedown';
+  const POINTER_MOVE = window.PointerEvent ? 'pointermove' : 'mousemove';
+  const POINTER_UP = window.PointerEvent ? 'pointerup' : 'mouseup';
+
+  it('should be `null` be default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.cropend).to.be.null;
+  });
+
+  it('should execute the `cropend` hook function', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const { dragBox } = cropper;
+
+        dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+        dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+        dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+      },
+
+      cropend(event) {
+        expect(event.type).to.equal('cropend');
+        expect(event.detail).to.be.an('object').that.has.all.keys(['action', 'originalEvent']);
+        expect(event.detail.action).to.equal('crop');
+        expect(event.detail.originalEvent.type).to.equal(POINTER_UP);
+        done();
+      },
+    });
+
+    expect(cropper.options.cropend).to.be.a('function');
+  });
+});
diff --git a/library/cropperjs/test/specs/options/cropmove.spec.js b/library/cropperjs/test/specs/options/cropmove.spec.js
new file mode 100644
index 000000000..d18735923
--- /dev/null
+++ b/library/cropperjs/test/specs/options/cropmove.spec.js
@@ -0,0 +1,57 @@
+describe('cropmove (option)', () => {
+  const POINTER_DOWN = window.PointerEvent ? 'pointerdown' : 'mousedown';
+  const POINTER_MOVE = window.PointerEvent ? 'pointermove' : 'mousemove';
+  const POINTER_UP = window.PointerEvent ? 'pointerup' : 'mouseup';
+
+  it('should be `null` be default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.cropmove).to.be.null;
+  });
+
+  it('should execute the `cropmove` hook function', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const { dragBox } = cropper;
+
+        dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+        dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+        dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+      },
+
+      cropmove(event) {
+        expect(event.type).to.equal('cropmove');
+        expect(event.detail).to.be.an('object').that.has.all.keys(['action', 'originalEvent']);
+        expect(event.detail.action).to.equal('crop');
+        expect(event.detail.originalEvent.type).to.equal(POINTER_MOVE);
+        done();
+      },
+    });
+
+    expect(cropper.options.cropmove).to.be.a('function');
+  });
+
+  it('should not execute the `crop` hook function when default prevented', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const { dragBox } = cropper;
+
+        cropper.options.crop = () => {
+          expect.fail(1, 0);
+        };
+
+        dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+        dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+        dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+      },
+
+      cropmove(event) {
+        event.preventDefault();
+        done();
+      },
+    });
+  });
+});
diff --git a/library/cropperjs/test/specs/options/cropstart.spec.js b/library/cropperjs/test/specs/options/cropstart.spec.js
new file mode 100644
index 000000000..cc261afb1
--- /dev/null
+++ b/library/cropperjs/test/specs/options/cropstart.spec.js
@@ -0,0 +1,61 @@
+describe('cropstart (option)', () => {
+  const POINTER_DOWN = window.PointerEvent ? 'pointerdown' : 'mousedown';
+  const POINTER_MOVE = window.PointerEvent ? 'pointermove' : 'mousemove';
+  const POINTER_UP = window.PointerEvent ? 'pointerup' : 'mouseup';
+
+  it('should be `null` be default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.cropstart).to.be.null;
+  });
+
+  it('should execute the `cropstart` hook function', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const { dragBox } = cropper;
+
+        dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+        dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+        dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+      },
+
+      cropstart(event) {
+        expect(event.type).to.equal('cropstart');
+        expect(event.detail).to.be.an('object').that.has.all.keys(['action', 'originalEvent']);
+        expect(event.detail.action).to.equal('crop');
+        expect(event.detail.originalEvent.type).to.equal(POINTER_DOWN);
+        done();
+      },
+    });
+
+    expect(cropper.options.cropstart).to.be.a('function');
+  });
+
+  it('should not execute the `cropmove` and `cropend` callback function when default prevented', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const { dragBox } = cropper;
+
+        dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+        dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+        dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+      },
+
+      cropstart(event) {
+        event.preventDefault();
+        done();
+      },
+
+      cropmove() {
+        expect.fail(1, 0);
+      },
+
+      cropend() {
+        expect.fail(1, 0);
+      },
+    });
+  });
+});
diff --git a/library/cropperjs/test/specs/options/data.spec.js b/library/cropperjs/test/specs/options/data.spec.js
new file mode 100644
index 000000000..99be19adb
--- /dev/null
+++ b/library/cropperjs/test/specs/options/data.spec.js
@@ -0,0 +1,40 @@
+describe('data (option)', () => {
+  it('should be null by default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.data).to.be.null;
+  });
+
+  it('should match the given data', (done) => {
+    const image = window.createImage();
+    const initialData = {
+      x: 16,
+      y: 9,
+      width: 160,
+      height: 90,
+      // rotate: 45,
+      // scaleX: -1,
+      // scaleY: -1,
+    };
+
+    const cropper = new Cropper(image, {
+      data: initialData,
+
+      ready() {
+        const data = cropper.getData(true);
+
+        expect(data.x).to.equal(initialData.x);
+        expect(data.y).to.equal(initialData.y);
+        expect(data.width).to.equal(initialData.width);
+        expect(data.height).to.equal(initialData.height);
+        // expect(data.rotate).to.equal(initialData.rotate);
+        // expect(data.scaleX).to.equal(initialData.scaleX);
+        // expect(data.scaleY).to.equal(initialData.scaleY);
+        done();
+      },
+    });
+
+    expect(cropper.options.data).to.deep.equal(initialData);
+  });
+});
diff --git a/library/cropperjs/test/specs/options/dragMode.spec.js b/library/cropperjs/test/specs/options/dragMode.spec.js
new file mode 100644
index 000000000..fb41c8791
--- /dev/null
+++ b/library/cropperjs/test/specs/options/dragMode.spec.js
@@ -0,0 +1,41 @@
+describe('dragMode (option)', () => {
+  it('should be "crop" by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        expect(cropper.dragBox.dataset.cropperAction).to.equal('crop');
+        done();
+      },
+    });
+
+    expect(cropper.options.dragMode).to.equal('crop');
+  });
+
+  it('should be "move"', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      dragMode: 'move',
+
+      ready() {
+        expect(cropper.dragBox.dataset.cropperAction).to.equal('move');
+        done();
+      },
+    });
+
+    expect(cropper.options.dragMode).to.equal('move');
+  });
+
+  it('should be "none"', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      dragMode: 'none',
+
+      ready() {
+        expect(cropper.dragBox.dataset.cropperAction).to.equal('none');
+        done();
+      },
+    });
+
+    expect(cropper.options.dragMode).to.equal('none');
+  });
+});
diff --git a/library/cropperjs/test/specs/options/guides.spec.js b/library/cropperjs/test/specs/options/guides.spec.js
new file mode 100644
index 000000000..0ee8f521d
--- /dev/null
+++ b/library/cropperjs/test/specs/options/guides.spec.js
@@ -0,0 +1,31 @@
+describe('guides (option)', () => {
+  it('should show the guides by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        Array.from(cropper.cropper.querySelectorAll('.cropper-dashed')).forEach((dashed) => {
+          expect(window.getComputedStyle(dashed).display).to.not.equal('none');
+        });
+        done();
+      },
+    });
+
+    expect(cropper.options.guides).to.be.true;
+  });
+
+  it('should hide the guides', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      guides: false,
+
+      ready() {
+        Array.from(cropper.cropper.querySelectorAll('.cropper-dashed')).forEach((dashed) => {
+          expect(window.getComputedStyle(dashed).display).to.equal('none');
+        });
+        done();
+      },
+    });
+
+    expect(cropper.options.guides).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/highlight.spec.js b/library/cropperjs/test/specs/options/highlight.spec.js
new file mode 100644
index 000000000..16a63c205
--- /dev/null
+++ b/library/cropperjs/test/specs/options/highlight.spec.js
@@ -0,0 +1,31 @@
+describe('highlight (option)', () => {
+  it('should show the highlight mask by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const face = cropper.cropper.querySelector('.cropper-face');
+
+        expect(window.getComputedStyle(face).opacity).to.not.equal('0');
+        done();
+      },
+    });
+
+    expect(cropper.options.highlight).to.be.true;
+  });
+
+  it('should not show the highlight mask', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      highlight: false,
+
+      ready() {
+        const face = cropper.cropper.querySelector('.cropper-face');
+
+        expect(window.getComputedStyle(face).opacity).to.equal('0');
+        done();
+      },
+    });
+
+    expect(cropper.options.highlight).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/initialAspectRatio.spec.js b/library/cropperjs/test/specs/options/initialAspectRatio.spec.js
new file mode 100644
index 000000000..fc869f1e1
--- /dev/null
+++ b/library/cropperjs/test/specs/options/initialAspectRatio.spec.js
@@ -0,0 +1,40 @@
+describe('initialAspectRatio (option)', () => {
+  it('should be `NaN` by default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.initialAspectRatio).to.be.NaN;
+  });
+
+  it('should match the given aspect ratio', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      initialAspectRatio: 1,
+
+      ready() {
+        const cropBoxData = cropper.getCropBoxData();
+
+        expect(cropBoxData.width).to.equal(cropBoxData.height);
+        done();
+      },
+    });
+
+    expect(cropper.options.initialAspectRatio).to.equal(1);
+  });
+
+  it('should allow to change the aspect ratio', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      initialAspectRatio: 2,
+
+      ready() {
+        let cropBoxData = cropper.getCropBoxData();
+
+        cropBoxData.width = cropBoxData.height;
+        cropBoxData = cropper.setCropBoxData(cropBoxData).getCropBoxData();
+        expect(cropBoxData.width).to.equal(cropBoxData.height);
+        done();
+      },
+    });
+  });
+});
diff --git a/library/cropperjs/test/specs/options/minCanvasHeight.spec.js b/library/cropperjs/test/specs/options/minCanvasHeight.spec.js
new file mode 100644
index 000000000..028d22e9f
--- /dev/null
+++ b/library/cropperjs/test/specs/options/minCanvasHeight.spec.js
@@ -0,0 +1,27 @@
+describe('minCanvasHeight (option)', () => {
+  it('should be `0` by default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.minCanvasHeight).to.equal(0);
+  });
+
+  it('should match the given minimum size', (done) => {
+    const image = window.createImage();
+    const minCanvasHeight = 270;
+    const cropper = new Cropper(image, {
+      minCanvasHeight,
+
+      ready() {
+        const canvasData = cropper.setCanvasData({
+          height: 180,
+        }).getCanvasData();
+
+        expect(canvasData.height).to.equal(minCanvasHeight);
+        done();
+      },
+    });
+
+    expect(cropper.options.minCanvasHeight).to.equal(minCanvasHeight);
+  });
+});
diff --git a/library/cropperjs/test/specs/options/minCanvasWidth.spec.js b/library/cropperjs/test/specs/options/minCanvasWidth.spec.js
new file mode 100644
index 000000000..0c58f2a80
--- /dev/null
+++ b/library/cropperjs/test/specs/options/minCanvasWidth.spec.js
@@ -0,0 +1,27 @@
+describe('minCanvasWidth (option)', () => {
+  it('should be `0` by default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.minCanvasWidth).to.equal(0);
+  });
+
+  it('should match the given minimum size', (done) => {
+    const image = window.createImage();
+    const minCanvasWidth = 480;
+    const cropper = new Cropper(image, {
+      minCanvasWidth,
+
+      ready() {
+        const canvasData = cropper.setCanvasData({
+          width: 320,
+        }).getCanvasData();
+
+        expect(canvasData.width).to.equal(minCanvasWidth);
+        done();
+      },
+    });
+
+    expect(cropper.options.minCanvasWidth).to.equal(minCanvasWidth);
+  });
+});
diff --git a/library/cropperjs/test/specs/options/minContainerHeight.spec.js b/library/cropperjs/test/specs/options/minContainerHeight.spec.js
new file mode 100644
index 000000000..9a71f59d3
--- /dev/null
+++ b/library/cropperjs/test/specs/options/minContainerHeight.spec.js
@@ -0,0 +1,26 @@
+describe('minContainerHeight (option)', () => {
+  it('should be `100` by default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.minContainerHeight).to.equal(100);
+  });
+
+  it('should match the given minimum size', (done) => {
+    const image = window.createImage();
+
+    image.parentElement.style.height = '90px';
+
+    const minContainerHeight = 180;
+    const cropper = new Cropper(image, {
+      minContainerHeight,
+
+      ready() {
+        expect(cropper.getContainerData().height).to.equal(minContainerHeight);
+        done();
+      },
+    });
+
+    expect(cropper.options.minContainerHeight).to.equal(minContainerHeight);
+  });
+});
diff --git a/library/cropperjs/test/specs/options/minContainerWidth.spec.js b/library/cropperjs/test/specs/options/minContainerWidth.spec.js
new file mode 100644
index 000000000..aabbb5e97
--- /dev/null
+++ b/library/cropperjs/test/specs/options/minContainerWidth.spec.js
@@ -0,0 +1,26 @@
+describe('minContainerWidth (option)', () => {
+  it('should be `200` by default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.minContainerWidth).to.equal(200);
+  });
+
+  it('should match the given minimum size', (done) => {
+    const image = window.createImage();
+
+    image.parentElement.style.width = '160px';
+
+    const minContainerWidth = 320;
+    const cropper = new Cropper(image, {
+      minContainerWidth,
+
+      ready() {
+        expect(cropper.getContainerData().width).to.equal(minContainerWidth);
+        done();
+      },
+    });
+
+    expect(cropper.options.minContainerWidth).to.equal(minContainerWidth);
+  });
+});
diff --git a/library/cropperjs/test/specs/options/minCropBoxHeight.spec.js b/library/cropperjs/test/specs/options/minCropBoxHeight.spec.js
new file mode 100644
index 000000000..a071c6e83
--- /dev/null
+++ b/library/cropperjs/test/specs/options/minCropBoxHeight.spec.js
@@ -0,0 +1,27 @@
+describe('minCropBoxHeight (option)', () => {
+  it('should be `0` by default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.minCropBoxHeight).to.equal(0);
+  });
+
+  it('should match the given minimum size', (done) => {
+    const image = window.createImage();
+    const minCropBoxHeight = 150;
+    const cropper = new Cropper(image, {
+      minCropBoxHeight,
+
+      ready() {
+        const cropBoxData = cropper.setCropBoxData({
+          height: 100,
+        }).getCropBoxData();
+
+        expect(cropBoxData.height).to.equal(minCropBoxHeight);
+        done();
+      },
+    });
+
+    expect(cropper.options.minCropBoxHeight).to.equal(minCropBoxHeight);
+  });
+});
diff --git a/library/cropperjs/test/specs/options/minCropBoxWidth.spec.js b/library/cropperjs/test/specs/options/minCropBoxWidth.spec.js
new file mode 100644
index 000000000..5a2f44faa
--- /dev/null
+++ b/library/cropperjs/test/specs/options/minCropBoxWidth.spec.js
@@ -0,0 +1,27 @@
+describe('minCropBoxWidth (option)', () => {
+  it('should be `0` by default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.minCropBoxWidth).to.equal(0);
+  });
+
+  it('should match the given minimum size', (done) => {
+    const image = window.createImage();
+    const minCropBoxWidth = 300;
+    const cropper = new Cropper(image, {
+      minCropBoxWidth,
+
+      ready() {
+        const cropBoxData = cropper.setCropBoxData({
+          width: 200,
+        }).getCropBoxData();
+
+        expect(cropBoxData.width).to.equal(minCropBoxWidth);
+        done();
+      },
+    });
+
+    expect(cropper.options.minCropBoxWidth).to.equal(minCropBoxWidth);
+  });
+});
diff --git a/library/cropperjs/test/specs/options/modal.spec.js b/library/cropperjs/test/specs/options/modal.spec.js
new file mode 100644
index 000000000..e82fbed82
--- /dev/null
+++ b/library/cropperjs/test/specs/options/modal.spec.js
@@ -0,0 +1,27 @@
+describe('modal (option)', () => {
+  it('should show the modal by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        expect(cropper.dragBox.className).to.include('cropper-modal');
+        done();
+      },
+    });
+
+    expect(cropper.options.modal).to.be.true;
+  });
+
+  it('should not show the modal', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      modal: false,
+
+      ready() {
+        expect(cropper.dragBox.className).to.not.include('cropper-modal');
+        done();
+      },
+    });
+
+    expect(cropper.options.modal).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/movable.spec.js b/library/cropperjs/test/specs/options/movable.spec.js
new file mode 100644
index 000000000..2c7a06705
--- /dev/null
+++ b/library/cropperjs/test/specs/options/movable.spec.js
@@ -0,0 +1,35 @@
+describe('movable (option)', () => {
+  it('should be movable by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const canvasData = cropper.getCanvasData();
+        const changedCanvasData = cropper.move(10, 10).getCanvasData();
+
+        expect(changedCanvasData.left).to.equal(canvasData.left + 10);
+        expect(changedCanvasData.top).to.equal(canvasData.top + 10);
+        done();
+      },
+    });
+
+    expect(cropper.options.movable).to.be.true;
+  });
+
+  it('should not be movable', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      movable: false,
+
+      ready() {
+        const canvasData = cropper.getCanvasData();
+        const changedCanvasData = cropper.move(10, 10).getCanvasData();
+
+        expect(changedCanvasData.left).to.equal(canvasData.left);
+        expect(changedCanvasData.top).to.equal(canvasData.top);
+        done();
+      },
+    });
+
+    expect(cropper.options.movable).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/preview.spec.js b/library/cropperjs/test/specs/options/preview.spec.js
new file mode 100644
index 000000000..2d2bc34d4
--- /dev/null
+++ b/library/cropperjs/test/specs/options/preview.spec.js
@@ -0,0 +1,105 @@
+describe('preview (option)', () => {
+  it('should be an empty string be default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.preview).to.be.a('string').that.is.empty;
+  });
+
+  it('should support element', (done) => {
+    const image = window.createImage();
+    const preview = document.createElement('div');
+
+    image.ownerDocument.body.appendChild(preview);
+
+    const cropper = new Cropper(image, {
+      preview,
+
+      ready() {
+        expect(preview.firstElementChild).to.not.be.null;
+        expect(preview.firstElementChild.src).to.equal(image.src);
+        done();
+      },
+    });
+
+    expect(cropper.options.preview).to.equal(preview);
+  });
+
+  it('should support array of elements', (done) => {
+    const image = window.createImage();
+    const previews = document.createElement('ul');
+    const preview1 = document.createElement('li');
+    const preview2 = document.createElement('li');
+    const preview = [preview1, preview2];
+
+    previews.appendChild(preview1);
+    previews.appendChild(preview2);
+    image.ownerDocument.body.appendChild(previews);
+
+    const cropper = new Cropper(image, {
+      preview,
+
+      ready() {
+        expect(preview1.firstElementChild).to.not.be.null;
+        expect(preview2.firstElementChild).to.not.be.null;
+        expect(preview1.firstElementChild.src).to.equal(image.src);
+        expect(preview2.firstElementChild.src).to.equal(image.src);
+        done();
+      },
+    });
+
+    expect(cropper.options.preview).to.equal(preview);
+  });
+
+  it('should support `NodeList` object', (done) => {
+    const image = window.createImage();
+    const previews = document.createElement('ul');
+    const preview1 = document.createElement('li');
+    const preview2 = document.createElement('li');
+
+    previews.appendChild(preview1);
+    previews.appendChild(preview2);
+    image.ownerDocument.body.appendChild(previews);
+
+    const cropper = new Cropper(image, {
+      preview: previews.children,
+
+      ready() {
+        expect(preview1.firstElementChild).to.not.be.null;
+        expect(preview2.firstElementChild).to.not.be.null;
+        expect(preview1.firstElementChild.src).to.equal(image.src);
+        expect(preview2.firstElementChild.src).to.equal(image.src);
+        done();
+      },
+    });
+
+    expect(cropper.options.preview).to.equal(previews.children);
+  });
+
+  it('should support selector', (done) => {
+    const image = window.createImage();
+    const previews = document.createElement('ul');
+    const preview1 = document.createElement('li');
+    const preview2 = document.createElement('li');
+
+    preview1.className = 'preview';
+    preview2.className = 'preview';
+    previews.appendChild(preview1);
+    previews.appendChild(preview2);
+    image.ownerDocument.body.appendChild(previews);
+
+    const cropper = new Cropper(image, {
+      preview: '.preview',
+
+      ready() {
+        expect(preview1.firstElementChild).to.not.be.null;
+        expect(preview2.firstElementChild).to.not.be.null;
+        expect(preview1.firstElementChild.src).to.equal(image.src);
+        expect(preview2.firstElementChild.src).to.equal(image.src);
+        done();
+      },
+    });
+
+    expect(cropper.options.preview).to.equal('.preview');
+  });
+});
diff --git a/library/cropperjs/test/specs/options/ready.spec.js b/library/cropperjs/test/specs/options/ready.spec.js
new file mode 100644
index 000000000..0e0f2338a
--- /dev/null
+++ b/library/cropperjs/test/specs/options/ready.spec.js
@@ -0,0 +1,34 @@
+describe('ready (option)', () => {
+  it('should be `null` be default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.ready).to.be.null;
+  });
+
+  it('should execute the `ready` hook function', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready(event) {
+        expect(event.type).to.equal('ready');
+        done();
+      },
+    });
+
+    expect(cropper.options.ready).to.be.a('function');
+  });
+
+  it('should execute the `crop` hook function even though default prevented', (done) => {
+    const image = window.createImage();
+
+    new Cropper(image, {
+      ready(event) {
+        event.preventDefault();
+      },
+
+      crop() {
+        done();
+      },
+    });
+  });
+});
diff --git a/library/cropperjs/test/specs/options/responsive.spec.js b/library/cropperjs/test/specs/options/responsive.spec.js
new file mode 100644
index 000000000..8e393f0ff
--- /dev/null
+++ b/library/cropperjs/test/specs/options/responsive.spec.js
@@ -0,0 +1,61 @@
+describe('responsive (option)', () => {
+  it('should be responsive be default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const containerData = cropper.getContainerData();
+        let newContainerWidth = containerData.width - 10;
+        let newContainerHeight = containerData.height - 10;
+
+        image.parentElement.style.width = `${newContainerWidth}px`;
+        image.parentElement.style.height = `${newContainerHeight}px`;
+        window.dispatchEvent(window.createEvent('resize'));
+
+        let newContainerData = cropper.getContainerData();
+
+        expect(newContainerData.width).to.equal(newContainerWidth);
+        expect(newContainerData.height).to.equal(newContainerHeight);
+
+        newContainerWidth = containerData.width + 10;
+        newContainerHeight = containerData.height + 10;
+
+        image.parentElement.style.width = `${newContainerWidth}px`;
+        image.parentElement.style.height = `${newContainerHeight}px`;
+        window.dispatchEvent(window.createEvent('resize'));
+
+        newContainerData = cropper.getContainerData();
+
+        expect(newContainerData.width).to.equal(newContainerWidth);
+        expect(newContainerData.height).to.equal(newContainerHeight);
+        done();
+      },
+    });
+
+    expect(cropper.options.responsive).to.be.true;
+  });
+
+  it('should not be responsive', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      responsive: false,
+
+      ready() {
+        const containerData = cropper.getContainerData();
+        const newContainerWidth = containerData.width - 10;
+        const newContainerHeight = containerData.height - 10;
+
+        image.parentElement.style.width = `${newContainerWidth}px`;
+        image.parentElement.style.height = `${newContainerHeight}px`;
+        window.dispatchEvent(window.createEvent('resize'));
+
+        const newContainerData = cropper.getContainerData();
+
+        expect(newContainerData.width).to.equal(containerData.width);
+        expect(newContainerData.height).to.equal(containerData.height);
+        done();
+      },
+    });
+
+    expect(cropper.options.responsive).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/restore.spec.js b/library/cropperjs/test/specs/options/restore.spec.js
new file mode 100644
index 000000000..3a011edc8
--- /dev/null
+++ b/library/cropperjs/test/specs/options/restore.spec.js
@@ -0,0 +1,38 @@
+describe('restore (option)', () => {
+  it('should restore the cropped area after resize the window be default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const data = cropper.zoomTo(1).getData(true);
+        const containerData = cropper.getContainerData();
+
+        image.parentElement.style.width = `${containerData.width - 10}px`;
+        image.parentElement.style.height = `${containerData.height - 10}px`;
+        window.dispatchEvent(window.createEvent('resize'));
+        expect(cropper.getData(true)).to.deep.equal(data);
+        done();
+      },
+    });
+
+    expect(cropper.options.restore).to.be.true;
+  });
+
+  it('should not be restore', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      restore: false,
+
+      ready() {
+        const data = cropper.zoomTo(1).getData(true);
+        const containerData = cropper.getContainerData();
+
+        image.parentElement.style.width = `${containerData.width / 2}px`;
+        window.dispatchEvent(window.createEvent('resize'));
+        expect(cropper.getData(true)).to.not.deep.equal(data);
+        done();
+      },
+    });
+
+    expect(cropper.options.restore).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/rotatable.spec.js b/library/cropperjs/test/specs/options/rotatable.spec.js
new file mode 100644
index 000000000..01a9ad09a
--- /dev/null
+++ b/library/cropperjs/test/specs/options/rotatable.spec.js
@@ -0,0 +1,28 @@
+describe('rotatable (option)', () => {
+  it('should be rotatable by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+
+      ready() {
+        expect(cropper.rotate(90).getImageData().rotate).to.equal(90);
+        done();
+      },
+    });
+
+    expect(cropper.options.rotatable).to.be.true;
+  });
+
+  it('should not be rotatable', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      rotatable: false,
+
+      ready() {
+        expect(cropper.rotate(90).getImageData().rotate).to.be.undefined;
+        done();
+      },
+    });
+
+    expect(cropper.options.rotatable).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/scalable.spec.js b/library/cropperjs/test/specs/options/scalable.spec.js
new file mode 100644
index 000000000..3b6f1df4f
--- /dev/null
+++ b/library/cropperjs/test/specs/options/scalable.spec.js
@@ -0,0 +1,33 @@
+describe('scalable (option)', () => {
+  it('should be scalable by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const imageData = cropper.scale(-1, -1).getImageData();
+
+        expect(imageData.scaleX).to.equal(-1);
+        expect(imageData.scaleY).to.equal(-1);
+        done();
+      },
+    });
+
+    expect(cropper.options.scalable).to.be.true;
+  });
+
+  it('should not be scalable', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      scalable: false,
+
+      ready() {
+        const imageData = cropper.scale(-1, -1).getImageData();
+
+        expect(imageData.scaleX).to.be.undefined;
+        expect(imageData.scaleY).to.be.undefined;
+        done();
+      },
+    });
+
+    expect(cropper.options.scalable).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/toggleDragModeOnDblclick.spec.js b/library/cropperjs/test/specs/options/toggleDragModeOnDblclick.spec.js
new file mode 100644
index 000000000..b67617f1d
--- /dev/null
+++ b/library/cropperjs/test/specs/options/toggleDragModeOnDblclick.spec.js
@@ -0,0 +1,40 @@
+describe('toggleDragModeOnDblclick (option)', () => {
+  it('should toggle drag mode on double click', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+
+      ready() {
+        const { dragBox } = cropper;
+
+        expect(dragBox.className).include('cropper-crop');
+        expect(dragBox.dataset.cropperAction).to.equal('crop');
+        dragBox.dispatchEvent(window.createEvent('dblclick'));
+        expect(dragBox.className).include('cropper-move');
+        expect(dragBox.dataset.cropperAction).to.equal('move');
+        done();
+      },
+    });
+
+    expect(cropper.options.toggleDragModeOnDblclick).to.be.true;
+  });
+
+  it('should not toggle drag mode on double click', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      toggleDragModeOnDblclick: false,
+
+      ready() {
+        const { dragBox } = cropper;
+
+        expect(dragBox.className).include('cropper-crop');
+        expect(dragBox.dataset.cropperAction).to.equal('crop');
+        dragBox.dispatchEvent(window.createEvent('dblclick'));
+        expect(dragBox.className).include('cropper-crop');
+        expect(dragBox.dataset.cropperAction).to.equal('crop');
+        done();
+      },
+    });
+
+    expect(cropper.options.toggleDragModeOnDblclick).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/viewMode.spec.js b/library/cropperjs/test/specs/options/viewMode.spec.js
new file mode 100644
index 000000000..7dde93d83
--- /dev/null
+++ b/library/cropperjs/test/specs/options/viewMode.spec.js
@@ -0,0 +1,89 @@
+describe('viewMode (option)', () => {
+  it('should not have any restrictions by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const canvasData = {
+          left: 100,
+          top: 100,
+          width: 160,
+          height: 90,
+        };
+        const changedCanvasData = cropper.setCanvasData(canvasData).getCanvasData();
+
+        expect(changedCanvasData.left).to.equal(canvasData.left);
+        expect(changedCanvasData.top).to.equal(canvasData.top);
+        expect(changedCanvasData.width).to.equal(canvasData.width);
+        expect(changedCanvasData.height).to.equal(canvasData.height);
+        done();
+      },
+    });
+
+    expect(cropper.options.viewMode).to.equal(0);
+  });
+
+  it('should restrict the crop box to not exceed the size of the canvas', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      viewMode: 1,
+
+      ready() {
+        let canvasData = cropper.zoom(-0.5).getCanvasData();
+        let cropBoxData = cropper.getCropBoxData();
+
+        expect(canvasData.width).to.be.least(cropBoxData.width);
+        expect(canvasData.height).to.be.least(cropBoxData.height);
+
+        canvasData = cropper.clear().moveTo(-160, -90).getCanvasData();
+        cropBoxData = cropper.crop().setCropBoxData({
+          width: canvasData.naturalWidth,
+          height: canvasData.naturalHeight,
+        }).getCropBoxData();
+
+        expect(canvasData.width).to.be.above(cropBoxData.width);
+        expect(canvasData.height).to.be.above(cropBoxData.height);
+        done();
+      },
+    });
+
+    expect(cropper.options.viewMode).to.equal(1);
+  });
+
+  it('should restrict the minimum canvas size to fit within the container.', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      viewMode: 2,
+
+      ready() {
+        const canvasData = cropper.zoom(-0.5).getCanvasData();
+        const containerData = cropper.getContainerData();
+
+        expect(canvasData.width >= containerData.width
+          || canvasData.height >= containerData.height).to.be.true;
+        done();
+      },
+    });
+
+    expect(cropper.options.viewMode).to.equal(2);
+  });
+
+  it('should restrict the minimum canvas size to full fit the container.', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      viewMode: 3,
+
+      ready() {
+        const canvasData = cropper.zoom(-0.5).getCanvasData();
+        const containerData = cropper.getContainerData();
+
+        expect(canvasData.left).to.be.most(0);
+        expect(canvasData.top).to.be.most(0);
+        expect(canvasData.width).to.be.least(containerData.width);
+        expect(canvasData.height).to.be.least(containerData.height);
+        done();
+      },
+    });
+
+    expect(cropper.options.viewMode).to.equal(3);
+  });
+});
diff --git a/library/cropperjs/test/specs/options/wheelZoomRatio.spec.js b/library/cropperjs/test/specs/options/wheelZoomRatio.spec.js
new file mode 100644
index 000000000..7d128358d
--- /dev/null
+++ b/library/cropperjs/test/specs/options/wheelZoomRatio.spec.js
@@ -0,0 +1,38 @@
+describe('wheelZoomRatio (option)', () => {
+  it('should be `0.1` by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const canvasData = cropper.getCanvasData();
+        const wheelEvent = window.createEvent('wheel');
+
+        wheelEvent.deltaY = -1;
+        cropper.cropper.dispatchEvent(wheelEvent);
+        expect(canvasData.width * 1.1).to.equal(cropper.getCanvasData().width);
+        done();
+      },
+    });
+
+    expect(cropper.options.wheelZoomRatio).to.equal(0.1);
+  });
+
+  it('should match the given zoom ratio', (done) => {
+    const image = window.createImage();
+    const wheelZoomRatio = 0.2;
+    const cropper = new Cropper(image, {
+      wheelZoomRatio,
+
+      ready() {
+        const canvasData = cropper.getCanvasData();
+        const wheelEvent = window.createEvent('wheel');
+
+        wheelEvent.deltaY = -1;
+        cropper.cropper.dispatchEvent(wheelEvent);
+        expect(canvasData.width * (1 + wheelZoomRatio)).to.equal(cropper.getCanvasData().width);
+        done();
+      },
+    });
+
+    expect(cropper.options.wheelZoomRatio).to.equal(wheelZoomRatio);
+  });
+});
diff --git a/library/cropperjs/test/specs/options/zoom.spec.js b/library/cropperjs/test/specs/options/zoom.spec.js
new file mode 100644
index 000000000..3d11f3a2f
--- /dev/null
+++ b/library/cropperjs/test/specs/options/zoom.spec.js
@@ -0,0 +1,46 @@
+describe('zoom (option)', () => {
+  it('should be `null` be default', () => {
+    const image = window.createImage();
+    const cropper = new Cropper(image);
+
+    expect(cropper.options.zoom).to.be.null;
+  });
+
+  it('should execute the `zoom` hook function', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        cropper.zoom(0.1);
+      },
+
+      zoom(event) {
+        expect(event.type).to.equal('zoom');
+        expect(event.detail).to.be.an('object').that.has.all.keys(['ratio', 'oldRatio', 'originalEvent']);
+        expect(event.detail.ratio).to.be.a('number');
+        expect(event.detail.oldRatio).to.be.a('number');
+        expect(event.detail.ratio).to.be.above(0);
+        expect(event.detail.oldRatio).to.be.above(0);
+        expect(event.detail.ratio).to.be.above(event.detail.oldRatio);
+        done();
+      },
+    });
+
+    expect(cropper.options.zoom).to.be.a('function');
+  });
+
+  it('should not change the canvas sizes when default prevented', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const canvasData = cropper.getCanvasData();
+
+        expect(cropper.zoom(0.1).getCanvasData()).to.deep.equal(canvasData);
+        done();
+      },
+
+      zoom(event) {
+        event.preventDefault();
+      },
+    });
+  });
+});
diff --git a/library/cropperjs/test/specs/options/zoomOnTouch.spec.js b/library/cropperjs/test/specs/options/zoomOnTouch.spec.js
new file mode 100644
index 000000000..feb56b079
--- /dev/null
+++ b/library/cropperjs/test/specs/options/zoomOnTouch.spec.js
@@ -0,0 +1,176 @@
+describe('zoomOnTouch (option)', () => {
+  it('should zoom on touch by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        if (window.PointerEvent) {
+          const pointerDownEvent1 = window.createEvent('pointerdown');
+          const pointerDownEvent2 = window.createEvent('pointerdown');
+          const pointerMoveEvent1 = window.createEvent('pointermove');
+          const pointerMoveEvent2 = window.createEvent('pointermove');
+
+          pointerDownEvent1.pointerId = 1;
+          pointerDownEvent1.pageX = 100;
+          pointerDownEvent1.pageY = 100;
+          pointerDownEvent2.pointerId = 2;
+          pointerDownEvent2.pageX = 200;
+          pointerDownEvent2.pageY = 200;
+          pointerMoveEvent1.pointerId = 1;
+          pointerMoveEvent1.pageX = 125;
+          pointerMoveEvent1.pageY = 125;
+          pointerMoveEvent2.pointerId = 2;
+          pointerMoveEvent2.pageX = 175;
+          pointerMoveEvent2.pageY = 175;
+          cropper.cropper.dispatchEvent(pointerDownEvent1);
+          cropper.cropper.dispatchEvent(pointerDownEvent2);
+          cropper.cropper.dispatchEvent(pointerMoveEvent1);
+          cropper.cropper.dispatchEvent(pointerMoveEvent2);
+        } else {
+          const touchStartEvent1 = window.createEvent('touchstart');
+          const touchStartEvent2 = window.createEvent('touchstart');
+          const touchMoveEvent1 = window.createEvent('touchmove');
+          const touchMoveEvent2 = window.createEvent('touchmove');
+
+          touchStartEvent1.changedTouches = {
+            0: {
+              identifier: 1,
+              pageX: 100,
+              pageY: 100,
+            },
+            length: 1,
+          };
+          touchStartEvent2.changedTouches = {
+            0: {
+              identifier: 2,
+              pageX: 200,
+              pageY: 200,
+            },
+            length: 1,
+          };
+          touchMoveEvent1.changedTouches = {
+            0: {
+              identifier: 1,
+              pageX: 125,
+              pageY: 125,
+            },
+            length: 1,
+          };
+          touchMoveEvent2.changedTouches = {
+            0: {
+              identifier: 2,
+              pageX: 175,
+              pageY: 175,
+            },
+            length: 1,
+          };
+          cropper.cropper.dispatchEvent(touchStartEvent1);
+          cropper.cropper.dispatchEvent(touchStartEvent2);
+          cropper.cropper.dispatchEvent(touchMoveEvent1);
+          cropper.cropper.dispatchEvent(touchMoveEvent2);
+        }
+      },
+
+      zoom() {
+        done();
+      },
+    });
+
+    expect(cropper.options.zoomOnTouch).to.be.true;
+  });
+
+  it('should not zoom on touch', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      zoomOnTouch: false,
+
+      ready() {
+        if (window.PointerEvent) {
+          cropper.cropper.dispatchEvent(new PointerEvent('pointerdown', {
+            pointerId: 1,
+            pageX: 100,
+            pageY: 100,
+          }));
+          cropper.cropper.dispatchEvent(new PointerEvent('pointerdown', {
+            pointerId: 2,
+            pageX: 200,
+            pageY: 200,
+          }));
+          cropper.cropper.dispatchEvent(new PointerEvent('pointermove', {
+            pointerId: 1,
+            pageX: 125,
+            pageY: 125,
+          }));
+          cropper.cropper.dispatchEvent(new PointerEvent('pointermove', {
+            pointerId: 2,
+            pageX: 175,
+            pageY: 175,
+          }));
+          cropper.cropper.dispatchEvent(new PointerEvent('pointerup', {
+            pointerId: 1,
+            pageX: 125,
+            pageY: 125,
+          }));
+          cropper.cropper.dispatchEvent(new PointerEvent('pointerup', {
+            pointerId: 2,
+            pageX: 175,
+            pageY: 175,
+          }));
+        } else {
+          cropper.cropper.dispatchEvent(new TouchEvent('touchstart', {
+            changedTouches: {
+              0: {
+                identifier: 1,
+                pageX: 100,
+                pageY: 100,
+              },
+              1: {
+                identifier: 2,
+                pageX: 200,
+                pageY: 200,
+              },
+              length: 2,
+            },
+          }));
+          cropper.cropper.dispatchEvent(new TouchEvent('touchmove', {
+            changedTouches: {
+              0: {
+                identifier: 1,
+                pageX: 125,
+                pageY: 125,
+              },
+              1: {
+                identifier: 2,
+                pageX: 175,
+                pageY: 175,
+              },
+              length: 2,
+            },
+          }));
+          cropper.cropper.dispatchEvent(new TouchEvent('touchend', {
+            changedTouches: {
+              0: {
+                identifier: 1,
+                pageX: 125,
+                pageY: 125,
+              },
+              1: {
+                identifier: 2,
+                pageX: 175,
+                pageY: 175,
+              },
+              length: 2,
+            },
+          }));
+        }
+
+        done();
+      },
+
+      zoom() {
+        expect.fail(1, 0);
+      },
+    });
+
+    expect(cropper.options.zoomOnTouch).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/zoomOnWheel.spec.js b/library/cropperjs/test/specs/options/zoomOnWheel.spec.js
new file mode 100644
index 000000000..90e25e6a3
--- /dev/null
+++ b/library/cropperjs/test/specs/options/zoomOnWheel.spec.js
@@ -0,0 +1,34 @@
+describe('zoomOnWheel (option)', () => {
+  it('should zoom on wheel by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        cropper.cropper.dispatchEvent(window.createEvent('wheel'));
+      },
+
+      zoom() {
+        done();
+      },
+    });
+
+    expect(cropper.options.zoomOnWheel).to.be.true;
+  });
+
+  it('should not zoom on wheel', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      zoomOnWheel: false,
+
+      ready() {
+        cropper.cropper.dispatchEvent(window.createEvent('wheel'));
+        done();
+      },
+
+      zoom() {
+        expect.fail(1, 0);
+      },
+    });
+
+    expect(cropper.options.zoomOnWheel).to.be.false;
+  });
+});
diff --git a/library/cropperjs/test/specs/options/zoomable.spec.js b/library/cropperjs/test/specs/options/zoomable.spec.js
new file mode 100644
index 000000000..d0fbec5ec
--- /dev/null
+++ b/library/cropperjs/test/specs/options/zoomable.spec.js
@@ -0,0 +1,35 @@
+describe('zoomable (option)', () => {
+  it('should be zoomable by default', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      ready() {
+        const canvasData = cropper.getCanvasData();
+        const changedCanvasData = cropper.zoom(0.1).getCanvasData();
+
+        expect(changedCanvasData.width).to.be.above(canvasData.width);
+        expect(changedCanvasData.height).to.be.above(canvasData.height);
+        done();
+      },
+    });
+
+    expect(cropper.options.zoomable).to.be.true;
+  });
+
+  it('should not be zoomable', (done) => {
+    const image = window.createImage();
+    const cropper = new Cropper(image, {
+      zoomable: false,
+
+      ready() {
+        const canvasData = cropper.getCanvasData();
+        const changedCanvasData = cropper.zoom(0.1).getCanvasData();
+
+        expect(changedCanvasData.width).to.equal(canvasData.width);
+        expect(changedCanvasData.height).to.equal(canvasData.height);
+        done();
+      },
+    });
+
+    expect(cropper.options.zoomable).to.be.false;
+  });
+});