Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(968)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-fill-values.html

Issue 175443005: [polymer] import all elements (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: updated from bower Created 6 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-element-animate-checks.js ('k') | pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-fill-values-checks.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-fill-values.html
diff --git a/pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-fill-values.html b/pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-fill-values.html
new file mode 100644
index 0000000000000000000000000000000000000000..eba36ad39523509c4392c6ad3ea63779a31c359a
--- /dev/null
+++ b/pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-fill-values.html
@@ -0,0 +1,114 @@
+<!--
+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: 10px;
+}
+
+.anim {
+ left: 0px;
+ width: 400px;
+ height: 25px;
+ background-color: #FAA;
+ position: relative;
+ font-size: 13px;
+ border-top: 1px solid black;
+}
+
+.expect { border-right: 1px solid black; }
+.expect.no-effect { width: 400px; }
+.expect.first-frame { width: 500px; }
+.expect.last-frame { width: 600px; }
+
+.dir-normal { top: 50px; }
+.dir-reverse { top: 350px; }
+.dir-alternate { top: 650px; }
+.dir-alternate-reverse { top: 950px; }
+
+.spacing { height: 1200px; }
+</style>
+
+<div>Right edge of each box should align with black line at end of test.</div>
+
+<div class="animContainer dir-normal">
+ <div class="expect no-effect"><div class="anim fill-none"></div></div>
+ <div class="expect no-effect"><div class="anim fill-backwards"></div></div>
+ <div class="expect last-frame"><div class="anim fill-forwards"></div></div>
+ <div class="expect last-frame"><div class="anim fill-both"></div></div>
+ <div class="expect no-effect"><div class="anim fill-auto"></div></div>
+</div>
+
+<div class="animContainer dir-reverse">
+ <div class="expect no-effect"><div class="anim fill-none"></div></div>
+ <div class="expect no-effect"><div class="anim fill-backwards"></div></div>
+ <div class="expect first-frame"><div class="anim fill-forwards"></div></div>
+ <div class="expect first-frame"><div class="anim fill-both"></div></div>
+ <div class="expect no-effect"><div class="anim fill-auto"></div></div>
+</div>
+
+<div class="animContainer dir-alternate">
+ <div class="expect no-effect"><div class="anim fill-none"></div></div>
+ <div class="expect no-effect"><div class="anim fill-backwards"></div></div>
+ <div class="expect first-frame"><div class="anim fill-forwards"></div></div>
+ <div class="expect first-frame"><div class="anim fill-both"></div></div>
+ <div class="expect no-effect"><div class="anim fill-auto"></div></div>
+</div>
+
+<div class="animContainer dir-alternate-reverse">
+ <div class="expect no-effect"><div class="anim fill-none"></div></div>
+ <div class="expect no-effect"><div class="anim fill-backwards"></div></div>
+ <div class="expect last-frame"><div class="anim fill-forwards"></div></div>
+ <div class="expect last-frame"><div class="anim fill-both"></div></div>
+ <div class="expect no-effect"><div class="anim fill-auto"></div></div>
+</div>
+
+<div class="spacing"></div>
+
+<script src="../bootstrap.js"></script>
+<script>
+'use strict';
+
+var directions = ['normal', 'reverse', 'alternate', 'alternate-reverse'];
+var fills = ['none', 'backwards', 'forwards', 'both', 'auto'];
+var effect = [{left: '100px'}, {left: '200px'}];
+var nextId = 0;
+
+function testCase(element, direction, fill, duration) {
+ document.timeline.play(
+ new Animation(element, effect, {
+ iterations: 4,
+ direction: direction,
+ fill: fill,
+ duration: duration,
+ }));
+ element.id = 'anim' + (nextId++);
+ element.textContent = 'ID: ' + element.id + ' | dir: ' + direction + ' | fill: ' + fill + ' | dur: ' + duration;
+}
+
+directions.forEach(function (direction) {
+ fills.forEach(function (fill) {
+ var dur0 = document.querySelector('.dir-' + direction + ' .fill-' + fill);
+ var dur1 = dur0.cloneNode(true);
+ dur0.parentElement.insertBefore(dur1, dur0);
+ testCase(dur1, direction, fill, 1);
+ testCase(dur0, direction, fill, 0);
+ });
+});
+</script>
« no previous file with comments | « pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-element-animate-checks.js ('k') | pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-fill-values-checks.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698