| <!DOCTYPE html> |
| <title>animation-delay shorthand</title> |
| <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/shorthand-testcommon.js"></script> |
| <script src="/css/support/parsing-testcommon.js"></script> |
| <script> |
| test_valid_value("animation-delay", "1s"); |
| test_valid_value("animation-delay", "-1s"); |
| test_valid_value("animation-delay", "1s 2s"); |
| test_valid_value("animation-delay", "1s, 2s"); |
| test_valid_value("animation-delay", "1s 2s, 3s"); |
| test_valid_value("animation-delay", "1s, 2s 3s"); |
| test_valid_value("animation-delay", "1s, 2s, 3s"); |
| |
| test_invalid_value("animation-delay", "1s 2s 3s"); |
| test_invalid_value("animation-delay", "0s, 1s 2s 3s"); |
| test_invalid_value("animation-delay", "1s / 2s"); |
| test_invalid_value("animation-delay", "1s, 2px"); |
| test_invalid_value("animation-delay", "#ff0000"); |
| test_invalid_value("animation-delay", "red"); |
| test_invalid_value("animation-delay", "thing"); |
| test_invalid_value("animation-delay", "thing 0%"); |
| test_invalid_value("animation-delay", "thing 42%"); |
| test_invalid_value("animation-delay", "thing 100%"); |
| test_invalid_value("animation-delay", "thing 100px"); |
| test_invalid_value("animation-delay", "100% thing"); |
| |
| test_shorthand_value('animation-delay', '1s 2s', { |
| 'animation-delay-start': '1s', |
| 'animation-delay-end': '2s', |
| }); |
| |
| test_shorthand_value('animation-delay', '1s', { |
| 'animation-delay-start': '1s', |
| 'animation-delay-end': '0s', |
| }); |
| |
| test_shorthand_value('animation-delay', '1s 2s, 3s 4s', { |
| 'animation-delay-start': '1s, 3s', |
| 'animation-delay-end': '2s, 4s', |
| }); |
| |
| test_shorthand_value('animation-delay', '1s 2s, 3s, 4s 5s', { |
| 'animation-delay-start': '1s, 3s, 4s', |
| 'animation-delay-end': '2s, 0s, 5s', |
| }); |
| </script> |
