From 7c6d6eb860f4431bcb4b9c9092e499d55cc5e761 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Wed, 27 Aug 2014 01:05:47 -0700
Subject: [PATCH] Add real tests.

---
 tests/html/core-list-basic.html     | 298 ++++++++++++++++++++++++++--
 tests/html/core-list-data.html      | 191 ++++++++++++++++++
 tests/html/core-list-delete.html    |  68 -------
 tests/html/core-list-selection.html | 241 ++++++++++++++++++++++
 tests/js/htmltests.js               |   3 +-
 5 files changed, 713 insertions(+), 88 deletions(-)
 create mode 100755 tests/html/core-list-data.html
 delete mode 100755 tests/html/core-list-delete.html
 create mode 100755 tests/html/core-list-selection.html
diff --git a/tests/html/core-list-basic.html b/tests/html/core-list-basic.html
index d2e617f..5b9c27e 100755
--- a/tests/html/core-list-basic.html
+++ b/tests/html/core-list-basic.html
@@ -16,16 +16,25 @@
   <script src="../../../polymer-test-tools/htmltest.js"></script>
   <link rel="import" href="../../core-list.html">
   <style>
-    html, body {
+    body {
       margin: 0;
-      -webkit-tap-highlight-color: transparent;
-      overflow: hidden;
+      height: 100%;
     }
     core-list {
       display: block;
       height: 100%;
       margin: 0 auto;
     }
+    input {
+      width: 20px;
+    }
+    .item {
+      height: 80px;
+      background: lightblue;
+    }
+    .item.selected {
+      background: orange;
+    }
   </style>
 </head>
 <body fit>
@@ -33,28 +42,279 @@
 <core-list id="list">
   <template>
     <div class="item {{ {selected: selected} | tokenList }}">
-      <div class="subject">Row: {{index}}, Record ID: {{model.id}}</div>
-      <input type="checkbox" checked="{{model.checked}}">
-      <input type="number" value="{{model.value}}" class="narrow">
-      <select selectedIndex="{{model.type}}"><option>a</option><option>b</option><option>c</option></select>
+      <span id="index">{{index}}</span><br>
+      <span id="id">{{model.id}}</span><br>
+      <input id="checkbox" type="checkbox" checked="{{model.checked}}">
+      <input id="input" type="number" _value="{{model.value}}" class="narrow">
+      <select id="select" selectedIndex="{{model.type}}"><option>a</option><option>b</option><option>c</option></select>
     </div>
   </template>
 </core-list>
 
 <script>
   document.addEventListener('polymer-ready', function() {
-    // Test a property
-    var el = document.querySelector('core-list');
-    el.data = [
-      {id:123, checked:true, value:99, type:1},
-      {id:456, checked:false, value:88, type:2}
-    ];
-    el.onMutation(el, function() {
-      chai.assert(el.children.length == el.data.length + 1, 
-        'children.length should be 1 (template) + count of data elements');
-      done();
-    });
-
+    // Initial setup
+    var list = document.querySelector('core-list');
+    var physicalCount = Math.ceil(list.offsetHeight  / list.height);
+    var index = 0;
+    // Helper to create random items
+    var generateItem = function() {
+      return {
+        id: Math.floor(Math.random()*10000),
+        checked: !!Math.floor(Math.random()*2),
+        value: Math.floor(Math.random()*10000),
+        type: Math.floor(Math.random()*3)
+      };
+    };
+    // Helper to assert top item is rendered as expected
+    var checkTopItem = function(positionDescription) {
+      // Measure from top-right (to avoid template children)
+      var item = document.elementFromPoint(list.clientWidth-50, 0);
+      chai.assert(item && 
+        item.templateInstance && 
+        item.templateInstance.model && 
+        item.templateInstance.model.index == index,
+          'top item index should be ' + index + ' ' + positionDescription);
+      chai.assert(item.templateInstance.model.model == list.data[index],
+          'top item model should be data[' + index + ']  ' + positionDescription);
+      chai.assert(item.querySelector('#index').textContent == index,
+          'top item index content should be ' + index + ' ' + positionDescription);
+      chai.assert(item.querySelector('#id').textContent == list.data[index].id,
+          'top item id content should be ' + list.data[index].id + ' ' + positionDescription);
+      chai.assert(item.querySelector('#checkbox').checked == list.data[index].checked,
+          'top item checkbox should be ' + list.data[index].checked + ' ' + positionDescription);
+      chai.assert(item.querySelector('#input').value == list.data[index].value,
+          'top item input should be ' + list.data[index].value + ' ' + positionDescription);
+      chai.assert(item.querySelector('#select').selectedIndex == list.data[index].type,
+          'top item select should be ' + list.data[index].type + ' ' + positionDescription);
+    };
+    var scrollItemsAndCheck = function(count, next) {
+      index += count;
+      list.scrollTop += count * list.height;
+      waitFor(function() {
+        checkTopItem('when scrolled to item ' + index);
+      }, next);
+    };
+    asyncSeries([
+      // Initialize list with two items
+      function(next) {
+        list.data = [
+          generateItem(),
+          generateItem()
+        ];
+        waitFor(function() {
+          chai.assert(list.children.length == 3, // (+1 for template)
+            'children.length should be 3 (1 template + count of data elements');
+          checkTopItem('after initialization');
+        }, next);
+      },
+      // Select first item
+      function(next) {
+        var item = document.elementFromPoint(list.clientWidth-50, 0);
+        item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
+        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);
+        item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
+        waitFor(function() {
+          chai.assert(list.selection && list.selection.id == list.data[1].id, 
+            'second item should be selected; selection ' + list.selection && list.selection.id);
+        }, next);
+      },
+      // Enable multiple-selection, and select the first item (for total of 2 selected)
+      function(next) {
+        list.multi = true;
+        var item = document.elementFromPoint(list.clientWidth-50, 0);
+        item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
+        waitFor(function() {
+          chai.assert(list.selection && list.selection.length == 2, 
+            'selection length should be 2');
+          // Note, selection is maintained in order, so last item selected is last in selection
+          chai.assert(list.selection[0].id == list.data[1].id && list.selection[1].id == list.data[0].id, 
+            'first and second items should be selected; selected ids: ' +  
+            list.selection[0].id + ', ' + list.selection[1].id);
+        }, next);
+      },
+      // Delete one item
+      function(next) {
+        list.data.length = 1;
+        waitFor(function() {
+          chai.assert(list.children.length == 3,
+            'children.length should stay 3 (1 template, plus 2 originally created items)');
+          chai.assert(list.children[2].getAttribute('hidden') !== null, 
+            'last element should be hidden');
+          chai.assert(list.selection.length == 1, 
+            'selection length should be 1');
+          chai.assert(list.selection[0].id == list.data[0].id, 
+            'first element should be selected');
+        }, next);
+      },
+      // Deselect first item
+      function(next) {
+        var item = document.elementFromPoint(list.clientWidth-50, 0);
+        item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
+        waitFor(function() {
+          chai.assert(list.selection.length === 0, 
+            'selection length should be 0');
+        }, next);
+      },
+      // Add many more than viewport
+      function(next) {
+        var more = physicalCount * 20;
+        while (more--) {
+          list.data.push(generateItem());
+        }
+        waitFor(function() {
+          chai.assert(list.children.length == physicalCount + 1 + list.extraItems, // (+1 for template)
+            'children.length should be ' + physicalCount + ' (1 template + max number of elements');
+        }, next);
+      },
+      function(next) {
+        // Scroll down
+        scrollItemsAndCheck(physicalCount, function() {
+          scrollItemsAndCheck(physicalCount, function() {
+            scrollItemsAndCheck(physicalCount, function() {
+              scrollItemsAndCheck(physicalCount, function() {
+                scrollItemsAndCheck(physicalCount, function() {
+                  scrollItemsAndCheck(physicalCount, function() {
+                    scrollItemsAndCheck(physicalCount, function() {
+                      scrollItemsAndCheck(physicalCount, function() {
+                        scrollItemsAndCheck(physicalCount, function() {
+                          scrollItemsAndCheck(physicalCount, function() {
+                            scrollItemsAndCheck(physicalCount, function() {
+                              scrollItemsAndCheck(physicalCount, function() {
+                                next();
+                              });
+                            });
+                          });
+                        });
+                      });
+                    });
+                  });
+                });
+              });
+            });
+          });
+        });
+      },
+      function(next) {
+        // Scroll back up
+        scrollItemsAndCheck(-physicalCount, function() {
+          scrollItemsAndCheck(-physicalCount, function() {
+            scrollItemsAndCheck(-physicalCount, function() {
+              scrollItemsAndCheck(-physicalCount, function() {
+                scrollItemsAndCheck(-physicalCount, function() {
+                  scrollItemsAndCheck(-physicalCount, function() {
+                    scrollItemsAndCheck(-physicalCount, function() {
+                      scrollItemsAndCheck(-physicalCount, function() {
+                        scrollItemsAndCheck(-physicalCount, function() {
+                          scrollItemsAndCheck(-physicalCount, function() {
+                            scrollItemsAndCheck(-physicalCount, function() {
+                              scrollItemsAndCheck(-physicalCount, function() {
+                                next();
+                              });
+                            });
+                          });
+                        });
+                      });
+                    });
+                  });
+                });
+              });
+            });
+          });
+        });
+      },
+      // Scroll all the way to bottom
+      function(next) {
+        list.scrollTop = 99999999;
+        index = list.data.length - 1 - Math.floor(list.offsetHeight / list.height);
+        waitFor(function() {
+          checkTopItem('at bottom of list');
+        }, next);
+      },
+      // Select item
+      function(next) {
+        var item = document.elementFromPoint(list.clientWidth-50, 0);
+        item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
+        waitFor(function() {
+          chai.assert(list.selection.length === 1, 
+            'selection length should be 1');
+          chai.assert(list.selection[0].id == list.data[index].id, 
+            'top item at bottom of list (index ' + index + ') should be selected');
+        }, next);
+      },
+      // Delete one item from bottom
+      function(next) {
+        list.data.length = list.data.length - 1;
+        var lastIndex = index;
+        index = list.data.length - 1 - Math.floor(list.offsetHeight / list.height);
+        waitFor(function() {
+          checkTopItem('at bottom of list after deleting one item from end of list');
+          chai.assert(list.selection.length === 1, 
+            'selection length should be 1');
+          chai.assert(list.selection[0].id == list.data[lastIndex].id, 
+            'previously selected item (index ' + lastIndex + ') should stay selected');
+        }, next);
+      },
+      // Delete from bottom
+      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);
+        waitFor(function() {
+          checkTopItem('at bottom of list after deleting half of items items from end of list');
+          chai.assert(list.selection.length === 0, 
+            'selection length should be 0');
+        }, next);
+      },
+      // 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);
+        waitFor(function() {
+          checkTopItem('at bottom of list after deleting half of items items from top of list');
+        }, next);
+      },
+      // 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);
+        waitFor(function() {
+          checkTopItem('at bottom of list after deleting half of items items from top of list (again)');
+        }, next);
+      },
+      // Webdriver-based: Tap on first item
+      // function(next) {
+      //   requiresWebdriver(function() {
+      //
+      //     // Method 1: click element directly by reference
+      //     var item = document.elementFromPoint(list.clientWidth-50, 0);
+      //     webdriverCommand(['clickElement', item], function(err) {
+      //       waitFor(function() {
+      //         chai.assert(list.selection && list.selection.id == list.data[0].id, 
+      //           'first item should be selected; selection was ' + (list.selection && list.selection.id));
+      //       }, next);
+      //     }, next);
+      //
+      //     // Method 2: move mouse, then click mouse
+      //     webdriverCommand(['moveTo', null, list.offsetWidth-50, 0], function(err) {
+      //       webdriverCommand(['click', 0], function(err) {
+      //         waitFor(function() {
+      //           chai.assert(list.selection && list.selection.id == list.data[0].id, 
+      //             'first item should be selected; selection was ' + (list.selection && list.selection.id));
+      //         }, next);
+      //       }, next);
+      //     }, next);
+      //   }, function(){});
+      //
+      // },
+    ], done);
   });
 
 </script>
diff --git a/tests/html/core-list-data.html b/tests/html/core-list-data.html
new file mode 100755
index 0000000..2ec94c4
--- /dev/null
+++ b/tests/html/core-list-data.html
@@ -0,0 +1,191 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 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>core-list</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script src="../../../platform/platform.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">
+  <style>
+    body {
+      margin: 0;
+      height: 100%;
+    }
+    core-list {
+      display: block;
+      height: 100%;
+      margin: 0 auto;
+    }
+    input {
+      width: 20px;
+    }
+    .item {
+      height: 80px;
+      background: lightblue;
+    }
+    .item.selected {
+      background: orange;
+    }
+  </style>
+</head>
+<body fit>
+
+<core-list id="list">
+  <template>
+    <div class="item {{ selected ? 'selected' : '' }}">
+      <span id="index">{{index}}</span><br>
+      <span id="id">{{model.id}}</span><br>
+      <input id="checkbox" type="checkbox" checked="{{model.checked}}">
+      <input id="input" type="number" _value="{{model.value}}" class="narrow">
+      <select id="select" selectedIndex="{{model.type}}"><option>a</option><option>b</option><option>c</option></select>
+    </div>
+  </template>
+</core-list>
+
+<script>
+  document.addEventListener('polymer-ready', function() {
+    // Initial setup
+    var list = document.querySelector('core-list');
+    var physicalCount = Math.ceil(list.offsetHeight  / list.height);
+    var index = 0;
+    // Helper to create random items
+    var generateItem = function() {
+      return {
+        id: Math.floor(Math.random()*10000),
+        checked: !!Math.floor(Math.random()*2),
+        value: Math.floor(Math.random()*10000),
+        type: Math.floor(Math.random()*3)
+      };
+    };
+    // Helper to populate the list
+    var populateList = function(next) {
+      var more = physicalCount * 20;
+      list.data = [];
+      while (more--) {
+        list.data.push(generateItem());
+      }
+      waitFor(function() {
+        chai.assert(list.children.length == physicalCount + 1 + list.extraItems, // (+1 for template)
+          'children.length should be ' + physicalCount + ' (1 template + max number of elements) after populating list');
+        for (i=1; i<physicalCount + 1 + list.extraItems; i++) {
+          chai.assert(list.children[i].getAttribute('hidden') === null,
+            'all items should be visible after populating list; item ' + i + ' was hidden');
+        }
+      }, next);
+    };
+    asyncSeries([
+      // Set data to null
+      function(next) {
+        populateList(function() {
+          list.children[1].listHasNotReRendered = true;
+          list.data  = null;
+          waitFor(function() {
+            chai.assert(list.children[1].listHasNotReRendered,
+              'list should not re-render when setting list.data to null');
+            chai.assert(list.children.length == physicalCount + 1 + list.extraItems, // (+1 for template)
+              'children.length should be ' + physicalCount + ' (1 template + max number of elements');
+            for (i=1; i<physicalCount + 1 + list.extraItems; i++) {
+              chai.assert(list.children[i].getAttribute('hidden') !== null,
+                'all items should be hidden after setting list.data to null; item ' + i + ' was not hidden');
+            }
+          }, next);
+        });
+      },
+      // Splice all items from data
+      function(next) {
+        populateList(function() {
+          list.data.splice(0, list.data.length);
+          waitFor(function() {
+            chai.assert(list.children[1].listHasNotReRendered,
+              'list should not re-render when splicing all items from list.data');
+            chai.assert(list.children.length == physicalCount + 1 + list.extraItems, // (+1 for template)
+              'children.length should be ' + physicalCount + ' (1 template + max number of elements');
+            for (i=1; i<physicalCount + 1 + list.extraItems; i++) {
+              chai.assert(list.children[i].getAttribute('hidden') !== null,
+                'all items should be hidden; item after splicing all items from list.data' + i + ' was not hidden');
+            }
+          }, next);
+        });
+      },
+      // Set data to empty array
+      function(next) {
+        populateList(function() {
+          list.data = [];
+          waitFor(function() {
+            chai.assert(list.children[1].listHasNotReRendered,
+              'list should not re-render when initializing list.data to []');
+            chai.assert(list.children.length == physicalCount + 1 + list.extraItems, // (+1 for template)
+              'children.length should be ' + physicalCount + ' (1 template + max number of elements');
+            for (i=1; i<physicalCount + 1 + list.extraItems; i++) {
+              chai.assert(list.children[i].getAttribute('hidden') !== null,
+                'all items should be hidden; item after initializing list.data to []' + i + ' was not hidden');
+            }
+          }, next);
+        });
+      },
+      // Push one item
+      function(next) {
+        list.data.push(generateItem());
+        waitFor(function() {
+          chai.assert(list.children[1].listHasNotReRendered,
+            'list should not re-render when adding items to list');
+          chai.assert(list.children.length == physicalCount + 1 + list.extraItems, // (+1 for template)
+            'children.length should be ' + physicalCount + ' (1 template + max number of elements');
+          chai.assert(list.children[1].querySelector('#index').textContent == '0',
+            'first item index content should be ' + index + ' after adding item to list');
+          chai.assert(list.children[1].querySelector('#id').textContent == list.data[0].id,
+            'first item id content should be ' + list.data[0].id + ' after adding item to list');
+          for (var i=1; i<physicalCount + 1 + list.extraItems; i++) {
+            if (i < 2) {
+              chai.assert(list.children[i].getAttribute('hidden') === null,
+                'first 1 item should not be hidden after adding an item');
+            } else {
+              chai.assert(list.children[i].getAttribute('hidden') !== null,
+                'remaining items should be hidden after adding an item');
+            }
+          }
+        }, next);
+      },
+      // Push another item
+      function(next) {
+        list.data.push(generateItem());
+        waitFor(function() {
+          chai.assert(list.children[1].listHasNotReRendered,
+            'list should not re-render when adding items to list');
+          chai.assert(list.children.length == physicalCount + 1 + list.extraItems, // (+1 for template)
+            'children.length should be ' + physicalCount + ' (1 template + max number of elements');
+          chai.assert(list.children[1].querySelector('#index').textContent == '0',
+            'first item index content should be 0 after adding item to list');
+          chai.assert(list.children[1].querySelector('#id').textContent == list.data[0].id,
+            'first item id content should be ' + list.data[0].id + ' after adding item to list');
+          chai.assert(list.children[2].querySelector('#index').textContent == '1',
+            'second item index content should be 1 after adding item to list');
+          chai.assert(list.children[2].querySelector('#id').textContent == list.data[1].id,
+            'second item id content should be ' + list.data[1].id + ' after adding item to list');
+          for (var i=1; i<physicalCount + 1 + list.extraItems; i++) {
+            if (i < 3) {
+              chai.assert(list.children[i].getAttribute('hidden') === null,
+                'first 1 item should not be hidden after adding an item');
+            } else {
+              chai.assert(list.children[i].getAttribute('hidden') !== null,
+                'remaining items should be hidden after adding an item');
+            }
+          }
+        }, next);
+      }
+    ], done);
+  });
+
+</script>
+
+</body>
+</html>
diff --git a/tests/html/core-list-delete.html b/tests/html/core-list-delete.html
deleted file mode 100755
index c1be8f4..0000000
--- a/tests/html/core-list-delete.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!doctype html>
-<!--
-Copyright (c) 2014 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>core-list</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-  <script src="../../../platform/platform.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">
-  <style>
-    html, body {
-      margin: 0;
-      -webkit-tap-highlight-color: transparent;
-      overflow: hidden;
-    }
-    core-list {
-      display: block;
-      height: 100%;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-<body fit>
-
-<core-list id="list">
-  <template>
-    <div class="item {{ {selected: selected} | tokenList }}">
-      <div class="subject">Row: {{index}}, Record ID: {{model.id}}</div>
-      <input type="checkbox" checked="{{model.checked}}">
-      <input type="number" value="{{model.value}}" class="narrow">
-      <select selectedIndex="{{model.type}}"><option>a</option><option>b</option><option>c</option></select>
-    </div>
-  </template>
-</core-list>
-
-<script>
-  document.addEventListener('polymer-ready', function() {
-    // Test a property
-    var el = document.querySelector('core-list');
-    el.data = [
-      {id:123, checked:true, value:99, type:1},
-      {id:456, checked:false, value:88, type:2}
-    ];
-    el.onMutation(el, function() {
-      el.data.length = 1;
-      requestAnimationFrame(function() {
-        chai.assert(el.children.length == 2 + 1, 
-          'children.length should be 1 (template) + count of data elements');
-        chai.assert(el.children[el.children.length-1].getAttribute('hidden') !== null, 
-          'last element shoudl be hidden');
-        done();
-      });
-    });
-
-  });
-
-</script>
-
-</body>
-</html>
diff --git a/tests/html/core-list-selection.html b/tests/html/core-list-selection.html
new file mode 100755
index 0000000..8394c80
--- /dev/null
+++ b/tests/html/core-list-selection.html
@@ -0,0 +1,241 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 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>core-list</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script src="../../../platform/platform.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">
+  <style>
+    body {
+      margin: 0;
+      height: 100%;
+    }
+    core-list {
+      display: block;
+      height: 100%;
+      margin: 0 auto;
+    }
+    input {
+      width: 20px;
+    }
+    .item {
+      height: 80px;
+      background: lightblue;
+    }
+    .item.selected {
+      background: orange;
+    }
+  </style>
+</head>
+<body fit>
+
+<core-list id="list">
+  <template>
+    <div class="item {{ selected ? 'selected' : '' }}">
+      <span id="index">{{index}}</span><br>
+      <span id="id">{{model.id}}</span><br>
+      <input id="checkbox" type="checkbox" checked="{{model.checked}}">
+      <input id="input" type="number" _value="{{model.value}}" class="narrow">
+      <select id="select" selectedIndex="{{model.type}}"><option>a</option><option>b</option><option>c</option></select>
+    </div>
+  </template>
+</core-list>
+
+<script>
+  document.addEventListener('polymer-ready', function() {
+    // Initial setup
+    var list = document.querySelector('core-list');
+    var physicalCount = Math.ceil(list.offsetHeight  / list.height);
+    var index = 0;
+    // Helper to create random items
+    var generateItem = function() {
+      return {
+        id: Math.floor(Math.random()*10000),
+        checked: !!Math.floor(Math.random()*2),
+        value: Math.floor(Math.random()*10000),
+        type: Math.floor(Math.random()*3)
+      };
+    };
+    asyncSeries([
+      // Add many more than viewport
+      function(next) {
+        var more = physicalCount * 20;
+        list.data = [];
+        while (more--) {
+          list.data.push(generateItem());
+        }
+        waitFor(function() {
+          chai.assert(list.children.length == physicalCount + 1 + list.extraItems, // (+1 for template)
+            'children.length should be ' + physicalCount + ' (1 template + max number of elements');
+        }, next);
+      },
+      // Select first item via tap
+      function(next) {
+        var item = document.elementFromPoint(list.clientWidth-50, 0 * list.height);
+        item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
+        waitFor(function() {
+          chai.assert(list.selection && list.selection == list.data[0], 
+            'first item should be selected; selected id was ' + list.selection && list.selection.id);
+          chai.assert(item.classList.contains('selected'), 
+            'first item should have selected class');
+        }, next);
+      },
+      // Select third item via tap
+      function(next) {
+        var firstItem = document.elementFromPoint(list.clientWidth-50, 0 * list.height);
+        var thirdItem = document.elementFromPoint(list.clientWidth-50, 2 * list.height);
+        thirdItem.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
+        waitFor(function() {
+          chai.assert(list.selection && list.selection == list.data[2], 
+            'third item should be selected; selected id was ' + list.selection && list.selection.id);
+          chai.assert(!firstItem.classList.contains('selected'), 
+            'first item should not have selected class');
+          chai.assert(thirdItem.classList.contains('selected'), 
+            'third item should have selected class');
+        }, next);
+      },
+      // Select first item via tap
+      function(next) {
+        var firstItem = document.elementFromPoint(list.clientWidth-50, 0 * list.height);
+        var thirdItem = document.elementFromPoint(list.clientWidth-50, 2 * list.height);
+        firstItem.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
+        waitFor(function() {
+          chai.assert(list.selection && list.selection == list.data[0], 
+            'first item should be selected; selected id was ' + list.selection && list.selection.id);
+          chai.assert(firstItem.classList.contains('selected'), 
+            'first item should have selected class');
+          chai.assert(!thirdItem.classList.contains('selected'), 
+            'third item should not have selected class');
+        }, next);
+      },
+      // Add item above selection
+      function(next) {
+        list.data.splice(0, 0, generateItem());
+        waitFor(function() {
+          chai.assert(list.selection && list.selection == list.data[1], 
+            'second item should be selected; selected id was ' + list.selection && list.selection.id);
+        }, next);
+      },
+      // Add item below selection
+      function(next) {
+        list.data.splice(2, 0, generateItem());
+        waitFor(function() {
+          chai.assert(list.selection && list.selection == list.data[1], 
+            'second item should be selected; selected id was ' + list.selection && list.selection.id);
+        }, next);
+      },
+      // Enable multiple-selection, ensure existing selection maintained
+      function(next) {
+        list.multi = true;
+        waitFor(function() {
+          chai.assert(list.selection.length == 1, 
+            'selection length should be 1');
+          chai.assert(list.selection && list.selection[0] == list.data[1], 
+            'second item should be selected; selected id was ' + list.selection && list.selection.id);
+        }, next);
+      },
+      // Select first and third items (in addition to 2nd item)
+      function(next) {
+        var firstItem = document.elementFromPoint(list.clientWidth-50, 0 * list.height);
+        var secondItem = document.elementFromPoint(list.clientWidth-50, 1 * list.height);
+        var thirdItem = document.elementFromPoint(list.clientWidth-50, 2 * list.height);
+        firstItem.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
+        thirdItem.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
+        waitFor(function() {
+          chai.assert(list.selection.length == 3, 
+            'selection length should be 3');
+          chai.assert(list.selection && list.selection[0] == list.data[1], 
+            'second item should be selected; selected id was ' + list.selection[0] && list.selection[0].id);
+          chai.assert(list.selection && list.selection[1] == list.data[0], 
+            'first item should be selected; selected id was ' + list.selection[1] && list.selection[1].id);
+          chai.assert(list.selection && list.selection[2] == list.data[2], 
+            'third item should be selected; selected id was ' + list.selection[2] && list.selection[2].id);
+          chai.assert(firstItem.classList.contains('selected'), 
+            'first item should have selected class');
+          chai.assert(secondItem.classList.contains('selected'), 
+            'second item should have selected class');
+          chai.assert(thirdItem.classList.contains('selected'), 
+            'third item should have selected class');
+        }, next);
+      },
+      // Disable multi-selection, ensure selection is reset
+      function(next) {
+        list.multi = false;
+        var firstItem = document.elementFromPoint(list.clientWidth-50, 0 * list.height);
+        var secondItem = document.elementFromPoint(list.clientWidth-50, 1 * list.height);
+        var thirdItem = document.elementFromPoint(list.clientWidth-50, 2 * list.height);
+        waitFor(function() {
+          chai.assert(!list.selection, 
+            'selection length should be 3');
+          chai.assert(!firstItem.classList.contains('selected'), 
+            'first item should not have selected class');
+          chai.assert(!secondItem.classList.contains('selected'), 
+            'second item should not have selected class');
+          chai.assert(!thirdItem.classList.contains('selected'), 
+            'third item should not have selected class');
+        }, next);
+      },
+      // Select item 1 programmatically
+      function(next) {
+        list.selectItem(1);
+        var item = document.elementFromPoint(list.clientWidth-50, 1 * list.height);
+        waitFor(function() {
+          chai.assert(list.selection && list.selection == list.data[1],
+            'second item should be selected; selected id was ' + (list.selection && list.selection.id));
+          chai.assert(item.classList.contains('selected'), 
+            'second item should have selected class');
+        }, next);
+      },
+      // Re-enable multi-selection, select first and third programmatically
+      function(next) {
+        list.multi = true;
+        list.selectItem(0);
+        list.selectItem(2);
+        var firstItem = document.elementFromPoint(list.clientWidth-50, 0 * list.height);
+        var secondItem = document.elementFromPoint(list.clientWidth-50, 1 * list.height);
+        var thirdItem = document.elementFromPoint(list.clientWidth-50, 2 * list.height);
+        waitFor(function() {
+          chai.assert(list.selection.length == 3, 
+            'selection length should be 3');
+          chai.assert(list.selection && list.selection[0] == list.data[1], 
+            'second item should be selected; selected id was ' + list.selection[0] && list.selection[0].id);
+          chai.assert(list.selection && list.selection[1] == list.data[0], 
+            'first item should be selected; selected id was ' + list.selection[1] && list.selection[1].id);
+          chai.assert(list.selection && list.selection[2] == list.data[2], 
+            'third item should be selected; selected id was ' + list.selection[2] && list.selection[2].id);
+          chai.assert(firstItem.classList.contains('selected'), 
+            'first item should have selected class');
+          chai.assert(secondItem.classList.contains('selected'), 
+            'second item should have selected class');
+          chai.assert(thirdItem.classList.contains('selected'), 
+            'third item should have selected class');
+        }, next);
+      },
+      function(next) {
+        list.clearSelection();
+        chai.assert(list.selection.length === 0, 
+          'selection length should be 0 after calling clearSelection when multi:true');
+        list.multi = false;
+        list.selectItem(0);
+        list.clearSelection();
+        chai.assert(!list.selection, 
+          'selection should be null after calling clearSelection when multi:false');
+        next();
+      }
+    ], done);
+  });
+
+</script>
+
+</body>
+</html>
diff --git a/tests/js/htmltests.js b/tests/js/htmltests.js
index 78244c3..ac136b8 100644
--- a/tests/js/htmltests.js
+++ b/tests/js/htmltests.js
@@ -1,4 +1,5 @@
 htmlSuite('core-list', function() {
   htmlTest('html/core-list-basic.html');
-  htmlTest('html/core-list-delete.html');
+  htmlTest('html/core-list-selection.html');
+  htmlTest('html/core-list-data.html');
 });
