| 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>
|
|
|