RubyGems - polymer-paper-rails - Versions diffs - 0.1.0 → 0.2.0 - Mend

polymer-paper-rails 0.1.0 → 0.2.0

Files changed (558) hide show

data/app/assets/components/web-animations-js/test/testcases/auto-test-color-names.html ADDED Viewed

@@ -0,0 +1,204 @@
+<!--
+Copyright 2012 Google Inc. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html><meta charset="UTF-8">
+<style>
+td.anim {
+  height: 200px;
+  width: 200px;
+}
+</style>
+<table>
+<tr><td id="a" class="anim"></td><td id="b" class="anim"></td><td id="c" class="anim"></td></tr>
+<tr><td id="d" class="anim"></td><td id="e" class="anim"></td><td id="f" class="anim"></td></tr>
+<tr><td id="g" class="anim"></td><td id="h" class="anim"></td><td id="i" class="anim"></td></tr>
+</table>
+<script>
+var expected_failures = [
+  {
+    browser_configurations: [{ msie: true }],
+    tests: ['Auto.*'],
+    message: 'IE returns rgba always.',
+  }
+];
+</script>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var colors = [
+  'aliceblue',
+  'antiquewhite',
+  'aqua',
+  'aquamarine',
+  'azure',
+  'beige',
+  'bisque',
+  'black',
+  'blanchedalmond',
+  'blue',
+  'blueviolet',
+  'brown',
+  'burlywood',
+  'cadetblue',
+  'chartreuse',
+  'chocolate',
+  'coral',
+  'cornflowerblue',
+  'cornsilk',
+  'crimson',
+  'cyan',
+  'darkblue',
+  'darkcyan',
+  'darkgoldenrod',
+  'darkgray',
+  'darkgreen',
+  'darkgrey',
+  'darkkhaki',
+  'darkmagenta',
+  'darkolivegreen',
+  'darkorange',
+  'darkorchid',
+  'darkred',
+  'darksalmon',
+  'darkseagreen',
+  'darkslateblue',
+  'darkslategray',
+  'darkslategrey',
+  'darkturquoise',
+  'darkviolet',
+  'deeppink',
+  'deepskyblue',
+  'dimgray',
+  'dimgrey',
+  'dodgerblue',
+  'firebrick',
+  'floralwhite',
+  'forestgreen',
+  'fuchsia',
+  'gainsboro',
+  'ghostwhite',
+  'gold',
+  'goldenrod',
+  'gray',
+  'green',
+  'greenyellow',
+  'grey',
+  'honeydew',
+  'hotpink',
+  'indianred',
+  'indigo',
+  'ivory',
+  'khaki',
+  'lavender',
+  'lavenderblush',
+  'lawngreen',
+  'lemonchiffon',
+  'lightblue',
+  'lightcoral',
+  'lightcyan',
+  'lightgoldenrodyellow',
+  'lightgray',
+  'lightgreen',
+  'lightgrey',
+  'lightpink',
+  'lightsalmon',
+  'lightseagreen',
+  'lightskyblue',
+  'lightslategray',
+  'lightslategrey',
+  'lightsteelblue',
+  'lightyellow',
+  'lime',
+  'limegreen',
+  'linen',
+  'magenta',
+  'maroon',
+  'mediumaquamarine',
+  'mediumblue',
+  'mediumorchid',
+  'mediumpurple',
+  'mediumseagreen',
+  'mediumslateblue',
+  'mediumspringgreen',
+  'mediumturquoise',
+  'mediumvioletred',
+  'midnightblue',
+  'mintcream',
+  'mistyrose',
+  'moccasin',
+  'navajowhite',
+  'navy',
+  'oldlace',
+  'olive',
+  'olivedrab',
+  'orange',
+  'orangered',
+  'orchid',
+  'palegoldenrod',
+  'palegreen',
+  'paleturquoise',
+  'palevioletred',
+  'papayawhip',
+  'peachpuff',
+  'peru',
+  'pink',
+  'plum',
+  'powderblue',
+  'purple',
+  'red',
+  'rosybrown',
+  'royalblue',
+  'saddlebrown',
+  'salmon',
+  'sandybrown',
+  'seagreen',
+  'seashell',
+  'sienna',
+  'silver',
+  'skyblue',
+  'slateblue',
+  'slategray',
+  'slategrey',
+  'snow',
+  'springgreen',
+  'steelblue',
+  'tan',
+  'teal',
+  'thistle',
+  'tomato',
+  'turquoise',
+  'violet',
+  'wheat',
+  'white',
+  'whitesmoke',
+  'yellow',
+  'yellowgreen'];
+var divs = document.querySelectorAll('td.anim');
+var sliceSize = colors.length / 9;
+for (var i = 0; i < divs.length; i++) {
+  var colorsToAnimate = colors.slice(i * sliceSize, (i + 1) * sliceSize);
+  var effect = colorsToAnimate.map(function(value) {
+    return { backgroundColor: value };
+  });
+  document.timeline.play(new Animation(divs[i], effect, {duration: 4 * 1000, fill: 'forwards'}));
+}
+//document.timeline.play(new Animation(document.body,
+//    {'backgroundColor': colors}, colors.length * 2 / 60));
+</script>

data/app/assets/components/web-animations-js/test/testcases/auto-test-color.html ADDED Viewed

@@ -0,0 +1,117 @@
+<!--
+Copyright 2012 Google Inc. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html><meta charset="UTF-8">
+<style>
+.anim {
+  top: 50px;
+  width: 100px;
+  height: 100px;
+  background-color: lightsteelblue;
+  position: absolute;
+}
+#a {
+  left: 50px
+}
+#b {
+  left: 150px;
+}
+#c {
+  left: 250px;
+  background-color: green;
+}
+#d {
+  left: 350px;
+  background-color: rgba(0, 0, 0, 0);
+}
+#e {
+  left: 450px;
+  background-color: rgba(255, 0, 255, 0);
+}
+#f {
+  left: 550px
+}
+#g {
+  left: 650px
+}
+#container {
+  position: absolute;
+  left: 0px;
+  top: 50px;
+  width: 800px;
+  height: 200px;
+  background-color: green;
+}
+</style>
+All three boxes should end up the same color as the outline.
+<div id="container">
+  <div id="a" class="anim"></div>
+  <div id="b" class="anim"></div>
+  <div id="c" class="anim"></div>
+  <div id="d" class="anim"></div>
+  <div id="e" class="anim"></div>
+  <div id="f" class="anim"></div>
+  <div id="g" class="anim"></div>
+</div>
+<script>
+var expected_failures = [
+  {
+    browser_configurations: [{ msie: true }],
+    tests: ['Auto.*'],
+    message: 'IE returns rgba always.',
+  }
+];
+</script>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var dt = document.timeline;
+var timing = {duration: 2 * 1000, fill: 'forwards'};
+dt.play(new Animation(document.querySelector("#a"),
+    [{backgroundColor: "red"}, {backgroundColor: "green"}], timing));
+dt.play(new Animation(document.querySelector("#b"),
+    {backgroundColor: "rgb(0, 128, 0)"}, timing));
+dt.play(new Animation(document.querySelector("#c"),
+    new KeyframeEffect([
+      {offset: 0.25, backgroundColor: "rgb(255, 0, 0)"},
+      {offset: 0.75, backgroundColor: "rgb(0, 0, 255)"},
+    ], 'add'), timing));
+dt.play(new Animation(document.querySelector("#d"),
+    {offset: 0.5, backgroundColor: "white"}, timing));
+dt.play(new Animation(document.querySelector("#e"),
+    {offset: 0.5, backgroundColor: "white"}, timing));
+dt.play(new Animation(document.querySelector("#f"),
+    [{backgroundColor: "#000000"}, {backgroundColor: "#ffffff"}], timing));
+dt.play(new Animation(document.querySelector("#g"),
+    [{backgroundColor: "#000"}, {backgroundColor: "#fff"}], timing));
+</script>

data/app/assets/components/web-animations-js/test/testcases/auto-test-composite-transforms-checks.js ADDED Viewed

@@ -0,0 +1,45 @@
+timing_test(function() {
+  at(0 * 1000, function() {
+    assert_styles(".anim",{'transform':'matrix(1, 0, 0, 1, 0, 0)'});
+  });
+  at(0.4 * 1000, function() {
+    assert_styles(".anim", [
+      {'transform':'matrix(1, 0, 0, 1, 40, 0)'},
+      {'transform':'matrix(0.9511, 0.309, -0.309, 0.9511, 0, 0)'},
+      {'transform':'matrix(0.9511, 0.309, -0.309, 0.9511, 40, 0)'},
+      {'transform':'matrix(0.9511, 0.309, -0.309, 0.9511, 38.04, 12.36)'},
+    ]);
+  });
+  at(0.8 * 1000, function() {
+    assert_styles(".anim", [
+      {'transform':'matrix(1, 0, 0, 1, 80, 0)'},
+      {'transform':'matrix(0.809, 0.5878, -0.5878, 0.809, 0, 0)'},
+      {'transform':'matrix(0.809, 0.5878, -0.5878, 0.809, 80, 0)'},
+      {'transform':'matrix(0.809, 0.5878, -0.5878, 0.809, 64.72, 47.02)'},
+    ]);
+  });
+  at(1.2000000000000002 * 1000, function() {
+    assert_styles(".anim", [
+      {'transform':'matrix(1, 0, 0, 1, 120, 0)'},
+      {'transform':'matrix(0.5878, 0.809, -0.809, 0.5878, 0, 0)'},
+      {'transform':'matrix(0.5878, 0.809, -0.809, 0.5878, 120, 0)'},
+      {'transform':'matrix(0.5878, 0.809, -0.809, 0.5878, 70.53, 97.08)'},
+    ]);
+  });
+  at(1.6 * 1000, function() {
+    assert_styles(".anim", [
+      {'transform':'matrix(1, 0, 0, 1, 160, 0)'},
+      {'transform':'matrix(0.309, 0.9511, -0.9511, 0.309, 0, 0)'},
+      {'transform':'matrix(0.309, 0.9511, -0.9511, 0.309, 160, 0)'},
+      {'transform':'matrix(0.309, 0.9511, -0.9511, 0.309, 49.44, 152.2)'},
+    ]);
+  });
+  at(2 * 1000, function() {
+    assert_styles(".anim", [
+      {'transform':'matrix(1, 0, 0, 1, 200, 0)'},
+      {'transform':'matrix(0, 1, -1, 0, 0, 0)'},
+      {'transform':'matrix(0, 1, -1, 0, 200, 0)'},
+      {'transform':'matrix(0, 1, -1, 0, 0, 200)'},
+    ]);
+  });
+}, "Auto generated tests");

data/app/assets/components/web-animations-js/test/testcases/auto-test-composite-transforms.html ADDED Viewed

@@ -0,0 +1,97 @@
+<!--
+Copyright 2012 Google Inc. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html><meta charset="UTF-8">
+<style>
+.anim {
+  left: 0px;
+  width: 100px;
+  height: 100px;
+  background-color: #FAA;
+  position: absolute;
+}
+.expected {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  border-right: 1px solid black;
+}
+#a {
+  top: 50px
+}
+#b {
+  top: 150px;
+}
+#c {
+  top: 250px;
+}
+#d {
+  top: 350px;
+}
+</style>
+<div>Right edge of each box should align with black line at end of test.</div>
+<div id="a" class="anim"></div>
+<div id="a" style="top: 50px; left: 200px;" class="expected"></div>
+<div id="b" class="anim"></div>
+<div id="b" style="top: 150px; left: 0px;" class="expected"></div>
+<div id="c" class="anim"></div>
+<div id="c" style="top: 250px; left: 200px;" class="expected"></div>
+<div id="d" class="anim"></div>
+<div id="d" style="top: 550px; left: 0px;" class="expected"></div>
+<div style="height: 700px;"></div>
+<script>
+var expected_failures = [
+  {
+    browser_configurations: [{ msie: true }],
+    tests: ['Auto generated tests at t=2000ms'],
+    message: 'Floating point issues.',
+  }
+];
+</script>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var divs = document.querySelectorAll(".anim");
+var dt = document.timeline;
+var timing = {duration: 2 * 1000, fill: 'forwards'};
+dt.play(new Animation(divs[0],
+    [{transform: "translate(0px, 0px)"}, {transform: "translate(200px, 0px)"}],
+    timing));
+dt.play(new Animation(divs[1],
+    [{transform: "rotate(0deg)"}, {transform: "rotate(90deg)"}], timing));
+dt.play(new Animation(divs[2], [
+  {transform: "translate(0px, 0px) rotate(0deg)"},
+  {transform: "translate(200px, 0px) rotate(90deg)"},
+], timing));
+dt.play(new Animation(divs[3], [
+  {transform: "rotate(0deg) translate(0px, 0px)"},
+  {transform: "rotate(90deg) translate(200px, 0px)"},
+], timing));
+</script>