| 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 | |
| 19 <style> | |
| 20 .anim { | |
| 21 display: inline-block; | |
| 22 } | |
| 23 #allToInitial, #border, #borderSpacing, #padding, #table, td { | |
| 24 border-style: solid; | |
| 25 } | |
| 26 #outline { | |
| 27 outline-style: solid; | |
| 28 left: 20px; | |
| 29 width: 100px; | |
| 30 } | |
| 31 </style> | |
| 32 | |
| 33 <table id="allToInitial" class="anim"><tr><td>All initial.</td><td>All initial.<
/td></tr></table> | |
| 34 <pre id="background" class="anim">background-color</pre> | |
| 35 <pre id="border" class="anim">border-width | |
| 36 border-radius | |
| 37 border-color</pre> | |
| 38 <table id="table" class="anim"> | |
| 39 <tr> | |
| 40 <td>border-spacing<br>vertical-align</td> | |
| 41 <td>border-spacing<br>vertical-align</td> | |
| 42 </tr> | |
| 43 </table> | |
| 44 <pre id="opacity" class="anim">opacity</pre> | |
| 45 <br> | |
| 46 <pre id="outline" class="anim">outline</pre> | |
| 47 <pre id="padding" class="anim">padding</pre> | |
| 48 <pre id="transform" class="anim">transform</pre> | |
| 49 <br> | |
| 50 <pre id="text" class="anim">color | |
| 51 font-size | |
| 52 font-weight | |
| 53 letter-spacing | |
| 54 line-height | |
| 55 text-indent | |
| 56 text-shadow | |
| 57 word-spacing | |
| 58 word word word word</pre> | |
| 59 | |
| 60 <script> | |
| 61 var expected_failures = [ | |
| 62 { | |
| 63 browser_configurations: [{ firefox: true }], | |
| 64 tests: ['#background at t=0ms'], | |
| 65 message: 'rgb(0, 0, 0) gets converted to transparent in Firefox.', | |
| 66 }, { | |
| 67 browser_configurations: [{ firefox: true }], | |
| 68 tests: ['#background at t=1000ms'], | |
| 69 message: 'FIXME: Transparency is wrong.', | |
| 70 }, { | |
| 71 browser_configurations: [{ firefox: true }], | |
| 72 tests: ['#border at t=2000ms'], | |
| 73 message: 'FIXME: Border is wrong.', | |
| 74 }, { | |
| 75 browser_configurations: [{ msie: true }], | |
| 76 tests: ['#transform at t=0ms'], | |
| 77 message: 'none in IE.', | |
| 78 }, { | |
| 79 browser_configurations: [{ msie: true }], | |
| 80 tests: ['#transform at t=1000ms'], | |
| 81 message: 'Very small value floating point issue.', | |
| 82 }, { | |
| 83 browser_configurations: [{ msie: true }], | |
| 84 tests: [ | |
| 85 '#(background|border) at t=(1|2)000ms', | |
| 86 '#text at t=0000ms', | |
| 87 '#(text|outline) at t=(1|2)000ms', | |
| 88 ], | |
| 89 message: 'IE returns rbga values.', | |
| 90 }, { | |
| 91 browser_configurations: [ | |
| 92 { chrome: true, version: '30|31' }, | |
| 93 { firefox: true }, | |
| 94 ], | |
| 95 tests: ['#text at t=(0|1000)ms'], | |
| 96 message: 'Different initial font-size.', | |
| 97 } | |
| 98 ]; | |
| 99 </script> | |
| 100 <script src="../bootstrap.js"></script> | |
| 101 <script> | |
| 102 "use strict"; | |
| 103 | |
| 104 var timing = {duration: 2 * 1000, fill: 'forwards'}; | |
| 105 | |
| 106 document.timeline.play(new Animation(document.querySelector('#allToInitial'), [{ | |
| 107 backgroundColor: 'initial', | |
| 108 backgroundPosition: 'initial', | |
| 109 borderBottomColor: 'initial', | |
| 110 borderBottomLeftRadius: 'initial', | |
| 111 borderBottomRightRadius: 'initial', | |
| 112 borderBottomWidth: 'initial', | |
| 113 borderLeftColor: 'initial', | |
| 114 borderLeftWidth: 'initial', | |
| 115 borderRightColor: 'initial', | |
| 116 borderRightWidth: 'initial', | |
| 117 borderSpacing: 'initial', | |
| 118 borderTopColor: 'initial', | |
| 119 borderTopLeftRadius: 'initial', | |
| 120 borderTopRightRadius: 'initial', | |
| 121 borderTopWidth: 'initial', | |
| 122 bottom: 'initial', | |
| 123 color: 'initial', | |
| 124 fontSize: 'initial', | |
| 125 fontWeight: 'initial', | |
| 126 height: 'initial', | |
| 127 left: 'initial', | |
| 128 letterSpacing: 'initial', | |
| 129 lineHeight: 'initial', | |
| 130 marginBottom: 'initial', | |
| 131 marginLeft: 'initial', | |
| 132 marginRight: 'initial', | |
| 133 marginTop: 'initial', | |
| 134 maxHeight: 'initial', | |
| 135 maxWidth: 'initial', | |
| 136 minHeight: 'initial', | |
| 137 minWidth: 'initial', | |
| 138 opacity: 'initial', | |
| 139 outlineColor: 'initial', | |
| 140 outlineOffset: 'initial', | |
| 141 outlineWidth: 'initial', | |
| 142 paddingBottom: 'initial', | |
| 143 paddingLeft: 'initial', | |
| 144 paddingRight: 'initial', | |
| 145 paddingTop: 'initial', | |
| 146 right: 'initial', | |
| 147 textIndent: 'initial', | |
| 148 textShadow: 'initial', | |
| 149 top: 'initial', | |
| 150 transform: 'initial', | |
| 151 verticalAlign: 'initial', | |
| 152 visibility: 'initial', | |
| 153 width: 'initial', | |
| 154 wordSpacing: 'initial', | |
| 155 zIndex: 'initial', | |
| 156 }], timing)); | |
| 157 | |
| 158 document.timeline.play(new Animation(document.querySelector('#background'), [{ b
ackgroundColor: 'initial' }, { backgroundColor: 'green' }], timing)); | |
| 159 | |
| 160 document.timeline.play(new Animation(document.querySelector('#border'), [{ | |
| 161 borderBottomColor: 'initial', | |
| 162 borderBottomLeftRadius: 'initial', | |
| 163 borderBottomRightRadius: 'initial', | |
| 164 borderBottomWidth: 'initial', | |
| 165 borderLeftColor: 'initial', | |
| 166 borderLeftWidth: 'initial', | |
| 167 borderRightColor: 'initial', | |
| 168 borderRightWidth: 'initial', | |
| 169 borderTopColor: 'initial', | |
| 170 borderTopLeftRadius: 'initial', | |
| 171 borderTopRightRadius: 'initial', | |
| 172 borderTopWidth: 'initial', | |
| 173 }, { | |
| 174 borderBottomColor: 'lime', | |
| 175 borderBottomLeftRadius: '50px', | |
| 176 borderBottomRightRadius: '50px', | |
| 177 borderBottomWidth: '10px', | |
| 178 borderLeftColor: 'lime', | |
| 179 borderLeftWidth: '10px', | |
| 180 borderRightColor: 'lime', | |
| 181 borderRightWidth: '10px', | |
| 182 borderTopColor: 'lime', | |
| 183 borderTopLeftRadius: '50px', | |
| 184 borderTopRightRadius: '50px', | |
| 185 borderTopWidth: '10px', | |
| 186 }], timing)); | |
| 187 | |
| 188 document.timeline.play(new Animation(document.querySelector('#table'), [{ | |
| 189 borderSpacing: 'initial', | |
| 190 verticalAlign: 'initial', | |
| 191 }, { | |
| 192 borderSpacing: '10px', | |
| 193 verticalAlign: '10px', | |
| 194 }], timing)); | |
| 195 | |
| 196 document.timeline.play(new Animation(document.querySelector('#opacity'), [{ opac
ity: 'initial' }, { opacity: '0.25' }], timing)); | |
| 197 | |
| 198 document.timeline.play(new Animation(document.querySelector('#outline'), [{ | |
| 199 outlineColor: 'initial', | |
| 200 outlineWidth: 'initial', | |
| 201 outlineOffset: 'initial', | |
| 202 }, { | |
| 203 outlineColor: 'green', | |
| 204 outlineWidth: '10px', | |
| 205 outlineOffset: '10px', | |
| 206 }], timing)); | |
| 207 | |
| 208 document.timeline.play(new Animation(document.querySelector('#padding'), [{ | |
| 209 paddingBottom: 'initial', | |
| 210 paddingLeft: 'initial', | |
| 211 paddingRight: 'initial', | |
| 212 paddingTop: 'initial', | |
| 213 }, { | |
| 214 paddingBottom: '50px', | |
| 215 paddingLeft: '50px', | |
| 216 paddingRight: '50px', | |
| 217 paddingTop: '50px', | |
| 218 }], timing)); | |
| 219 | |
| 220 document.timeline.play(new Animation(document.querySelector('#transform'), [{ tr
ansform: 'initial' }, { transform: 'rotate(360deg)' }], timing)); | |
| 221 | |
| 222 document.timeline.play(new Animation(document.querySelector('#text'), [{ | |
| 223 color: 'initial', | |
| 224 fontSize: 'initial', | |
| 225 fontWeight: 'initial', | |
| 226 letterSpacing: 'initial', | |
| 227 lineHeight: 'initial', | |
| 228 textIndent: 'initial', | |
| 229 textShadow: 'initial', | |
| 230 wordSpacing: 'initial', | |
| 231 }, { | |
| 232 color: 'green', | |
| 233 fontSize: '30px', | |
| 234 fontWeight: '900', | |
| 235 letterSpacing: '5px', | |
| 236 lineHeight: '200%', | |
| 237 textIndent: '50px', | |
| 238 textShadow: '10px 10px 50px lime', | |
| 239 wordSpacing: '100px', | |
| 240 }], timing)); | |
| 241 | |
| 242 </script> | |
| OLD | NEW |