Skip to content

Commit 984683a

Browse files
Fredrik Söderquistchromium-wpt-export-bot
Fredrik Söderquist
authored and
chromium-wpt-export-bot
committed
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: 4066383 Change-Id: I5c147f78dfdc4223c894702ddeb9d5e2aa74a9bf Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7185882 Commit-Queue: Kevin Ellis <[email protected]> Reviewed-by: Kevin Ellis <[email protected]> Auto-Submit: Fredrik Söderquist <[email protected]> Cr-Commit-Position: refs/heads/main@{#1548531}
1 parent 91eaa6d commit 984683a

File tree

3 files changed

+260
-0
lines changed

3 files changed

+260
-0
lines changed

‎svg/painting/animations/stroke-dasharray-composition.html‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>stroke-dasharray composition</title>
4+
<link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeDashing">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/css/support/interpolation-testcommon.js"></script>
8+
<style>
9+
.parent {
10+
stroke-dasharray: 30 10;
11+
}
12+
.target {
13+
font-size: 16px;
14+
}
15+
</style>
16+
<body>
17+
<template id="target-template">
18+
<svg height="400" width="5">
19+
<path d="M0,0 l0,400" class="target">
20+
</svg>
21+
</template>
22+
<script>
23+
// Basic case
24+
test_composition({
25+
property: 'stroke-dasharray',
26+
underlying: '5 5',
27+
addFrom: '0 5',
28+
addTo: '10 15',
29+
}, [
30+
{at: -0.6, expect: ' 0 4'}, // Values must be non-negative.
31+
{at: -0.4, expect: ' 1 6'},
32+
{at: -0.2, expect: ' 3 8'},
33+
{at: 0, expect: ' 5 10'},
34+
{at: 0.2, expect: ' 7 12'},
35+
{at: 0.4, expect: ' 9 14'},
36+
{at: 0.6, expect: '11 16'},
37+
{at: 0.8, expect: '13 18'},
38+
{at: 1, expect: '15 20'},
39+
{at: 1.2, expect: '17 22'},
40+
]);
41+
42+
test_composition({
43+
property: 'stroke-dasharray',
44+
underlying: '10 10',
45+
replaceFrom: '5 10',
46+
addTo: '5 10',
47+
}, [
48+
{at: -0.6, expect: ' 0 4'}, // Values must be non-negative.
49+
{at: -0.4, expect: ' 1 6'},
50+
{at: -0.2, expect: ' 3 8'},
51+
{at: 0, expect: ' 5 10'},
52+
{at: 0.2, expect: ' 7 12'},
53+
{at: 0.4, expect: ' 9 14'},
54+
{at: 0.6, expect: '11 16'},
55+
{at: 0.8, expect: '13 18'},
56+
{at: 1, expect: '15 20'},
57+
{at: 1.2, expect: '17 22'},
58+
]);
59+
60+
test_composition({
61+
property: 'stroke-dasharray',
62+
underlying: '10 30',
63+
addFrom: 'none',
64+
addTo: '10 10',
65+
}, [
66+
{at: -1.5, expect: 'none'},
67+
{at: -0.5, expect: 'none'},
68+
{at: 0, expect: 'none'},
69+
{at: 0.4, expect: 'none'},
70+
{at: 0.5, expect: '20 40'},
71+
{at: 0.6, expect: '20 40'},
72+
{at: 1, expect: '20 40'},
73+
{at: 1.5, expect: '20 40'},
74+
]);
75+
76+
// Differing list lengths
77+
// Lists are repeated until length is equal to lowest common multiple of lengths.
78+
test_composition({
79+
property: 'stroke-dasharray',
80+
underlying: '0 5',
81+
addFrom: '5',
82+
replaceTo: '15 20 25',
83+
}, [
84+
{at: -0.2, expect: ' 3 8 1 9 2 7'},
85+
{at: 0, expect: ' 5 10 5 10 5 10'},
86+
{at: 0.2, expect: ' 7 12 9 11 8 13'},
87+
{at: 0.4, expect: ' 9 14 13 12 11 16'},
88+
{at: 0.6, expect: '11 16 17 13 14 19'},
89+
{at: 0.8, expect: '13 18 21 14 17 22'},
90+
{at: 1, expect: '15 20 25 15 20 25'},
91+
{at: 1.2, expect: '17 22 29 16 23 28'},
92+
]);
93+
94+
// Lowest common multiple of list lengths not equal to multiple of list lengths
95+
test_composition({
96+
property: 'stroke-dasharray',
97+
underlying: '10 30',
98+
replaceFrom: '5 10 15 20',
99+
addTo: '15 0 25 10 35 20',
100+
}, [
101+
{at: -0.2, expect: ' 1 6 11 16 0 2 13 18 0 4 9 14'}, // Values must be non-negative.
102+
{at: 0, expect: ' 5 10 15 20 5 10 15 20 5 10 15 20'},
103+
{at: 0.2, expect: ' 9 14 19 24 13 18 17 22 11 16 21 26'},
104+
{at: 0.4, expect: '13 18 23 28 21 26 19 24 17 22 27 32'},
105+
{at: 0.6, expect: '17 22 27 32 29 34 21 26 23 28 33 38'},
106+
{at: 0.8, expect: '21 26 31 36 37 42 23 28 29 34 39 44'},
107+
{at: 1, expect: '25 30 35 40 45 50 25 30 35 40 45 50'},
108+
{at: 1.2, expect: '29 34 39 44 53 58 27 32 41 46 51 56'},
109+
]);
110+
111+
// One list has odd length
112+
test_composition({
113+
property: 'stroke-dasharray',
114+
underlying: '10 20',
115+
replaceFrom: '5 10 15',
116+
addTo: '10 5 20 15',
117+
}, [
118+
{at: -0.2, expect: ' 2 7 12 0 8 13 0 5 14 1 6 11'}, // Values must be non-negative.
119+
{at: 0, expect: ' 5 10 15 5 10 15 5 10 15 5 10 15'},
120+
{at: 0.2, expect: ' 8 13 18 11 12 17 10 15 16 9 14 19'},
121+
{at: 0.4, expect: '11 16 21 17 14 19 15 20 17 13 18 23'},
122+
{at: 0.6, expect: '14 19 24 23 16 21 20 25 18 17 22 27'},
123+
{at: 0.8, expect: '17 22 27 29 18 23 25 30 19 21 26 31'},
124+
{at: 1, expect: '20 25 30 35 20 25 30 35 20 25 30 35'},
125+
{at: 1.2, expect: '23 28 33 41 22 27 35 40 21 29 34 39'},
126+
]);
127+
128+
// Both lists have odd length
129+
test_composition({
130+
property: 'stroke-dasharray',
131+
underlying: '5',
132+
addFrom: '0 5 10',
133+
addTo: '15 20 25 30 35',
134+
}, [
135+
{at: -0.2, expect: ' 2 7 12 0 4 14 1 6 11 0 8 13 0 5 10'}, // Values must be non-negative.
136+
{at: 0, expect: ' 5 10 15 5 10 15 5 10 15 5 10 15 5 10 15'},
137+
{at: 0.2, expect: ' 8 13 18 11 16 16 9 14 19 12 12 17 10 15 20'},
138+
{at: 0.4, expect: '11 16 21 17 22 17 13 18 23 19 14 19 15 20 25'},
139+
{at: 0.6, expect: '14 19 24 23 28 18 17 22 27 26 16 21 20 25 30'},
140+
{at: 0.8, expect: '17 22 27 29 34 19 21 26 31 33 18 23 25 30 35'},
141+
{at: 1, expect: '20 25 30 35 40 20 25 30 35 40 20 25 30 35 40'},
142+
{at: 1.2, expect: '23 28 33 41 46 21 29 34 39 47 22 27 35 40 45'},
143+
]);
144+
145+
// Mixed units
146+
test_composition({
147+
property: 'stroke-dasharray',
148+
underlying: '1em',
149+
addFrom: '9em 14px',
150+
addTo: '304px 1.5em',
151+
}, [
152+
{at: -0.2, expect: '8em 28px'},
153+
{at: 0, expect: '10em 30px'},
154+
{at: 0.2, expect: '12em 32px'},
155+
{at: 0.4, expect: '14em 34px'},
156+
{at: 0.6, expect: '16em 36px'},
157+
{at: 0.8, expect: '18em 38px'},
158+
{at: 1, expect: '20em 40px'},
159+
{at: 1.2, expect: '22em 42px'},
160+
]);
161+
</script>
162+
</body>

‎svg/painting/animations/stroke-dashoffset-composition.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>stroke-dashoffset composition</title>
4+
<link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeDashing">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/css/support/interpolation-testcommon.js"></script>
8+
<body>
9+
<script>
10+
test_composition({
11+
property: 'stroke-dashoffset',
12+
underlying: '50px',
13+
addFrom: '100px',
14+
addTo: '200px',
15+
}, [
16+
{at: -0.3, expect: '120px'},
17+
{at: 0, expect: '150px'},
18+
{at: 0.5, expect: '200px'},
19+
{at: 1, expect: '250px'},
20+
{at: 1.5, expect: '300px'},
21+
]);
22+
23+
test_composition({
24+
property: 'stroke-dashoffset',
25+
underlying: '100px',
26+
addFrom: '10px',
27+
addTo: '2px',
28+
}, [
29+
{at: -0.5, expect: '114px'},
30+
{at: 0, expect: '110px'},
31+
{at: 0.5, expect: '106px'},
32+
{at: 1, expect: '102px'},
33+
{at: 1.5, expect: '98px'},
34+
]);
35+
36+
test_composition({
37+
property: 'stroke-dashoffset',
38+
underlying: '50px',
39+
addFrom: '100px',
40+
replaceTo: '200px',
41+
}, [
42+
{at: -0.3, expect: '135px'},
43+
{at: 0, expect: '150px'},
44+
{at: 0.5, expect: '175px'},
45+
{at: 1, expect: '200px'},
46+
{at: 1.5, expect: '225px'},
47+
]);
48+
</script>
49+
</body>

‎svg/painting/animations/stroke-width-composition.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>stroke-width composition</title>
4+
<link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeWidth">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/css/support/interpolation-testcommon.js"></script>
8+
<body>
9+
<script>
10+
test_composition({
11+
property: 'stroke-width',
12+
underlying: '50px',
13+
addFrom: '100px',
14+
addTo: '200px',
15+
}, [
16+
{at: -0.3, expect: '120px'},
17+
{at: 0, expect: '150px'},
18+
{at: 0.5, expect: '200px'},
19+
{at: 1, expect: '250px'},
20+
{at: 1.5, expect: '300px'},
21+
]);
22+
23+
test_composition({
24+
property: 'stroke-width',
25+
underlying: '100px',
26+
addFrom: '10px',
27+
addTo: '2px',
28+
}, [
29+
{at: -0.5, expect: '114px'},
30+
{at: 0, expect: '110px'},
31+
{at: 0.5, expect: '106px'},
32+
{at: 1, expect: '102px'},
33+
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
34+
]);
35+
36+
test_composition({
37+
property: 'stroke-width',
38+
underlying: '50px',
39+
addFrom: '100px',
40+
replaceTo: '200px',
41+
}, [
42+
{at: -0.3, expect: '135px'},
43+
{at: 0, expect: '150px'},
44+
{at: 0.5, expect: '175px'},
45+
{at: 1, expect: '200px'},
46+
{at: 1.5, expect: '225px'},
47+
]);
48+
</script>
49+
</body>

0 commit comments

Comments
 (0)