1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
<!DOCTYPE html>
<meta charset="UTF-8">
<title>mask-border-slice composition</title>
<link rel="help" href="https://drafts.fxtf.org/css-masking/#propdef-mask-border-slice">
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<meta name="assert" content="mask-border-slice supports animation by computed value">
<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: 'mask-border-slice',
underlying: '1 2 3 4',
addFrom: '1 2 3 4',
addTo: '101 102 103 104',
}, [
{at: -0.25, expect: '0'}, // Non-negative.
{at: 0, expect: '2 4 6 8'},
{at: 0.25, expect: '27 29 31 33'},
{at: 0.5, expect: '52 54 56 58'},
{at: 0.75, expect: '77 79 81 83'},
{at: 1, expect: '102 104 106 108'},
{at: 1.25, expect: '127 129 131 133'},
]);
test_composition({
property: 'mask-border-slice',
underlying: '100 200 300 400 fill',
addFrom: '100 fill',
addTo: '200 300 500 fill',
}, [
{at: -0.25, expect: '175 250 300 450 fill'},
{at: 0, expect: '200 300 400 500 fill'},
{at: 0.25, expect: '225 350 500 550 fill'},
{at: 0.5, expect: '250 400 600 600 fill'},
{at: 0.75, expect: '275 450 700 650 fill'},
{at: 1, expect: '300 500 800 700 fill'},
{at: 1.25, expect: '325 550 900 750 fill'},
]);
test_composition({
property: 'mask-border-slice',
underlying: '1 2 3% 4%',
addFrom: '1 2 3% 4%',
addTo: '101 102 103% 104%',
}, [
{at: -0.25, expect: '0 0 0% 0%'}, // Non-negative.
{at: 0, expect: '2 4 6% 8%'},
{at: 0.25, expect: '27 29 31% 33%'},
{at: 0.5, expect: '52 54 56% 58%'},
{at: 0.75, expect: '77 79 81% 83%'},
{at: 1, expect: '102 104 106% 108%'},
{at: 1.25, expect: '127 129 131% 133%'},
]);
test_composition({
property: 'mask-border-slice',
underlying: '10% 20%',
addFrom: '190% 180% 290% 280%',
addTo: '90% 80%',
}, [
{at: -0.25, expect: '225% 225% 350% 350%'},
{at: 0, expect: '200% 200% 300% 300%'},
{at: 0.25, expect: '175% 175% 250% 250%'},
{at: 0.5, expect: '150% 150% 200% 200%'},
{at: 0.75, expect: '125% 125% 150% 150%'},
{at: 1, expect: '100%'},
{at: 1.25, expect: '75% 75% 50% 50%'},
]);
test_composition({
property: 'mask-border-slice',
underlying: '10 20%',
replaceFrom: '100 100%',
addTo: '190 180%',
}, [
{at: -0.25, expect: '75 75%'},
{at: 0, expect: '100 100%'},
{at: 0.25, expect: '125 125%'},
{at: 0.5, expect: '150 150%'},
{at: 0.75, expect: '175 175%'},
{at: 1, expect: '200 200%'},
{at: 1.25, expect: '225 225%'},
]);
test_composition({
property: 'mask-border-slice',
underlying: '10% 20',
addFrom: '90% 80',
replaceTo: '0% 0 0% 0',
}, [
{at: -0.25, expect: '125% 125'},
{at: 0, expect: '100% 100'},
{at: 0.25, expect: '75% 75'},
{at: 0.5, expect: '50% 50'},
{at: 0.75, expect: '25% 25'},
{at: 1, expect: '0% 0'},
{at: 1.25, expect: '0% 0'}, // Non-negative.
]);
test_composition({
property: 'mask-border-slice',
underlying: '10 20',
addFrom: '100% 150%',
addTo: '200% 250% fill',
}, [
{at: -0.25, expect: '100% 150%'},
{at: 0, expect: '100% 150%'},
{at: 0.25, expect: '100% 150%'},
{at: 0.5, expect: '200% 250% fill'},
{at: 0.75, expect: '200% 250% fill'},
{at: 1, expect: '200% 250% fill'},
{at: 1.25, expect: '200% 250% fill'},
]);
test_composition({
property: 'mask-border-slice',
underlying: '10 20',
addFrom: '100 150%',
addTo: '200% 250',
}, [
{at: -0.25, expect: '100 150%'},
{at: 0, expect: '100 150%'},
{at: 0.25, expect: '100 150%'},
{at: 0.5, expect: '200% 250'},
{at: 0.75, expect: '200% 250'},
{at: 1, expect: '200% 250'},
{at: 1.25, expect: '200% 250'},
]);
</script>
</body>
|
