| chunywang | 12ffe18 | 2015-03-13 06:42:30 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <meta charset="utf-8"> |
| Zhiqiang Zhang | 29578fd | 2015-03-18 08:23:41 | [diff] [blame] | 3 | <title>CSS Animations Test: animation-delay - positive value</title> |
| chunywang | 12ffe18 | 2015-03-13 06:42:30 | [diff] [blame] | 4 | <link rel="author" title="Nokia Inc." href="http://www.nokia.com"> |
| 5 | <link rel="author" title="Intel" href="http://www.intel.com"> |
| Zhiqiang Zhang | 29578fd | 2015-03-18 08:23:41 | [diff] [blame] | 6 | <link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-18 --> |
| Peter Linss | a6e041e | 2015-08-20 02:38:01 | [diff] [blame] | 7 | <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay"> |
| 8 | <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name"> |
| 9 | <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration"> |
| chunywang | 12ffe18 | 2015-03-13 06:42:30 | [diff] [blame] | 10 | <meta name="flags" content="animated"> |
| Zhiqiang Zhang | 29578fd | 2015-03-18 08:23:41 | [diff] [blame] | 11 | <meta name="assert" content="When animation-delay is set to a positive time offset, |
| 12 | animation will delay execution by the specified offset value."> |
| chunywang | 12ffe18 | 2015-03-13 06:42:30 | [diff] [blame] | 13 | <style> |
| Zhiqiang Zhang | 29578fd | 2015-03-18 08:23:41 | [diff] [blame] | 14 | div { |
| chunywang | 12ffe18 | 2015-03-13 06:42:30 | [diff] [blame] | 15 | animation-name: sample; |
| Zhiqiang Zhang | 29578fd | 2015-03-18 08:23:41 | [diff] [blame] | 16 | animation-duration: 5s; |
| 17 | animation-delay: 5s; |
| 18 | |
| 19 | background-color: blue; |
| 20 | height: 100px; |
| 21 | width: 100px; |
| chunywang | 12ffe18 | 2015-03-13 06:42:30 | [diff] [blame] | 22 | position: relative; |
| chunywang | 12ffe18 | 2015-03-13 06:42:30 | [diff] [blame] | 23 | } |
| Zhiqiang Zhang | 29578fd | 2015-03-18 08:23:41 | [diff] [blame] | 24 | |
| chunywang | 12ffe18 | 2015-03-13 06:42:30 | [diff] [blame] | 25 | @keyframes sample { |
| 26 | from { |
| Zhiqiang Zhang | 29578fd | 2015-03-18 08:23:41 | [diff] [blame] | 27 | left: 150px; |
| chunywang | 12ffe18 | 2015-03-13 06:42:30 | [diff] [blame] | 28 | } |
| 29 | to { |
| Zhiqiang Zhang | 29578fd | 2015-03-18 08:23:41 | [diff] [blame] | 30 | left: 0px; |
| chunywang | 12ffe18 | 2015-03-13 06:42:30 | [diff] [blame] | 31 | } |
| 32 | } |
| 33 | </style> |
| 34 | <body> |
| Zhiqiang Zhang | 29578fd | 2015-03-18 08:23:41 | [diff] [blame] | 35 | <p> |
| 36 | Test passes if there is a filled blue square with 'Filler Text', |
| 37 | which starts moving from right to left after about 5 seconds |
| 38 | from the time the page is loaded. |
| 39 | </p> |
| 40 | <div>Filler Text</div> |
| chunywang | 12ffe18 | 2015-03-13 06:42:30 | [diff] [blame] | 41 | </body> |
| 42 | |
