diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-transitions/parsing')
17 files changed, 511 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-behavior.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-behavior.html new file mode 100644 index 0000000000..6e4729f9db --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-behavior.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/8857"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="target"></div> +<script> +test_valid_value('transition-behavior', 'normal'); +test_computed_value('transition-behavior', 'normal'); + +test_valid_value('transition-behavior', 'allow-discrete'); +test_computed_value('transition-behavior', 'allow-discrete'); + +test_valid_value('transition', 'allow-discrete display', 'display allow-discrete'); +test_computed_value('transition', 'allow-discrete display', 'display allow-discrete'); + +test_valid_value('transition', 'allow-discrete display 3s', 'display 3s allow-discrete'); +test_computed_value('transition', 'allow-discrete display 3s', 'display 3s allow-discrete'); + +test_valid_value('transition', 'allow-discrete display 3s 1s', 'display 3s 1s allow-discrete'); +test_computed_value('transition', 'allow-discrete display 3s 1s', 'display 3s 1s allow-discrete'); + +test_valid_value('transition', 'allow-discrete display 3s ease-in-out', 'display 3s ease-in-out allow-discrete'); +test_computed_value('transition', 'allow-discrete display 3s ease-in-out', 'display 3s ease-in-out allow-discrete'); + +test_valid_value('transition', 'allow-discrete display 3s ease-in-out 1s', 'display 3s ease-in-out 1s allow-discrete'); +test_computed_value('transition', 'allow-discrete display 3s ease-in-out 1s', 'display 3s ease-in-out 1s allow-discrete'); + +test_invalid_value('transition', 'asdf display'); +test_invalid_value('transition', 'display asdf'); + +// Putting "discrete" anywhere in the shorthand should still work +test_valid_value('transition', 'display allow-discrete 3s ease-in-out 1s', 'display 3s ease-in-out 1s allow-discrete'); +test_valid_value('transition', 'display 3s allow-discrete ease-in-out 1s', 'display 3s ease-in-out 1s allow-discrete'); +test_valid_value('transition', 'display 3s ease-in-out allow-discrete 1s', 'display 3s ease-in-out 1s allow-discrete'); +test_valid_value('transition', 'display 3s ease-in-out 1s allow-discrete', 'display 3s ease-in-out 1s allow-discrete'); +test_computed_value('transition', 'display allow-discrete 3s ease-in-out 1s', 'display 3s ease-in-out 1s allow-discrete'); +test_computed_value('transition', 'display 3s allow-discrete ease-in-out 1s', 'display 3s ease-in-out 1s allow-discrete'); +test_computed_value('transition', 'display 3s ease-in-out allow-discrete 1s', 'display 3s ease-in-out 1s allow-discrete'); +test_computed_value('transition', 'display 3s ease-in-out 1s allow-discrete', 'display 3s ease-in-out 1s allow-discrete'); + +// Serialization with multiple shorthands, including different order +test_valid_value('transition', + 'allow-discrete display, normal opacity, color', + 'display allow-discrete, opacity, color'); +test_computed_value('transition', + 'allow-discrete display, normal opacity, color', + 'display allow-discrete, opacity, color'); +test_valid_value('transition', + 'normal opacity, color, allow-discrete display', + 'opacity, color, display allow-discrete'); +test_computed_value('transition', + 'normal opacity, color, allow-discrete display', + 'opacity, color, display allow-discrete'); +</script> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-computed.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-computed.html new file mode 100644 index 0000000000..ccd7f7e583 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-computed.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: getComputedStyle().transition</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-shorthand-property"> +<meta name="assert" content="transition 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-transition> = [ none | <single-transition-property> ] || +// <time> || <easing-function> || <time> + +test(() => { + assert_equals(getComputedStyle(document.getElementById('target')).transition, "all"); +}, "Default transition value"); + +test_computed_value("transition", "1s"); +test_computed_value("transition", "cubic-bezier(0, -2, 1, 3)"); +test_computed_value("transition", "1s -3s"); +test_computed_value("transition", "none"); +test_computed_value("transition", "top"); + +test_computed_value("transition", "1s -3s cubic-bezier(0, -2, 1, 3) top", "top 1s cubic-bezier(0, -2, 1, 3) -3s"); +test_computed_value("transition", "1s -3s, cubic-bezier(0, -2, 1, 3) top", "1s -3s, top cubic-bezier(0, -2, 1, 3)"); + +test_computed_value("transition", "all, all"); + +test(() => { + const target = document.getElementById('target'); + target.style.transition = "initial"; + target.style.transitionDelay = "1s"; + assert_equals(getComputedStyle(target).transition, "0s 1s"); +}, "Transition with a delay but no duration"); + +// TODO: Add test with a single timing-function keyword. +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-delay-computed.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-delay-computed.html new file mode 100644 index 0000000000..8e5b0e80da --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-delay-computed.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: getComputedStyle().transitionDelay</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-delay"> +<meta name="assert" content="transition-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("transition-delay", "-500ms, calc(2 * 3s)", "-0.5s, 6s"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-delay-invalid.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-delay-invalid.html new file mode 100644 index 0000000000..4b7a143286 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-delay-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: parsing transition-delay with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-delay"> +<meta name="assert" content="transition-delay 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("transition-delay", 'infinite'); +test_invalid_value("transition-delay", '0'); +test_invalid_value("transition-delay", '500ms 0.5s'); + +test_invalid_value("transition-delay", '-3s, initial'); +test_invalid_value("transition-delay", 'initial, -3s'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-delay-valid.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-delay-valid.html new file mode 100644 index 0000000000..d6b42b9c05 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-delay-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: parsing transition-delay with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-delay"> +<meta name="assert" content="transition-delay 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("transition-delay", '0s'); +test_valid_value("transition-delay", '500ms'); +test_valid_value("transition-delay", '1s, 2s'); +test_valid_value("transition-delay", '-1s, -2s'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-duration-computed.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-duration-computed.html new file mode 100644 index 0000000000..f82b4e6d2d --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-duration-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: getComputedStyle().transitionDuration</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-duration"> +<meta name="assert" content="transition-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("transition-duration", "500ms", "0.5s"); +test_computed_value("transition-duration", "calc(2 * 3s)", "6s"); +test_computed_value("transition-duration", "20s, 10s"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-duration-invalid.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-duration-invalid.html new file mode 100644 index 0000000000..4474089bbb --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-duration-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: parsing transition-duration with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-duration"> +<meta name="assert" content="transition-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("transition-duration", 'infinite'); +test_invalid_value("transition-duration", '-500ms'); +test_invalid_value("transition-duration", '1s 2s'); + +test_invalid_value("transition-duration", '1s, initial'); +test_invalid_value("transition-duration", 'initial, 1s'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-duration-valid.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-duration-valid.html new file mode 100644 index 0000000000..311ca08669 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-duration-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: parsing transition-duration with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-duration"> +<meta name="assert" content="transition-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("transition-duration", '0s'); +test_valid_value("transition-duration", '500ms'); +test_valid_value("transition-duration", '1s, 2s'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-invalid.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-invalid.html new file mode 100644 index 0000000000..2138ad89b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-invalid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: parsing transition with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-shorthand-property"> +<meta name="assert" content="transition supports only the grammar '<single-transition> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// <single-transition> = [ none | <single-transition-property> ] || +// <time> || <easing-function> || <time> +test_invalid_value("transition", "1s 2s 3s"); +test_invalid_value("transition", "-1s -2s"); + +test_invalid_value("transition", "steps(1) steps(2)"); + +test_invalid_value("transition", "none top"); + +test_invalid_value("transition", "initial 1s"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-property-computed.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-property-computed.html new file mode 100644 index 0000000000..1e8cfeb22d --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-property-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: getComputedStyle().transitionProperty</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-property"> +<meta name="assert" content="transition-property keeps unrecognized properties."> +<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("transition-property", "left, top, right, bottom"); +test_computed_value("transition-property", "one, two, three"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-property-invalid.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-property-invalid.html new file mode 100644 index 0000000000..f71963f52c --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-property-invalid.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: parsing transition-property with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-property"> +<meta name="assert" content="transition-property supports only the grammar 'none | <single-transition-property> #'."> +<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("transition-property", 'one two three'); +test_invalid_value("transition-property", '1, 2, 3'); +test_invalid_value("transition-property", 'none, one'); + +test_invalid_value("transition-property", 'initial, top'); +test_invalid_value("transition-property", 'top, initial'); +test_invalid_value("transition-property", 'inherit, top'); +test_invalid_value("transition-property", 'top, inherit'); +test_invalid_value("transition-property", 'unset, top'); +test_invalid_value("transition-property", 'top, unset'); +test_invalid_value("transition-property", 'default, top'); +test_invalid_value("transition-property", 'top, default'); +test_invalid_value("transition-property", 'revert, top'); +test_invalid_value("transition-property", 'top, revert'); +test_invalid_value("transition-property", 'revert-layer, top'); +test_invalid_value("transition-property", 'top, revert-layer'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-property-valid.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-property-valid.html new file mode 100644 index 0000000000..4e3894f5aa --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-property-valid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: parsing transition-property with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-property"> +<meta name="assert" content="transition-property supports the full grammar 'none | <single-transition-property> #'."> +<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("transition-property", 'none'); +test_valid_value("transition-property", 'all'); +test_valid_value("transition-property", 'one'); +test_valid_value("transition-property", 'one-two-three'); +test_valid_value("transition-property", 'one, two, three'); +test_valid_value("transition-property", 'width, all'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-shorthand.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-shorthand.html new file mode 100644 index 0000000000..fcd14d2a14 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-shorthand.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: transition sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-shorthand-property"> +<meta name="assert" content="transition supports the full grammar '<single-transition> #'."> +<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('transition', '1s -3s cubic-bezier(0, -2, 1, 3) top', { + 'transition-property': 'top', + 'transition-duration': '1s', + 'transition-timing-function': 'cubic-bezier(0, -2, 1, 3)', + 'transition-delay': '-3s', + 'transition-behavior': 'normal' +}); + +test_shorthand_value('transition', '1s -3s, cubic-bezier(0, -2, 1, 3) top', { + 'transition-property': 'all, top', + 'transition-duration': '1s, 0s', + 'transition-timing-function': 'ease, cubic-bezier(0, -2, 1, 3)', + 'transition-delay': '-3s, 0s', + 'transition-behavior': 'normal, normal' +}); + +test_shorthand_value('transition', 'cubic-bezier(0, -2, 1, 3) top, 1s -3s', { + 'transition-property': 'top, all', + 'transition-duration': '0s, 1s', + 'transition-timing-function': 'cubic-bezier(0, -2, 1, 3), ease', + 'transition-delay': '0s, -3s', + 'transition-behavior': 'normal, normal' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-computed.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-computed.html new file mode 100644 index 0000000000..cb110549d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-computed.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: getComputedStyle().transitionTimingFunction</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-timing-function"> +<meta name="assert" content="transition-timing-function computed value is a computed <easing-function> list."> +<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("transition-timing-function", "linear"); + +test_computed_value("transition-timing-function", "ease"); +test_computed_value("transition-timing-function", "ease-in"); +test_computed_value("transition-timing-function", "ease-out"); +test_computed_value("transition-timing-function", "ease-in-out"); +test_computed_value("transition-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)"); +test_computed_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3)"); +test_computed_value("transition-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)"); + +test_computed_value("transition-timing-function", "step-start", "steps(1, start)"); +test_computed_value("transition-timing-function", "step-end", "steps(1)"); +test_computed_value("transition-timing-function", "steps(4)"); +test_computed_value("transition-timing-function", "steps(4, start)"); +test_computed_value("transition-timing-function", "steps(2, end)", "steps(2)"); +test_computed_value("transition-timing-function", "steps(2, jump-start)"); +test_computed_value("transition-timing-function", "steps(2, jump-end)", "steps(2)"); +test_computed_value("transition-timing-function", "steps(2, jump-both)"); +test_computed_value("transition-timing-function", "steps(2, jump-none)"); + +test_computed_value("transition-timing-function", "linear, ease, linear"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-invalid.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-invalid.html new file mode 100644 index 0000000000..c69b7e75d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-invalid.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: parsing transition-timing-function with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-timing-function"> +<link rel="help" href="https://drafts.csswg.org/css-easing-1/#typedef-timing-function"> +<meta name="assert" content="transition-timing-function supports only the grammar '<timing-function> #'."> +<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("transition-timing-function", "auto"); +test_invalid_value("transition-timing-function", "ease-in ease-out"); + +test_invalid_value("transition-timing-function", "cubic-bezier(foobar)"); +test_invalid_value("transition-timing-function", "cubic-bezier(1, 2, 3)"); +test_invalid_value("transition-timing-function", "cubic-bezier(1, 2, 3, infinite)"); +test_invalid_value("transition-timing-function", "cubic-bezier(1, 2, 3, 4, 5)"); +test_invalid_value("transition-timing-function", "cubic-bezier(-0.1, 0.1, 0.5, 0.9)"); +test_invalid_value("transition-timing-function", "cubic-bezier(0.5, 0.1, 1.1, 0.9)"); + +test_invalid_value("transition-timing-function", "steps(foobar)"); +test_invalid_value("transition-timing-function", "steps(3.3, end)"); +test_invalid_value("transition-timing-function", "steps(3, top)"); +test_invalid_value("transition-timing-function", "steps(-3, top)"); +test_invalid_value("transition-timing-function", "steps(0, jump-start)"); +test_invalid_value("transition-timing-function", "steps(0, jump-end)"); +test_invalid_value("transition-timing-function", "steps(0, jump-both)"); +test_invalid_value("transition-timing-function", "steps(1, jump-none)"); + +test_invalid_value("transition-timing-function", "initial, cubic-bezier(0, -2, 1, 3)"); +test_invalid_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3), initial"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-valid.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-valid.html new file mode 100644 index 0000000000..658ef76bbe --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-valid.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: parsing transition-timing-function with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-timing-function"> +<link rel="help" href="https://drafts.csswg.org/css-easing-1/#typedef-timing-function"> +<meta name="assert" content="transition-timing-function supports the full grammar '<timing-function> #'."> +<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("transition-timing-function", "linear"); +test_valid_value("transition-timing-function", "linear(0 0%, 0.5 50%, 1 100%)"); +test_valid_value("transition-timing-function", "linear(0 0%, 10 10%, 10 50%, 25.4 75%, 100 100%)"); +test_valid_value("transition-timing-function", "linear(0 0%, 1 100%)"); + +test_valid_value("transition-timing-function", "ease"); +test_valid_value("transition-timing-function", "ease-in"); +test_valid_value("transition-timing-function", "ease-out"); +test_valid_value("transition-timing-function", "ease-in-out"); +test_valid_value("transition-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)"); +test_valid_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3)"); +test_valid_value("transition-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)"); + +test_valid_value("transition-timing-function", "step-start", "steps(1, start)"); +test_valid_value("transition-timing-function", "step-end", "steps(1)"); +test_valid_value("transition-timing-function", "steps(4)"); +test_valid_value("transition-timing-function", "steps(4, start)"); +test_valid_value("transition-timing-function", "steps(2, end)", "steps(2)"); +test_valid_value("transition-timing-function", "steps(2, jump-start)"); +test_valid_value("transition-timing-function", "steps(2, jump-end)", "steps(2)"); +test_valid_value("transition-timing-function", "steps(2, jump-both)"); +test_valid_value("transition-timing-function", "steps(2, jump-none)"); + +test_valid_value("transition-timing-function", "linear, ease, linear"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/transition-valid.html b/testing/web-platform/tests/css/css-transitions/parsing/transition-valid.html new file mode 100644 index 0000000000..ea4802f65c --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-valid.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: parsing transition with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-shorthand-property"> +<meta name="assert" content="transition supports the full grammar '<single-transition> #'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// <single-transition> = [ none | <single-transition-property> ] || +// <time> || <easing-function> || <time> +test_valid_value("transition", "1s"); +test_valid_value("transition", "cubic-bezier(0, -2, 1, 3)"); +test_valid_value("transition", "1s -3s"); +test_valid_value("transition", "none"); +test_valid_value("transition", "top"); + +test_valid_value("transition", "1s -3s cubic-bezier(0, -2, 1, 3) top", "top 1s cubic-bezier(0, -2, 1, 3) -3s"); +test_valid_value("transition", "1s -3s, cubic-bezier(0, -2, 1, 3) top", "1s -3s, top cubic-bezier(0, -2, 1, 3)"); + +test_valid_value("transition", "all"); +test_valid_value("transition", "all 1s", "1s"); + +test_valid_value("transition", "initial", "initial"); + +// TODO: Add test with a single negative time. +// TODO: Add test with a single timing-function keyword. +</script> +</body> +</html> |