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>
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#mixed-percentages">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-serialize">
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/serialize-testcommon.js"></script>
<div style="width: 100px;">
<div id=target></div>
</div>
<script>
function test_serialization(t,s,c,u, {prop}={}) {
test_specified_serialization(prop || 'text-indent', t, s);
test_computed_serialization(prop || 'text-indent', t, c);
if(u) test_used_serialization(prop || 'margin-left', t, u);
}
// If fully resolvable to a number, serialize to a calc() or all the way to a number.
test_serialization(
'min(1px)',
'calc(1px)',
'1px',
'1px');
test_serialization(
'max(1px)',
'calc(1px)',
'1px',
'1px');
// If not, keep as the function.
test_serialization(
'min(1% + 1px)',
'calc(1% + 1px)',
'calc(1% + 1px)',
'2px');
test_serialization(
'min(1px + 1%)',
'calc(1% + 1px)',
'calc(1% + 1px)',
'2px');
test_serialization(
'max(1px + 1%)',
'calc(1% + 1px)',
'calc(1% + 1px)',
'2px');
// Arguments are simplified eagerly as per spec:
test_serialization(
'min(1px, 2px)',
'calc(1px)',
'1px',
'1px');
// Arguments are simplified, but not reordered.
test_serialization(
'min(20px, 10%)',
'min(20px, 10%)',
'min(20px, 10%)',
'10px');
test_serialization(
'min(1em, 10%)',
'min(1em, 10%)',
'min(16px, 10%)',
'10px');
test_serialization(
'min(10%, 20px)',
'min(10%, 20px)',
'min(10%, 20px)',
'10px');
test_serialization(
'min(10%, 1em)',
'min(10%, 1em)',
'min(10%, 16px)',
'10px');
test_serialization(
'max(20px, 10%)',
'max(20px, 10%)',
'max(20px, 10%)',
'20px');
test_serialization(
'max(1em, 10%)',
'max(1em, 10%)',
'max(16px, 10%)',
'16px');
test_serialization(
'max(10%, 20px)',
'max(10%, 20px)',
'max(10%, 20px)',
'20px');
test_serialization(
'max(10%, 1em)',
'max(10%, 1em)',
'max(10%, 16px)',
'16px');
// Within an argument, normal sorting occurs
test_serialization(
'min(10% + 30px, 5em + 5%)',
'min(10% + 30px, 5% + 5em)',
'min(10% + 30px, 5% + 80px)',
'40px');
test_serialization(
'max(10% + 30px, 5em + 5%)',
'max(10% + 30px, 5% + 5em)',
'max(10% + 30px, 5% + 80px)',
'85px');
// min()/max() are valid inside a calc(),
// and retain their relative order
test_serialization(
'calc(min(10% + 1px) + max(1em + 10%) + min(10% + 20px))',
'calc(30% + 1em + 21px)',
'calc(30% + 37px)',
'67px');
// min()/max() can be combined with plain units as well.
// While min()/max() maintain their own ordering,
// ordinary units will re-sort around them.
test_serialization(
'calc(1em + max(10% + 20px) + 5% + min(1em + 10%) + 10px)',
'calc(25% + 2em + 30px)',
'calc(25% + 62px)',
'87px');
test_serialization(
'max((min(10%, 30px) + 10px) * 2 + 10px, 5em + 5%)',
'max(10px + ((10px + min(10%, 30px)) * 2), 5% + 5em)',
'max(10px + ((10px + min(10%, 30px)) * 2), 5% + 80px)',
'85px',
prop='width');
</script>
|
