Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
Fixes for unit tests. Revert flip-bound logic.
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevinpschaaf
kevinpschaaf committed Nov 3, 2014
1 parent 56d998e commit e189f54
Show file tree
Hide file tree
Showing 10 changed files with 131 additions and 131 deletions.
34 changes: 11 additions & 23 deletions core-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -412,9 +412,8 @@
}
}
// Adjust offset/scroll position based on total number of items changed
if (this._virtualStart < this._physicalCount &&
this._physicalOffset > (this._physicalCount / this._rowFactor) * this._physicalAverage) {
this._resetIndex(this._virtualStart);
if (this._virtualStart < this._physicalCount) {
this._resetIndex(this._getFirstVisibleIndex());
} else {
totalDelta = Math.max((totalDelta / this._rowFactor) * this._physicalAverage, -this._physicalOffset);
this._physicalOffset += totalDelta;
Expand All @@ -435,6 +434,7 @@
groupsChanged: function() {
if (!!this.groups != this._grouped) {
this.initialize();
this._resetIndex(this._getFirstVisibleIndex() || this._virtualStart);
}
},

Expand Down Expand Up @@ -897,7 +897,8 @@
console.log(this._scrollTop, 'Random access to ' + this._virtualStart, this._physicalOffset);
} else {
// Incremental movement: adjust index by flipping items
var flipBound = this._dir > 0 ? this._upperBound : this._lowerBound;
var flipBound = this._aboveSize + this._physicalOffset +
(this._dir > 0 ? 0.4 : 0.6) * Math.max((this._physicalSize - this._targetSize, this._physicalSize));
if (((this._dir > 0 && this._scrollTop > flipBound) ||
(this._dir < 0 && this._scrollTop < flipBound))) {
var flipSize = Math.abs(this._scrollTop - flipBound);
Expand Down Expand Up @@ -962,14 +963,8 @@
// Measure
this.updateMetrics();

// Pre-positioning tasks, depending on scroll direction
if (this._dir >= 0) {
// Update viewport height to home into bottom when going down
// Note: scrollTop test excludes overscroll on iOS to prevent artifacts
if (this._scrollTop >= 0) {
this._updateViewportHeight();
}
} else {
// Pre-positioning tasks
if (this._dir < 0) {
// When going up, remove offset after measuring size for
// new data for item being moved from bottom to top
while (this._repositionedItems.length) {
Expand Down Expand Up @@ -1028,25 +1023,18 @@
if (this.grid) {
rowx++;
if (rowx >= this._rowFactor) {
lowerBound = y;
rowx = 0;
y += lastHeight;
if (!upperBound) {
upperBound = y;
}
}
x = this._rowMargin + rowx * this.width;
} else {
lowerBound = y;
y += lastHeight;
if (!upperBound) {
upperBound = y;
}
}
}
this._upperBound = this._aboveSize + upperBound;
this._lowerBound = this._aboveSize + lowerBound - this._targetSize;
// console.log('lower', lowerBound, 'upper', upperBound);

if (this._scrollTop >= 0) {
this._updateViewportHeight();
}
},

_updateViewportHeight: function() {
Expand Down
56 changes: 31 additions & 25 deletions demo-debug-grid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@

<list-test></list-test>

<polymer-element name="list-test" layout vertical center-center relative>
<polymer-element name="list-test" relative>
<template>
<style>
.item {
Expand Down Expand Up @@ -76,15 +76,31 @@

</style>

<div style="position: absolute; top:{{$.list.offsetTop}}px; left:{{$.list.offsetLeft}}px; width:{{$.list.offsetWidth}}px; height:{{$.list.offsetHeight}}px">
<div class="marker viewport" style="top:{{-$.list.scrollTop}}px; height:{{$.list.$.viewport.offsetHeight}}px; width:{{$.list.$.viewport.offsetWidth}}px;"></div>
<template repeat="{{$.list._physicalItems}}">
<div class="marker" style="top:{{_translateY-parentNode.scrollTop}}px; left:{{_translateX}}px; width:{{offsetWidth}}px; height:{{offsetHeight}}px" hidden?="{{hidden}}">
Group: {{templateInstance.model.groupIndex}}<br>
Index: {{templateInstance.model.index}}<br>
Phys: {{templateInstance.model.physicalIndex}}
</div>
</template>
<core-ajax url="demo-data-grouped-short.json" response="{{data}}" auto></core-ajax>

<div fit layout vertical center-center style="transform: scale({{scale}})">
<div style="position: absolute; top:{{$.list.offsetTop}}px; left:{{$.list.offsetLeft}}px; width:{{$.list.offsetWidth}}px; height:{{$.list.offsetHeight}}px">
<div class="marker viewport" style="top:{{-$.list.scrollTop}}px; height:{{$.list.$.viewport.offsetHeight}}px; width:{{$.list.$.viewport.offsetWidth}}px;"></div>
<template repeat="{{$.list._physicalItems}}">
<div class="marker" style="top:{{_translateY-parentNode.scrollTop}}px; left:{{_translateX}}px; width:{{offsetWidth}}px; height:{{offsetHeight}}px" hidden?="{{hidden}}">
Group: {{templateInstance.model.groupIndex}}<br>
Index: {{templateInstance.model.index}}<br>
Phys: {{templateInstance.model.physicalIndex}}
</div>
</template>
</div>

<core-list id="list" data="{{data.data || data}}" groups="{{data.groups}}" grid width="100">
<template>
<div class="divider" divider hidden>
{{groupModel.letter}}
</div>
<div class="item" style="xbackground-color: {{model.color}};">
<core-image src="{{model.image}}" preload sizing="cover"></core-image>
<span>Index: {{index}}</span>
</div>
</template>
</core-list>
</div>

<div style="position: absolute; top: 10px; right: 10px; width: 200px;">
Expand All @@ -102,32 +118,22 @@
_viewportHeight: {{$.list._viewportHeight}} <br>
<br>
_scrollTop: {{$.list._scrollTop}} <br>
_flipBound: {{$.list._flipBound}} <br>
_upperBound: {{$.list._upperBound}} <br>
_lowerBound: {{$.list._lowerBound}} <br>
_physicalOffset: {{$.list._physicalOffset}} <br>
</div>
<br>
Scale: <input type="number" value="{{scale}}" max="1" min="0.1" step="0.1">
</div>

<core-ajax url="demo-data-grouped-short.json" response="{{data}}" auto></core-ajax>

<core-list id="list" data="{{data.data || data}}" groups="{{data.groups}}" grid width="100">
<template>
<div class="divider" divider hidden>
{{groupModel.letter}}
</div>
<div class="item" style="xbackground-color: {{model.color}};">
<core-image src="{{model.image}}" preload sizing="cover"></core-image>
<span>Index: {{index}}</span>
</div>
</template>
</core-list>

</template>
<script>
(function() {

var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

Polymer('list-test', {
scale: 1,
ready: function() {
window.list = this.$.list;
}
Expand Down
2 changes: 1 addition & 1 deletion gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
var gulp = require('gulp');
require('gulp-web-component-tester').init(gulp);
require('web-component-tester').gulp.init(gulp);
5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"dependencies": {
"gulp": "^3.8.7"
"devDependencies": {
"gulp": "^3.8.7",
"web-component-tester": "^1.4.2"
}
}
42 changes: 24 additions & 18 deletions tests/html/core-list-basic.html → test/core-list-basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,9 @@
<head>
<title>core-list</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../../webcomponentsjs/webcomponents.js"></script>
<script src="../../../polymer-test-tools/chai/chai.js"></script>
<script src="../../../polymer-test-tools/htmltest.js"></script>
<link rel="import" href="../../core-list.html">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../core-list.html">
<style>
body {
margin: 0;
Expand Down Expand Up @@ -52,11 +51,13 @@
</core-list>

<script>
document.addEventListener('polymer-ready', function() {
test('core-list-basic', function(done) {
// Initial setup
var list = document.querySelector('core-list');
var physicalCount = Math.ceil(list.offsetHeight / list.height);
var height = 80;
var physicalCount = Math.ceil(list.offsetHeight / height);
var index = 0;
var item;
// Helper to create random items
var generateItem = function() {
return {
Expand Down Expand Up @@ -90,12 +91,12 @@
};
var scrollItemsAndCheck = function(count, next) {
index += count;
list.scrollTop += count * list.height;
list.scrollTop += count * height;
waitFor(function() {
checkTopItem('when scrolled to item ' + index);
}, next);
};
asyncSeries([
async.series([
// Initialize list with two items
function(next) {
list.data = [
Expand All @@ -110,16 +111,21 @@
},
// Select first item
function(next) {
var item = document.elementFromPoint(list.clientWidth-50, 0);
item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
waitFor(function() {
var item = document.elementFromPoint(list.clientWidth-50, 0);
chai.assert(item, 'item should exist at top of list');
item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
}, next);
},
function(next) {
waitFor(function() {
chai.assert(list.selection && list.selection.id == list.data[0].id,
'first item should be selected; selected id was ' + list.selection && list.selection.id);
}, next);
},
// Select second item
function(next) {
var item = document.elementFromPoint(list.clientWidth-50, list.height);
var item = document.elementFromPoint(list.clientWidth-50, height);
item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
waitFor(function() {
chai.assert(list.selection && list.selection.id == list.data[1].id,
Expand Down Expand Up @@ -170,7 +176,7 @@
list.data.push(generateItem());
}
waitFor(function() {
chai.assert(list.children.length == physicalCount + 1 + list.extraItems, // (+1 for template)
chai.assert(list.children.length > physicalCount + 1, // (+1 for template)
'children.length should be ' + physicalCount + ' (1 template + max number of elements');
}, next);
},
Expand Down Expand Up @@ -233,7 +239,7 @@
// Scroll all the way to bottom
function(next) {
list.scrollTop = 99999999;
index = list.data.length - 1 - Math.floor(list.offsetHeight / list.height);
index = list.data.length - Math.ceil(list.offsetHeight / height);
waitFor(function() {
checkTopItem('at bottom of list');
}, next);
Expand All @@ -253,7 +259,7 @@
function(next) {
list.data.length = list.data.length - 1;
var lastIndex = index;
index = list.data.length - 1 - Math.floor(list.offsetHeight / list.height);
index = list.data.length - Math.ceil(list.offsetHeight / height);
waitFor(function() {
checkTopItem('at bottom of list after deleting one item from end of list');
chai.assert(list.selection.length === 1,
Expand All @@ -266,7 +272,7 @@
function(next) {
list.data.length = list.data.length - Math.floor(list.data.length/2);
var lastIndex = index;
index = list.data.length - 1 - Math.floor(list.offsetHeight / list.height);
index = list.data.length - Math.ceil(list.offsetHeight / height);
waitFor(function() {
checkTopItem('at bottom of list after deleting half of items items from end of list');
chai.assert(list.selection.length === 0,
Expand All @@ -276,15 +282,15 @@
// Delete from top
function(next) {
list.data.splice(0, Math.floor(list.data.length/2));
index = list.data.length - 1 - Math.floor(list.offsetHeight / list.height);
index = list.data.length - Math.ceil(list.offsetHeight / height);
waitFor(function() {
checkTopItem('at bottom of list after deleting half of items items from top of list');
}, next);
}, next, 32);
},
// Delete from top
function(next) {
list.data.splice(0, Math.floor(list.data.length/2));
index = list.data.length - 1 - Math.floor(list.offsetHeight / list.height);
index = list.data.length - Math.ceil(list.offsetHeight / height);
waitFor(function() {
checkTopItem('at bottom of list after deleting half of items items from top of list (again)');
}, next);
Expand Down
Loading

0 comments on commit e189f54

Please sign in to comment.