diff --git a/tests/horizontallyScrollingViewportTests.js b/tests/horizontallyScrollingViewportTests.js new file mode 100644 index 0000000..c501ece --- /dev/null +++ b/tests/horizontallyScrollingViewportTests.js @@ -0,0 +1,47 @@ +function runHorizontallyScrollingViewport() { + var visible = ''; + $('li:in-viewport(0, #blocks)').each(function() { + visible += $(this).text() + ' '; + }); + return visible.trim(); +} + +describe('isInViewport', function() { + describe('viewport is a horizonatlly scrollable list (ul#blocks)', function() { + var buidList = function() { + $('body').prepend(''); + + // Add 10 list items to the list + for (var i=1; i<=10; i++) + $('#blocks').append('
  • ' + i + '
  • '); + }; + var removeList = function() { + $('#blocks').remove(); + }; + var scrollLeft = function(px) { + px = px || $('#blocks')[0].scrollWidth + $('#blocks').scrollLeft(px); + }; + + before(buidList); + after(removeList); + + describe('when the first four items are visible', function() { + it('should return the string "1 2 3 4" as a list of currently visible items', function() { + runHorizontallyScrollingViewport().should.be.exactly('1 2 3 4'); + }); + }); + describe('when we scroll the list left by 525px', function() { + it('should return the string "4 5 6 7 8" as a list of currently visible items', function() { + scrollLeft(525); + runHorizontallyScrollingViewport().should.be.exactly('4 5 6 7 8'); + }); + }); + describe('when we scroll the list to the end', function() { + it('should return the string "7 8 9 10" as a list of currently visible items', function() { + scrollLeft(); + runHorizontallyScrollingViewport().should.be.exactly('7 8 9 10'); + }); + }); + }); +}); \ No newline at end of file diff --git a/tests/tests.html b/tests/tests.html index 9f285cc..4f14993 100644 --- a/tests/tests.html +++ b/tests/tests.html @@ -53,6 +53,26 @@ padding: 19px 36px; color: #fff; } + ul#blocks { + padding: 0; + width: 600px; + height: 170px; + overflow-x: scroll; + white-space: nowrap; + font-size: 0; + } + + ul#blocks li { + box-sizing: border-box; + display: inline-block; + background-color: #ff0000; + height: 150px; + width: 150px; + text-align: center; + font-size: 50px; + padding: 50px; + border: 1px solid #fff; + } @@ -77,6 +97,7 @@ +