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 {
-
+  position: relative;
 .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;
 }
 /* ---- 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;
 }