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
|
<!DOCTYPE html>
<meta charset="UTF-8">
<title>test for which value of interpolate-size is used</title>
<link rel="help" href="https://drafts.csswg.org/css-values-5/#interpolate-size">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<script>
for (let allow of [false, true]) {
for (let from_keyword of [false, true]) {
let used_interpolate_size = allow ? "allow-keywords" : "numeric-only";
let other_interpolate_size = allow ? "numeric-only" : "allow-keywords";
let from_width = from_keyword ? "min-content" : "100px";
let to_width = from_keyword ? "100px" : "min-content";
test(t => {
let e = document.createElement("div");
e.id = "t1";
document.body.append(e);
t.add_cleanup(() => e.remove());
let s = document.createElement("style");
s.append(`
#t1 {
interpolate-size: ${other_interpolate_size};
width: ${from_width};
transition: width 10s 1000s step-end;
}
#t1[title] {
width: ${to_width};
interpolate-size: ${used_interpolate_size};
}
`);
document.head.append(s);
t.add_cleanup(() => s.remove());
let cs = getComputedStyle(e);
assert_equals(cs.width, from_keyword ? "0px" : "100px", "width before change");
e.title="a title";
assert_equals(cs.width, (allow ^ from_keyword) ? "100px" : "0px", "width after change");
}, `Use the after-change value of interpolate-size: ${used_interpolate_size} when starting CSS transition from ${from_width} to ${to_width}`);
test(t => {
let e = document.createElement("div");
e.id = "t2";
document.body.append(e);
t.add_cleanup(() => e.remove());
let s = document.createElement("style");
s.append(`
@keyframes kf2 {
0% {
width: ${from_width};
interpolate-size: ${other_interpolate_size};
}
100% {
width: ${to_width};
interpolate-size: ${other_interpolate_size};
}
}
#t2 {
interpolate-size: ${used_interpolate_size};
animation: kf2 10s -1s linear;
}
`);
document.head.append(s);
t.add_cleanup(() => s.remove());
let cs = getComputedStyle(e);
let expected = from_keyword ? 0 : 100;
if (allow) {
expected = expected * 0.9 + (100 - expected) * 0.1;
}
assert_equals(cs.width, `${expected}px`, "width with animation");
}, `Use the non-animation value of interpolate-size: ${used_interpolate_size} when starting CSS animation from ${from_width} to ${to_width}`);
}
}
</script>
|
