opentok-layout-js - npm Package Compare versions

Comparing version 0.5.1 to 1.0.0

bower.json

 {
   "name": "opentok-layout-js",
-  "version": "0.5.1",
+  "version": "1.0.0",
   "homepage": "https://github.com/aullman/opentok-layout-js",
@@ -5,0 +5,0 @@ "authors": [

opentok-layout.js

@@ -56,2 +56,15 @@ /*!
 
+    var getVideoRatio = function(elem) {
+      if (!elem) {
+        return 3 / 4;
+      }
+      var video = elem.querySelector('video');
+      if (video && video.videoHeight && video.videoWidth) {
+        return video.videoHeight / video.videoWidth;
+      } else if (elem.videoHeight && elem.videoWidth) {
+        return elem.videoHeight / elem.videoWidth;
+      }
+      return 3 / 4;
+    }
+
     var getCSSNumber = function (elem, prop) {
@@ -83,3 +96,3 @@ // NOTE: internal OT.$ API
         var count = children.length,
-            vidRatio;
+            dimensions;
 
@@ -134,3 +147,3 @@ var getBestDimensions = function getBestDimensions(minRatio, maxRatio) {
                 targetWidth: targetWidth,
-                ratio: vidRatio
+                ratio: targetHeight / targetWidth
             };
@@ -140,38 +153,69 @@ };
         if (!fixedRatio) {
-            vidRatio = getBestDimensions(minRatio, maxRatio);
+          dimensions = getBestDimensions(minRatio, maxRatio);
         } else {
-            // Use the ratio of the first video element we find
-            var video = children.length > 0 && children[0].querySelector('video');
-            if (video && video.videoHeight && video.videoWidth) {
-                vidRatio = getBestDimensions(video.videoHeight/video.videoWidth,
-                    video.videoHeight/video.videoWidth);
-            }
-            else {
-                vidRatio = getBestDimensions(3/4, 3/4);   // Use the default video ratio
-            }
+          // Use the ratio of the first video element we find to approximate
+          var ratio = getVideoRatio(children.length > 0 ? children[0] : null);
+          dimensions = getBestDimensions(ratio, ratio);
         }
 
-        var spacesInLastRow = (vidRatio.targetRows * vidRatio.targetCols) - count,
-            lastRowMargin = (spacesInLastRow * vidRatio.targetWidth / 2),
-            lastRowIndex = (vidRatio.targetRows - 1) * vidRatio.targetCols,
-            firstRowMarginTop = ((Height - (vidRatio.targetRows * vidRatio.targetHeight)) / 2),
-            firstColMarginLeft = ((Width - (vidRatio.targetCols * vidRatio.targetWidth)) / 2);
-
         // Loop through each stream in the container and place it inside
         var x = 0,
-            y = 0;
+            y = 0,
+            rows = [],
+            row;
+        // Iterate through the chilren and create an array with a new item for each row
+        // and calculate the width of each row so that we know if we go over the size and need
+        // to adjust
         for (var i=0; i < children.length; i++) {
-            var elem = children[i];
-            if (i % vidRatio.targetCols === 0) {
-                // We are the first element of the row
-                x = firstColMarginLeft;
-                if (i === lastRowIndex) x += lastRowMargin;
-                y += i === 0 ? firstRowMarginTop : vidRatio.targetHeight;
-            } else {
-                x += vidRatio.targetWidth;
+          if (i % dimensions.targetCols === 0) {
+            // This is a new row
+            row = {
+              children: [],
+              width: 0,
+              height: 0
+            };
+            rows.push(row);
+          }
+          var elem = children[i];
+          row.children.push(elem);
+          var targetWidth = dimensions.targetWidth;
+          var targetHeight = dimensions.targetHeight;
+          // If we're using a fixedRatio then we need to set the correct ratio for this element
+          if (fixedRatio) {
+            targetWidth = targetHeight / getVideoRatio(elem);
+          }
+          row.width += targetWidth;
+          row.height = targetHeight;
+        }
+        // Calculate total row height adjusting if we go too wide
+        var totalRowHeight = 0;
+        for (i = 0; i < rows.length; i++) {
+          var row = rows[i];
+          if (row.width > Width) {
+            // Went over on the width, need to adjust the height proportionally
+            row.height = Math.floor(row.height * (Width / row.width));
+            row.width = Width;
+          }
+          totalRowHeight += row.height;
+        }
+        // vertical centering
+        y = ((Height - (totalRowHeight)) / 2);
+        // Iterate through each row and place each child
+        for (i = 0; i < rows.length; i++) {
+          var row = rows[i];
+          // center the row
+          var rowMarginLeft = ((Width - row.width) / 2);
+          x = rowMarginLeft;
+          for (var j = 0; j < row.children.length; j++) {
+            var elem = row.children[j];
+
+            var targetWidth = dimensions.targetWidth;
+            var targetHeight = row.height;
+            // If we're using a fixedRatio then we need to set the correct ratio for this element
+            if (fixedRatio) {
+              targetWidth = Math.floor(targetHeight / getVideoRatio(elem));
             }
-
             // NOTE: internal OT.$ API
             OT.$.css(elem, 'position', 'absolute');
-            var actualWidth = vidRatio.targetWidth - getCSSNumber(elem, 'paddingLeft') -
+            var actualWidth = targetWidth - getCSSNumber(elem, 'paddingLeft') -
                             getCSSNumber(elem, 'paddingRight') -
@@ -183,3 +227,3 @@ getCSSNumber(elem, 'marginLeft') -
 
-             var actualHeight = vidRatio.targetHeight - getCSSNumber(elem, 'paddingTop') -
+             var actualHeight = targetHeight - getCSSNumber(elem, 'paddingTop') -
                             getCSSNumber(elem, 'paddingBottom') -
@@ -192,2 +236,5 @@ getCSSNumber(elem, 'marginTop') -
             positionElement(elem, x+offsetLeft, y+offsetTop, actualWidth, actualHeight, animate);
+            x += targetWidth;
+          }
+          y += targetHeight;
         }
@@ -223,3 +270,2 @@ };
             bigOffsetLeft = 0,
-            bigRatio = 0,
             bigOnes = Array.prototype.filter.call(
@@ -233,15 +279,9 @@ container.querySelectorAll('#' + id + '>.' + opts.bigClass),
         if (bigOnes.length > 0 && smallOnes.length > 0) {
-            var bigVideo = bigOnes[0].querySelector('video');
-            if (bigVideo && bigVideo.videoHeight && bigVideo.videoWidth) {
-                bigRatio = bigVideo.videoHeight / bigVideo.videoWidth;
-            } else {
-                bigRatio = 3 / 4;
-            }
             var bigWidth, bigHeight;
 
-            if (availableRatio > bigRatio) {
+            if (availableRatio > getVideoRatio(bigOnes[0])) {
                 // We are tall, going to take up the whole width and arrange small
                 // guys at the bottom
                 bigWidth = Width;
-                bigHeight = Math.min(Math.floor(Height * opts.bigPercentage), Width * bigRatio);
+                bigHeight = Math.floor(Height * opts.bigPercentage);
                 offsetTop = bigHeight;
@@ -253,3 +293,3 @@ bigOffsetTop = Height - offsetTop;
                 bigHeight = Height;
-                bigWidth = Math.min(Width * opts.bigPercentage, Math.floor(bigHeight / bigRatio));
+                bigWidth = Math.floor(Width * opts.bigPercentage);
                 offsetLeft = bigWidth;
@@ -256,0 +296,0 @@ bigOffsetLeft = Width - offsetLeft;

opentok-layout.min.js

@@ -11,2 +11,2 @@ /*!
 **/
-!function(t){var i=function(i,e,o,a,r,n){var d={left:e+"px",top:o+"px",width:a+"px",height:r+"px"},g=function(){var t=i.querySelector(".OT_root");if(t){var e=t.style.width;t.style.width=a+"px",t.style.width=e||""}};n&&t?(t(i).stop(),t(i).animate(d,n.duration||200,n.easing||"swing",function(){g(),n.complete&&n.complete.call(this)})):OT.$.css(i,d),g()},e=function(t,i){var e=OT.$.css(t,i);return e?parseInt(e,10):0},o=function(){return(1e8*Math.random()).toFixed(0)},a=function(t){var i=OT.$.height(t);return i?parseInt(i,10):0},r=function(t){var i=OT.$.width(t);return i?parseInt(i,10):0},n=function(t,o,a,r,n,d,g,l,h){var s,f=t.length,u=function(t,i){for(var e,r,n,d,g,l,h,u,p=1;f>=p;p++){var b=p,c=Math.ceil(f/b);h=Math.floor(a/c),l=Math.floor(o/b),u=h/l,u>i?(u=i,h=l*u):t>u&&(u=t,l=h/u);var m=l*h*f;(void 0===e||m>e)&&(e=m,d=h,g=l,r=b,n=c)}return{maxArea:e,targetCols:r,targetRows:n,targetHeight:d,targetWidth:g,ratio:s}};if(d){var p=t.length>0&&t[0].querySelector("video");s=p&&p.videoHeight&&p.videoWidth?u(p.videoHeight/p.videoWidth,p.videoHeight/p.videoWidth):u(.75,.75)}else s=u(g,l);for(var b=s.targetRows*s.targetCols-f,c=b*s.targetWidth/2,m=(s.targetRows-1)*s.targetCols,v=(a-s.targetRows*s.targetHeight)/2,R=(o-s.targetCols*s.targetWidth)/2,x=0,y=0,w=0;w<t.length;w++){var T=t[w];w%s.targetCols===0?(x=R,w===m&&(x+=c),y+=0===w?v:s.targetHeight):x+=s.targetWidth,OT.$.css(T,"position","absolute");var M=s.targetWidth-e(T,"paddingLeft")-e(T,"paddingRight")-e(T,"marginLeft")-e(T,"marginRight")-e(T,"borderLeft")-e(T,"borderRight"),O=s.targetHeight-e(T,"paddingTop")-e(T,"paddingBottom")-e(T,"marginTop")-e(T,"marginBottom")-e(T,"borderTop")-e(T,"borderBottom");i(T,x+r,y+n,M,O,h)}},d=function(t){return"none"!==OT.$.css(t,"display")},g=function(t,i){if("none"!==OT.$.css(t,"display")){var g=t.getAttribute("id");g||(g="OT_"+o(),t.setAttribute("id",g));var l=a(t)-e(t,"borderTop")-e(t,"borderBottom"),h=r(t)-e(t,"borderLeft")-e(t,"borderRight"),s=l/h,f=0,u=0,p=0,b=0,c=0,m=Array.prototype.filter.call(t.querySelectorAll("#"+g+">."+i.bigClass),d),v=Array.prototype.filter.call(t.querySelectorAll("#"+g+">*:not(."+i.bigClass+")"),d);if(m.length>0&&v.length>0){var R=m[0].querySelector("video");c=R&&R.videoHeight&&R.videoWidth?R.videoHeight/R.videoWidth:.75;var x,y;s>c?(x=h,y=Math.min(Math.floor(l*i.bigPercentage),h*c),u=y,p=l-u):(y=l,x=Math.min(h*i.bigPercentage,Math.floor(y/c)),f=x,b=h-f),i.bigFirst?(n(m,x,y,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate),n(v,h-f,l-u,f,u,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)):(n(v,h-f,l-u,0,0,i.fixedRatio,i.minRatio,i.maxRatio,i.animate),n(m,x,y,b,p,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate))}else m.length>0&&0===v.length?n(m,h,l,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate):n(v,h-f,l-u,f,u,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)}},l=function(t,i){return i=OT.$.defaults(i||{},{maxRatio:1.5,minRatio:9/16,fixedRatio:!1,animate:!1,bigClass:"OT_big",bigPercentage:.8,bigFixedRatio:!1,bigMaxRatio:1.5,bigMinRatio:9/16,bigFirst:!0}),t="string"==typeof t?OT.$(t):t,OT.onLoad(function(){g(t,i)}),{layout:g.bind(null,t,i)}};"undefined"==typeof module||"undefined"==typeof module.exports?window.initLayoutContainer=l:module.exports.initLayoutContainer=l}("undefined"!=typeof window&&window.hasOwnProperty("jQuery")?window.jQuery:void 0);
+!function(t){var i=function(i,e,o,a,r,n){var d={left:e+"px",top:o+"px",width:a+"px",height:r+"px"},g=function(){var t=i.querySelector(".OT_root");if(t){var e=t.style.width;t.style.width=a+"px",t.style.width=e||""}};n&&t?(t(i).stop(),t(i).animate(d,n.duration||200,n.easing||"swing",function(){g(),n.complete&&n.complete.call(this)})):OT.$.css(i,d),g()},e=function(t){if(!t)return.75;var i=t.querySelector("video");return i&&i.videoHeight&&i.videoWidth?i.videoHeight/i.videoWidth:t.videoHeight&&t.videoWidth?t.videoHeight/t.videoWidth:.75},o=function(t,i){var e=OT.$.css(t,i);return e?parseInt(e,10):0},a=function(){return(1e8*Math.random()).toFixed(0)},r=function(t){var i=OT.$.height(t);return i?parseInt(i,10):0},n=function(t){var i=OT.$.width(t);return i?parseInt(i,10):0},d=function(t,a,r,n,d,g,h,l,f){var u,s=t.length,c=function(t,i){for(var e,o,n,d,g,h,l,f,u=1;s>=u;u++){var c=u,p=Math.ceil(s/c);l=Math.floor(r/p),h=Math.floor(a/c),f=l/h,f>i?(f=i,l=h*f):t>f&&(f=t,h=l/f);var v=h*l*s;(void 0===e||v>e)&&(e=v,d=l,g=h,o=c,n=p)}return{maxArea:e,targetCols:o,targetRows:n,targetHeight:d,targetWidth:g,ratio:d/g}};if(g){var p=e(t.length>0?t[0]:null);u=c(p,p)}else u=c(h,l);for(var v,b=0,m=0,R=[],x=0;x<t.length;x++){x%u.targetCols===0&&(v={children:[],width:0,height:0},R.push(v));var y=t[x];v.children.push(y);var w=u.targetWidth,T=u.targetHeight;g&&(w=T/e(y)),v.width+=w,v.height=T}var M=0;for(x=0;x<R.length;x++){var v=R[x];v.width>a&&(v.height=Math.floor(v.height*(a/v.width)),v.width=a),M+=v.height}for(m=(r-M)/2,x=0;x<R.length;x++){var v=R[x],O=(a-v.width)/2;b=O;for(var $=0;$<v.children.length;$++){var y=v.children[$],w=u.targetWidth,T=v.height;g&&(w=Math.floor(T/e(y))),OT.$.css(y,"position","absolute");var A=w-o(y,"paddingLeft")-o(y,"paddingRight")-o(y,"marginLeft")-o(y,"marginRight")-o(y,"borderLeft")-o(y,"borderRight"),C=T-o(y,"paddingTop")-o(y,"paddingBottom")-o(y,"marginTop")-o(y,"marginBottom")-o(y,"borderTop")-o(y,"borderBottom");i(y,b+n,m+d,A,C,f),b+=w}m+=T}},g=function(t){return"none"!==OT.$.css(t,"display")},h=function(t,i){if("none"!==OT.$.css(t,"display")){var h=t.getAttribute("id");h||(h="OT_"+a(),t.setAttribute("id",h));var l=r(t)-o(t,"borderTop")-o(t,"borderBottom"),f=n(t)-o(t,"borderLeft")-o(t,"borderRight"),u=l/f,s=0,c=0,p=0,v=0,b=Array.prototype.filter.call(t.querySelectorAll("#"+h+">."+i.bigClass),g),m=Array.prototype.filter.call(t.querySelectorAll("#"+h+">*:not(."+i.bigClass+")"),g);if(b.length>0&&m.length>0){var R,x;u>e(b[0])?(R=f,x=Math.floor(l*i.bigPercentage),c=x,p=l-c):(x=l,R=Math.floor(f*i.bigPercentage),s=R,v=f-s),i.bigFirst?(d(b,R,x,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate),d(m,f-s,l-c,s,c,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)):(d(m,f-s,l-c,0,0,i.fixedRatio,i.minRatio,i.maxRatio,i.animate),d(b,R,x,v,p,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate))}else b.length>0&&0===m.length?d(b,f,l,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate):d(m,f-s,l-c,s,c,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)}},l=function(t,i){return i=OT.$.defaults(i||{},{maxRatio:1.5,minRatio:9/16,fixedRatio:!1,animate:!1,bigClass:"OT_big",bigPercentage:.8,bigFixedRatio:!1,bigMaxRatio:1.5,bigMinRatio:9/16,bigFirst:!0}),t="string"==typeof t?OT.$(t):t,OT.onLoad(function(){h(t,i)}),{layout:h.bind(null,t,i)}};"undefined"==typeof module||"undefined"==typeof module.exports?window.initLayoutContainer=l:module.exports.initLayoutContainer=l}("undefined"!=typeof window&&window.hasOwnProperty("jQuery")?window.jQuery:void 0);

package.json

 {
   "name": "opentok-layout-js",
-  "version": "0.5.1",
+  "version": "1.0.0",
   "description": "Automatic layout of video elements (publisher and subscriber) minimising white-space for the OpenTok on WebRTC API. This is intended for use with the OpenTok on WebRTC JS API.",
@@ -5,0 +5,0 @@ "main": "opentok-layout.js",

README.md

@@ -5,9 +5,13 @@ [![Build Status](https://travis-ci.org/aullman/opentok-layout-js.svg?branch=master)](https://travis-ci.org/aullman/opentok-layout-js)
 
+[![Demo of Layout Container](https://github.com/aullman/opentok-layout-js/raw/master/layout-demo.gif)](https://aullman.github.io/opentok-layout-js/ "Layout-container Demo")
+
 opentok-layout-js
 ================
 
-Automatic layout of video elements (publisher and subscriber) minimising white-space for the OpenTok on WebRTC API. This is intended for use with the OpenTok on WebRTC JS API.
+Automatic layout of video elements (publisher and subscriber) minimising white-space for the OpenTok on WebRTC API. This is intended for use with the OpenTok on WebRTC JS API but can be used for any case where you're trying to fit multiple videos into a box. It could possibly be used for Photos as well.
 
-It automatically detects when an element is added or when the container is resized and it adjusts the layout of its' children accordingly.
+It automatically detects when an element is added or when the container is resized and it adjusts the layout of its' children accordingly. It can also arrange items with different aspect ratios and maintain their aspect ratios without cropping.
 
+The difference between this layout algorithm and other similar photo layout algorithms, such as the [Flickr Justified Layout](https://github.com/flickr/justified-layout) algorithm, is that this has a constrained height as well as width. The assumption is that when you're viewing video you want all videos to be visible at the same time. You don't want to scroll down to continue to view the list. So this algorithm fits everything inside a box and tries to minimize the amount of whitespace.
+
 Demo
@@ -23,2 +27,4 @@ ----
 
+jQuery is also optionally required if you want to animate the transitions.
+
 Usage
@@ -30,2 +36,3 @@ -----
 ```javascript
+var initLayoutContainer = require('opentok-layout-js');
 var layout = initLayoutContainer(document.getElementById("layout"), {
@@ -40,3 +47,4 @@ maxRatio: 3/2,     // The narrowest ratio that will be used (default 2x3)
     bigMinRatio: 9/16,     // The widest ratio to use for the big elements (default 16x9)
-    bigFirst: true        // Whether to place the big one in the top left (true) or bottom right
+    bigFirst: true,        // Whether to place the big one in the top left (true) or bottom right
+    animate: true         // Whether you want to animate the transitions
 });
@@ -46,2 +54,42 @@ layout.layout()
 
+Examples
+----
+
+### Cropping videos to fit best.
+
+In this example we crop the videos to take up the most space in the window.
+
+```javascript
+initLayoutContainer(document.getElementById("layout"));
+```
+
+![Cropping videos to fit best](https://github.com/aullman/opentok-layout-js/raw/master/standard-cropping.png)
+
+### Respecting different aspect ratios
+
+In this example we are respecting the native aspect ratio of multiple different videos.
+
+```javascript
+initLayoutContainer(document.getElementById("layout"), {
+  fixedRatio: true
+});
+```
+
+![Respecting different aspect ratios](https://github.com/aullman/opentok-layout-js/raw/master/standard-fixed-ratio.png)
+
+### Some big videos
+
+This example has 2 big videos focused and the other 4 small.
+
+![Some big videos](https://github.com/aullman/opentok-layout-js/raw/master/2-big-4-small.png)
+
+## Some big respecting aspect ratios
+
+This example has 2 big and we're respecting the native aspect ratios of the different videos.
+
+![Some big respecting aspect ratios](https://github.com/aullman/opentok-layout-js/raw/master/2-bit-4-small-fixed-ratio.png)
+
+
+## Using in an OpenTok Application
+
 In an OpenTok application you would do something like:
@@ -129,2 +177,16 @@
 
+You can also use jQuery to animate the transitions by using the animate property. You will need to include the jQuery library and set the animate option to true and it will use the default values for animate (duration=200, easing="swing"). You can also specify your own values and a completion handler. For more details about the jQuery animate property see the [jQuery documentation](http://api.jquery.com/animate/).
+
+```javascript
+var layout = initLayoutContainer(document.getElementById("layout"), {
+  animate: {
+    duration: 500,
+    easing: "linear",
+    complete: function() {
+      console.log('finished moving ' + this);
+    }
+  }
+});
+```
+
 Big Elements
@@ -131,0 +193,0 @@ --------

tests/unit/opentok-layout-spec.js

@@ -36,3 +36,7 @@ /*globals describe, beforeEach, expect, it, afterEach, initLayoutContainer */
       div1 = document.createElement('div');
+      div1.videoWidth = 640;
+      div1.videoHeight = 480;
       div2 = document.createElement('div');
+      div2.videoWidth = 480;
+      div2.videoHeight = 640;
       div1.style.backgroundColor = 'green';
@@ -66,7 +70,9 @@ div2.style.backgroundColor = 'red';
 
-    it('maintains aspect ratio if you set fixedRatio:true', function () {
+    it('maintains multiple aspect ratios if you set fixedRatio:true', function () {
       var layoutContainer = initLayoutContainer(layoutDiv, {fixedRatio: true});
       layoutContainer.layout();
       var div1Rect = div1.getBoundingClientRect();
-      expect(div1Rect.width/div1Rect.height).toBeCloseTo(4/3, 3);
+      expect(div1Rect.width/div1Rect.height).toBeCloseTo(640/480, 1);
+      var div2Rect = div2.getBoundingClientRect();
+      expect(div2Rect.width/div2Rect.height).toBeCloseTo(480/640, 1);
     });
@@ -333,5 +339,5 @@
         var bigRect = divs[0].getBoundingClientRect();
-        expect(bigRect.width).toBe(400);
+        expect(bigRect.width).toBeCloseTo(533.33, 1);
         expect(bigRect.height).toBe(300);
-        expect(bigRect.left).toBe(0);
+        expect(bigRect.left).toBeCloseTo(133.33, 1);
         expect(bigRect.top).toBe(0);
@@ -342,16 +348,16 @@ // Expect them to all have the same width and height
           rect = divs[i].getBoundingClientRect();
-          expect(rect.width).toBeCloseTo(266.66, 1);
+          expect(rect.width).toBe(100);
           expect(rect.height).toBe(150);
         }
         rect = divs[1].getBoundingClientRect();
-        expect(rect.left).toBeCloseTo(433.33, 1);
+        expect(rect.left).toBe(800);
         expect(rect.top).toBe(0);
         rect = divs[2].getBoundingClientRect();
-        expect(rect.left).toBe(700);
+        expect(rect.left).toBe(900);
         expect(rect.top).toBe(0);
         rect = divs[3].getBoundingClientRect();
-        expect(rect.left).toBeCloseTo(433.33, 1);
+        expect(rect.left).toBe(800);
         expect(rect.top).toBe(150);
         rect = divs[4].getBoundingClientRect();
-        expect(rect.left).toBe(700);
+        expect(rect.left).toBe(900);
         expect(rect.top).toBe(150);
@@ -367,3 +373,3 @@ });
         var bigRect = divs[0].getBoundingClientRect();
-        expect(bigRect.width).toBe(200);
+        expect(bigRect.width).toBe(400);
         expect(bigRect.height).toBe(300);
@@ -374,5 +380,5 @@ expect(bigRect.left).toBe(0);
         var big2Rect = divs[1].getBoundingClientRect();
-        expect(big2Rect.width).toBe(200);
+        expect(big2Rect.width).toBe(400);
         expect(big2Rect.height).toBe(300);
-        expect(big2Rect.left).toBe(200);
+        expect(big2Rect.left).toBe(400);
         expect(big2Rect.top).toBe(0);
@@ -383,14 +389,14 @@ // Expect them to all have the same width and height
           rect = divs[i].getBoundingClientRect();
-          expect(rect.width).toBe(200);
-          expect(rect.height).toBe(300);
+          expect(rect.width).toBeCloseTo(177.76, 1);
+          expect(rect.height).toBe(100);
         }
         rect = divs[2].getBoundingClientRect();
-        expect(rect.left).toBe(400);
+        expect(rect.left).toBeCloseTo(811.1, 1);
         expect(rect.top).toBe(0);
         rect = divs[3].getBoundingClientRect();
-        expect(rect.left).toBe(600);
-        expect(rect.top).toBe(0);
+        expect(rect.left).toBeCloseTo(811.1, 1);
+        expect(rect.top).toBe(100);
         rect = divs[4].getBoundingClientRect();
-        expect(rect.left).toBe(800);
-        expect(rect.top).toBe(0);
+        expect(rect.left).toBeCloseTo(811.1, 1);
+        expect(rect.top).toBe(200);
       });
@@ -438,5 +444,5 @@ });
         expect(bigRect.width).toBe(400);
-        expect(bigRect.height).toBe(300);
+        expect(bigRect.height).toBe(600);
         expect(bigRect.left).toBe(0);
-        expect(bigRect.top).toBe(0);
+        expect(bigRect.top).toBe(20);
         // Expect them to all have the same width and height
@@ -446,17 +452,17 @@ var rect;
           rect = divs[i].getBoundingClientRect();
-          expect(rect.width).toBe(200);
-          expect(rect.height).toBe(250);
+          expect(rect.width).toBe(100);
+          expect(rect.height).toBe(150);
         }
         rect = divs[1].getBoundingClientRect();
         expect(rect.left).toBe(0);
-        expect(rect.top).toBe(300);
+        expect(rect.top).toBe(645);
         rect = divs[2].getBoundingClientRect();
+        expect(rect.left).toBe(100);
+        expect(rect.top).toBe(645);
+        rect = divs[3].getBoundingClientRect();
         expect(rect.left).toBe(200);
-        expect(rect.top).toBe(300);
-        rect = divs[3].getBoundingClientRect();
-        expect(rect.left).toBe(0);
-        expect(rect.top).toBe(550);
+        expect(rect.top).toBe(645);
         rect = divs[4].getBoundingClientRect();
-        expect(rect.left).toBe(200);
-        expect(rect.top).toBe(550);
+        expect(rect.left).toBe(300);
+        expect(rect.top).toBe(645);
       });
@@ -471,4 +477,4 @@
         var bigRect = divs[0].getBoundingClientRect();
-        expect(bigRect.width).toBe(200);
-        expect(bigRect.height).toBe(300);
+        expect(bigRect.width).toBe(400);
+        expect(bigRect.height).toBe(320);
         expect(bigRect.left).toBe(0);
@@ -478,6 +484,6 @@ expect(bigRect.top).toBe(0);
         var big2Rect = divs[1].getBoundingClientRect();
-        expect(big2Rect.width).toBe(200);
-        expect(big2Rect.height).toBe(300);
-        expect(big2Rect.left).toBe(200);
-        expect(big2Rect.top).toBe(0);
+        expect(big2Rect.width).toBe(400);
+        expect(big2Rect.height).toBe(320);
+        expect(big2Rect.left).toBe(0);
+        expect(big2Rect.top).toBe(320);
         // Expect them to all have the same width and height
@@ -487,14 +493,14 @@ var rect;
           rect = divs[i].getBoundingClientRect();
-          expect(rect.width).toBe(200);
-          expect(rect.height).toBe(250);
+          expect(rect.width).toBe(133);
+          expect(rect.height).toBe(160);
         }
         rect = divs[2].getBoundingClientRect();
-        expect(rect.left).toBe(0);
-        expect(rect.top).toBe(300);
+        expect(rect.left).toBe(0.5);
+        expect(rect.top).toBe(640);
         rect = divs[3].getBoundingClientRect();
-        expect(rect.left).toBe(200);
-        expect(rect.top).toBe(300);
+        expect(rect.left).toBe(133.5);
+        expect(rect.top).toBe(640);
         rect = divs[4].getBoundingClientRect();
-        expect(rect.left).toBe(100);
-        expect(rect.top).toBe(550);
+        expect(rect.left).toBe(266.5);
+        expect(rect.top).toBe(640);
       });
@@ -501,0 +507,0 @@ });

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15903033

increased by78.38%

Number of package files

29

increased by20.83%

Lines of code

927

increased by5.22%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

200

increased by44.93%

No dependency changes