diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-animations/parsing | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-animations/parsing')
40 files changed, 1141 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-composition-computed.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-composition-computed.tentative.html new file mode 100644 index 0000000000..535a40c9ca --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-composition-computed.tentative.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: getComputedStyle().animationComposition</title> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition"> +<meta name="assert" content="animation-composition computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("animation-composition", "replace, add, accumulate"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-composition-invalid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-composition-invalid.tentative.html new file mode 100644 index 0000000000..a08b33c84d --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-composition-invalid.tentative.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-composition with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition"> +<meta name="assert" content="animation-composition supports only the grammar '<single-animation-composition> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("animation-composition", "auto"); +test_invalid_value("animation-composition", "add replace"); + +test_invalid_value("animation-composition", "add, initial"); +test_invalid_value("animation-composition", "initial, add"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-composition-valid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-composition-valid.tentative.html new file mode 100644 index 0000000000..8dca8dbabe --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-composition-valid.tentative.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-composition with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition"> +<meta name="assert" content="animation-composition supports the full grammar '<single-animation-composition> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("animation-composition", "replace"); +test_valid_value("animation-composition", "add"); +test_valid_value("animation-composition", "accumulate"); +test_valid_value("animation-composition", "replace, add, accumulate"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-computed.html new file mode 100644 index 0000000000..f8d34b889b --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-computed.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: getComputedStyle().animation</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation"> +<meta name="assert" content="animation computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +// <single-animation> = <time> || <easing-function> || <time> || +// <single-animation-iteration-count> || <single-animation-direction> || +// <single-animation-fill-mode> || <single-animation-play-state> || +// [ none | <keyframes-name> ] + +test(() => { + assert_equals(getComputedStyle(document.getElementById('target')).animation, "0s ease 0s 1 normal none running none"); +}, "Default animation value"); + +test_computed_value("animation", "1s", "1s ease 0s 1 normal none running none"); +test_computed_value("animation", "cubic-bezier(0, -2, 1, 3)", "0s cubic-bezier(0, -2, 1, 3) 0s 1 normal none running none"); +test_computed_value("animation", "1s -3s", "1s ease -3s 1 normal none running none"); +test_computed_value("animation", "4", "0s ease 0s 4 normal none running none"); +test_computed_value("animation", "reverse", "0s ease 0s 1 reverse none running none"); +test_computed_value("animation", "both", "0s ease 0s 1 normal both running none"); +test_computed_value("animation", "paused", "0s ease 0s 1 normal none paused none"); +test_computed_value("animation", "none", "0s ease 0s 1 normal none running none"); +test_computed_value("animation", "anim", "0s ease 0s 1 normal none running anim"); + +test_computed_value("animation", "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)", + "1s cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim"); + +test_computed_value("animation", "anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)", + "0s ease 0s 1 reverse both paused anim, 1s cubic-bezier(0, -2, 1, 3) -3s 4 normal none running none"); + +// TODO: Add test with a single timing-function keyword. +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-computed.html new file mode 100644 index 0000000000..832466ac06 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: getComputedStyle().animationDelay</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-delay"> +<meta name="assert" content="animation-delay converts to seconds."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("animation-delay", "-500ms", "-0.5s"); +test_computed_value("animation-delay", "calc(2 * 3s)", "6s"); +test_computed_value("animation-delay", "20s, 10s"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-computed.html new file mode 100644 index 0000000000..9e0326b387 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-computed.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="target"></div> +<script> +test_computed_value("animation-delay-start", "initial", "0s"); +test_computed_value("animation-delay-start", "-500ms", "-0.5s"); +test_computed_value("animation-delay-start", "calc(2 * 3s)", "6s"); +test_computed_value("animation-delay-start", "20s, 10s"); + +test_computed_value("animation-delay-start", "cover 0%"); +test_computed_value("animation-delay-start", "COVER 0%", "cover 0%"); +test_computed_value("animation-delay-start", "cover 100%"); +test_computed_value("animation-delay-start", "cover 120%"); +test_computed_value("animation-delay-start", "cover 42%"); +test_computed_value("animation-delay-start", "cover -42%"); +test_computed_value("animation-delay-start", "contain 42%"); +test_computed_value("animation-delay-start", "exit 42%"); +test_computed_value("animation-delay-start", "exit calc(41% + 1%)", "exit 42%"); +test_computed_value("animation-delay-start", "exit 1%, cover 2%, contain 100%"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-invalid.html new file mode 100644 index 0000000000..bff31f3789 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> +test_invalid_value("animation-delay-start", "infinite"); +test_invalid_value("animation-delay-start", "0"); +test_invalid_value("animation-delay-start", "1s 2s"); +test_invalid_value("animation-delay-start", "1s / 2s"); +test_invalid_value("animation-delay-start", "100px"); +test_invalid_value("animation-delay-start", "100%"); + +test_invalid_value("animation-delay-start", "peek 50%"); +test_invalid_value("animation-delay-start", "50% contain"); +test_invalid_value("animation-delay-start", "50% cover"); +test_invalid_value("animation-delay-start", "50% entry"); +test_invalid_value("animation-delay-start", "50% enter"); +test_invalid_value("animation-delay-start", "50% exit"); +test_invalid_value("animation-delay-start", "contain contain"); +test_invalid_value("animation-delay-start", "auto"); +test_invalid_value("animation-delay-start", "none"); +test_invalid_value("animation-delay-start", "cover 50% enter 50%"); +test_invalid_value("animation-delay-start", "cover 100px"); +test_invalid_value("animation-delay-start", "cover"); +test_invalid_value("animation-delay-start", "contain"); +test_invalid_value("animation-delay-start", "enter"); +test_invalid_value("animation-delay-start", "exit"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-valid.html new file mode 100644 index 0000000000..22ab9fe3b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-valid.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> +test_valid_value("animation-delay-start", "-5ms"); +test_valid_value("animation-delay-start", "0s"); +test_valid_value("animation-delay-start", "10s"); +test_valid_value("animation-delay-start", "20s, 10s"); + +// https://drafts.csswg.org/scroll-animations-1/#view-timelines-ranges +test_valid_value("animation-delay-start", "cover 0%"); +test_valid_value("animation-delay-start", "cover 100%"); +test_valid_value("animation-delay-start", "cover 120%"); +test_valid_value("animation-delay-start", "cover 42%"); +test_valid_value("animation-delay-start", "cover -42%"); +test_valid_value("animation-delay-start", "contain 42%"); +test_valid_value("animation-delay-start", "exit 42%"); +test_valid_value("animation-delay-start", "exit 1%, cover 2%, contain 100%"); + +// There's an open issue in the spec about "enter" vs "entry". +// +// https://drafts.csswg.org/scroll-animations-1/#valdef-animation-timeline-range-entry +test_valid_value("animation-delay-start", "enter 42%"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-invalid.html new file mode 100644 index 0000000000..1569497bb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-delay with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-delay"> +<meta name="assert" content="animation-delay supports only the grammar '<single-animation-play-state> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("animation-delay", "infinite"); +test_invalid_value("animation-delay", "0"); +test_invalid_value("animation-delay", "1s 2s 3s"); + +test_invalid_value("animation-delay", "initial, -3s"); +test_invalid_value("animation-delay", "-3s, initial"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand-computed.html new file mode 100644 index 0000000000..01b1375dc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand-computed.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>animation-delay shorthand (computed values)</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/computed-testcommon.js"></script> +<div id="target"></div> +<script> +test_computed_value("animation-delay", "1s"); +test_computed_value("animation-delay", "-1s"); +test_computed_value("animation-delay", "1s 2s"); +test_computed_value("animation-delay", "1s, 2s"); +test_computed_value("animation-delay", "1s 2s, 3s"); +test_computed_value("animation-delay", "1s, 2s 3s"); +test_computed_value("animation-delay", "1s, 2s, 3s"); + +test_computed_value("animation-delay", "cover"); +test_computed_value("animation-delay", "contain"); +test_computed_value("animation-delay", "enter"); +test_computed_value("animation-delay", "exit"); +test_computed_value("animation-delay", "enter, exit"); + +test_computed_value("animation-delay", "enter 0% enter 100%", "enter"); +test_computed_value("animation-delay", "exit 0% exit 100%", "exit"); +test_computed_value("animation-delay", "cover 0% cover 100%", "cover"); +test_computed_value("animation-delay", "contain 0% contain 100%", "contain"); + +test_computed_value("animation-delay", "cover 50%"); +test_computed_value("animation-delay", "contain 50%"); +test_computed_value("animation-delay", "enter 50%"); +test_computed_value("animation-delay", "exit 50%"); + +test_computed_value("animation-delay", "enter 50% 0s", "enter 50%"); +test_computed_value("animation-delay", "0s enter 50%"); +test_computed_value("animation-delay", "enter 50% exit 50%"); +test_computed_value("animation-delay", "cover 50% enter 50%, contain 50% exit 50%"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand.html new file mode 100644 index 0000000000..f09f0a948c --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand.html @@ -0,0 +1,103 @@ +<!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> +</head> +<body> +<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_valid_value("animation-delay", "cover"); +test_valid_value("animation-delay", "contain"); +test_valid_value("animation-delay", "enter"); +test_valid_value("animation-delay", "exit"); +test_valid_value("animation-delay", "enter, exit"); + +test_valid_value("animation-delay", "enter 0% enter 100%", "enter"); +test_valid_value("animation-delay", "exit 0% exit 100%", "exit"); +test_valid_value("animation-delay", "cover 0% cover 100%", "cover"); +test_valid_value("animation-delay", "contain 0% contain 100%", "contain"); + +test_valid_value("animation-delay", "cover 50%"); +test_valid_value("animation-delay", "contain 50%"); +test_valid_value("animation-delay", "enter 50%"); +test_valid_value("animation-delay", "exit 50%"); + +test_valid_value("animation-delay", "enter 50% 0s", "enter 50%"); +test_valid_value("animation-delay", "0s enter 50%"); +test_valid_value("animation-delay", "enter 50% exit 50%"); +test_valid_value("animation-delay", "cover 50% enter 50%, contain 50% exit 50%"); + +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', 'cover', { + 'animation-delay-start': 'cover 0%', + 'animation-delay-end': 'cover 100%', +}); + +test_shorthand_value('animation-delay', 'contain', { + 'animation-delay-start': 'contain 0%', + 'animation-delay-end': 'contain 100%', +}); + +test_shorthand_value('animation-delay', 'enter 10% exit 20%', { + 'animation-delay-start': 'enter 10%', + 'animation-delay-end': 'exit 20%', +}); + +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', +}); + +test_shorthand_value('animation-delay', 'enter, exit', { + 'animation-delay-start': 'enter 0%, exit 0%', + 'animation-delay-end': 'enter 100%, exit 100%', +}); + +test_shorthand_value('animation-delay', 'enter 0%, exit', { + 'animation-delay-start': 'enter 0%, exit 0%', + 'animation-delay-end': '0s, exit 100%', +}); + +test_shorthand_value('animation-delay', 'enter 0% 1s, 2s exit 50%', { + 'animation-delay-start': 'enter 0%, 2s', + 'animation-delay-end': '1s, exit 50%', +}); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-computed.html new file mode 100644 index 0000000000..9e0326b387 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-computed.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="target"></div> +<script> +test_computed_value("animation-delay-start", "initial", "0s"); +test_computed_value("animation-delay-start", "-500ms", "-0.5s"); +test_computed_value("animation-delay-start", "calc(2 * 3s)", "6s"); +test_computed_value("animation-delay-start", "20s, 10s"); + +test_computed_value("animation-delay-start", "cover 0%"); +test_computed_value("animation-delay-start", "COVER 0%", "cover 0%"); +test_computed_value("animation-delay-start", "cover 100%"); +test_computed_value("animation-delay-start", "cover 120%"); +test_computed_value("animation-delay-start", "cover 42%"); +test_computed_value("animation-delay-start", "cover -42%"); +test_computed_value("animation-delay-start", "contain 42%"); +test_computed_value("animation-delay-start", "exit 42%"); +test_computed_value("animation-delay-start", "exit calc(41% + 1%)", "exit 42%"); +test_computed_value("animation-delay-start", "exit 1%, cover 2%, contain 100%"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-invalid.html new file mode 100644 index 0000000000..bff31f3789 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> +test_invalid_value("animation-delay-start", "infinite"); +test_invalid_value("animation-delay-start", "0"); +test_invalid_value("animation-delay-start", "1s 2s"); +test_invalid_value("animation-delay-start", "1s / 2s"); +test_invalid_value("animation-delay-start", "100px"); +test_invalid_value("animation-delay-start", "100%"); + +test_invalid_value("animation-delay-start", "peek 50%"); +test_invalid_value("animation-delay-start", "50% contain"); +test_invalid_value("animation-delay-start", "50% cover"); +test_invalid_value("animation-delay-start", "50% entry"); +test_invalid_value("animation-delay-start", "50% enter"); +test_invalid_value("animation-delay-start", "50% exit"); +test_invalid_value("animation-delay-start", "contain contain"); +test_invalid_value("animation-delay-start", "auto"); +test_invalid_value("animation-delay-start", "none"); +test_invalid_value("animation-delay-start", "cover 50% enter 50%"); +test_invalid_value("animation-delay-start", "cover 100px"); +test_invalid_value("animation-delay-start", "cover"); +test_invalid_value("animation-delay-start", "contain"); +test_invalid_value("animation-delay-start", "enter"); +test_invalid_value("animation-delay-start", "exit"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-valid.html new file mode 100644 index 0000000000..22ab9fe3b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-valid.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> +test_valid_value("animation-delay-start", "-5ms"); +test_valid_value("animation-delay-start", "0s"); +test_valid_value("animation-delay-start", "10s"); +test_valid_value("animation-delay-start", "20s, 10s"); + +// https://drafts.csswg.org/scroll-animations-1/#view-timelines-ranges +test_valid_value("animation-delay-start", "cover 0%"); +test_valid_value("animation-delay-start", "cover 100%"); +test_valid_value("animation-delay-start", "cover 120%"); +test_valid_value("animation-delay-start", "cover 42%"); +test_valid_value("animation-delay-start", "cover -42%"); +test_valid_value("animation-delay-start", "contain 42%"); +test_valid_value("animation-delay-start", "exit 42%"); +test_valid_value("animation-delay-start", "exit 1%, cover 2%, contain 100%"); + +// There's an open issue in the spec about "enter" vs "entry". +// +// https://drafts.csswg.org/scroll-animations-1/#valdef-animation-timeline-range-entry +test_valid_value("animation-delay-start", "enter 42%"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-valid.html new file mode 100644 index 0000000000..5ff0416cc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-delay with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-delay"> +<meta name="assert" content="animation-delay supports the full grammar '<single-animation-play-state> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("animation-delay", "-5ms"); +test_valid_value("animation-delay", "0s"); +test_valid_value("animation-delay", "10s"); +test_valid_value("animation-delay", "20s, 10s"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-direction-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-direction-computed.html new file mode 100644 index 0000000000..d99038b3ba --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-direction-computed.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: getComputedStyle().animationDirection</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-direction"> +<meta name="assert" content="animation-direction computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("animation-direction", "normal, reverse, alternate, alternate-reverse"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-direction-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-direction-invalid.html new file mode 100644 index 0000000000..5c96216d04 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-direction-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-direction with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-direction"> +<meta name="assert" content="animation-direction supports only the grammar '<single-animation-direction> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("animation-direction", "auto"); +test_invalid_value("animation-direction", "normal reverse"); + +test_invalid_value("animation-direction", "reverse, initial"); +test_invalid_value("animation-direction", "initial, reverse"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-direction-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-direction-valid.html new file mode 100644 index 0000000000..bcc9acc342 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-direction-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-direction with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-direction"> +<meta name="assert" content="animation-direction supports the full grammar '<single-animation-direction> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("animation-direction", "normal"); +test_valid_value("animation-direction", "reverse"); +test_valid_value("animation-direction", "alternate"); +test_valid_value("animation-direction", "alternate-reverse"); +test_valid_value("animation-direction", "normal, reverse, alternate, alternate-reverse"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-duration-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-computed.html new file mode 100644 index 0000000000..ef2ef69059 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: getComputedStyle().animationDuration</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-duration"> +<meta name="assert" content="animation-duration converts to seconds."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("animation-duration", "500ms", "0.5s"); +test_computed_value("animation-duration", "calc(2 * 3s)", "6s"); +test_computed_value("animation-duration", "20s, 10s"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-duration-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-invalid.html new file mode 100644 index 0000000000..bd8cf2adfe --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-duration with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-duration"> +<meta name="assert" content="animation-duration supports only the grammar '<time> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("animation-duration", '-3s'); +test_invalid_value("animation-duration", '0'); +test_invalid_value("animation-duration", 'infinite'); +test_invalid_value("animation-duration", '1s 2s'); + +test_invalid_value("animation-duration", 'initial, 1s'); +test_invalid_value("animation-duration", '1s, initial'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-duration-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-valid.html new file mode 100644 index 0000000000..e65a1a7072 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-duration with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-duration"> +<meta name="assert" content="animation-duration supports the full grammar '<time> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("animation-duration", '3s'); +test_valid_value("animation-duration", '500ms'); +test_valid_value("animation-duration", '1s, 2s, 3s'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-computed.html new file mode 100644 index 0000000000..f4083b3833 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-computed.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: getComputedStyle().animationFillMode</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-fill-mode"> +<meta name="assert" content="animation-fill-mode computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("animation-fill-mode", "none, forwards, backwards, both"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-invalid.html new file mode 100644 index 0000000000..2a82f23546 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-fill-mode with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-fill-mode"> +<meta name="assert" content="animation-fill-mode supports only the grammar '<single-animation-fill-mode> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("animation-fill-mode", "auto"); +test_invalid_value("animation-fill-mode", "forwards backwards"); + +test_invalid_value("animation-fill-mode", "both, initial"); +test_invalid_value("animation-fill-mode", "initial, both"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-valid.html new file mode 100644 index 0000000000..1f73a821d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-fill-mode with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-fill-mode"> +<meta name="assert" content="animation-fill-mode supports the full grammar '<single-animation-fill-mode> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("animation-fill-mode", "none"); +test_valid_value("animation-fill-mode", "forwards"); +test_valid_value("animation-fill-mode", "backwards"); +test_valid_value("animation-fill-mode", "both"); +test_valid_value("animation-fill-mode", "none, forwards, backwards, both"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-invalid.html new file mode 100644 index 0000000000..dce5c29fdc --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-invalid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation"> +<meta name="assert" content="animation supports only the grammar '<single-animation> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("animation", "1s 2s 3s"); +test_invalid_value("animation", "-1s -2s"); + +test_invalid_value("animation", "steps(1) steps(2)"); + +test_invalid_value("animation", "1 2"); + +test_invalid_value("animation", "reverse alternate alternate-reverse anim"); + +test_invalid_value("animation", "both backwards forwards anim"); + +test_invalid_value("animation", "paused running paused anim"); + +test_invalid_value("animation", "anim1 timeline1 anim2"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-computed.html new file mode 100644 index 0000000000..0ac53aa651 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-computed.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: getComputedStyle().animationIterationCount</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-iteration-count"> +<meta name="assert" content="animation-iteration-count computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("animation-iteration-count", "0, infinite, 3"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-invalid.html new file mode 100644 index 0000000000..621340f7c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-iteration-count with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-iteration-count"> +<meta name="assert" content="animation-iteration-count supports only the grammar '<single-animation-iteration-count> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("animation-iteration-count", "auto"); +test_invalid_value("animation-iteration-count", "-2"); +test_invalid_value("animation-iteration-count", "3 4"); + +test_invalid_value("animation-iteration-count", "initial, 4"); +test_invalid_value("animation-iteration-count", "4, initial"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-valid.html new file mode 100644 index 0000000000..be8a837989 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-valid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-iteration-count with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-iteration-count"> +<meta name="assert" content="animation-iteration-count supports the full grammar '<single-animation-iteration-count> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("animation-iteration-count", "0"); +test_valid_value("animation-iteration-count", "3"); +test_valid_value("animation-iteration-count", "4.5"); +test_valid_value("animation-iteration-count", "infinite"); + +test_valid_value("animation-iteration-count", "0, infinite, 3"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-name-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-name-computed.html new file mode 100644 index 0000000000..f05dd8b013 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-name-computed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: getComputedStyle().animationName</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-name"> +<meta name="assert" content="animation-name computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("animation-name", 'none'); + +test_computed_value("animation-name", 'foo'); +test_computed_value("animation-name", 'Both'); +test_computed_value("animation-name", 'ease-in'); +test_computed_value("animation-name", 'infinite'); +test_computed_value("animation-name", 'paused'); +test_computed_value("animation-name", 'first, second, third'); +test_computed_value("animation-name", '"something"', ["something", '"something"']); + +// TODO: Test more strings, after https://github.com/w3c/csswg-drafts/issues/2435 +// is resolved. +// Examples that need testing either here or in animation-name-invalid.html : +// '"Initial"', '"initial"', '"None"', '"Default"', '" x "', "1", '" "', '""', +// '"multi word string"', '"---\\22---"' +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-name-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-name-invalid.html new file mode 100644 index 0000000000..739641a51d --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-name-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-name with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-name"> +<meta name="assert" content="animation-name supports only the grammar '[ none | <keyframes-name> ]#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("animation-name", '12'); +test_invalid_value("animation-name", 'one two'); + +test_invalid_value("animation-name", 'one, initial'); +test_invalid_value("animation-name", 'one, inherit'); +test_invalid_value("animation-name", 'one, unset'); +test_invalid_value("animation-name", 'default, two'); +test_invalid_value("animation-name", 'revert, three'); +test_invalid_value("animation-name", 'revert-layer, four'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-name-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-name-valid.html new file mode 100644 index 0000000000..1906f9bdb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-name-valid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-name with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-name"> +<meta name="assert" content="animation-name supports the full grammar '[ none | <keyframes-name> ]#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("animation-name", 'NONE', 'none'); + +test_valid_value("animation-name", 'foo'); +test_valid_value("animation-name", 'Both'); +test_valid_value("animation-name", 'ease-in'); +test_valid_value("animation-name", 'infinite'); +test_valid_value("animation-name", 'paused'); +test_valid_value("animation-name", 'first, second, third'); + +test_valid_value("animation-name", '"string"', ['"string"', "string"]); +test_valid_value("animation-name", '"multi word string"', ['"multi word string"', "multi\\ word\\ string"]); +test_valid_value("animation-name", '"initial"'); +test_valid_value("animation-name", '"---\\22---"', ['\"---\\\"---\"', '---\\\"---']); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-computed.html new file mode 100644 index 0000000000..c3ff2aa95f --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-computed.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: getComputedStyle().animationPlayState</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-play-state"> +<meta name="assert" content="animation-play-state computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("animation-play-state", "running, paused"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-invalid.html new file mode 100644 index 0000000000..91a6f01737 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-play-state with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-play-state"> +<meta name="assert" content="animation-play-state supports only the grammar '<single-animation-play-state> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("animation-play-state", "auto"); +test_invalid_value("animation-play-state", "paused running"); + +test_invalid_value("animation-play-state", "paused, initial"); +test_invalid_value("animation-play-state", "initial, paused"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-valid.html new file mode 100644 index 0000000000..ce6d053ec2 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation-play-state with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-play-state"> +<meta name="assert" content="animation-play-state supports the full grammar '<single-animation-play-state> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("animation-play-state", "running"); +test_valid_value("animation-play-state", "paused"); +test_valid_value("animation-play-state", "running, paused"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.html b/testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.html new file mode 100644 index 0000000000..b981ad3ad6 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: animation sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation"> +<meta name="assert" content="animation supports the full grammar '<single-animation> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('animation', 'anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)', { + 'animation-duration': '1s', + 'animation-timing-function': 'cubic-bezier(0, -2, 1, 3)', + 'animation-delay': '-3s', + 'animation-iteration-count': '4', + 'animation-direction': 'reverse', + 'animation-fill-mode': 'both', + 'animation-play-state': 'paused', + 'animation-name': 'anim', + 'animation-timeline': 'auto' +}); + +test_shorthand_value('animation', 'anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)', { + 'animation-duration': '0s, 1s', + 'animation-timing-function': 'ease, cubic-bezier(0, -2, 1, 3)', + 'animation-delay': '0s, -3s', + 'animation-iteration-count': '1, 4', + 'animation-direction': 'reverse, normal', + 'animation-fill-mode': 'both, none', + 'animation-play-state': 'paused, running', + 'animation-name': 'anim, none', + 'animation-timeline': 'auto, auto' +}); + +test_shorthand_value('animation', '4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse', { + 'animation-duration': '1s, 0s', + 'animation-timing-function': 'cubic-bezier(0, -2, 1, 3), ease', + 'animation-delay': '-3s, 0s', + 'animation-iteration-count': '4, 1', + 'animation-direction': 'normal, reverse', + 'animation-fill-mode': 'none, both', + 'animation-play-state': 'running, paused', + 'animation-name': 'none, anim', + 'animation-timeline': 'auto, auto' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.tentative.html new file mode 100644 index 0000000000..ac3613cf82 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.tentative.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation"> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +<script> +// TODO(https://github.com/w3c/csswg-drafts/issues/8054): When support for +// animation-delay-start and -end is added to the animation shorthand, this +// file should just merge with animation-shorthand.html. +test_shorthand_value('animation', 'anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)', { + 'animation-duration': '1s', + 'animation-timing-function': 'cubic-bezier(0, -2, 1, 3)', + 'animation-delay-start': '-3s', + 'animation-delay-end': '0s', + 'animation-iteration-count': '4', + 'animation-direction': 'reverse', + 'animation-fill-mode': 'both', + 'animation-play-state': 'paused', + 'animation-name': 'anim', + 'animation-timeline': 'auto' +}); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-valid.html new file mode 100644 index 0000000000..4027ee1226 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-valid.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing animation with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation"> +<meta name="assert" content="animation supports the full grammar '<single-animation> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// <single-animation> = <time> || <easing-function> || <time> || +// <single-animation-iteration-count> || <single-animation-direction> || +// <single-animation-fill-mode> || <single-animation-play-state> || +// [ none | <keyframes-name> ] +test_valid_value("animation", "1s", ["1s", "1s ease 0s 1 normal none running none"]); +test_valid_value("animation", "cubic-bezier(0, -2, 1, 3)", ["cubic-bezier(0, -2, 1, 3)", "0s cubic-bezier(0, -2, 1, 3) 0s 1 normal none running none"]); +test_valid_value("animation", "1s -3s", ["1s -3s", "1s ease -3s 1 normal none running none"]); +test_valid_value("animation", "4", ["4", "0s ease 0s 4 normal none running none"]); +test_valid_value("animation", "reverse", ["reverse", "0s ease 0s 1 reverse none running none"]); +test_valid_value("animation", "both", ["both", "0s ease 0s 1 normal both running none"]); +test_valid_value("animation", "paused", ["paused", "0s ease 0s 1 normal none paused none"]); +test_valid_value("animation", "none", ["0s", "none", "0s ease 0s 1 normal none running none"]); +test_valid_value("animation", "anim", ["anim", "0s ease 0s 1 normal none running anim"]); + +test_valid_value("animation", "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)", + "1s cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim"); + +test_valid_value("animation", "anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)", + ["reverse both paused anim, 1s cubic-bezier(0, -2, 1, 3) -3s 4", "0s ease 0s 1 reverse both paused anim, 1s cubic-bezier(0, -2, 1, 3) -3s 4 normal none running none"]); + +// TODO: Add test with a single negative time. +// TODO: Add test with a single timing-function keyword. +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-animations/parsing/keyframes-allowed-properties.html b/testing/web-platform/tests/css/css-animations/parsing/keyframes-allowed-properties.html new file mode 100644 index 0000000000..f682920b35 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/keyframes-allowed-properties.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>Tests which properties are allowed in @keyframes</title> +<link rel="help" href="https://drafts.csswg.org/css-animations/#typedef-keyframe-block"> +<link rel="author" href="mailto:xiaochengh@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style id=sheet> +@keyframes foo { + from { + /* Non-animation properties are allowed */ + margin-top: 10px; + /* animation-timing-function is specially allowed */ + animation-timing-function: ease; + /* All other animation properties are not allowed */ + animation-name: none; + animation-duration: 1s; + animation-iteration-count: 1; + animation-direction: normal; + animation-play-state: running; + animation-delay: 0s; + animation-fill-mode: none; + /* The animation shorthand is also not allowed */ + animation: bar 1s infinite; + } +} +</style> +<script> +test(() => { + const keyframe = sheet.sheet.cssRules[0].cssRules[0]; + const style = keyframe.style; + assert_equals(style.length, 2); + assert_equals(style.marginTop, '10px'); + assert_equals(style.animationTimingFunction, 'ease'); +}, '@keyframes allows all non-animation properties and animation-timing-function'); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/keyframes-name-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/keyframes-name-invalid.html new file mode 100644 index 0000000000..f14dff3e2c --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/keyframes-name-invalid.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>CSS Animations: parsing @keyframes name with invalid values</title> + <link rel="author" title="yisibl(一丝)" href="https://github.com/yisibl"/> + <link rel="help" href="https://drafts.csswg.org/css-animations/#typedef-keyframes-name"> + <meta name="assert" content="@keyframes name supports the full grammar '<custom-ident> | <string>'."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> + <div> + <main id="main"></main> + </div> + <script> + test_keyframes_name_invalid('none'); + + // The CSS-wide keywords are not valid <custom-ident>s. The default keyword is reserved and is also not a valid <custom-ident>. + // Spec: https://drafts.csswg.org/css-values-4/#identifier-value + test_keyframes_name_invalid('default'); + test_keyframes_name_invalid('initial'); + test_keyframes_name_invalid('inherit'); + test_keyframes_name_invalid('unset'); + test_keyframes_name_invalid('revert'); + test_keyframes_name_invalid('revert-layer'); + + test_keyframes_name_invalid('12'); + test_keyframes_name_invalid('-12'); + test_keyframes_name_invalid('12foo'); + test_keyframes_name_invalid('foo.bar'); + test_keyframes_name_invalid('one two'); + test_keyframes_name_invalid('one, two'); + + test_keyframes_name_invalid('one, initial'); + test_keyframes_name_invalid('one, inherit'); + test_keyframes_name_invalid('one, unset'); + test_keyframes_name_invalid('default, two'); + test_keyframes_name_invalid('revert, three'); + test_keyframes_name_invalid('revert-layer, four'); + // TODO: https://bugs.chromium.org/p/chromium/issues/detail?id=1342609 + // test_keyframes_name_invalid('--foo'); + </script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-animations/parsing/keyframes-name-valid.html b/testing/web-platform/tests/css/css-animations/parsing/keyframes-name-valid.html new file mode 100644 index 0000000000..f44540e924 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/keyframes-name-valid.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>CSS Animations: parsing @keyframes name with valid values</title> + <link rel="author" title="yisibl(一丝)" href="https://github.com/yisibl"/> + <link rel="help" href="https://drafts.csswg.org/css-animations/#typedef-keyframes-name"> + <meta name="assert" content="@keyframes name supports the full grammar '<custom-ident> | <string>'."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> + <div> + <main id="main"></main> + </div> + <script> + // Test <custom-ident> + test_keyframes_name_valid(' foo '); + test_keyframes_name_valid(' foo'); + test_keyframes_name_valid('-foo'); + test_keyframes_name_valid('_bar'); + test_keyframes_name_valid('__bar'); + test_keyframes_name_valid('__bar__'); + test_keyframes_name_valid('ease-out'); + test_keyframes_name_valid('example'); + test_keyframes_name_valid('EXAMPLE'); + + test_keyframes_name_valid('not'); + test_keyframes_name_valid('and'); + test_keyframes_name_valid('all'); + test_keyframes_name_valid('or'); + + // <custom-ident> may disable the `auto/normal` keywords in the future + // https://github.com/w3c/csswg-drafts/issues/7431 + test_keyframes_name_valid('auto'); + test_keyframes_name_valid('normal'); + + // Test <string> + test_keyframes_name_valid('" foo "'); + test_keyframes_name_valid('" foo"'); + test_keyframes_name_valid('"-foo"'); + test_keyframes_name_valid('"_bar"'); + test_keyframes_name_valid('"__bar"'); + test_keyframes_name_valid('"__bar__"'); + test_keyframes_name_valid('"ease-out"'); + test_keyframes_name_valid('"example"'); + test_keyframes_name_valid('"EXAMPLE"'); + + test_keyframes_name_valid('"one two"'); + test_keyframes_name_valid('"one, two"'); + + test_keyframes_name_valid('"not"'); + test_keyframes_name_valid('"and"'); + test_keyframes_name_valid('"all"'); + test_keyframes_name_valid('"or"'); + + test_keyframes_name_valid('"auto"'); + test_keyframes_name_valid('"normal"'); + test_keyframes_name_valid('"none"'); + + test_keyframes_name_valid('"default"'); + test_keyframes_name_valid('"initial"'); + test_keyframes_name_valid('"inherit"'); + test_keyframes_name_valid('"unset"'); + test_keyframes_name_valid('"revert"'); + test_keyframes_name_valid('"revert-layer"'); + </script> +</body> +</html>
\ No newline at end of file |