<!doctype html> <!-- @license Copyright (c) 2016 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE The complete set of authors may be found at http://polymer.github.io/AUTHORS The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS --> <html> <head> <meta charset="UTF-8"> <title>iron-scroll-target-behavior test</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <script src="../../webcomponentsjs/webcomponents-lite.js"></script> <script src="../../web-component-tester/browser.js"></script> <link rel="import" href="x-scrollable.html"> <link rel="import" href="x-nested-scrollable.html"> <style> #temporaryScrollingRegion, #region { overflow: auto; width: 100px; height: 100px; } </style> </head> <body> <test-fixture id="trivialScrollable"> <template> <div id="temporaryScrollingRegion"> <x-scrollable></x-scrollable> </div> </template> </test-fixture> <test-fixture id="trivialScrollingRegion"> <template> <div id="region"> <x-scrollable scroll-target="region"></x-scrollable> </div> </template> </test-fixture> <test-fixture id="trivialNestedScrollingRegion"> <template> <x-nested-scrollable id="nestedScrollingRegion"></x-nested-scrollable> </template> </test-fixture> <test-fixture id="trivialDocumentScroll"> <template> <x-scrollable scroll-target="document"></x-scrollable> </template> </test-fixture> <script> suite('basic features', function() { var scrollingRegion, xScroll; setup(function() { scrollingRegion = fixture('trivialScrollable'); xScroll = Polymer.dom(scrollingRegion).querySelector('x-scrollable'); }); test('default', function() { assert.equal(xScroll._scrollTop, 0, '_scrollTop'); assert.equal(xScroll._scrollLeft, 0, '_scrollLeft'); assert.equal(xScroll._scrollTargetWidth, 0, '_scrollTargetWidth'); assert.equal(xScroll._scrollTargetHeight, 0, '_scrollTargetHeight'); assert.equal(xScroll.scrollTarget, null, 'scrollTarget'); assert.equal(xScroll._defaultScrollTarget, xScroll.scrollTarget, '_defaultScrollTarget'); }); test('invalid `scrollTarget` selector', function(done) { flush(function() { xScroll.scrollTarget = 'invalid-id'; assert.equal(xScroll.scrollTarget, null); done(); }); }); test('valid `scrollTarget` selector', function(done) { flush(function() { xScroll.scrollTarget = 'temporaryScrollingRegion'; assert.equal(xScroll.scrollTarget, scrollingRegion); done(); }); }); }); suite('scrolling region', function() { var scrollingRegion, xScrollable; setup(function() { scrollingRegion = fixture('trivialScrollingRegion'); xScrollable = Polymer.dom(scrollingRegion).querySelector('x-scrollable'); }); teardown(function() { xScrollable._scrollTop = 0; xScrollable._scrollLeft = 0; }); test('scrollTarget reference', function(done) { flush(function() { assert.equal(xScrollable.scrollTarget, scrollingRegion); done(); }); }); test('invalid scrollTarget', function(done) { flush(function() { assert.equal(xScrollable.scrollTarget, scrollingRegion); done(); }); }); test('setters', function(done) { flush(function() { xScrollable._scrollTop = 100; xScrollable._scrollLeft = 100; assert.equal(scrollingRegion.scrollTop, 100); assert.equal(scrollingRegion.scrollLeft, 100); done(); }); }); test('getters', function(done) { flush(function() { scrollingRegion.scrollTop = 50; scrollingRegion.scrollLeft = 50; assert.equal(xScrollable._scrollTop, 50, '_scrollTop'); assert.equal(xScrollable._scrollLeft, 50, '_scrollLeft'); assert.equal(xScrollable._scrollTargetWidth, scrollingRegion.offsetWidth, '_scrollTargetWidth'); assert.equal(xScrollable._scrollTargetHeight, scrollingRegion.offsetHeight, '_scrollTargetHeight'); done(); }); }); test('scroll method', function(done) { flush(function() { xScrollable.scroll(110, 110); assert.equal(xScrollable._scrollTop, 110); assert.equal(xScrollable._scrollLeft, 110); xScrollable.scroll(0, 0); assert.equal(xScrollable._scrollTop, 0); assert.equal(xScrollable._scrollLeft, 0); done(); }); }); }); suite('document scroll', function() { var xScrollable; setup(function() { xScrollable = fixture('trivialDocumentScroll'); }); teardown(function() { xScrollable._scrollTop = 0; xScrollable._scrollLeft = 0; }); test('scrollTarget reference', function(done) { flush(function() { assert.equal(xScrollable.scrollTarget, document.documentElement); done(); }); }); test('setters', function(done) { flush(function() { xScrollable._scrollTop = 100; xScrollable._scrollLeft = 100; assert.equal(window.pageXOffset, 100); assert.equal(window.pageYOffset, 100); done(); }); }); test('getters', function(done) { flush(function() { window.scrollTo(50, 50); assert.equal(xScrollable._scrollTop, 50, '_scrollTop'); assert.equal(xScrollable._scrollLeft, 50, '_scrollLeft'); assert.equal(xScrollable._scrollTargetWidth, window.innerWidth, '_scrollTargetWidth'); assert.equal(xScrollable._scrollTargetHeight, window.innerHeight, '_scrollTargetHeight'); done(); }); }); test('scroll method', function(done) { flush(function() { xScrollable.scroll(1, 2); assert.equal(xScrollable._scrollLeft, 1); assert.equal(xScrollable._scrollTop, 2); xScrollable.scroll(3, 4); assert.equal(xScrollable._scrollLeft, 3); assert.equal(xScrollable._scrollTop, 4); done(); }); }); }); suite('nested scrolling region', function() { var xScrollingRegion; var xScrollable; setup(function() { var nestedScrollingRegion = fixture('trivialNestedScrollingRegion'); xScrollable = nestedScrollingRegion.$.xScrollable; xScrollingRegion = nestedScrollingRegion.$.xRegion; }); teardown(function() { xScrollable._scrollTop = 0; xScrollable._scrollLeft = 0; }); test('scrollTarget reference', function(done) { flush(function() { assert.equal(xScrollable.scrollTarget, xScrollingRegion); done(); }); }); test('setters', function(done) { flush(function() { xScrollable._scrollTop = 10; xScrollable._scrollLeft = 20; assert.equal(xScrollingRegion.scrollTop, 10); assert.equal(xScrollingRegion.scrollLeft, 20); done(); }); }); test('getters', function(done) { flush(function() { xScrollable._scrollTop = 10; xScrollable._scrollLeft = 20; assert.equal(xScrollable._scrollTop, 10, '_scrollTop'); assert.equal(xScrollable._scrollLeft, 20, '_scrollLeft'); done(); }); }); test('scroll method', function(done) { flush(function() { xScrollable.scroll(1, 2); assert.equal(xScrollable._scrollLeft, 1); assert.equal(xScrollable._scrollTop, 2); xScrollable.scroll(3, 4); assert.equal(xScrollable._scrollLeft, 3); assert.equal(xScrollable._scrollTop, 4); done(); }); }); }); </script> </body> </html>