diff --git a/test/index.html b/test/index.html index aba2d43..a6803ea 100644 --- a/test/index.html +++ b/test/index.html @@ -38,6 +38,7 @@ + @@ -110,5 +111,15 @@
c
+

Masonry stamp

+ +
+
+
+
+
+
+
+ diff --git a/test/masonry-stamp.js b/test/masonry-stamp.js new file mode 100644 index 0000000..e37c887 --- /dev/null +++ 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 ); + +}); + +})(); diff --git a/test/tests.css b/test/tests.css index 9b86827..c70d409 100644 --- 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; +}