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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
<!DOCTYPE html>
<meta charset="UTF-8">
<title>height: calc-size() animations</title>
<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#parent {
height: 200px;
}
#test {
}
</style>
<div id="parent">
<div id="test">
</div>
</div>
<script>
/**
* This test tests the expansions needed to support interpolation of
* calc-size() values. These cannot be tested through getComputedStyle
* so (as far as I can tell) the only web-exposed way to test them is
* through getComputedStyleMap.
*
* However, it's also likely that some of the details tested here are
* not fully specified. Once we have multiple implementations that
* implement all of the necessary features for this test, we should
* probably look at improving that interoperability.
*/
var TESTS = [
{
property: "height",
start: "auto",
end: "calc-size(any, 0px)",
expected: {
0.75: "calc-size(auto, 0px + (0.25 * size))",
},
},
{
property: "height",
start: "0px",
end: "calc-size(calc-size(min-content, size + 20px), 2 * size)",
expected: {
0.75: "calc-size(calc-size(min-content, 20px + size), 0px + (1.5 * size))",
},
},
{
property: "height",
start: "calc-size(min-content, size * 4)",
end: "calc-size(calc-size(min-content, size + 20px), 2 * size)",
expected: {
0.75: "calc-size(min-content, size + (1.5 * (20px + size)))",
},
},
{
property: "width",
start: "calc-size(fit-content, 20px)",
end: "calc-size(calc-size(fit-content, 40px), size)",
expected: {
0.75: "calc-size(fit-content, 35px)",
},
},
{
// Check that we do expansion on one basis even when the other basis is 'any'.
property: "width",
start: "calc-size(any, 20px)",
end: "calc-size(calc-size(fit-content, 40px), size)",
expected: {
0.75: "calc-size(fit-content, 35px)",
},
},
{
property: "width",
start: "calc-size(calc-size(any, 30px), 20px)",
end: "calc-size(calc-size(fit-content, 40px), size)",
expected: {
0.75: "calc-size(fit-content, 35px)",
},
},
{
property: "width",
start: "calc-size(fit-content, 20px)",
end: "calc-size(calc-size(fit-content, 3 * size + 10px), min(size + 20px, 2 * size - 30px) + ((2 * size) + 80px))",
expected: {
0.75: "calc-size(fit-content, 5px + min(30px + (3 * size), 30px + (2 * 0.75 * (3 * size + 10px)) + (0.75 * 2 * (10px + (3 * size)))))",
0.75: "calc-size(fit-content, 5px + (0.75 * (80px + min(30px + (3 * size), -30px + (2 * (10px + (3 * size)))) + (2 * (10px + (3 * size))))))",
},
},
{
property: "width",
start: "calc-size(50%, size)",
end: "calc-size(calc-size(45%, (2 * size)), size + 20px)",
expected: {
0.75: "calc-size(100%, (0.125 * size) + (0.75 * (20px + (0.9 * size))))",
},
},
{
property: "width",
start: "calc-size(40%, size)",
end: "calc-size(calc-size(10px, (2 * size)), size + 20px)",
expected: {
0.75: "calc-size(100%, 30px + (0.1 * size))",
},
},
{
property: "width",
start: "calc-size(80px, size)",
end: "calc-size(calc-size(10px, (2 * size)), size + 20px)",
expected: {
0.75: "calc-size(any, 50px)",
},
},
{
property: "width",
start: "calc-size(80px, size)",
end: "calc-size(calc-size(any, 20px), size + 20px)",
expected: {
0.75: "calc-size(any, 50px)",
},
},
];
let e = document.getElementById("test");
for (let test_item of TESTS) {
for (let progress in test_item.expected) {
test((t) => {
let expected_value = test_item.expected[progress];
let property = test_item.property;
e.style[property] = test_item.start;
let discard = e.computedStyleMap().get(property).toString();
e.style.transition = "all 1.0s linear";
e.style.transitionProperty = property;
e.style.transitionDelay = `${-progress}s`;
e.style[property] = test_item.end;
let actual_value = e.computedStyleMap().get(property).toString();
e.style.transition = "";
assert_equals(actual_value, expected_value);
}, `value at progress ${progress} in animation of "${test_item.property}" from "${test_item.start}" to "${test_item.end}"`);
}
}
</script>
|
