added tests with paper-slider

2015-01-03 03:44:50 +00:00
parent e73829f73b
commit 17a752c93e
158 changed files with 9702 additions and 7 deletions
--- a/bower_components/paper-slider/demo.html
+++ b/bower_components/paper-slider/demo.html
@@ -0,0 +1,145 @@
+<!--
+    @license
+    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
+-->
+<!doctype html>
+<html>
+<head>
+  <title>paper-slider</title>
+  
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  
+  <script src="../webcomponentsjs/webcomponents.js"></script>
+  
+  <link rel="import" href="paper-slider.html">
+  <link rel="import" href="../font-roboto/roboto.html">
+  
+  <style shim-shadowdom>
+  
+    body {
+      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
+      margin: 0;
+      padding: 24px;
+    }
+    
+    paper-slider {
+      width: 100%;
+    }
+    
+    section {
+      max-width: 1000px;
+      padding: 20px 0;
+      background-color: #f0f0f0;
+    }
+    
+    section > div {
+      padding: 14px;
+    }
+    
+    .yellow-slider paper-slider::shadow #sliderKnobInner,
+    .yellow-slider paper-slider::shadow #sliderBar::shadow #activeProgress {
+      background-color: #f4b400;
+    }
+    
+    .green-slider paper-slider::shadow #sliderKnobInner,
+    .green-slider paper-slider::shadow #sliderKnobInner::before,
+    .green-slider paper-slider::shadow #sliderBar::shadow #activeProgress {
+      background-color: #0f9d58;
+    }
+    
+    #ratingsLabel {
+      padding-left: 12px;
+      color: #a0a0a0;
+    }
+    
+  </style>
+  
+</head>
+<body unresolved>
+
+  <section class="yellow-slider">
+  
+    <div>Music, video, games &amp; other media</div>
+    <paper-slider value="50"></paper-slider>
+    
+    <br>
+    <br>
+    
+    <div>Notifications</div>
+    <paper-slider value="50"></paper-slider>
+    
+    <br>
+    <br>
+    
+    <div>Alarms</div>
+    <paper-slider value="80"></paper-slider>
+    
+  </section>
+  
+  <br>
+  
+  <section>
+  
+    <div center horizontal layout>
+      <div>R</div>
+      <paper-slider value="23" max="255" editable></paper-slider>
+    </div>
+    
+    <br>
+    <br>
+    
+    <div center horizontal layout>
+      <div>G</div>
+      <paper-slider value="183" max="255" editable></paper-slider>
+    </div>
+    
+    <br>
+    <br>
+    
+    <div center horizontal layout>
+      <div>B</div>
+      <paper-slider value="211" max="255" editable></paper-slider>
+    </div>
+    
+  </section>
+  
+  <br>
+  
+  <section class="green-slider">
+  
+    <div>Brightness</div>
+    <br>
+    <paper-slider pin value="50"></paper-slider>
+  
+  </section>
+  
+  <br>
+  
+  <section class="green-slider">
+  
+    <div>
+      <span>Ratings</span><span id="ratingsLabel"></span>
+    </div>
+    <br>
+    <paper-slider id="ratings" pin snaps max="10" step="1" value="5"></paper-slider>
+  
+  </section>
+  
+  <script>
+  
+    var ratings = document.querySelector('#ratings');
+    ratings.addEventListener('core-change', function() {
+      document.querySelector('#ratingsLabel').textContent = ratings.value;
+    });
+  
+  </script>
+  
+</body>
+</html>