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-text/animations | |
| 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-text/animations')
9 files changed, 704 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/animations/hyphen-no-interpolation.html b/testing/web-platform/tests/css/css-text/animations/hyphen-no-interpolation.html new file mode 100644 index 0000000000..95a3ff5ee5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/animations/hyphen-no-interpolation.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<link rel=help href="https://drafts.csswg.org/css-text-4/#propdef-hyphenate-character"> +<link rel=help href="https://drafts.csswg.org/css-text-4/#propdef-hyphenate-limit-chars"> +<link rel=help href="https://drafts.csswg.org/css-text/#hyphens-property"> +<link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-property-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'hyphenate-character', + from: 'initial', + to: '"e"' +}); + +test_no_interpolation({ + property: 'hyphenate-limit-chars', + from: 'initial', + to: '10' +}); + +test_no_interpolation({ + property: 'hyphens', + from: 'initial', + to: 'auto' +}); +</script> diff --git a/testing/web-platform/tests/css/css-text/animations/letter-spacing-composition.html b/testing/web-platform/tests/css/css-text/animations/letter-spacing-composition.html new file mode 100644 index 0000000000..c1b614b5eb --- /dev/null +++ b/testing/web-platform/tests/css/css-text/animations/letter-spacing-composition.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>letter-spacing composition</title> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"> +<meta name="test" content="letter-spacing supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script src="../interpolation/resources/interpolation-test.js"></script> +<script> +test_composition({ + property: 'letter-spacing', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'letter-spacing', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, +]); + +test_composition({ + property: 'letter-spacing', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-text/animations/letter-spacing-interpolation.html b/testing/web-platform/tests/css/css-text/animations/letter-spacing-interpolation.html new file mode 100644 index 0000000000..7d49581139 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/animations/letter-spacing-interpolation.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"> +<meta name="test" content="letter-spacing supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + letter-spacing: 2px; +} +.target { + font: 10px sans-serif; + font-weight: bold; + letter-spacing: 30px; +} +.expected { + color: green; + margin-right: 30px; +} +</style> + +<body> + <template id="target-template">TT</template> +</body> + +<script> +test_interpolation({ + property: 'letter-spacing', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.3, expect: '33px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); + +test_interpolation({ + property: 'letter-spacing', + from: 'initial', + to: '20px', +}, [ + {at: -0.3, expect: '-6px'}, + {at: 0, expect: 'normal'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, +]); + +test_interpolation({ + property: 'letter-spacing', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '-3.4px'}, + {at: 0, expect: '2px'}, + {at: 0.3, expect: '7.4px'}, + {at: 0.6, expect: '12.8px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '29px'}, +]); + +test_interpolation({ + property: 'letter-spacing', + from: 'unset', + to: '20px', +}, [ + {at: -0.3, expect: '-3.4px'}, + {at: 0, expect: '2px'}, + {at: 0.3, expect: '7.4px'}, + {at: 0.6, expect: '12.8px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '29px'}, +]); + +test_interpolation({ + property: 'letter-spacing', + from: '-10px', + to: '10px', +}, [ + {at: -0.3, expect: '-16px'}, + {at: 0, expect: '-10px'}, + {at: 0.3, expect: '-4px'}, + {at: 0.6, expect: '2px'}, + {at: 1, expect: '10px'}, + {at: 1.5, expect: '20px'}, +]); + +test_interpolation({ + property: 'letter-spacing', + from: 'normal', + to: '10px', +}, [ + {at: -0.3, expect: '-3px'}, + {at: 0, expect: 'normal'}, + {at: 0.3, expect: '3px'}, + {at: 0.6, expect: '6px'}, + {at: 1, expect: '10px'}, + {at: 1.5, expect: '15px'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-text/animations/line-break-no-interpolation.html b/testing/web-platform/tests/css/css-text/animations/line-break-no-interpolation.html new file mode 100644 index 0000000000..b6fc5f932e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/animations/line-break-no-interpolation.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<link rel=help href="https://drafts.csswg.org/css-text/#line-break-property"> +<link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-property-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'line-break', + from: 'initial', + to: 'anywhere' +}); +</script> diff --git a/testing/web-platform/tests/css/css-text/animations/tab-size-interpolation.html b/testing/web-platform/tests/css/css-text/animations/tab-size-interpolation.html new file mode 100644 index 0000000000..3cf63782f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/animations/tab-size-interpolation.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property"> +<meta name="test" content="tab-size supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + tab-size: 20; +} +.target { + font: 10px sans-serif; + tab-size: 5; +} +.expected { + color: green; +} +</style> + +<body> + <template id="target-template">T</template> +</body> + +<script> +test_interpolation({ + property: 'tab-size', + from: neutralKeyframe, + to: 10, +}, [ + {at: -0.3, expect: '3.5'}, + {at: 0, expect: '5'}, + {at: 0.3, expect: '6.5'}, + {at: 0.6, expect: '8'}, + {at: 1, expect: '10'}, + {at: 1.5, expect: '12.5'}, +]); + +test_interpolation({ + property: 'tab-size', + from: 'initial', + to: 10, +}, [ + {at: -0.3, expect: '7.4'}, + {at: 0, expect: '8'}, + {at: 0.3, expect: '8.6'}, + {at: 0.6, expect: '9.2'}, + {at: 1, expect: '10'}, + {at: 1.5, expect: '11'}, +]); + +test_interpolation({ + property: 'tab-size', + from: 'inherit', + to: 10, +}, [ + {at: -0.3, expect: '23'}, + {at: 0, expect: '20'}, + {at: 0.3, expect: '17'}, + {at: 0.6, expect: '14'}, + {at: 1, expect: '10'}, + {at: 1.5, expect: '5'}, +]); + +test_interpolation({ + property: 'tab-size', + from: 'unset', + to: 10, +}, [ + {at: -0.3, expect: '23'}, + {at: 0, expect: '20'}, + {at: 0.3, expect: '17'}, + {at: 0.6, expect: '14'}, + {at: 1, expect: '10'}, + {at: 1.5, expect: '5'}, +]); + +test_interpolation({ + property: 'tab-size', + from: 0, + to: 10, +}, [ + {at: -0.3, expect: '0'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '3'}, + {at: 0.6, expect: '6'}, + {at: 1, expect: '10'}, + {at: 1.5, expect: '15'}, +]); + +test_interpolation({ + property: 'tab-size', + from: 4, + to: 10, +}, [ + {at: -0.3, expect: '2.2'}, + {at: 0, expect: '4'}, + {at: 0.3, expect: '5.8'}, + {at: 0.6, expect: '7.6'}, + {at: 1, expect: '10'}, + {at: 1.5, expect: '13'}, +]); + +test_interpolation({ + property: 'tab-size', + from: '1px', + to: '10px', +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '1px'}, + {at: 0.3, expect: '3.7px'}, + {at: 0.6, expect: '6.4px'}, + {at: 1, expect: '10px'}, + {at: 1.5, expect: '14.5px'}, +]); + +test_no_interpolation({ + property: 'tab-size', + from: '1', + to: '10px', +}); + +</script> diff --git a/testing/web-platform/tests/css/css-text/animations/text-indent-composition.html b/testing/web-platform/tests/css/css-text/animations/text-indent-composition.html new file mode 100644 index 0000000000..57c528ca27 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/animations/text-indent-composition.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>letter-spacing composition</title> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> +<meta name="test" content="text-indent supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body></body> +<script> +test_composition({ + property: 'text-indent', + underlying: '100%', + addFrom: '50px', + addTo: '150px', +}, [ + {at: -0.3, expect: 'calc(100% + 20px)'}, + {at: 0, expect: 'calc(100% + 50px)'}, + {at: 0.3, expect: 'calc(100% + 80px)'}, + {at: 0.6, expect: 'calc(100% + 110px)'}, + {at: 1, expect: 'calc(100% + 150px)'}, + {at: 1.5, expect: 'calc(100% + 200px)'}, +]); + +test_composition({ + property: 'text-indent', + underlying: '250px', + addFrom: '50px', + replaceTo: '100px', +}, [ + {at: -0.3, expect: '360px'}, + {at: 0, expect: '300px'}, + {at: 0.3, expect: '240px'}, + {at: 0.6, expect: '180px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '0px'}, +]); + +test_composition({ + property: 'text-indent', + underlying: '50%', + replaceFrom: '-100%', + addTo: '50%', +}, [ + {at: -0.3, expect: '-160%'}, + {at: 0, expect: '-100%'}, + {at: 0.3, expect: '-40%'}, + {at: 0.5, expect: '0%'}, + {at: 0.6, expect: '20%'}, + {at: 1, expect: '100%'}, + {at: 1.5, expect: '200%'}, +]); + +test_composition({ + property: 'text-indent', + underlying: '250px', + addFrom: '50px each-line hanging', + replaceTo: '150px hanging each-line', +}, [ + {at: -0.3, expect: '20px hanging each-line'}, + {at: 0, expect: '50px hanging each-line'}, + {at: 0.3, expect: '80px hanging each-line'}, + {at: 0.6, expect: '110px hanging each-line'}, + {at: 1, expect: '150px hanging each-line'}, + {at: 1.5, expect: '200px hanging each-line'}, +]); + +test_composition({ + property: 'text-indent', + underlying: '250px each-line', + addFrom: '50px each-line', + replaceTo: '150px hanging', +}, [ + {at: -0.3, expect: '300px each-line'}, + {at: 0, expect: '300px each-line'}, + {at: 0.3, expect: '300px each-line'}, + {at: 0.6, expect: '150px hanging'}, + {at: 1, expect: '150px hanging'}, + {at: 1.5, expect: '150px hanging'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-text/animations/text-indent-interpolation.html b/testing/web-platform/tests/css/css-text/animations/text-indent-interpolation.html new file mode 100644 index 0000000000..2269fdfa5b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/animations/text-indent-interpolation.html @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> +<meta name="test" content="text-indent supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + text-indent: 70px; +} +.target { + font: 10px sans-serif; + text-indent: 10px; + margin-left: 20px; +} +.expected { + color: green; +} +</style> + +<body> + <template id="target-template">T</template> +</body> + +<script> +test_interpolation({ + property: 'text-indent', + from: neutralKeyframe, + to: '40px', +}, [ + {at: -0.3, expect: '1px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '19px'}, + {at: 0.6, expect: '28px'}, + {at: 1, expect: '40px'}, + {at: 1.5, expect: '55px'}, +]); + +test_interpolation({ + property: 'text-indent', + from: 'initial', + to: '20px', +}, [ + {at: -0.3, expect: '-6px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, +]); + +test_interpolation({ + property: 'text-indent', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '85px'}, + {at: 0, expect: '70px'}, + {at: 0.3, expect: '55px'}, + {at: 0.6, expect: '40px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '-5px'}, +]); + +test_interpolation({ + property: 'text-indent', + from: 'unset', + to: '20px', +}, [ + {at: -0.3, expect: '85px'}, + {at: 0, expect: '70px'}, + {at: 0.3, expect: '55px'}, + {at: 0.6, expect: '40px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '-5px'}, +]); + +test_interpolation({ + property: 'text-indent', + from: '0px', + to: '50px' +}, [ + {at: -0.3, expect: '-15px'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '15px'}, + {at: 0.6, expect: '30px'}, + {at: 1, expect: '50px'}, + {at: 1.5, expect: '75px'}, +]); + +test_interpolation({ + property: 'text-indent', + from: '0px hanging', + to: '50px hanging', +}, [ + {at: -0.3, expect: '-15px hanging'}, + {at: 0, expect: '0 hanging'}, + {at: 0.3, expect: '15px hanging'}, + {at: 0.6, expect: '30px hanging'}, + {at: 1, expect: '50px hanging'}, + {at: 1.5, expect: '75px hanging'}, +]); + +test_interpolation({ + property: 'text-indent', + from: '0px hanging each-line', + to: '50px each-line hanging', +}, [ + {at: -0.3, expect: '-15px hanging each-line'}, + {at: 0, expect: '0 hanging each-line'}, + {at: 0.3, expect: '15px hanging each-line'}, + {at: 0.6, expect: '30px hanging each-line'}, + {at: 1, expect: '50px hanging each-line'}, + {at: 1.5, expect: '75px hanging each-line'}, +]); + +test_no_interpolation({ + property: 'text-indent', + from: '0px each-line', + to: '50px hanging', +}); + +test_no_interpolation({ + property: 'text-indent', + from: '0px', + to: '50px each-line hanging', +}); +</script> diff --git a/testing/web-platform/tests/css/css-text/animations/word-spacing-composition.html b/testing/web-platform/tests/css/css-text/animations/word-spacing-composition.html new file mode 100644 index 0000000000..17aacaef15 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/animations/word-spacing-composition.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>word-spacing composition</title> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-spacing-property"> +<meta name="test" content="word-spacing supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'word-spacing', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'word-spacing', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, +]); + +test_composition({ + property: 'word-spacing', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-text/animations/word-spacing-interpolation.html b/testing/web-platform/tests/css/css-text/animations/word-spacing-interpolation.html new file mode 100644 index 0000000000..ffd6bb476a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/animations/word-spacing-interpolation.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-spacing-property"> +<meta name="test" content="word-spacing supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + word-spacing: 30px; +} +.target { + font: 10px sans-serif; + word-spacing: 10px; +} +.expected { + color: green; +} +</style> + +<body> + <template id="target-template">A B C D</template> +</body> + +<script> +test_interpolation({ + property: 'word-spacing', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_interpolation({ + property: 'word-spacing', + from: 'initial', + to: '20px', +}, [ + {at: -0.3, expect: '-6px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, +]); + +test_interpolation({ + property: 'word-spacing', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '33px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); + +test_interpolation({ + property: 'word-spacing', + from: 'unset', + to: '20px', +}, [ + {at: -0.3, expect: '33px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); + +test_interpolation({ + property: 'word-spacing', + from: '-10px', + to: '40px' +}, [ + {at: -0.3, expect: '-25px'}, + {at: 0, expect: '-10px'}, + {at: 0.3, expect: '5px'}, + {at: 0.6, expect: '20px'}, + {at: 1, expect: '40px'}, + {at: 1.5, expect: '65px'}, +]); +test_interpolation({ + property: 'word-spacing', + from: 'normal', + to: '10px' +}, [ + {at: -0.3, expect: '-3px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '3px'}, + {at: 0.6, expect: '6px'}, + {at: 1, expect: '10px'}, + {at: 1.5, expect: '15px'}, +]); +</script> |