1 files changed, 178 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-range-shorthand.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-shorthand.html
new file mode 100644
index 0000000000..8acf0b1c55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-shorthand.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<title>animation-range shorthand</title>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range">
+<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 src="/css/support/computed-testcommon.js"></script>
+<div id="target" style="font-size:10px"></div>
+<script>
+test_valid_value("animation-range", "normal");
+test_valid_value("animation-range", "normal normal", "normal");
+test_valid_value("animation-range", "cover");
+test_valid_value("animation-range", "contain");
+test_valid_value("animation-range", "entry");
+test_valid_value("animation-range", "entry-crossing");
+test_valid_value("animation-range", "exit");
+test_valid_value("animation-range", "exit-crossing");
+test_valid_value("animation-range", "entry, exit");
+
+test_valid_value("animation-range", "entry 0% entry 100%", "entry");
+test_valid_value("animation-range", "entry-crossing 0% entry-crossing 100%",
+                 "entry-crossing");
+test_valid_value("animation-range", "exit 0% exit 100%", "exit");
+test_valid_value("animation-range", "exit-crossing 0% exit-crossing 100%",
+                 "exit-crossing");
+test_valid_value("animation-range", "cover 0% cover 100%", "cover");
+test_valid_value("animation-range", "contain 0% contain 100%", "contain");
+test_valid_value("animation-range",
+                 "entry calc(10% - 10%) entry calc(50% + 50%)", "entry");
+test_valid_value("animation-range", "cover 50%");
+test_valid_value("animation-range", "contain 50%");
+test_valid_value("animation-range", "entry 50%");
+test_valid_value("animation-range", "entry-crossing 50%");
+test_valid_value("animation-range", "exit 50%");
+test_valid_value("animation-range", "exit-crossing 50%");
+test_valid_value("animation-range", "entry 50px exit 100px");
+test_valid_value("animation-range", "exit calc(10% + 50px)");
+
+test_valid_value("animation-range", "entry 50% exit 50%");
+test_valid_value("animation-range",
+                 "cover 50% entry 50%, contain 50% exit 50%");
+test_valid_value("animation-range", "50% exit 50%");
+test_valid_value("animation-range", "normal 100px");
+test_valid_value("animation-range", "100px");
+test_valid_value("animation-range", "100px normal", "100px");
+test_valid_value("animation-range", "10% normal", "10%");
+
+test_computed_value("animation-range", "normal");
+test_computed_value("animation-range", "normal normal", "normal");
+test_computed_value("animation-range", "cover");
+test_computed_value("animation-range", "contain");
+test_computed_value("animation-range", "entry");
+test_computed_value("animation-range", "entry-crossing");
+test_computed_value("animation-range", "exit");
+test_computed_value("animation-range", "exit-crossing");
+test_computed_value("animation-range", "entry, exit");
+
+test_computed_value("animation-range", "entry 0% entry 100%", "entry");
+test_computed_value("animation-range", "entry-crossing 0% entry-crossing 100%",
+                 "entry-crossing");
+test_computed_value("animation-range", "exit 0% exit 100%", "exit");
+test_computed_value("animation-range", "exit-crossing 0% exit-crossing 100%",
+                 "exit-crossing");
+test_computed_value("animation-range", "cover 0% cover 100%", "cover");
+test_computed_value("animation-range", "contain 0% contain 100%", "contain");
+test_computed_value("animation-range",
+                 "entry calc(10% - 10%) entry calc(50% + 50%)", "entry");
+test_computed_value("animation-range", "cover 50%");
+test_computed_value("animation-range", "contain 50%");
+test_computed_value("animation-range", "entry 50%");
+test_computed_value("animation-range", "entry-crossing 50%");
+test_computed_value("animation-range", "exit 50%");
+test_computed_value("animation-range", "exit-crossing 50%");
+test_computed_value("animation-range", "entry 50px exit 100px");
+test_computed_value("animation-range", "exit calc(10% + 50px)");
+
+test_computed_value("animation-range", "entry 50% exit 50%");
+test_computed_value("animation-range",
+                 "cover 50% entry 50%, contain 50% exit 50%");
+
+test_computed_value("animation-range", "entry 10em exit 20em", "entry 100px exit 200px");
+test_computed_value("animation-range", "10em exit 20em", "100px exit 200px");
+test_computed_value("animation-range", "normal 100px");
+test_computed_value("animation-range", "100px");
+test_computed_value("animation-range", "100px normal", "100px");
+test_computed_value("animation-range", "10% normal", "10%");
+
+test_invalid_value("animation-range", "entry 50% 0s", "entry 50%");
+test_invalid_value("animation-range", "0s entry 50%");
+test_invalid_value("animation-range", "1s");
+test_invalid_value("animation-range", "-1s");
+test_invalid_value("animation-range", "1s 2s");
+test_invalid_value("animation-range", "1s, 2s");
+test_invalid_value("animation-range", "1s 2s, 3s");
+test_invalid_value("animation-range", "1s, 2s 3s");
+test_invalid_value("animation-range", "1s, 2s, 3s");
+test_invalid_value("animation-range", "1s 2s 3s");
+test_invalid_value("animation-range", "0s, 1s 2s 3s");
+test_invalid_value("animation-range", "1s / 2s");
+test_invalid_value("animation-range", "1s, 2px");
+test_invalid_value("animation-range", "#ff0000");
+test_invalid_value("animation-range", "red");
+test_invalid_value("animation-range", "thing");
+test_invalid_value("animation-range", "thing 0%");
+test_invalid_value("animation-range", "thing 42%");
+test_invalid_value("animation-range", "thing 100%");
+test_invalid_value("animation-range", "thing 100px");
+test_invalid_value("animation-range", "100% thing");
+
+test_shorthand_value('animation-range', 'normal', {
+  'animation-range-start': 'normal',
+  'animation-range-end': 'normal',
+});
+
+test_shorthand_value('animation-range', 'normal normal', {
+  'animation-range-start': 'normal',
+  'animation-range-end': 'normal',
+});
+
+test_shorthand_value('animation-range', 'normal entry 100%', {
+  'animation-range-start': 'normal',
+  'animation-range-end': 'entry',
+});
+
+test_shorthand_value('animation-range', 'normal entry 10%', {
+  'animation-range-start': 'normal',
+  'animation-range-end': 'entry 10%',
+});
+
+test_shorthand_value('animation-range', 'cover', {
+  'animation-range-start': 'cover',
+  'animation-range-end': 'cover',
+});
+
+test_shorthand_value('animation-range', 'contain', {
+  'animation-range-start': 'contain',
+  'animation-range-end': 'contain',
+});
+
+test_shorthand_value('animation-range', 'contain 100% contain 0%', {
+  'animation-range-start': 'contain 100%',
+  'animation-range-end': 'contain 0%',
+});
+
+test_shorthand_value('animation-range', 'entry 10% exit 20%', {
+  'animation-range-start': 'entry 10%',
+  'animation-range-end': 'exit 20%',
+});
+
+test_shorthand_value('animation-range', 'entry calc(10% + 10px) exit 20px', {
+  'animation-range-start': 'entry calc(10% + 10px)',
+  'animation-range-end': 'exit 20px',
+});
+
+test_shorthand_value('animation-range', 'entry, exit', {
+  'animation-range-start': 'entry, exit',
+  'animation-range-end': 'entry, exit',
+});
+
+test_shorthand_value('animation-range', 'entry 0%, exit', {
+  'animation-range-start': 'entry, exit',
+  'animation-range-end': 'entry, exit',
+});
+
+test_shorthand_value('animation-range', 'exit calc(10% + 50px)', {
+  'animation-range-start': 'exit calc(10% + 50px)',
+  'animation-range-end': 'exit',
+});
+test_shorthand_value('animation-range', '100px', {
+  'animation-range-start': '100px',
+  'animation-range-end': 'normal',
+});
+test_shorthand_value('animation-range', '10%', {
+  'animation-range-start': '10%',
+  'animation-range-end': 'normal',
+});
+</script>