summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand.html
blob: 5c74a4d8e432ca41d02e5ec44330518f5162f457 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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>