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 @@
+