diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-animations/parsing | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-animations/parsing')
46 files changed, 1383 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..2a70585aad --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-computed.html @@ -0,0 +1,52 @@ +<!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, "none"); +}, "Default animation value"); + +test_computed_value("animation", "1s", "1s"); +test_computed_value("animation", "cubic-bezier(0, -2, 1, 3)", "cubic-bezier(0, -2, 1, 3)"); +test_computed_value("animation", "ease-in-out", "ease-in-out"); +test_computed_value("animation", "1s -3s", "1s -3s"); +test_computed_value("animation", "4", "4"); +test_computed_value("animation", "reverse", "reverse"); +test_computed_value("animation", "both", "both"); +test_computed_value("animation", "paused", "paused"); +test_computed_value("animation", "none", "none"); +test_computed_value("animation", "anim", "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)", + "reverse both paused anim, 1s cubic-bezier(0, -2, 1, 3) -3s 4"); + +test_computed_value("animation", "none, none", "none, none"); + +test(() => { + const target = document.getElementById('target'); + target.style.animation = "initial"; + target.style.animationDelay = "1s"; + assert_equals(getComputedStyle(target).animation, "0s 1s"); +}, "Animation with a delay but no duration"); + +</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.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-computed.tentative.html new file mode 100644 index 0000000000..77f9670638 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-computed.tentative.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-end"> +<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-end", "initial", "0s"); +test_computed_value("animation-delay-end", "-500ms", "-0.5s"); +test_computed_value("animation-delay-end", "calc(2 * 3s)", "6s"); +test_computed_value("animation-delay-end", "20s, 10s"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-invalid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-invalid.tentative.html new file mode 100644 index 0000000000..7cabd4e8e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-invalid.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-end"> +<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-end", "infinite"); +test_invalid_value("animation-delay-end", "0"); +test_invalid_value("animation-delay-end", "1s 2s"); +test_invalid_value("animation-delay-end", "1s / 2s"); +test_invalid_value("animation-delay-end", "100px"); +test_invalid_value("animation-delay-end", "100%"); + +test_invalid_value("animation-delay-end", "peek 50%"); +test_invalid_value("animation-delay-end", "50% contain"); +test_invalid_value("animation-delay-end", "50% cover"); +test_invalid_value("animation-delay-end", "50% entry"); +test_invalid_value("animation-delay-end", "50% enter"); +test_invalid_value("animation-delay-end", "50% exit"); +test_invalid_value("animation-delay-end", "contain contain"); +test_invalid_value("animation-delay-end", "auto"); +test_invalid_value("animation-delay-end", "none"); +test_invalid_value("animation-delay-end", "cover 50% enter 50%"); +test_invalid_value("animation-delay-end", "cover 100px"); +test_invalid_value("animation-delay-end", "cover"); +test_invalid_value("animation-delay-end", "contain"); +test_invalid_value("animation-delay-end", "enter"); +test_invalid_value("animation-delay-end", "exit"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-valid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-valid.tentative.html new file mode 100644 index 0000000000..162c781bb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-valid.tentative.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-end"> +<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-end", "-5ms"); +test_valid_value("animation-delay-end", "0s"); +test_valid_value("animation-delay-end", "10s"); +test_valid_value("animation-delay-end", "20s, 10s"); +</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..0a1eb96041 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand-computed.html @@ -0,0 +1,16 @@ +<!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"); +</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..5c74a4d8e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand.html @@ -0,0 +1,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> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-computed.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-computed.tentative.html new file mode 100644 index 0000000000..bfb89d0267 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-computed.tentative.html @@ -0,0 +1,12 @@ +<!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"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-invalid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-invalid.tentative.html new file mode 100644 index 0000000000..bff31f3789 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-invalid.tentative.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.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-valid.tentative.html new file mode 100644 index 0000000000..f52286444e --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-valid.tentative.html @@ -0,0 +1,11 @@ +<!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"); +</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..a8bc1600f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-computed.html @@ -0,0 +1,48 @@ +<!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"); + +// https://github.com/w3c/csswg-drafts/issues/6530 +test_computed_value("animation-duration", "auto", "0s"); +test_computed_value("animation-duration", "auto, auto", "0s, 0s"); + +// Test that the resolved value of the specified animation-duration +// is as expected given some value for animation-timeline. +function test_auto_duration(duration, timeline, expected) { + test((t) => { + t.add_cleanup(() => { + target.style = ""; + }); + target.style.animationDuration = duration; + target.style.animationTimeline = timeline; + assert_equals(expected, getComputedStyle(target).animationDuration); + }, `Resolved value of animation-duration:${duration} with animation-timeline:${timeline}`); +} + +test_auto_duration("auto", "auto", "0s"); +test_auto_duration("auto", "auto, auto", "auto"); +test_auto_duration("auto", "--t", "auto"); +test_auto_duration("auto", "--t, --t2", "auto"); +test_auto_duration("auto", "none", "auto"); +test_auto_duration("auto", "scroll()", "auto"); +test_auto_duration("auto", "view()", "auto"); +test_auto_duration("0s", "auto", "0s"); +test_auto_duration("0s", "auto, auto", "0s"); + +</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-range-end-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-computed.html new file mode 100644 index 0000000000..4c96ee81b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-computed.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<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/computed-testcommon.js"></script> +<div id="target" style="font-size:10px;"></div> +<script> +test_computed_value("animation-range-end", "initial", "normal"); +test_computed_value("animation-range-end", "normal"); +test_computed_value("animation-range-end", "cover 0%"); +test_computed_value("animation-range-end", "cover 100%", "cover"); +test_computed_value("animation-range-end", "COVER 0%", "cover 0%"); +test_computed_value("animation-range-end", "COVER 100%", "cover"); +test_computed_value("animation-range-end", "cover 120%"); +test_computed_value("animation-range-end", "0", "0px"); +test_computed_value("animation-range-end", "120%"); +test_computed_value("animation-range-end", "120px"); +test_computed_value("animation-range-end", "cover 42%"); +test_computed_value("animation-range-end", "cover -42%"); +test_computed_value("animation-range-end", "contain 42%"); +test_computed_value("animation-range-end", "exit 42%"); +test_computed_value("animation-range-end", "exit calc(41% + 1%)", "exit 42%"); +test_computed_value("animation-range-end", "exit-crossing 42%"); +test_computed_value("animation-range-end", "exit 1%, cover 2%, contain 0%"); +test_computed_value("animation-range-end", "exit 1%, cover 2%, contain 100%", "exit 1%, cover 2%, contain"); +test_computed_value("animation-range-end", "entry 42px"); +test_computed_value("animation-range-end", "entry-crossing 42px"); + +test_computed_value("animation-range-end", "contain calc(10% + 10px)"); +test_computed_value("animation-range-end", "entry 1em", "entry 10px"); +test_computed_value("animation-range-end", "exit calc(1em + 10px)", "exit 20px"); +test_computed_value("animation-range-end", "cover"); +test_computed_value("animation-range-end", "contain"); +test_computed_value("animation-range-end", "entry"); +test_computed_value("animation-range-end", "exit"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-invalid.html new file mode 100644 index 0000000000..459cdfd0cd --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<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/parsing-testcommon.js"></script> +<script> +test_invalid_value("animation-range-end", "infinite"); +test_invalid_value("animation-range-end", "1s 2s"); +test_invalid_value("animation-range-end", "1s / 2s"); + +test_invalid_value("animation-range-end", "peek 50%"); +test_invalid_value("animation-range-end", "50% contain"); +test_invalid_value("animation-range-end", "50% cover"); +test_invalid_value("animation-range-end", "50% entry"); +test_invalid_value("animation-range-end", "50% enter"); +test_invalid_value("animation-range-end", "50% exit"); +test_invalid_value("animation-range-end", "contain contain"); +test_invalid_value("animation-range-end", "none"); +test_invalid_value("animation-range-end", "cover 50% enter 50%"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-valid.html new file mode 100644 index 0000000000..c394c475fc --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-end-valid.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<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/parsing-testcommon.js"></script> +<script> +// https://drafts.csswg.org/scroll-animations-1/#view-timelines-ranges +test_valid_value("animation-range-end", "normal"); +test_valid_value("animation-range-end", "cover 0%"); +test_valid_value("animation-range-end", "cover 100%", "cover"); +test_valid_value("animation-range-end", "cover 120%"); +test_valid_value("animation-range-end", "cover 42%"); +test_valid_value("animation-range-end", "0", "0px"); +test_valid_value("animation-range-end", "120%"); +test_valid_value("animation-range-end", "120px"); +test_valid_value("animation-range-end", "cover -42%"); +test_valid_value("animation-range-end", "contain 42%"); +test_valid_value("animation-range-end", "exit 42%"); +test_valid_value("animation-range-end", "exit 1%, cover 2%, contain 0%"); +test_valid_value("animation-range-end", "exit 1%, cover 2%, contain 100%", "exit 1%, cover 2%, contain"); +test_valid_value("animation-range-end", "exit-crossing 42%"); +test_valid_value("animation-range-end", "entry 42px"); +test_valid_value("animation-range-end", "entry-crossing 42px"); +test_valid_value("animation-range-end", "contain calc(10px + 10%)", "contain calc(10% + 10px)"); +test_valid_value("animation-range-end", "entry 1em"); +test_valid_value("animation-range-end", "exit calc(1em + 10px)"); +test_valid_value("animation-range-end", "entry 42%"); +test_valid_value("animation-range-end", "cover"); +test_valid_value("animation-range-end", "contain"); +test_valid_value("animation-range-end", "entry"); +test_valid_value("animation-range-end", "exit"); +</script> 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> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-computed.html new file mode 100644 index 0000000000..044aea2ca6 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-computed.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<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/computed-testcommon.js"></script> +<div id="target" style="font-size:10px;"></div> +<script> +test_computed_value("animation-range-start", "initial", "normal"); +test_computed_value("animation-range-start", "normal"); +test_computed_value("animation-range-start", "cover 0%", "cover"); +test_computed_value("animation-range-start", "cover 100%"); +test_computed_value("animation-range-start", "COVER 0%", "cover"); +test_computed_value("animation-range-start", "COVER 100%", "cover 100%"); +test_computed_value("animation-range-start", "cover 120%"); +test_computed_value("animation-range-start", "cover 42%"); +test_computed_value("animation-range-start", "0", "0px"); +test_computed_value("animation-range-start", "120%"); +test_computed_value("animation-range-start", "120px"); +test_computed_value("animation-range-start", "cover -42%"); +test_computed_value("animation-range-start", "contain 42%"); +test_computed_value("animation-range-start", "exit 42%"); +test_computed_value("animation-range-start", "exit calc(41% + 1%)", "exit 42%"); +test_computed_value("animation-range-start", "exit 1%, cover 2%, contain 0%", "exit 1%, cover 2%, contain"); +test_computed_value("animation-range-start", "exit 1%, cover 2%, contain 100%"); +test_computed_value("animation-range-start", "exit-crossing 42%"); +test_computed_value("animation-range-start", "entry 42px"); +test_computed_value("animation-range-start", "entry-crossing 42px"); +test_computed_value("animation-range-start", "contain calc(10% + 10px)"); +test_computed_value("animation-range-start", "entry 1em", "entry 10px"); +test_computed_value("animation-range-start", "exit calc(1em + 10px)", "exit 20px"); +test_computed_value("animation-range-start", "cover"); +test_computed_value("animation-range-start", "contain"); +test_computed_value("animation-range-start", "entry"); +test_computed_value("animation-range-start", "exit"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-invalid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-invalid.html new file mode 100644 index 0000000000..32357d8bd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-invalid.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<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/parsing-testcommon.js"></script> +<script> +test_invalid_value("animation-range-start", "peek 50%"); +test_invalid_value("animation-range-start", "50% contain"); +test_invalid_value("animation-range-start", "50% cover"); +test_invalid_value("animation-range-start", "50% entry"); +test_invalid_value("animation-range-start", "50% enter"); +test_invalid_value("animation-range-start", "50% exit"); +test_invalid_value("animation-range-start", "contain contain"); +test_invalid_value("animation-range-start", "none"); +test_invalid_value("animation-range-start", "cover 50% enter 50%"); +</script> diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-valid.html b/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-valid.html new file mode 100644 index 0000000000..3ca885862e --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-range-start-valid.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<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/parsing-testcommon.js"></script> +<script> +// https://drafts.csswg.org/scroll-animations-1/#view-timelines-ranges +test_valid_value("animation-range-start", "normal"); +test_valid_value("animation-range-start", "cover 0%", "cover"); +test_valid_value("animation-range-start", "cover 100%"); +test_valid_value("animation-range-start", "cover 120%"); +test_valid_value("animation-range-start", "cover 42%"); +test_valid_value("animation-range-start", "0", "0px"); +test_valid_value("animation-range-start", "120%"); +test_valid_value("animation-range-start", "120px"); +test_valid_value("animation-range-start", "cover -42%"); +test_valid_value("animation-range-start", "contain 42%"); +test_valid_value("animation-range-start", "exit 42%"); +test_valid_value("animation-range-start", "exit 1%, cover 2%, contain 0%", "exit 1%, cover 2%, contain"); +test_valid_value("animation-range-start", "exit 1%, cover 2%, contain 100%"); +test_valid_value("animation-range-start", "exit-crossing 42%"); +test_valid_value("animation-range-start", "entry 42px"); +test_valid_value("animation-range-start", "entry-crossing 42px"); +test_valid_value("animation-range-start", "contain calc(10px + 10%)", "contain calc(10% + 10px)"); +test_valid_value("animation-range-start", "entry 1em"); +test_valid_value("animation-range-start", "exit calc(1em + 10px)"); +test_valid_value("animation-range-start", "entry 42%"); +test_valid_value("animation-range-start", "cover"); +test_valid_value("animation-range-start", "contain"); +test_valid_value("animation-range-start", "entry"); +test_valid_value("animation-range-start", "exit"); +</script> 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..0856ab24a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.html @@ -0,0 +1,57 @@ +<!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', + 'animation-range-start': 'normal', + 'animation-range-end': 'normal', +}); + +test_shorthand_value('animation', 'anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)', { + 'animation-duration': 'auto, 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', + 'animation-range-start': 'normal', + 'animation-range-end': 'normal', +}); + +test_shorthand_value('animation', '4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse', { + 'animation-duration': '1s, auto', + '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', + 'animation-range-start': 'normal', + 'animation-range-end': 'normal', +}); +</script> +</body> +</html> 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..0c5d5713e3 --- /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)", "auto 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", "auto ease 0s 4 normal none running none"]); +test_valid_value("animation", "reverse", ["reverse", "auto ease 0s 1 reverse none running none"]); +test_valid_value("animation", "both", ["both", "auto ease 0s 1 normal both running none"]); +test_valid_value("animation", "paused", ["paused", "auto ease 0s 1 normal none paused none"]); +test_valid_value("animation", "none", ["auto", "none", "auto ease 0s 1 normal none running none"]); +test_valid_value("animation", "anim", ["anim", "auto 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", "auto 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 |