commit 3cb8d1d54908341c940c1d1333b748166985cc89
parent 86f0b3889de4d16f920a9be11a3f496abbc19771
Author: Fredrik Söderquist <fs@opera.com>
Date: Sat, 22 Nov 2025 21:13:11 +0000
Bug 2001686 [wpt PR 56193] - Move animations/composition/stroke-*-composition.html to WPT, a=testonly
Automatic update from web-platform-tests
Move animations/composition/stroke-*-composition.html to WPT
Move the tests and perform a mechanical rewrite:
* Change assertComposition() to test_composition().
* Change 'is' to 'expect' in the expectation objects.
* Include required testharness.js and framework.
* Add links to spec.
Bug: 40663834
Change-Id: I5c147f78dfdc4223c894702ddeb9d5e2aa74a9bf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7185882
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Auto-Submit: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1548531}
--
wpt-commits: 984683a5b15930afac37e63f88d860a1c1347195
wpt-pr: 56193
Diffstat:
3 files changed, 260 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/svg/painting/animations/stroke-dasharray-composition.html b/testing/web-platform/tests/svg/painting/animations/stroke-dasharray-composition.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>stroke-dasharray composition</title>
+<link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeDashing">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+<style>
+.parent {
+ stroke-dasharray: 30 10;
+}
+.target {
+ font-size: 16px;
+}
+</style>
+<body>
+<template id="target-template">
+ <svg height="400" width="5">
+ <path d="M0,0 l0,400" class="target">
+ </svg>
+</template>
+<script>
+// Basic case
+test_composition({
+ property: 'stroke-dasharray',
+ underlying: '5 5',
+ addFrom: '0 5',
+ addTo: '10 15',
+}, [
+ {at: -0.6, expect: ' 0 4'}, // Values must be non-negative.
+ {at: -0.4, expect: ' 1 6'},
+ {at: -0.2, expect: ' 3 8'},
+ {at: 0, expect: ' 5 10'},
+ {at: 0.2, expect: ' 7 12'},
+ {at: 0.4, expect: ' 9 14'},
+ {at: 0.6, expect: '11 16'},
+ {at: 0.8, expect: '13 18'},
+ {at: 1, expect: '15 20'},
+ {at: 1.2, expect: '17 22'},
+]);
+
+test_composition({
+ property: 'stroke-dasharray',
+ underlying: '10 10',
+ replaceFrom: '5 10',
+ addTo: '5 10',
+}, [
+ {at: -0.6, expect: ' 0 4'}, // Values must be non-negative.
+ {at: -0.4, expect: ' 1 6'},
+ {at: -0.2, expect: ' 3 8'},
+ {at: 0, expect: ' 5 10'},
+ {at: 0.2, expect: ' 7 12'},
+ {at: 0.4, expect: ' 9 14'},
+ {at: 0.6, expect: '11 16'},
+ {at: 0.8, expect: '13 18'},
+ {at: 1, expect: '15 20'},
+ {at: 1.2, expect: '17 22'},
+]);
+
+test_composition({
+ property: 'stroke-dasharray',
+ underlying: '10 30',
+ addFrom: 'none',
+ addTo: '10 10',
+}, [
+ {at: -1.5, expect: 'none'},
+ {at: -0.5, expect: 'none'},
+ {at: 0, expect: 'none'},
+ {at: 0.4, expect: 'none'},
+ {at: 0.5, expect: '20 40'},
+ {at: 0.6, expect: '20 40'},
+ {at: 1, expect: '20 40'},
+ {at: 1.5, expect: '20 40'},
+]);
+
+// Differing list lengths
+// Lists are repeated until length is equal to lowest common multiple of lengths.
+test_composition({
+ property: 'stroke-dasharray',
+ underlying: '0 5',
+ addFrom: '5',
+ replaceTo: '15 20 25',
+}, [
+ {at: -0.2, expect: ' 3 8 1 9 2 7'},
+ {at: 0, expect: ' 5 10 5 10 5 10'},
+ {at: 0.2, expect: ' 7 12 9 11 8 13'},
+ {at: 0.4, expect: ' 9 14 13 12 11 16'},
+ {at: 0.6, expect: '11 16 17 13 14 19'},
+ {at: 0.8, expect: '13 18 21 14 17 22'},
+ {at: 1, expect: '15 20 25 15 20 25'},
+ {at: 1.2, expect: '17 22 29 16 23 28'},
+]);
+
+// Lowest common multiple of list lengths not equal to multiple of list lengths
+test_composition({
+ property: 'stroke-dasharray',
+ underlying: '10 30',
+ replaceFrom: '5 10 15 20',
+ addTo: '15 0 25 10 35 20',
+}, [
+ {at: -0.2, expect: ' 1 6 11 16 0 2 13 18 0 4 9 14'}, // Values must be non-negative.
+ {at: 0, expect: ' 5 10 15 20 5 10 15 20 5 10 15 20'},
+ {at: 0.2, expect: ' 9 14 19 24 13 18 17 22 11 16 21 26'},
+ {at: 0.4, expect: '13 18 23 28 21 26 19 24 17 22 27 32'},
+ {at: 0.6, expect: '17 22 27 32 29 34 21 26 23 28 33 38'},
+ {at: 0.8, expect: '21 26 31 36 37 42 23 28 29 34 39 44'},
+ {at: 1, expect: '25 30 35 40 45 50 25 30 35 40 45 50'},
+ {at: 1.2, expect: '29 34 39 44 53 58 27 32 41 46 51 56'},
+]);
+
+// One list has odd length
+test_composition({
+ property: 'stroke-dasharray',
+ underlying: '10 20',
+ replaceFrom: '5 10 15',
+ addTo: '10 5 20 15',
+}, [
+ {at: -0.2, expect: ' 2 7 12 0 8 13 0 5 14 1 6 11'}, // Values must be non-negative.
+ {at: 0, expect: ' 5 10 15 5 10 15 5 10 15 5 10 15'},
+ {at: 0.2, expect: ' 8 13 18 11 12 17 10 15 16 9 14 19'},
+ {at: 0.4, expect: '11 16 21 17 14 19 15 20 17 13 18 23'},
+ {at: 0.6, expect: '14 19 24 23 16 21 20 25 18 17 22 27'},
+ {at: 0.8, expect: '17 22 27 29 18 23 25 30 19 21 26 31'},
+ {at: 1, expect: '20 25 30 35 20 25 30 35 20 25 30 35'},
+ {at: 1.2, expect: '23 28 33 41 22 27 35 40 21 29 34 39'},
+]);
+
+// Both lists have odd length
+test_composition({
+ property: 'stroke-dasharray',
+ underlying: '5',
+ addFrom: '0 5 10',
+ addTo: '15 20 25 30 35',
+}, [
+ {at: -0.2, expect: ' 2 7 12 0 4 14 1 6 11 0 8 13 0 5 10'}, // Values must be non-negative.
+ {at: 0, expect: ' 5 10 15 5 10 15 5 10 15 5 10 15 5 10 15'},
+ {at: 0.2, expect: ' 8 13 18 11 16 16 9 14 19 12 12 17 10 15 20'},
+ {at: 0.4, expect: '11 16 21 17 22 17 13 18 23 19 14 19 15 20 25'},
+ {at: 0.6, expect: '14 19 24 23 28 18 17 22 27 26 16 21 20 25 30'},
+ {at: 0.8, expect: '17 22 27 29 34 19 21 26 31 33 18 23 25 30 35'},
+ {at: 1, expect: '20 25 30 35 40 20 25 30 35 40 20 25 30 35 40'},
+ {at: 1.2, expect: '23 28 33 41 46 21 29 34 39 47 22 27 35 40 45'},
+]);
+
+// Mixed units
+test_composition({
+ property: 'stroke-dasharray',
+ underlying: '1em',
+ addFrom: '9em 14px',
+ addTo: '304px 1.5em',
+}, [
+ {at: -0.2, expect: '8em 28px'},
+ {at: 0, expect: '10em 30px'},
+ {at: 0.2, expect: '12em 32px'},
+ {at: 0.4, expect: '14em 34px'},
+ {at: 0.6, expect: '16em 36px'},
+ {at: 0.8, expect: '18em 38px'},
+ {at: 1, expect: '20em 40px'},
+ {at: 1.2, expect: '22em 42px'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/svg/painting/animations/stroke-dashoffset-composition.html b/testing/web-platform/tests/svg/painting/animations/stroke-dashoffset-composition.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>stroke-dashoffset composition</title>
+<link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeDashing">
+<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: 'stroke-dashoffset',
+ 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: 'stroke-dashoffset',
+ 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: 'stroke-dashoffset',
+ 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/svg/painting/animations/stroke-width-composition.html b/testing/web-platform/tests/svg/painting/animations/stroke-width-composition.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>stroke-width composition</title>
+<link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeWidth">
+<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: 'stroke-width',
+ 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: 'stroke-width',
+ 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'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+ property: 'stroke-width',
+ 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>
