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

polymer-core-rails 0.1.0 → 0.2.0

Files changed (856) hide show

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

@@ -0,0 +1,90 @@
+<!--
+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>
+.animContainer {
+  position: absolute;
+  left: 0px;
+  height: 225px;
+}
+.expected {
+  border-right: 1px solid black;
+}
+.anim {
+  left: 0px;
+  width: 100px;
+  height: 25px;
+  background-color: #FAA;
+  position: relative;
+}
+#ca {
+  top: 50px;
+  width: 400px;
+}
+#cb {
+  top: 150px;
+  width: 200px;
+}
+</style>
+<div>Right edge of each box should align with black line at end of test.</div>
+<div class="animContainer" id="ca">
+  <div style="width: 400px;" class="expected"><div class="anim a" id="a"></div>
+  </div>
+  <div style="width: 400px;" class="expected"><div class="anim b" id="b"></div>
+  </div>
+</div>
+<div class="animContainer" id="cb">
+  <div style="width: 200px;" class="expected"><div class="anim a" id="c"></div>
+  </div>
+  <div style="width: 200px;" class="expected"><div class="anim b" id="d"></div>
+  </div>
+</div>
+<div style="height:200px;"></div>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var containers = ["ca", "cb"];
+var directions = ["normal", "reverse"];
+var animation = [{left: "100px"}, {left: "300px"}];
+for (var i = 0; i < directions.length; i++) {
+  var container = document.getElementById(containers[i]);
+  // Explicit parent duration.
+  document.timeline.play(new AnimationGroup(
+      [new Animation(container.getElementsByClassName("a")[0], animation,
+          {duration: 1.0 * 1000, fill: 'forwards'})],
+      {iterations: 2.0, direction: directions[i], duration: 1.0 * 1000}));
+  // Parent calculates intrinsic duration.
+  document.timeline.play(new AnimationGroup(
+      [new Animation(container.getElementsByClassName("b")[0], animation,
+          {duration: 1.0 * 1000, fill: 'forwards'})],
+      {iterations: 2.0, direction: directions[i]}));
+}
+</script>

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

@@ -0,0 +1,23 @@
+timing_test(function() {
+  at(0 * 1000, function() {
+    assert_styles('.anim', {'x':'100px', 'height':'10px'});
+  }, "Autogenerated");
+  at(0.2 * 1000, function() {
+    assert_styles('.anim', {'x':'160px', 'height':'16px'});
+  }, "Autogenerated");
+  at(0.4 * 1000, function() {
+    assert_styles('.anim', {'x':'220px', 'height':'22px'});
+  }, "Autogenerated");
+  at(0.6000000000000001 * 1000, function() {
+    assert_styles('.anim', {'x':'280px', 'height':'28px'});
+  }, "Autogenerated");
+  at(0.8 * 1000, function() {
+    assert_styles('.anim', {'x':'340px', 'height':'34px'});
+  }, "Autogenerated");
+  at(1 * 1000, function() {
+    assert_styles('.anim', {'x':'400px', 'height':'40px'});
+  }, "Autogenerated");
+  at(1.2 * 1000, function() {
+    assert_styles('.anim', {'x':'400px', 'height':'40px'});
+  }, "Autogenerated");
+}, "Autogenerated checks.");

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

@@ -0,0 +1,39 @@
+<!--
+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 {
+  fill: lightsteelblue;
+}
+.expectation {
+  fill: red;
+}
+</style>
+<svg width="600px" height="200px">
+  <rect class="expectation" x="400px" y="10px" width="100px" height="40px">
+  </rect>
+  <rect class="anim" x="100px" y="10px" width="100px" height="10px"></rect>
+</svg>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var rect = document.querySelector(".anim")
+document.timeline.play(new Animation(rect, {x: "400px", height: "40px"}, {duration: 1 * 1000, fill: 'forwards'}));
+</script>

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

@@ -0,0 +1,23 @@
+timing_test(function() {
+  at(0 * 1000, function() {
+    assert_styles('.anim', {'cx':'60px', 'cy':'60px', 'r':'50px'});
+  }, "Autogenerated");
+  at(0.2 * 1000, function() {
+    assert_styles('.anim', {'cx':'128px', 'cy':'65px', 'r':'55px'});
+  }, "Autogenerated");
+  at(0.4 * 1000, function() {
+    assert_styles('.anim', {'cx':'196px', 'cy':'70px', 'r':'60px'});
+  }, "Autogenerated");
+  at(0.6000000000000001 * 1000, function() {
+    assert_styles('.anim', {'cx':'264px', 'cy':'75px', 'r':'65px'});
+  }, "Autogenerated");
+  at(0.8 * 1000, function() {
+    assert_styles('.anim', {'cx':'332px', 'cy':'80px', 'r':'70px'});
+  }, "Autogenerated");
+  at(1 * 1000, function() {
+    assert_styles('.anim', {'cx':'400px', 'cy':'85px', 'r':'75px'});
+  }, "Autogenerated");
+  at(1.2 * 1000, function() {
+    assert_styles('.anim', {'cx':'400px', 'cy':'85px', 'r':'75px'});
+  }, "Autogenerated");
+}, "Autogenerated checks.");

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

@@ -0,0 +1,38 @@
+<!--
+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 {
+  fill: lightsteelblue;
+}
+.expectation {
+  fill: red;
+}
+</style>
+<svg width="600px" height="200px">
+  <circle class="expectation" cx="400px" cy="85px" r="75px"/>
+  <circle class="anim" cx="60px" cy="60px" r="50px"/>
+</svg>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var rect = document.querySelector(".anim")
+document.timeline.play(new Animation(rect, {cx: "400px", cy: "85px", r: "75px"}, {duration: 1 * 1000, fill: 'forwards'}));
+</script>

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

@@ -0,0 +1,20 @@
+timing_test(function() {
+  at(0 * 1000, function() {
+    assert_styles(".anim",{'stroke':'rgba(0, 240, 50, 1)'});
+  });
+  at(0.2 * 1000, function() {
+    assert_styles(".anim",{'stroke':'rgba(30, 200, 90, 1)'});
+  });
+  at(0.4 * 1000, function() {
+    assert_styles(".anim",{'stroke':'rgba(60, 160, 130, 1)'});
+  });
+  at(0.6000000000000001 * 1000, function() {
+    assert_styles(".anim",{'stroke':'rgba(90, 120, 170, 1)'});
+  });
+  at(0.8 * 1000, function() {
+    assert_styles(".anim",{'stroke':'rgba(120, 80, 210, 1)'});
+  });
+  at(1 * 1000, function() {
+    assert_styles(".anim",{'stroke':'rgba(150, 40, 250, 1)'});
+  });
+}, "Auto generated tests");

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

@@ -0,0 +1,36 @@
+<!--
+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 {
+  fill: lightsteelblue;
+}
+.expectation {
+  fill: red;
+}
+</style>
+<svg width="600px" height="200px">
+  <circle class="expectation" stroke-width="10" cx="400px" cy="85px" r="75px" stroke="rgba(150, 40, 250, 1)"/>
+  <circle class="anim" stroke-width="10" cx="60px" cy="60px" r="50px" stroke="rgba(0, 240, 50, 1)"/>
+</svg>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var rect = document.querySelector(".anim")
+document.timeline.play(new Animation(rect, {cx: "400px", cy: "85px", r: "75px", stroke: "rgba(150, 40, 250, 1)"}, {duration: 1000, fill: 'forwards'}));
+</script>

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

@@ -0,0 +1,20 @@
+timing_test(function() {
+  at(0 * 1000, function() {
+    assert_styles('body', {'textShadow':'rgb(255, 0, 0) 100px 100px 0px, rgb(255, 0, 0) 0px 100px 20px'});
+  }, "Autogenerated");
+  at(0.5 * 1000, function() {
+    assert_styles('body', {'textShadow':'rgba(255, 0, 0, 0.74902) 75px 75px 0px, rgba(255, 0, 0, 0.74902) 0px 75px 15px'});
+  }, "Autogenerated");
+  at(1 * 1000, function() {
+    assert_styles('body', {'textShadow':'rgba(255, 0, 0, 0.498039) 50px 50px 0px, rgba(255, 0, 0, 0.498039) 0px 50px 10px'});
+  }, "Autogenerated");
+  at(1.5 * 1000, function() {
+    assert_styles('body', {'textShadow':'rgba(255, 0, 0, 0.247059) 25px 25px 0px, rgba(255, 0, 0, 0.247059) 0px 25px 5px'});
+  }, "Autogenerated");
+  at(2 * 1000, function() {
+    assert_styles('body', {'textShadow':'rgb(0, 0, 0) 0px 0px 0px'});
+  }, "Autogenerated");
+  at(2.5 * 1000, function() {
+    assert_styles('body', {'textShadow':'rgb(0, 0, 0) 0px 0px 0px'});
+  }, "Autogenerated");
+}, "Autogenerated checks.");

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

@@ -0,0 +1,37 @@
+<!--
+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">
+<body>The shadows should slide back under the text.
+<script>
+var expected_failures = [
+  {
+    browser_configurations: [{ firefox: true }],
+    tests: ['Autogenerated at t=(500|1000|1500)ms'],
+    message: 'Floating point issues.',
+  }, {
+    browser_configurations: [{ msie: true }],
+    tests: ['Autogenerated'],
+    message: 'Different shadow format result.',
+  }
+];
+</script>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+document.timeline.play(new Animation(document.body,
+    [{textShadow: '100px 100px red, 0px 100px 20px red'}, {textShadow: '0px 0px'}], {duration: 2 * 1000, fill: 'forwards'}));
+</script>

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

@@ -0,0 +1,89 @@
+timing_test(function() {
+  at(0 * 1000, function() {
+    assert_styles('.anim', {'left':'0px'});
+  }, "Autogenerated");
+  at(0.4 * 1000, function() {
+    assert_styles('.anim', {'left':'0px'});
+  }, "Autogenerated");
+  at(0.8 * 1000, function() {
+    assert_styles('.anim', {'left':'0px'});
+  }, "Autogenerated");
+  at(1.2000000000000002 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'20px'},
+       {'left':'3.41483736038208px'},
+       {'left':'32.11287307739258px'},
+       {'left':'40.48971939086914px'},
+       {'left':'66.66666412353516px'},
+       {'left':'0px'},
+       {'left':'0px'},
+       {'left':'-48.27153778076172px'},
+       {'left':'200px'},
+       {'left':'0px'},
+       {'left':'0px'}]);
+  }, "Autogenerated");
+  at(1.6 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'60px'},
+       {'left':'25.923603057861328px'},
+       {'left':'89.03398132324219px'},
+       {'left':'88.9017333984375px'},
+       {'left':'66.66666412353516px'},
+       {'left':'66.66666412353516px'},
+       {'left':'0px'},
+       {'left':'-51.93635177612305px'},
+       {'left':'200px'},
+       {'left':'0px'},
+       {'left':'0px'}]);
+  }, "Autogenerated");
+  at(2 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'100px'},
+       {'left':'63.07688522338867px'},
+       {'left':'136.92311096191406px'},
+       {'left':'129.63328552246094px'},
+       {'left':'133.3333282470703px'},
+       {'left':'133.3333282470703px'},
+       {'left':'66.66666412353516px'},
+       {'left':'100px'},
+       {'left':'200px'},
+       {'left':'200px'},
+       {'left':'0px'}]);
+  }, "Autogenerated");
+  at(2.4 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'140px'},
+       {'left':'110.96601867675781px'},
+       {'left':'174.07640075683594px'},
+       {'left':'165.04061889648438px'},
+       {'left':'200px'},
+       {'left':'133.3333282470703px'},
+       {'left':'133.3333282470703px'},
+       {'left':'251.9363555908203px'},
+       {'left':'200px'},
+       {'left':'200px'},
+       {'left':'0px'}]);
+  }, "Autogenerated");
+  at(2.8 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'180px'},
+       {'left':'167.8871307373047px'},
+       {'left':'196.5851593017578px'},
+       {'left':'193.0833740234375px'},
+       {'left':'200px'},
+       {'left':'200px'},
+       {'left':'133.3333282470703px'},
+       {'left':'248.27154541015625px'},
+       {'left':'200px'},
+       {'left':'200px'},
+       {'left':'0px'}]);
+  }, "Autogenerated");
+  at(3.1999999999999997 * 1000, function() {
+    assert_styles('.anim', {'left':'200px'});
+  }, "Autogenerated");
+}, "Autogenerated checks.");

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

@@ -0,0 +1,77 @@
+<!--
+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: 200px;
+  height: 24px;
+  background-color: lightsteelblue;
+  position: relative;
+  border-bottom: solid white 1px;
+}
+#expectation {
+  position: absolute;
+  left: 200px;
+  width: 200px;
+  height: 275px;
+  background: red;
+}
+body { margin: 0px; }
+</style>
+<div id="expectation"></div>
+<div>
+  <div id="a" class="anim">(default)</div>
+  <div class="anim test" id="b">ease-in</div>
+  <div class="anim test" id="c">ease-out</div>
+  <div class="anim test" id="d">cubic-bezier(0, 0.2, 0.8, 1)</div>
+  <div class="anim test" id="e">steps(3, start)</div>
+  <div class="anim test" id="f">steps(3, middle)</div>
+  <div class="anim test" id="g">steps(3, end)</div>
+  <div class="anim test" id="h">cubic-bezier(0.5, -1.5, 0.5, 2.5)</div>
+  <div class="anim test" id="i">step-start</div>
+  <div class="anim test" id="j">step-middle</div>
+  <div class="anim test" id="k">step-end</div>
+</div>
+<div style="height:50px"></div>
+<script>
+var expected_failures = [
+  {
+    browser_configurations: [{ msie: true }],
+    tests: ['Autogenerated at t=(1200.0*1|1600|2000)ms'],
+    message: 'Returns matrix3d.',
+  }
+];
+</script>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+document.timeline.play(new Animation(document.querySelector("#a"),
+    {left: "200px"}, {delay: 1 * 1000, duration: 2 * 1000, fill: 'forwards'}));
+var elems = document.querySelectorAll(".test");
+for (var i = 0; i < elems.length; i++) {
+  var element = elems[i];
+  document.timeline.play(new Animation(element, {left: "200px"},
+      {delay: 1 * 1000, duration: 2 * 1000, easing: element.textContent, fill: 'forwards'}));
+}
+</script>

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

@@ -0,0 +1,58 @@
+timing_test(function() {
+  at(0 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'200px'},
+       {'left':'100px'},
+       {'left':'0px'},
+       {'left':'200px'}]);
+  }, "Autogenerated");
+  at(0.4 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'180px'},
+       {'left':'120px'},
+       {'left':'60px'},
+       {'left':'240px'}]);
+  }, "Autogenerated");
+  at(0.8 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'160px'},
+       {'left':'140px'},
+       {'left':'120px'},
+       {'left':'280px'}]);
+  }, "Autogenerated");
+  at(1.2000000000000002 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'140px'},
+       {'left':'160px'},
+       {'left':'180px'},
+       {'left':'320px'}]);
+  }, "Autogenerated");
+  at(1.6 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'120px'},
+       {'left':'180px'},
+       {'left':'240px'},
+       {'left':'360px'}]);
+  }, "Autogenerated");
+  at(2 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'100px'},
+       {'left':'200px'},
+       {'left':'300px'},
+       {'left':'400px'}]);
+  }, "Autogenerated");
+  at(2.4 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'100px'},
+       {'left':'200px'},
+       {'left':'300px'},
+       {'left':'400px'}]);
+  }, "Autogenerated");
+}, "Autogenerated checks.");

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

@@ -0,0 +1,83 @@
+<!--
+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: lightsteelblue;
+  position: absolute;
+}
+#a {
+  top: 0px;
+  left: 200px;
+}
+#b {
+  top: 100px;
+  left: 100px;
+}
+#c {
+  top: 200px;
+  left: 0px;
+}
+#d {
+  top: 300px;
+  left: 200px;
+}
+.expectation {
+  background-color: red;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+}
+</style>
+<div class="expectation" style="top: 0px; left: 100px;"></div>
+<div class="expectation" style="top: 100px; left: 200px;"></div>
+<div class="expectation" style="top: 200px; left: 300px;"></div>
+<div class="expectation" style="top: 300px; left: 400px;"></div>
+<div>
+  <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>
+<div style="height: 500px;"></div>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var divs = document.querySelectorAll(".anim");
+var group = new AnimationGroup([], 2000);
+for (var i = 0; i < divs.length; i++) {
+  group.append(new Animation(divs[i], {left: (100 * (i+1)) + "px"}, {duration: 2 * 1000, fill: 'forwards'}));
+}
+document.timeline.play(group);
+</script>