masonry stamp test

11 years ago · d856b23b00
3 changed files with 52 additions and 14 deletions
--- a/test/index.html
+++ b/test/index.html
@ -38,6 +38,7 @@
 <script src="layout-complete.js"></script>
 <script src="get-segment-size.js"></script>
 <script src="masonry-measure-columns.js"></script>
+<script src="masonry-stamp.js"></script>

 </head>
 <body>
@ -110,5 +111,15 @@
    <div class="item c">c</div>
  </div>

+  <h2>Masonry stamp</h2>
+
+  <div id="masonry-stamp" class="container">
+    <div class="stamp stamp1"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
 </body>
 </html>
--- a/test/masonry-stamp.js
+++ b/test/masonry-stamp.js
@ -0,0 +1,27 @@
+( function() {
+
+'use strict';
+
+test( 'Masonry stamp', function() {
+  
+  var iso = new Isotope( '#masonry-stamp', {
+    layoutMode: 'masonry',
+    itemSelector: '.item',
+    stamp: '.stamp'
+  });
+
+  function checkPosition( item, x, y ) {
+    var elem = item.element;
+    var left = parseInt( elem.style.left, 10 );
+    var top = parseInt( elem.style.top, 10 );
+    deepEqual( [ left, top ], [ x, y ], 'item position ' + x + ', ' + y );
+  }
+
+  checkPosition( iso.items[0], 0, 0 );
+  checkPosition( iso.items[1], 0, 30 );
+  checkPosition( iso.items[2], 60, 45 );
+  checkPosition( iso.items[3], 120, 45 );
+
+});
+
+})();
--- a/test/tests.css
+++ b/test/tests.css
@ -37,6 +37,9 @@ body {
 .item.h4 { height:  90px; }
 .item.h5 { height: 110px; }

+/* ---- stamp ---- */
+
+
 .stamp {
  background: red;
  opacity: 0.75;
@ -44,20 +47,8 @@ body {
  border: 1px solid;
 }

-/* ---- stamp ---- */
-
-.has-stamp .item { width: 45px; }
-
-/* stout, in the middle */
-.has-stamp .stamp1 {
-  width: 40px;
-  height: 30px;
-}
-
-/* really wide */
-.has-stamp .stamp2 {
-  width: 200px;
-  height: 20px;
+.has-stamp {
+  position: relative;
 }

 /* ---- get segment size ---- */
@ -74,3 +65,12 @@ body {
 #masonry-measure-columns .grid-sizer {
  width: 70px;
 }
+
+/* ---- masonry stamp ---- */
+
+#masonry-stamp .stamp1 {
+  width: 80px;
+  height: 30px;
+  right: 25px;
+  top: 15px;
+}