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-iterations-fill.html ADDED Viewed

@@ -0,0 +1,167 @@
+<!--
+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: 100px;
+}
+.anim {
+  left: 0px;
+  width: 100px;
+  height: 25px;
+  background-color: #FAA;
+  position: relative;
+}
+.expected {
+  border-right: 1px solid black;
+}
+.a {
+  top: 0px
+}
+.b {
+  top: 0px;
+}
+.c {
+  top: 0px;
+}
+.d {
+  top: 0px;
+}
+#ca {
+  top: 50px;
+}
+#cb {
+  top: 200px;
+}
+#cc {
+  top: 350px;
+}
+#cd {
+  top: 500px;
+}
+</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: 100px;" class="expected"><div class="anim a" id="a"></div>
+  </div>
+  <div style="width: 100px;" class="expected"><div class="anim b" id="b"></div>
+  </div>
+  <div style="width: 300px;" class="expected"><div class="anim c" id="c"></div>
+  </div>
+  <div style="width: 300px;" class="expected"><div class="anim d" id="d"></div>
+  </div>
+</div>
+<div class="animContainer" id="cb">
+  <div style="width: 100px;" class="expected"><div class="anim a" id="e"></div>
+  </div>
+  <div style="width: 200px;" class="expected"><div class="anim b" id="f"></div>
+  </div>
+  <div style="width: 100px;" class="expected"><div class="anim c" id="g"></div>
+  </div>
+  <div style="width: 200px;" class="expected"><div class="anim d" id="h"></div>
+  </div>
+</div>
+<div class="animContainer" id="cc">
+  <div style="width: 100px;" class="expected"><div class="anim a" id="i"></div>
+  </div>
+  <div style="width: 100px;" class="expected"><div class="anim b" id="j"></div>
+  </div>
+  <div style="width: 300px;" class="expected"><div class="anim c" id="k"></div>
+  </div>
+  <div style="width: 300px;" class="expected"><div class="anim d" id="l"></div>
+  </div>
+</div>
+<div class="animContainer" id="cd">
+  <div style="width: 100px;" class="expected"><div class="anim a" id="m"></div>
+  </div>
+  <div style="width: 200px;" class="expected"><div class="anim b" id="n"></div>
+  </div>
+  <div style="width: 100px;" class="expected"><div class="anim c" id="o"></div>
+  </div>
+  <div style="width: 200px;" class="expected"><div class="anim d" id="p"></div>
+  </div>
+</div>
+<div style="height: 700px"></div>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var fills = ["none", "backwards", "forwards", "both"];
+var categories = [".a", ".b", ".c", ".d"]
+var directions = ["normal", "reverse", "alternate", "alternate-reverse"]
+var groups = [];
+for (var i = 0; i < directions.length; i++) {
+  var dir = directions[i];
+  groups.push(new AnimationGroup([], {
+    delay: 1 * 1000,
+    duration: 8 * 1000,
+    iterations: 3,
+    playbackRate: 2,
+    direction: dir,
+    fill: 'forwards',
+  }));
+}
+function sampleFunc(timeFraction, target, animation) {
+  target.innerHTML = Math.floor(timeFraction * 1000) / 1000 + " : " + animation.currentIteration;
+}
+for (var i = 0; i < fills.length; i++) {
+  var divs = document.querySelectorAll(categories[i]);
+  for (var j = 0; j < divs.length; j++) {
+    groups[j].append(new Animation(divs[j], [{left: "100px"}, {left: "200px"}], {
+      delay: 1 * 1000,
+      duration: 1 * 1000,
+      iterations: 2,
+      fill: fills[i],
+      playbackRate: 0.8
+    }));
+    groups[j].append(new Animation(divs[j], sampleFunc, {
+      delay: 1 * 1000,
+      duration: 1 * 1000,
+      iterations: 2,
+      fill: fills[i],
+      playbackRate: 0.8
+    }));
+  }
+}
+for (var j = 0; j < divs.length; j++) {
+  document.timeline.play(groups[j]);
+}
+</script>

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

@@ -0,0 +1,67 @@
+timing_test(function() {
+  at(0 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'50px'},
+       {'left':'50px'},
+       {'left':'100px'},
+       {'left':'50px'},
+       {'left':'100px'},
+       {'left':'200px'},
+       {'left':'200px'}]);
+    }, "Autogenerated");
+  at(0.4 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'50px'},
+       {'left':'50px'},
+       {'left':'120px'},
+       {'left':'80px'},
+       {'left':'120px'},
+       {'left':'120px'},
+       {'left':'360px'}]);
+    }, "Autogenerated");
+  at(0.8 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'50px'},
+       {'left':'50px'},
+       {'left':'140px'},
+       {'left':'110px'},
+       {'left':'140px'},
+       {'left':'120px'},
+       {'left':'340px'}]);
+    }, "Autogenerated");
+  at(1.2000000000000002 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'120px'},
+       {'left':'80px'},
+       {'left':'160px'},
+       {'left':'140px'},
+       {'left':'160px'},
+       {'left':'146.6666717529297px'},
+       {'left':'340px'}]);
+    }, "Autogenerated");
+  at(1.6 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'left':'160px'},
+       {'left':'140px'},
+       {'left':'180px'},
+       {'left':'170px'},
+       {'left':'180px'},
+       {'left':'173.3333282470703px'},
+       {'left':'360px'}]);
+    }, "Autogenerated");
+  at(2 * 1000, function() {
+    assert_styles(
+      '.anim',
+      {'left':'200px'});
+    }, "Autogenerated");
+  at(2.4 * 1000, function() {
+    assert_styles(
+      '.anim',
+      {'left':'200px'});
+    }, "Autogenerated");
+}, "Autogenerated checks.");

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

@@ -0,0 +1,109 @@
+<!--
+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: 50px;
+  width: 100px;
+  height: 100px;
+  background-color: lightsteelblue;
+  position: absolute;
+}
+#a {
+  top: 0px
+}
+#b {
+  top: 100px;
+}
+#c {
+  top: 200px
+}
+#d {
+  top: 300px;
+}
+#e {
+  top: 400px;
+}
+#f {
+  top: 500px;
+}
+#g {
+  top: 600px;
+  left: 200px;
+}
+#expectation {
+  position: absolute;
+  top: 0px;
+  left: 200px;
+  width: 100px;
+  height: 700px;
+  background: red;
+}
+</style>
+<div id=expectation></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 id="e" class="anim"></div>
+  <div id="f" class="anim"></div>
+  <div id="g" class="anim"></div>
+</div>
+<div style="height: 750px"></div>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var dt = document.timeline;
+dt.play(new Animation(document.querySelector("#a"),
+    [{left: "100px"}, {left: "200px"}], {delay: 1 * 1000, duration: 1 * 1000, fill: 'forwards'}));
+dt.play(new Animation(document.querySelector("#b"), {left: "200px"},
+    {delay: 1 * 1000, duration: 1 * 1000, fill: 'forwards'}));
+dt.play(new Animation(document.querySelector("#c"),
+    [{left: "100px"}, {left: "200px"}], {duration: 2 * 1000, fill: 'forwards'}));
+dt.play(new Animation(document.querySelector("#d"), {left: "200px"},
+    {duration: 2 * 1000, fill: 'forwards'}));
+dt.play(new Animation(document.querySelector("#e"), [
+  {offset: 0, left: "100px"},
+  {offset: 1, left: "200px"},
+], {duration: 2 * 1000, fill: 'forwards'}));
+dt.play(new Animation(document.querySelector("#f"), [
+  {offset: 0, left: "200px"},
+  {offset: 0.25, left: "100px"},
+  {offset: 1, left: "200px"}
+], {duration: 2 * 1000, fill: 'forwards'}));
+dt.play(new Animation(document.querySelector("#g"), new KeyframeEffect([
+  {offset: 0.25, left: "200px"},
+  {offset: 0.5, left: "100px"},
+  {offset: 0.75, left: "200px"}
+], "add"), {duration: 2 * 1000, fill: 'forwards'}));
+</script>

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

@@ -0,0 +1,65 @@
+timing_test(function() {
+  at(0 * 1000, function() {
+    assert_styles("#target",{'height':'0px'});
+  });
+  at(0.25 * 1000, function() {
+    assert_styles("#target",{'height':'12.5px'});
+  });
+  at(0.5 * 1000, function() {
+    assert_styles("#target",{'height':'25px'});
+  });
+  at(0.75 * 1000, function() {
+    assert_styles("#target",{'height':'37.5px'});
+  });
+  at(1 * 1000, function() {
+    assert_styles("#target",{'height':'50px'});
+  });
+  at(1.25 * 1000, function() {
+    assert_styles("#target",{'height':'62.5px'});
+  });
+  at(1.5 * 1000, function() {
+    assert_styles("#target",{'height':'75px'});
+  });
+  at(1.75 * 1000, function() {
+    assert_styles("#target",{'height':'87.5px'});
+  });
+  at(2 * 1000, function() {
+    assert_styles("#target",{'height':'100px'});
+  });
+  at(2.25 * 1000, function() {
+    assert_styles("#target",{'height':'106.5px'});
+  });
+  at(2.5 * 1000, function() {
+    assert_styles("#target",{'height':'125px'});
+  });
+  at(2.75 * 1000, function() {
+    assert_styles("#target",{'height':'143.5px'});
+  });
+  at(3 * 1000, function() {
+    assert_styles("#target",{'height':'150px'});
+  });
+  at(3.25 * 1000, function() {
+    assert_styles("#target",{'height':'150px'});
+  });
+  at(3.5 * 1000, function() {
+    assert_styles("#target",{'height':'150px'});
+  });
+  at(3.75 * 1000, function() {
+    assert_styles("#target",{'height':'200px'});
+  });
+  at(4 * 1000, function() {
+    assert_styles("#target",{'height':'200px'});
+  });
+  at(4.25 * 1000, function() {
+    assert_styles("#target",{'height':'200px'});
+  });
+  at(4.5 * 1000, function() {
+    assert_styles("#target",{'height':'225px'});
+  });
+  at(4.75 * 1000, function() {
+    assert_styles("#target",{'height':'225px'});
+  });
+  at(5 * 1000, function() {
+    assert_styles("#target",{'height':'250px'});
+  });
+}, "Auto generated tests");

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

@@ -0,0 +1,64 @@
+<style>
+#container {
+  position: relative;
+}
+#control {
+  position: absolute;
+  background-color: black;
+  width: 20px;
+  height: 0px;
+}
+#target {
+  position: absolute;
+  left: 20px;
+  background-color: rgba(0, 128, 0, 0.25);
+  width: 280px;
+  height: 0px;
+}
+.block {
+  padding-left: 30px;
+  border-bottom: 1px solid black;
+  box-sizing: border-box;
+  width: 300px;
+  height: 50px;
+  font-size: 20px;
+}
+</style>
+<div id="container">
+  <div id="control"></div>
+  <div id="target"></div>
+</div>
+<script src="../bootstrap.js"></script>
+<script>
+var easings = [
+  '',
+  'linear',
+  'ease-in-out',
+  'step-middle',
+  'steps(4, end)',
+];
+var keyframeHeight = 50;
+var timing = {duration: easings.length * 1000, fill: 'forwards'};
+control.animate({height: easings.length * keyframeHeight + 'px'}, timing);
+var keyframes = [];
+easings.forEach(function (easing, i) {
+  var textBlock = document.createElement('div');
+  textBlock.textContent = easing.length ? easing : '<default>';
+  textBlock.classList.add('block');
+  container.appendChild(textBlock);
+  var keyframe = {height: i * keyframeHeight + 'px'};
+  if (easing.length) {
+    keyframe.easing = easing;
+  }
+  keyframes.push(keyframe);
+});
+keyframes.push({height: easings.length * keyframeHeight + 'px'});
+target.animate(keyframes, timing);
+</script>