added tests with paper-slider

This commit is contained in:
DadaMonad
2015-01-03 03:44:50 +00:00
parent e73829f73b
commit 17a752c93e
158 changed files with 9702 additions and 7 deletions

View File

@@ -0,0 +1,21 @@
{
"name": "paper-shadow",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0"
},
"devDependencies": {
"web-component-tester": "Polymer/web-component-tester#^1.1.4"
},
"version": "0.5.2",
"homepage": "https://github.com/Polymer/paper-shadow",
"_release": "0.5.2",
"_resolution": {
"type": "version",
"tag": "0.5.2",
"commit": "93d17c572223383944db8ac5c117d492add4651c"
},
"_source": "git://github.com/Polymer/paper-shadow.git",
"_target": "^0.5.0",
"_originalSource": "Polymer/paper-shadow"
}

View File

@@ -0,0 +1,4 @@
paper-shadow
============
See the [component page](http://polymer-project.org/docs/elements/paper-elements.html#paper-shadow) for more information.

View File

@@ -0,0 +1,11 @@
{
"name": "paper-shadow",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0"
},
"devDependencies": {
"web-component-tester": "Polymer/web-component-tester#^1.1.4"
},
"version": "0.5.2"
}

134
bower_components/paper-shadow/demo.html vendored Normal file
View File

@@ -0,0 +1,134 @@
<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title>paper-shadow</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../webcomponentsjs/webcomponents.js"></script>
<link href="paper-shadow.html" rel="import">
<style>
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
font-size: 14px;
margin: 0;
padding: 24px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
section {
padding: 20px 0;
}
section > div {
padding: 14px;
font-size: 16px;
}
.card {
display: inline-block;
background: white;
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 16px;
padding: 16px;
border-radius: 2px;
}
.fab {
display: inline-block;
background: white;
box-sizing: border-box;
width: 56px;
height: 56px;
margin: 16px;
padding: 16px;
border-radius: 50%;
text-align: center;
}
</style>
</head>
<body unresolved>
<template is="auto-binding">
<section>
<div>Shadows</div>
<paper-shadow class="card" z="0">
z = 0
</paper-shadow>
<paper-shadow class="card" z="1">
z = 1
</paper-shadow>
<paper-shadow class="card" z="2">
z = 2
</paper-shadow>
<paper-shadow class="card" z="3">
z = 3
</paper-shadow>
<paper-shadow class="card" z="4">
z = 4
</paper-shadow>
<paper-shadow class="card" z="5">
z = 5
</paper-shadow>
</section>
<section on-tap="{{tapAction}}">
<div>Animated</div>
<paper-shadow class="card" z="0" animated>
tap
</paper-shadow>
<paper-shadow class="fab" z="0" animated layout center-center>
tap
</paper-shadow>
</section>
</template>
<script>
var scope = document.querySelector('template[is=auto-binding]');
scope.tapAction = function(e) {
var target = e.target;
if (!target.down) {
target.setZ(target.z + 1);
if (target.z === 5) {
target.down = true;
}
} else {
target.setZ(target.z - 1);
if (target.z === 0) {
target.down = false;
}
}
};
</script>
</body>
</html>

View File

@@ -0,0 +1,22 @@
<!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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../core-component-page/core-component-page.html">
</head>
<body unresolved>
<core-component-page></core-component-page>
</body>
</html>

View File

@@ -0,0 +1,17 @@
<!--
@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
-->
<x-meta id="paper-shadow" label="Shadow" group="Paper" isContainer>
<template>
<paper-shadow style="width:200px; height:200px;"></paper-shadow>
</template>
<template id="imports">
<link rel="import" href="paper-shadow.html">
</template>
</x-meta>

View File

@@ -0,0 +1,66 @@
/*
* @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
*/
html /deep/ paper-shadow,
html /deep/ paper-animated-shadow {
display: block;
position: relative;
}
html /deep/ paper-shadow::shadow #shadow-bottom,
html /deep/ paper-shadow::shadow #shadow-top {
border-radius: inherit;
pointer-events: none;
}
html /deep/ paper-shadow::shadow #shadow-bottom[animated],
html /deep/ paper-shadow::shadow #shadow-top[animated] {
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
html /deep/ .paper-shadow-top-z-1 {
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}
html /deep/ .paper-shadow-bottom-z-1 {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
html /deep/ .paper-shadow-top-z-2 {
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
html /deep/ .paper-shadow-bottom-z-2 {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}
html /deep/ .paper-shadow-top-z-3 {
box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
html /deep/ .paper-shadow-bottom-z-3 {
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}
html /deep/ .paper-shadow-top-z-4 {
box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
html /deep/ .paper-shadow-bottom-z-4 {
box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22);
}
html /deep/ .paper-shadow-top-z-5 {
box-shadow: 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}
html /deep/ .paper-shadow-bottom-z-5 {
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2);
}

View File

@@ -0,0 +1,86 @@
<!--
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
-->
<!--
`paper-shadow` is a container that renders two shadows on top of each other to
create the effect of a lifted piece of paper.
Example:
<paper-shadow z="1">
... card content ...
</paper-shadow>
@group Paper Elements
@class paper-shadow
-->
<link href="../polymer/polymer.html" rel="import">
<link href="paper-shadow.css" rel="stylesheet" shim-shadowdom>
<polymer-element name="paper-shadow">
<template>
<div id="shadow-bottom" fit animated?="[[animated]]" class="paper-shadow-bottom-z-[[z]]"></div>
<div id="shadow-top" fit animated?="[[animated]]" class="paper-shadow-top-z-[[z]]"></div>
<content></content>
</template>
<script>
Polymer({
publish: {
/**
* The z-depth of this shadow, from 0-5. Setting this property
* after element creation has no effect. Use `setZ()` instead.
*
* @attribute z
* @type number
* @default 1
*/
z: 1,
/**
* Set this to true to animate the shadow when setting a new
* `z` value.
*
* @attribute animated
* @type boolean
* @default false
*/
animated: false
},
/**
* Set the z-depth of the shadow. This should be used after element
* creation instead of setting the z property directly.
*
* @method setZ
* @param {Number} newZ
*/
setZ: function(newZ) {
if (this.z !== newZ) {
this.$['shadow-bottom'].classList.remove('paper-shadow-bottom-z-' + this.z);
this.$['shadow-bottom'].classList.add('paper-shadow-bottom-z-' + newZ);
this.$['shadow-top'].classList.remove('paper-shadow-top-z-' + this.z);
this.$['shadow-top'].classList.add('paper-shadow-top-z-' + newZ);
this.z = newZ;
}
}
});
</script>
</polymer-element>

View File

@@ -0,0 +1,62 @@
<!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>
<meta charset="UTF-8">
<title>paper-shadow basic tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../polymer-gestures/test/js/fake.js"></script>
<link href="../paper-shadow.html" rel="import">
<style>
.card {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<paper-shadow id="s1" class="card"></paper-shadow>
<paper-shadow id="s2" class="card">
<div id="foo">hi!</div>
</paper-shadow>
<script>
var s1 = document.getElementById('s1');
var fake = new Fake();
test('default', function() {
assert.notEqual(getComputedStyle(s1.$['shadow-top'])['box-shadow'], 'none');
});
test('shadows are pointer-events: none', function(done) {
var foo = document.getElementById('foo');
PolymerGestures.addEventListener(document, 'tap', function(e) {
assert.strictEqual(e.target, foo);
done();
});
fake.downOnNode(foo, function() {
fake.upOnNode(foo);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,24 @@
<!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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>paper-shadow tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html'
]);
</script>
</body>
</html>