| 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 .container { | |
| 20 -webkit-perspective: 400px; | |
| 21 perspective: 400px; | |
| 22 position: absolute; | |
| 23 top: 10px; | |
| 24 } | |
| 25 .box { | |
| 26 display: inline-block; | |
| 27 width: 100px; | |
| 28 height: 100px; | |
| 29 margin: 16px; | |
| 30 border-style: solid; | |
| 31 white-space: pre; | |
| 32 } | |
| 33 .test { | |
| 34 border-color: green; | |
| 35 } | |
| 36 .expectation { | |
| 37 color: red; | |
| 38 } | |
| 39 </style> | |
| 40 | |
| 41 <div id="spacer"></div> | |
| 42 <div id="expectationContainer" class="container"></div> | |
| 43 <div id="testContainer" class="container"></div> | |
| 44 | |
| 45 <script src="../bootstrap.js"></script> | |
| 46 <script> | |
| 47 "use strict"; | |
| 48 var testGroups = [ | |
| 49 [ | |
| 50 'matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1)', | |
| 51 'matrix(0.7, 0.7, -0.7, 0.7, 10, 20)', | |
| 52 'matrix3d(0,0,-1,0, 0,1,0,0, 1,0,0,0, 0,0,0,1)', | |
| 53 ], [ | |
| 54 'skew(20deg, 30deg)', | |
| 55 'skewX(40deg)', | |
| 56 'skewY(30deg)', | |
| 57 ], [ | |
| 58 'scale(1.5, 2)', | |
| 59 'scaleX(2)', | |
| 60 'scaleY(1.5)', | |
| 61 'scaleZ(2) translateZ(4px)', | |
| 62 ], [ | |
| 63 'rotate(60deg)', | |
| 64 'rotateX(70deg)', | |
| 65 'rotateY(80deg)', | |
| 66 'rotateZ(70deg)', | |
| 67 'rotate3d(1, 1, 1, 60deg)', | |
| 68 ], [ | |
| 69 'translate(10px, 20px)', | |
| 70 'translateX(10px)', | |
| 71 'translateY(20px)', | |
| 72 'translateZ(30px)', | |
| 73 'translate3d(10px, 20px, 40px)', | |
| 74 ], [ | |
| 75 'translate(100px)', | |
| 76 'translate(100px) rotate(20deg)', | |
| 77 'translate(100px) rotate(20deg) matrix(0.7, 0.7, -0.7, 0.7, 0, 0)', | |
| 78 'translate(100px) rotate(20deg) scale(0.5)', | |
| 79 ] | |
| 80 ]; | |
| 81 | |
| 82 var animations = []; | |
| 83 var style = document.createElement('style'); | |
| 84 var count = 0; | |
| 85 var showExpectations = inExploreMode(); | |
| 86 var expectationStarters = []; | |
| 87 | |
| 88 function addAnimationTest(from, to) { | |
| 89 var testElement = document.createElement('div'); | |
| 90 testElement.classList.add('box', 'test'); | |
| 91 testContainer.appendChild(testElement); | |
| 92 testElement.textContent = from + '\n' + to; | |
| 93 animations.push(new Animation(testElement, [ | |
| 94 {transform: from}, | |
| 95 {transform: to}, | |
| 96 ], { | |
| 97 duration: 1 * 1000, | |
| 98 direction: 'alternate', | |
| 99 iterations: Infinity, | |
| 100 easing: 'ease-in-out', | |
| 101 })); | |
| 102 | |
| 103 if (!showExpectations) { | |
| 104 return; | |
| 105 } | |
| 106 var expectationElement = document.createElement('div'); | |
| 107 expectationElement.classList.add('box', 'expectation'); | |
| 108 expectationElement.textContent = from + '\n' + to; | |
| 109 var currentCount = count; | |
| 110 expectationStarters.push(function() { | |
| 111 expectationElement.classList.add('animation' + currentCount); | |
| 112 }); | |
| 113 expectationContainer.appendChild(expectationElement); | |
| 114 var keyframes = ' animation' + count + '{' + | |
| 115 'from{-webkit-transform:' + from + ';transform:' + from +';}' + | |
| 116 'to{-webkit-transform:' + to + ';transform:' + to +';}}'; | |
| 117 var animation = 'animation' + count + ' 1s alternate infinite ease-in-out'; | |
| 118 style.textContent += '@-webkit-keyframes' + keyframes + '\n'; | |
| 119 style.textContent += '@keyframes' + keyframes + '\n'; | |
| 120 style.textContent += '.animation' + count +'{-webkit-animation:' + animation +
';animation:' + animation + ';}\n'; | |
| 121 count++; | |
| 122 } | |
| 123 | |
| 124 function addBreak() { | |
| 125 testContainer.appendChild(document.createElement('hr')); | |
| 126 if (showExpectations) { | |
| 127 expectationContainer.appendChild(document.createElement('hr')); | |
| 128 } | |
| 129 } | |
| 130 | |
| 131 function addTestGroup(tests) { | |
| 132 tests.forEach(function(transform) { | |
| 133 addAnimationTest('none', transform); | |
| 134 }); | |
| 135 tests.forEach(function(transform, i) { | |
| 136 addAnimationTest(transform, tests[(i + 1) % tests.length]); | |
| 137 }); | |
| 138 addBreak(); | |
| 139 } | |
| 140 | |
| 141 testGroups.forEach(addTestGroup); | |
| 142 | |
| 143 if (showExpectations) { | |
| 144 expectationContainer.appendChild(style); | |
| 145 var startExpectations = function() { | |
| 146 expectationStarters.forEach(function(f) {f();}); | |
| 147 }; | |
| 148 if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { | |
| 149 requestAnimationFrame(startExpectations); | |
| 150 } else { | |
| 151 startExpectations(); | |
| 152 } | |
| 153 } | |
| 154 // TODO: Make infinite duration groups work. | |
| 155 animations.forEach(function(animation) {document.timeline.play(animation);}); | |
| 156 | |
| 157 spacer.style.height = testContainer.clientHeight + 'px'; | |
| 158 </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