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
|
<!DOCTYPE html>
<title>Tests parsing of the anchor() function</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<script>
const anchorNames = [
'',
'--foo',
];
const insetProperties = [
'left',
'right',
'top',
'bottom',
'inset-block-start',
'inset-block-end',
'inset-inline-start',
'inset-inline-end',
];
const anchorSides = [
'inside',
'outside',
'left',
'right',
'top',
'bottom',
'start',
'end',
'self-start',
'self-end',
'center',
'50%',
'calc(50%)',
'min(50%, 100%)',
];
const fallbacks = [
null,
'1px',
'50%',
'calc(50% + 1px)',
'anchor(left)',
'anchor(--bar left)',
'anchor(--bar left, anchor(--baz right))',
];
// Tests basic combinations
for (let property of insetProperties) {
// Using a wrong anchor-side (e.g., `top: anchor(--foo left)`) doesn't cause a
// parse error, but triggers the fallback when resolved.
for (let name of anchorNames) {
for (let side of anchorSides) {
for (let fallback of fallbacks) {
let value = `anchor(${name ? name + ' ' : ''}${side}${fallback ? ', ' + fallback : ''})`;
test_valid_value(property, value);
if (name) {
// The <anchor-element> is allowed to appear after the <anchor-side>
let value_flip_order = `anchor(${side} ${name}${fallback ? ', ' + fallback : ''})`;
test_valid_value(property, value_flip_order, value);
}
}
}
}
}
// Tests that anchor() can be used in a calc tree
// Still follow the simplification process as outlined in https://drafts.csswg.org/css-values-4/#calc-simplification
test_valid_value('top', 'calc((anchor(--foo top) + anchor(--bar bottom)) / 2)', 'calc(0.5 * (anchor(--foo top) + anchor(--bar bottom)))');
test_valid_value('top', 'calc(0.5 * (anchor(--foo top) + anchor(--bar bottom)))');
test_valid_value('top', 'anchor(--foo top, calc(0.5 * anchor(--bar bottom)))');
test_valid_value('top', 'min(100px, 10%, anchor(--foo top), anchor(--bar bottom))');
</script>
|
