Merge branch 'wc-tester' into 2way-improved

Conflicts: core-list.css
googlearchive · Aug 22, 2014 · 619f85d · 619f85d
2 parents 3732d47 + a4cc7c1
commit 619f85d
Show file tree

Hide file tree

Showing 11 changed files with 176 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/bower.json b/bower.json
@@ -4,5 +4,8 @@
   "dependencies": {
     "polymer": "Polymer/polymer#master",
     "core-selection": "Polymer/core-selection#master"
+  },
+  "devDependencies": {
+  	"polymer-test-tools": "Polymer/polymer-test-tools#wc-tester"
   }
 }
diff --git a/core-list.css b/core-list.css
@@ -18,4 +18,11 @@
 
 .core-list-viewport.horizontal > * {
   display: inline-block;
-}
+}
+
+/* Setting will-change: transform on the #viewport makes the viewport a
+   stacking context, which causes all the composited layers inside the
+   viewport to actually be stacked underneath the viewport. */
+#viewport {
+  will-change: transform;
+}
diff --git a/core-list.html b/core-list.html
@@ -455,12 +455,12 @@
 
   // determine proper transform mechanizm
   if (document.documentElement.style.transform !== undefined) {
-    function setTransform(element, string, value) {
+    var setTransform = function(element, string, value) {
       element.style.transform = string;
       element._transformValue = value;
     }
   } else {
-    function setTransform(element, string, value) {
+    var setTransform = function(element, string, value) {
       element.style.webkitTransform = string;
       element._transformValue = value;
     }

diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,2 @@
+var gulp = require('gulp');
+require('gulp-web-component-tester').init(gulp);
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "gulp": "^3.8.7"
+  }
+}
diff --git a/tests/html/core-list-basic.html b/tests/html/core-list-basic.html
@@ -0,0 +1,63 @@
+<!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() {
+      chai.assert(el.children.length == el.data.length + 1, 
+        'children.length should be 1 (template) + count of data elements');
+      done();
+    });
+
+  });
+
+</script>
+
+</body>
+</html>
diff --git a/tests/html/core-list-delete.html b/tests/html/core-list-delete.html
@@ -0,0 +1,68 @@
+<!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/js/htmltests.js b/tests/js/htmltests.js
@@ -0,0 +1,4 @@
+htmlSuite('core-list', function() {
+  htmlTest('html/core-list-basic.html');
+  htmlTest('html/core-list-delete.html');
+});
diff --git a/tests/runner.html b/tests/runner.html
@@ -0,0 +1,14 @@
+<!doctype htmlz>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>Web Component Test Runner</title>
+  <script src="../../polymer-test-tools/ci-support.js"></script>
+</head>
+<body>
+  <script>
+    runTests('tests.json');
+  </script>
+</body>
+</html>
diff --git a/tests/tests.json b/tests/tests.json
@@ -0,0 +1,6 @@
+{
+	"tools": ["chai", "mocha-tdd"],
+	"tests": [
+		"js/htmltests.js"
+	]
+}