config redirect

node_modules/packery/test/unit/grid.js

@@ -0,0 +1,81 @@
+QUnit.test( 'layout with columnWidth and rowHeight', function( assert ) {
+  var container = document.querySelector('#gridded1');
+  appendRandomSizedItems( container );
+
+  var pckry = new Packery( container, {
+    itemSelector: '.item',
+    columnWidth: 25,
+    rowHeight: 30
+  });
+
+  var done = assert.async();
+
+  function checkPackeryGrid() {
+    var colW = pckry.columnWidth + pckry.gutter;
+    var rowH = pckry.rowHeight + pckry.gutter;
+    for ( var i=0, len = pckry.items.length; i < len; i++ ) {
+      var elem = pckry.items[i].element;
+      var x = parseInt( elem.style.left, 10 );
+      var y = parseInt( elem.style.top, 10 );
+      assert.equal( x % colW, 0, 'item ' + i + ' x position is multiple of columnWidth' );
+      assert.equal( y % rowH, 0, 'item ' + i + ' y position is multiple of rowHeight' );
+    }
+  }
+
+  assert.equal( pckry.options.columnWidth, 25, 'columnWidth option is set' );
+  assert.equal( pckry.options.rowHeight, 30, 'rowHeight option is set' );
+  assert.equal( pckry.columnWidth, 25, 'columnWidth is set' );
+  assert.equal( pckry.rowHeight, 30, 'rowHeight is set' );
+  checkPackeryGrid( pckry );
+
+  var gridSizer = container.querySelector('.grid-sizer');
+
+  pckry.options.columnWidth = gridSizer;
+  pckry.options.rowHeight = gridSizer;
+  pckry.once( 'layoutComplete', function() {
+    checkPackeryGrid( pckry );
+    setTimeout( setGutter );
+  });
+
+  pckry.layout();
+
+  assert.equal( pckry.columnWidth, 30, 'columnWidth is set from element width, in px' );
+  assert.equal( pckry.rowHeight, 25, 'rowHeight is set from element height, in px' );
+
+  function setGutter() {
+    pckry.options.gutter = container.querySelector('.gutter-sizer');
+    pckry.once( 'layoutComplete', function() {
+      checkPackeryGrid( pckry );
+      setTimeout( setPercentageGrid );
+    });
+    pckry.layout();
+    assert.equal( pckry.gutter, 10, 'gutter set from element width, in px' );
+  }
+
+  function setPercentageGrid() {
+    gridSizer.style.width = '40%';
+    pckry.once( 'layoutComplete', function() {
+      checkPackeryGrid( pckry );
+      done();
+    });
+    pckry.layout();
+    assert.equal( pckry.columnWidth, 32, 'columnWidth is set from element width, in percentage' );
+  }
+
+});
+
+QUnit.test( 'columnWidth, rowHeight, gutter via selector', function( assert ) {
+  var container = document.querySelector('#gridded2');
+  appendRandomSizedItems( container );
+
+  var pckry = new Packery( container, {
+    itemSelector: '.item',
+    columnWidth: '.grid-sizer',
+    rowHeight: '.grid-sizer',
+    gutter: '.gutter-sizer'
+  });
+
+  assert.equal( pckry.columnWidth, 30, 'columnWidth' );
+  assert.equal( pckry.rowHeight, 25, 'rowHeight' );
+  assert.equal( pckry.gutter, 10, 'gutter' );
+});