Index: pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-length-units.html |
diff --git a/pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-length-units.html b/pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-length-units.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..28ca5cdfd52209ecdfd855ef64b25bc6e7aa60a8 |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-length-units.html |
@@ -0,0 +1,100 @@ |
+<!-- |
+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; |
+ background-color: lightsteelblue; |
+ height: 50px; |
+ position: absolute; |
+} |
+ |
+.expectation { |
+ background-color: red; |
+ position: absolute; |
+ left: 0px; |
+ height: 50px; |
+} |
+ |
+.container { |
+ position: relative; |
+ width: 2in; |
+ height: 50px; |
+} |
+ |
+#test { |
+ font-size: 2rem; |
+} |
+ |
+</style> |
+ |
+Each cell in the table will start at the first value for the column (e.g. 5em, |
+5ex, 50px, etc.), then animate to the second value for the column (e.g. 1em, |
+1ex, etc.), then animate to the 'to' value for the row. |
+ |
+<table id="test"></table> |
+ |
+<script> |
+var expected_failures = { |
+ '/Autogenerated at t=.*/': { |
+ firefox: true, |
+ msie: true, |
+ message: "Floating point issues." |
+ } |
+}; |
+</script> |
+<script src="../bootstrap.js"></script> |
+<script> |
+"use strict"; |
+ |
+ |
+// ex is font specific and there is no common webfont found on *all* browsers |
+// (including mobile). |
+var from = ["1em", "10px", "1rem", "5mm", "1cm", "1in", "10pt", "1pc"]; |
+var to = ["5em", "50px", "5rem", "25mm", "2cm", "2in", "50pt", "5pc"]; |
+ |
+var table = "<tr><td>from -><br>to v</td>" |
+for (var i = 0; i < from.length; i++) { |
+ table += "<td>" + to[i] + "<br>" + from[i] + "</td>"; |
+} |
+table += "</tr>" |
+ |
+var anims = {} |
+ |
+for (var j = 0; j < to.length; j++) { |
+ var toVal = to[j]; |
+ table += "<tr><td>" + toVal + "</td>"; |
+ for (var i = 0; i < from.length; i++) { |
+ var fromVal = from[i]; |
+ var id = 'a' + toVal + fromVal; |
+ table += |
+ "<td><div class='container'><div class='expectation' style='width: " + |
+ toVal + "'</div><div id="+id+" class='anim'></div></div></td>"; |
+ anims['#' + id] = [{width: to[i]}, {width: fromVal}, {width: toVal}]; |
+ } |
+ table += "</tr>" |
+} |
+ |
+document.querySelector("table").innerHTML = table; |
+</script> |
+<script> |
+"use strict"; |
+for (var id in anims) { |
+ document.timeline.play( |
+ new Animation(document.querySelector(id), anims[id], {duration: 2, fill: 'forwards'})); |
+} |
+</script> |