Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

Fixes #168, scrollbutton glitch, tests added #169

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion paper-tabs.html
Original file line number Diff line number Diff line change
Expand Up @@ -511,7 +511,7 @@
var scrollLeft = this.$.tabsContainer.scrollLeft;

this._leftHidden = scrollLeft === 0;
this._rightHidden = scrollLeft === this._tabContainerScrollSize;
this._rightHidden = Math.ceil(scrollLeft) >= this._tabContainerScrollSize;
},

_onLeftScrollButtonDown: function() {
Expand Down
4 changes: 3 additions & 1 deletion test/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,11 @@
'basic.html',
'attr-for-selected.html',
'links.html',
'scrollable.html',
'basic.html?dom=shadow',
'attr-for-selected.html?dom=shadow',
'links.html?dom=shadow'
'links.html?dom=shadow',
'scrollable.html?dom=shadow'
]);
</script>

Expand Down
147 changes: 147 additions & 0 deletions test/scrollable.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
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.txt
-->

<html>
<head>

<title>paper-tabs-scrollable</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>

<link rel="import" href="../paper-tabs.html">

</head>
<body>

<test-fixture id="basic">
<template>
<paper-tabs>
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</template>
</test-fixture>

<test-fixture id="scrollable">
<template>
<paper-tabs scrollable style="width: 500px;">
<paper-tab style="width: 150px">ITEM ONE</paper-tab>
<paper-tab style="width: 150px">ITEM TWO</paper-tab>
<paper-tab style="width: 150px">ITEM THREE</paper-tab>
<paper-tab style="width: 150px">ITEM FOUR</paper-tab>
</paper-tabs>
</template>
</test-fixture>

<test-fixture id="zoomed">
<template>
<paper-tabs scrollable style="width: 500px;zoom: 1.1;">
<paper-tab style="width: 150px">ITEM ONE</paper-tab>
<paper-tab style="width: 150px">ITEM TWO</paper-tab>
<paper-tab style="width: 150px">ITEM THREE</paper-tab>
<paper-tab style="width: 150px">ITEM FOUR</paper-tab>
</paper-tabs>
</template>
</test-fixture>

<script>
suite('scrollables suite', function() {

var tabs, tabsContainer, leftScrollbutton, rightScrollbutton;

suite('non-scrollable paper-tabs', function() {

setup(function () {
tabs = fixture('basic');
leftScrollbutton = Polymer.dom(tabs.root).querySelectorAll('paper-icon-button')[0];
rightScrollbutton = Polymer.dom(tabs.root).querySelectorAll('paper-icon-button')[1];
tabsContainer = tabs.$.tabsContainer;
});

test('have no scrollbuttons', function() {
assert.isTrue(leftScrollbutton.offsetWidth===0);
assert.isTrue(rightScrollbutton.offsetWidth===0);
});

});

suite('scrollable paper-tabs', function() {

setup(function () {
tabs = fixture('scrollable');
leftScrollbutton = Polymer.dom(tabs.root).querySelectorAll('paper-icon-button')[0];
rightScrollbutton = Polymer.dom(tabs.root).querySelectorAll('paper-icon-button')[1];
tabsContainer = tabs.$.tabsContainer;
});

test('have scrollbuttons', function() {
assert.isTrue(leftScrollbutton.offsetWidth>0);
assert.isTrue(rightScrollbutton.offsetWidth>0);
});

test('when scroll-offset is 0, then the left scrollbutton is faded out', function(done) {

Polymer.Base.async(function() {
assert.equal(tabsContainer.scrollLeft, 0);
assert.isTrue(leftScrollbutton.classList.contains('not-visible'));
assert.isFalse(rightScrollbutton.classList.contains('not-visible'));
done();
}, 100);

});

test('when scroll-offset is \'max\', then the right scrollbutton is faded out', function(done) {
//Set scrollLeft to a very high number. Will scroll to outermost position.
tabsContainer.scrollLeft = 99999;

Polymer.Base.async(function() {
assert.isFalse(leftScrollbutton.classList.contains('not-visible'));
assert.isTrue(rightScrollbutton.classList.contains('not-visible'));
done();
}, 100);

});

});

suite('zoomed, scrollable paper-tabs', function() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs to be wrapped in something like

if (Object.keys(document.createElement('div').style).indexOf('zoom') >= 0) {

so that it doesn't attempt these if the browser doesn't support zoom.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reminder :)


setup(function () {
tabs = fixture('zoomed');
leftScrollbutton = Polymer.dom(tabs.root).querySelectorAll('paper-icon-button')[0];
rightScrollbutton = Polymer.dom(tabs.root).querySelectorAll('paper-icon-button')[1];
tabsContainer = tabs.$.tabsContainer;
});

test('the right scrollbutton is faded out, even if scrolloffset is fractional due to zoom', function(done) {
//Set scrollLeft to a very high number. Will scroll to outermost position.
tabsContainer.scrollLeft = 99999;
//Using Zoom-Fixture will let tabsContainer.scrollLeft become fractional in certain browsers (i.e. Chrome)

Polymer.Base.async(function() {
assert.isFalse(leftScrollbutton.classList.contains('not-visible'));
assert.isTrue(rightScrollbutton.classList.contains('not-visible'));
done();
}, 100);

});

});

});
</script>

</body>
</html>