| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 2 Copyright 2012 Google Inc. All Rights Reserved. | |
| 3 | |
| 4 Licensed under the Apache License, Version 2.0 (the "License"); | |
| 5 you may not use this file except in compliance with the License. | |
| 6 You may obtain a copy of the License at | |
| 7 | |
| 8 http://www.apache.org/licenses/LICENSE-2.0 | |
| 9 | |
| 10 Unless required by applicable law or agreed to in writing, software | |
| 11 distributed under the License is distributed on an "AS IS" BASIS, | |
| 12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| 13 See the License for the specific language governing permissions and | |
| 14 limitations under the License. | |
| 15 --> | |
| 16 | |
| 17 <!DOCTYPE html><meta charset="UTF-8"> | |
| 18 <style> | |
| 19 .animContainer { | |
| 20 position: absolute; | |
| 21 left: 0px; | |
| 22 height: 10px; | |
| 23 } | |
| 24 | |
| 25 .anim { | |
| 26 left: 0px; | |
| 27 width: 400px; | |
| 28 height: 25px; | |
| 29 background-color: #FAA; | |
| 30 position: relative; | |
| 31 font-size: 13px; | |
| 32 border-top: 1px solid black; | |
| 33 } | |
| 34 | |
| 35 .expect { border-right: 1px solid black; } | |
| 36 .expect.no-effect { width: 400px; } | |
| 37 .expect.first-frame { width: 500px; } | |
| 38 .expect.last-frame { width: 600px; } | |
| 39 | |
| 40 .dir-normal { top: 50px; } | |
| 41 .dir-reverse { top: 350px; } | |
| 42 .dir-alternate { top: 650px; } | |
| 43 .dir-alternate-reverse { top: 950px; } | |
| 44 | |
| 45 .spacing { height: 1200px; } | |
| 46 </style> | |
| 47 | |
| 48 <div>Right edge of each box should align with black line at end of test.</div> | |
| 49 | |
| 50 <div class="animContainer dir-normal"> | |
| 51 <div class="expect no-effect"><div class="anim fill-none"></div></div> | |
| 52 <div class="expect no-effect"><div class="anim fill-backwards"></div></div> | |
| 53 <div class="expect last-frame"><div class="anim fill-forwards"></div></div> | |
| 54 <div class="expect last-frame"><div class="anim fill-both"></div></div> | |
| 55 <div class="expect no-effect"><div class="anim fill-auto"></div></div> | |
| 56 </div> | |
| 57 | |
| 58 <div class="animContainer dir-reverse"> | |
| 59 <div class="expect no-effect"><div class="anim fill-none"></div></div> | |
| 60 <div class="expect no-effect"><div class="anim fill-backwards"></div></div> | |
| 61 <div class="expect first-frame"><div class="anim fill-forwards"></div></div> | |
| 62 <div class="expect first-frame"><div class="anim fill-both"></div></div> | |
| 63 <div class="expect no-effect"><div class="anim fill-auto"></div></div> | |
| 64 </div> | |
| 65 | |
| 66 <div class="animContainer dir-alternate"> | |
| 67 <div class="expect no-effect"><div class="anim fill-none"></div></div> | |
| 68 <div class="expect no-effect"><div class="anim fill-backwards"></div></div> | |
| 69 <div class="expect first-frame"><div class="anim fill-forwards"></div></div> | |
| 70 <div class="expect first-frame"><div class="anim fill-both"></div></div> | |
| 71 <div class="expect no-effect"><div class="anim fill-auto"></div></div> | |
| 72 </div> | |
| 73 | |
| 74 <div class="animContainer dir-alternate-reverse"> | |
| 75 <div class="expect no-effect"><div class="anim fill-none"></div></div> | |
| 76 <div class="expect no-effect"><div class="anim fill-backwards"></div></div> | |
| 77 <div class="expect last-frame"><div class="anim fill-forwards"></div></div> | |
| 78 <div class="expect last-frame"><div class="anim fill-both"></div></div> | |
| 79 <div class="expect no-effect"><div class="anim fill-auto"></div></div> | |
| 80 </div> | |
| 81 | |
| 82 <div class="spacing"></div> | |
| 83 | |
| 84 <script src="../bootstrap.js"></script> | |
| 85 <script> | |
| 86 'use strict'; | |
| 87 | |
| 88 var directions = ['normal', 'reverse', 'alternate', 'alternate-reverse']; | |
| 89 var fills = ['none', 'backwards', 'forwards', 'both', 'auto']; | |
| 90 var effect = [{left: '100px'}, {left: '200px'}]; | |
| 91 var nextId = 0; | |
| 92 | |
| 93 function testCase(element, direction, fill, duration) { | |
| 94 document.timeline.play( | |
| 95 new Animation(element, effect, { | |
| 96 iterations: 4, | |
| 97 direction: direction, | |
| 98 fill: fill, | |
| 99 duration: duration, | |
| 100 })); | |
| 101 element.id = 'anim' + (nextId++); | |
| 102 element.textContent = 'ID: ' + element.id + ' | dir: ' + direction + ' | fill:
' + fill + ' | dur: ' + duration; | |
| 103 } | |
| 104 | |
| 105 directions.forEach(function (direction) { | |
| 106 fills.forEach(function (fill) { | |
| 107 var dur0 = document.querySelector('.dir-' + direction + ' .fill-' + fill); | |
| 108 var dur1 = dur0.cloneNode(true); | |
| 109 dur0.parentElement.insertBefore(dur1, dur0); | |
| 110 testCase(dur1, direction, fill, 1000); | |
| 111 testCase(dur0, direction, fill, 0); | |
| 112 }); | |
| 113 }); | |
| 114 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 786953007:
npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master