| 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 <body> |  | 
| 19 <style> |  | 
| 20 body { |  | 
| 21   margin: 0px; |  | 
| 22 } |  | 
| 23 .test { |  | 
| 24   height: 50px; |  | 
| 25   background: lightsteelblue; |  | 
| 26 } |  | 
| 27 .red { |  | 
| 28   background: red; |  | 
| 29 } |  | 
| 30 .expectation { |  | 
| 31   position: relative; |  | 
| 32   background: red; |  | 
| 33 } |  | 
| 34 </style> |  | 
| 35 <script> |  | 
| 36 "use strict"; |  | 
| 37 // Create the elements |  | 
| 38 var states = {'visible':1, 'hidden':1, 'collapse':1}; |  | 
| 39 for (var start in states) { |  | 
| 40   for (var end in states) { |  | 
| 41     var frames = [start, end]; |  | 
| 42     var testContainer = document.createElement('div'); |  | 
| 43     testContainer.textContent = 'visibility: ' + JSON.stringify(frames); |  | 
| 44     document.body.appendChild(testContainer); |  | 
| 45     if (end == 'visible') { |  | 
| 46       var expectation = document.createElement('div'); |  | 
| 47       expectation.classList.add('expectation'); |  | 
| 48       testContainer.appendChild(expectation); |  | 
| 49     } |  | 
| 50     var testElement = document.createElement('div'); |  | 
| 51     testElement.classList.add('test'); |  | 
| 52     testElement.id = start + "_" + end |  | 
| 53     if (end == 'hidden' || end == 'collapse') { |  | 
| 54       testElement.classList.add('red'); |  | 
| 55     } |  | 
| 56     testContainer.appendChild(testElement); |  | 
| 57   } |  | 
| 58 } |  | 
| 59 |  | 
| 60 </script> |  | 
| 61 <script src="../bootstrap.js"></script> |  | 
| 62 <script> |  | 
| 63 "use strict"; |  | 
| 64 var timing = {duration: 0.5 * 1000, easing: 'steps(2, end)', fill: 'forwards'}; |  | 
| 65 |  | 
| 66 // Add the animations |  | 
| 67 var animations = []; |  | 
| 68 for (var start in states) { |  | 
| 69   for (var end in states) { |  | 
| 70     var effect = [{visibility: start}, {visibility: end}]; |  | 
| 71     var testElement = document.getElementById(start + "_" + end); |  | 
| 72     animations.push( |  | 
| 73         new Animation(testElement, effect, timing)); |  | 
| 74   } |  | 
| 75 } |  | 
| 76 </script> |  | 
| 77 <script> |  | 
| 78 "use strict"; |  | 
| 79 animations.forEach(function(anim) { document.timeline.play(anim); }); |  | 
| 80 </script> |  | 
| OLD | NEW | 
|---|