-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathborder-image-outset-composition.html
133 lines (124 loc) · 3.64 KB
/
border-image-outset-composition.html
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
<!DOCTYPE html>
<meta charset="UTF-8">
<title>border-image-outset composition</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-outset">
<meta name="assert" content="border-image-outset 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: 'border-image-outset',
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: 'border-image-outset',
underlying: '100 200 300 400',
addFrom: '100',
addTo: '200 300 500',
}, [
{at: -0.25, expect: '175 250 300 450'},
{at: 0, expect: '200 300 400 500'},
{at: 0.25, expect: '225 350 500 550'},
{at: 0.5, expect: '250 400 600 600'},
{at: 0.75, expect: '275 450 700 650'},
{at: 1, expect: '300 500 800 700'},
{at: 1.25, expect: '325 550 900 750'},
]);
test_composition({
property: 'border-image-outset',
underlying: '1 2 3px 4px',
addFrom: '1 2 3px 4px',
addTo: '101 102 103px 104px',
}, [
{at: -0.25, expect: '0 0 0px 0px'}, // Non-negative.
{at: 0, expect: '2 4 6px 8px'},
{at: 0.25, expect: '27 29 31px 33px'},
{at: 0.5, expect: '52 54 56px 58px'},
{at: 0.75, expect: '77 79 81px 83px'},
{at: 1, expect: '102 104 106px 108px'},
{at: 1.25, expect: '127 129 131px 133px'},
]);
test_composition({
property: 'border-image-outset',
underlying: '10px 20px',
addFrom: '190px 180px 290px 280px',
addTo: '90px 80px',
}, [
{at: -0.25, expect: '225px 225px 350px 350px'},
{at: 0, expect: '200px 200px 300px 300px'},
{at: 0.25, expect: '175px 175px 250px 250px'},
{at: 0.5, expect: '150px 150px 200px 200px'},
{at: 0.75, expect: '125px 125px 150px 150px'},
{at: 1, expect: '100px'},
{at: 1.25, expect: '75px 75px 50px 50px'},
]);
test_composition({
property: 'border-image-outset',
underlying: '10 20px',
replaceFrom: '100 100px',
addTo: '190 180px',
}, [
{at: -0.25, expect: '75 75px'},
{at: 0, expect: '100 100px'},
{at: 0.25, expect: '125 125px'},
{at: 0.5, expect: '150 150px'},
{at: 0.75, expect: '175 175px'},
{at: 1, expect: '200 200px'},
{at: 1.25, expect: '225 225px'},
]);
test_composition({
property: 'border-image-outset',
underlying: '10px 20',
addFrom: '90px 80',
replaceTo: '0px 0 0px 0',
}, [
{at: -0.25, expect: '125px 125'},
{at: 0, expect: '100px 100'},
{at: 0.25, expect: '75px 75'},
{at: 0.5, expect: '50px 50'},
{at: 0.75, expect: '25px 25'},
{at: 1, expect: '0px 0'},
{at: 1.25, expect: '0px 0'}, // Non-negative.
]);
test_composition({
property: 'border-image-outset',
underlying: '10 20',
addFrom: '100px 150px',
addTo: '200px 250px',
}, [
{at: -0.25, expect: '75px 125px'},
{at: 0, expect: '100px 150px'},
{at: 0.25, expect: '125px 175px'},
{at: 0.5, expect: '150px 200px'},
{at: 0.75, expect: '175px 225px'},
{at: 1, expect: '200px 250px'},
{at: 1.25, expect: '225px 275px'},
]);
test_composition({
property: 'border-image-outset',
underlying: '10 20',
addFrom: '100 150px',
addTo: '200px 250',
}, [
{at: -0.25, expect: '100 150px'},
{at: 0, expect: '100 150px'},
{at: 0.25, expect: '100 150px'},
{at: 0.5, expect: '200px 250'},
{at: 0.75, expect: '200px 250'},
{at: 1, expect: '200px 250'},
{at: 1.25, expect: '200px 250'},
]);
</script>
</body>