Add pixel rounding test; Ref #580

desandro · Apr 1, 2015 · d1b09e0 · d1b09e0
1 parent 116f36e
commit d1b09e0
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 2 deletions.
diff --git a/test/element-sizing.js b/test/element-sizing.js
@@ -2,7 +2,7 @@
 
 'use strict';
 
-test( 'pixel rounding', function() {
+test( 'element sizing', function() {
   var container = document.querySelector('#element-sizing');
   var msnry = new Masonry( '#element-sizing', {
     columnWidth: '.grid-sizer',

diff --git a/test/index.html b/test/index.html
@@ -29,6 +29,7 @@
 <script src="empty.js"></script>
 <script src="zero-column-width.js"></script>
 <script src="element-sizing.js"></script>
+<script src="pixel-rounding.js"></script>
 
 </head>
 <body>
@@ -139,5 +140,14 @@ <h2>Element sizing</h2>
     <div class="item"></div>
   </div>
 
+  <h2>Pixel rounding</h2>
+  <div id="pixel-rounding" class="container">
+    <div class="gutter-sizer"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
 </body>
 </html>
diff --git a/test/pixel-rounding.js b/test/pixel-rounding.js
@@ -0,0 +1,25 @@
+( function() {
+
+'use strict';
+
+test( 'pixel rounding', function() {
+  var container = document.querySelector('#pixel-rounding');
+  var msnry = new Masonry( container, {
+    gutter: '.gutter-sizer',
+    itemSelector: '.item',
+    transitionDuration: 0
+  });
+
+  var lastItem = msnry.items[2];
+
+  var containerWidth = 170;
+  while ( containerWidth < 210 ) {
+    container.style.width = containerWidth + 'px';
+    msnry.layout();
+    equal( lastItem.position.y, 0,'3rd item on top row, container width = ' + containerWidth );
+    containerWidth++;
+  }
+
+});
+
+})();
diff --git a/test/tests.css b/test/tests.css
@@ -106,7 +106,7 @@ body {
   display: none;
 }
 
-/* ---- pixel-rounding ---- */
+/* ---- element-sizing ---- */
 
 #element-sizing {
   width: 181px;
@@ -116,3 +116,12 @@ body {
 #element-sizing .grid-sizer { width: 20%; }
 
 #element-sizing .item.w2 { width: 40%; }
+
+/* ---- pixel-rounding ---- */
+
+#pixel-rounding {
+  width: 170px;
+}
+
+#pixel-rounding .item { width: 28.667%; }
+#pixel-rounding .gutter-sizer { width: 7%; }