<!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>
