| yunxiaoxie | 73a488b | 2015-03-06 09:12:48 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <meta charset="utf-8"> |
| 3 | <title>CSS Animations Test: animation-delay - ::after</title> |
| 4 | <link rel="author" title="Intel" href="http://www.intel.com"> |
| Zhiqiang Zhang | ed2f684 | 2015-03-18 08:22:37 | [diff] [blame] | 5 | <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] | 6 | <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay"> |
| 7 | <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name"> |
| 8 | <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration"> |
| chunywang | ce8ec3a | 2015-03-13 05:58:05 | [diff] [blame] | 9 | <meta name="flags" content="animated"> |
| Zhiqiang Zhang | ed2f684 | 2015-03-18 08:22:37 | [diff] [blame] | 10 | <meta name="assert" content="Check that animation-delay applies to the ::after pseudo element."> |
| yunxiaoxie | 73a488b | 2015-03-06 09:12:48 | [diff] [blame] | 11 | <style> |
| Zhiqiang Zhang | ed2f684 | 2015-03-18 08:22:37 | [diff] [blame] | 12 | div::after { |
| yunxiaoxie | 73a488b | 2015-03-06 09:12:48 | [diff] [blame] | 13 | animation-name: sample; |
| Zhiqiang Zhang | ed2f684 | 2015-03-18 08:22:37 | [diff] [blame] | 14 | animation-duration: 5s; |
| 15 | animation-delay: 5s; |
| 16 | |
| 17 | background-color: blue; |
| 18 | content: "Filler Text"; |
| 19 | display: block; |
| 20 | height: 100px; |
| 21 | width: 100px; |
| chunywang | ce8ec3a | 2015-03-13 05:58:05 | [diff] [blame] | 22 | position: relative; |
| yunxiaoxie | 73a488b | 2015-03-06 09:12:48 | [diff] [blame] | 23 | } |
| Zhiqiang Zhang | ed2f684 | 2015-03-18 08:22:37 | [diff] [blame] | 24 | |
| yunxiaoxie | 73a488b | 2015-03-06 09:12:48 | [diff] [blame] | 25 | @keyframes sample { |
| 26 | from { |
| Zhiqiang Zhang | ed2f684 | 2015-03-18 08:22:37 | [diff] [blame] | 27 | left: 150px; |
| yunxiaoxie | 73a488b | 2015-03-06 09:12:48 | [diff] [blame] | 28 | } |
| 29 | to { |
| Zhiqiang Zhang | ed2f684 | 2015-03-18 08:22:37 | [diff] [blame] | 30 | left: 0px; |
| yunxiaoxie | 73a488b | 2015-03-06 09:12:48 | [diff] [blame] | 31 | } |
| 32 | } |
| 33 | </style> |
| 34 | <body> |
| Zhiqiang Zhang | ed2f684 | 2015-03-18 08:22:37 | [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></div> |
| yunxiaoxie | 73a488b | 2015-03-06 09:12:48 | [diff] [blame] | 41 | </body> |
| 42 | |
