position-cells.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. ( function() {
  2. 'use strict';
  3. // position values can be off by 0.1% or 1px
  4. function isPositionApprox( value, expected ) {
  5. var isPercent = value.indexOf('%') != -1;
  6. value = parseFloat( value );
  7. var diff = Math.abs( expected - value );
  8. return isPercent ? diff < 0.1 : diff <= 1;
  9. }
  10. // loop through cells and check position values against expecteds
  11. function checkCellPositions( flkty, expecteds ) {
  12. var isOK;
  13. for ( var i=0, len = expecteds.length; i < len; i++ ) {
  14. var expected = expecteds[i];
  15. var cell = flkty.cells[i];
  16. var position = cell.element.style.left;
  17. isOK = isPositionApprox( position, expected );
  18. if ( !isOK ) {
  19. console.error( 'wrong cell position, index: ' + i + '. ' +
  20. 'expected: ' + expected + '. position: ' + position );
  21. break;
  22. }
  23. }
  24. return isOK;
  25. }
  26. QUnit.test( 'position cells', function( assert ) {
  27. var flkty = new Flickity('#position-cells');
  28. assert.ok( checkCellPositions( flkty, [ 0, 40, 65, 125, 165, 225 ] ), 'percent cell position' );
  29. // .cell { margin: 0 2%; }
  30. flkty.element.classList.add('percent-margin');
  31. flkty.positionCells();
  32. assert.ok( checkCellPositions( flkty, [ 0, 44, 73, 137, 181, 245 ] ), 'percent cell position with margin' );
  33. flkty.element.classList.remove('percent-margin');
  34. // pixel-based position
  35. flkty.options.percentPosition = false;
  36. flkty.positionCells();
  37. assert.ok( checkCellPositions( flkty, [ 0, 160, 260, 500, 660, 900 ] ), 'pixel cell position' );
  38. // pixel margin, { margin: 0 10px; }
  39. flkty.element.classList.add('pixel-margin');
  40. flkty.positionCells();
  41. assert.ok( checkCellPositions( flkty, [ 0, 180, 300, 560, 740, 1000 ] ), 'pixel cell position with margin' );
  42. });
  43. })();