test gutter

thomach · Jun 4, 2013 · c831e0b · c831e0b
1 parent 703aa84
commit c831e0b
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 49 deletions.
diff --git a/test/.jshintrc b/test/.jshintrc
@@ -6,6 +6,7 @@
   "unused": true,
   "predef": {
     "Masonry": false,
+    "checkItemPositions": false,
 
     "asyncTest": false,
     "deepEqual": false,

diff --git a/test/basic-layout.js b/test/basic-layout.js
@@ -8,7 +8,7 @@ test( 'basic layout top left', function() {
     columnWidth: 60
   });
 
-  var positions = {
+  checkItemPositions( msnry, {
     0: {
       left: 0,
       top: 0
@@ -29,17 +29,7 @@ test( 'basic layout top left', function() {
       left: 60,
       top: 90
     }
-  };
-
-  for ( var i = 0; i < 5; i++ ) {
-    var position = positions[i];
-    var style = msnry.items[i].element.style;
-    for ( var prop in position ) {
-      var value = position[ prop ] + 'px';
-      var message = 'item ' + i + ' ' + prop + ' = ' + value;
-      equal( style[ prop ], value, message );
-    }
-  }
+  });
 
 });
 
@@ -50,7 +40,7 @@ test( 'basic layout top right', function() {
     columnWidth: 60
   });
 
-  var positions = {
+  checkItemPositions( msnry, {
     0: {
       right: 0,
       top: 0
@@ -71,17 +61,7 @@ test( 'basic layout top right', function() {
       right: 60,
       top: 90
     }
-  };
-
-  for ( var i = 0; i < 5; i++ ) {
-    var position = positions[i];
-    var style = msnry.items[i].element.style;
-    for ( var prop in position ) {
-      var value = position[ prop ] + 'px';
-      var message = 'item ' + i + ' ' + prop + ' = ' + value;
-      equal( style[ prop ], value, message );
-    }
-  }
+  });
 
 });
 
@@ -92,7 +72,7 @@ test( 'basic layout bottom left', function() {
     columnWidth: 60
   });
 
-  var positions = {
+  checkItemPositions( msnry, {
     0: {
       left: 0,
       bottom: 0
@@ -113,17 +93,7 @@ test( 'basic layout bottom left', function() {
       left: 60,
       bottom: 90
     }
-  };
-
-  for ( var i = 0; i < 5; i++ ) {
-    var position = positions[i];
-    var style = msnry.items[i].element.style;
-    for ( var prop in position ) {
-      var value = position[ prop ] + 'px';
-      var message = 'item ' + i + ' ' + prop + ' = ' + value;
-      equal( style[ prop ], value, message );
-    }
-  }
+  });
 
 });
 
@@ -135,7 +105,7 @@ test( 'basic layout bottom right', function() {
     columnWidth: 60
   });
 
-  var positions = {
+  checkItemPositions( msnry, {
     0: {
       right: 0,
       bottom: 0
@@ -156,19 +126,8 @@ test( 'basic layout bottom right', function() {
       right: 60,
       bottom: 90
     }
-  };
-
-  for ( var i = 0; i < 5; i++ ) {
-    var position = positions[i];
-    var style = msnry.items[i].element.style;
-    for ( var prop in position ) {
-      var value = position[ prop ] + 'px';
-      var message = 'item ' + i + ' ' + prop + ' = ' + value;
-      equal( style[ prop ], value, message );
-    }
-  }
+  });
 
 });
 
-
 })();
diff --git a/test/gutter.js b/test/gutter.js
@@ -0,0 +1,16 @@
+test( 'gutter', function() {
+
+  var container = document.querySelector('#gutter');
+  var msnry = new Masonry( container, {
+    columnWidth: 60,
+    gutter: 20
+  });
+
+  checkItemPositions( msnry, {
+    0: { left: 0, top: 0 },
+    1: { left: 80, top: 0 },
+    2: { left: 160, top: 0 },
+    3: { left: 0, top: 30 }
+  });
+
+});
diff --git a/test/helpers.js b/test/helpers.js
@@ -0,0 +1,14 @@
+window.checkItemPositions = function( msnry, positions ) {
+  var i = 0;
+  var position = positions[i];
+  while ( position ) {
+    var style = msnry.items[i].element.style;
+    for ( var prop in position ) {
+      var value = position[ prop ] + 'px';
+      var message = 'item ' + i + ' ' + prop + ' = ' + value;
+      equal( style[ prop ], value, message );
+    }
+    i++;
+    position = positions[i];
+  }
+};
diff --git a/test/index.html b/test/index.html
@@ -22,8 +22,10 @@
 <script src="../components/qunit/qunit.js"></script>
 <script src="../masonry.js"></script>
 
+<script src="helpers.js"></script>
 <!-- tests -->
 <script src="basic-layout.js"></script>
+<script src="gutter.js"></script>
 
 </head>
 <body>
@@ -69,5 +71,13 @@ <h2>Basic layout bottom right</h2>
     <div class="item w2"></div>
   </div>
 
+  <h2>Gutter</h2>
+  <div id="gutter" class="container">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item w2"></div>
+  </div>
+
 </body>
 </html>
diff --git a/test/tests.css b/test/tests.css
@@ -4,6 +4,10 @@
           box-sizing: border-box;
 }
 
+body {
+  font-family: sans-serif;
+}
+
 .container {
   background: #EEE;
   width: 180px;
@@ -33,3 +37,12 @@
   position: absolute;
   border: 1px solid;
 }
+
+
+/* ----  ---- */
+
+#gutter {
+  width: 220px;
+}
+
+#gutter .item.w2 { width: 140px; }