| <!-- |
| 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, 1000); |
| testCase(dur0, direction, fill, 0); |
| }); |
| }); |
| </script> |
