Repository navigation
Expand file tree
/
Copy pathcalc-sibling-function-parsing.html
More file actions
78 lines (67 loc) · 3.71 KB
/
Copy pathcalc-sibling-function-parsing.html
File metadata and controls
78 lines (67 loc) · 3.71 KB
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>
<html>
<head>
<title>CSS sibling-index() and sibling-count()</title>
<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// <length>
test_valid_value('left', 'calc(1px * sibling-index())');
test_valid_value('left', 'calc(1px * sibling-index( ))', 'calc(1px * sibling-index())');
test_valid_value('left', 'calc(1em * sibling-index())');
test_valid_value('left', 'calc(1rem * sibling-count())');
test_valid_value('left', 'calc(1vh * sibling-index())');
test_valid_value('left', 'calc(1ch * sibling-count())');
test_valid_value('left', 'calc(1% * sibling-index())');
test_valid_value('left', 'calc(5% * sibling-count())');
test_invalid_value('left', 'calc(1px * sibling-index(100px))');
test_invalid_value('left', 'calc(1px * sibling-index(1))');
test_invalid_value('left', 'calc(10 * sibling-index())');
// <angle>
test_valid_value('rotate', 'calc(10deg * sibling-index())');
test_valid_value('rotate', 'calc(sibling-index() * 2rad * pi)', 'calc(360deg * sibling-index())');
test_valid_value('rotate', 'calc(1turn * sibling-count())', 'calc(360deg * sibling-count())');
test_valid_value('rotate', 'calc(sibling-count() * 1rad * pi)', 'calc(180deg * sibling-count())');
test_invalid_value('rotate', 'calc(1px * sibling-index())');
test_invalid_value('rotate', 'calc(1s * sibling-index())');
// <integer> (which accepts these functions without calc())
test_valid_value('z-index', 'sibling-index()');
test_valid_value('z-index', 'sibling-count()');
test_valid_value('z-index', 'calc(2 * sibling-index())');
test_valid_value('z-index', 'calc(sibling-index())', 'sibling-index()');
test_valid_value('z-index', 'calc(sibling-count())', 'sibling-count()');
test_invalid_value('z-index', 'sibling-index(100px)');
test_invalid_value('z-index', 'sibling-count(1)');
// <number>
test_valid_value('opacity', 'calc(0.1 * sibling-index())');
test_valid_value('opacity', 'calc(0.5 * sibling-count())');
test_valid_value('scale', 'calc(2 * sibling-index())');
test_valid_value('scale', 'calc(0.5 * sibling-count())');
test_invalid_value('opacity', 'calc(1ms * sibling-index())');
test_invalid_value('opacity', 'calc(1px * sibling-count())');
// <time>
test_valid_value('animation-duration', 'calc(1s * sibling-index())');
test_valid_value('animation-duration', 'calc(1s * sibling-count( ))', 'calc(1s * sibling-count())');
test_valid_value('animation-duration', 'calc(100ms * sibling-count())', 'calc(0.1s * sibling-count())');
test_valid_value('animation-duration', 'calc(0.5s * sibling-index())');
test_valid_value('animation-duration', 'calc(250ms * sibling-index())', 'calc(0.25s * sibling-index())');
test_invalid_value('animation-duration', 'calc(1px * sibling-index())');
test_invalid_value('animation-duration', 'calc(1deg * sibling-index())');
// <color> functions
test_valid_value('color', 'color(srgb calc(0.1 * sibling-index()) 0.5 0.5)');
test_valid_value('color', 'color(srgb 0 calc(0.1 * sibling-count()) 0.5)');
test_valid_value('color', 'color(srgb 0 0 calc(0.1 * sibling-index()))');
test_valid_value('color', 'color(srgb 0.5 0.5 0.5 / calc(0.1 * sibling-count()))');
test_valid_value('color', 'oklch(calc(0.1 * sibling-index()) 0.2 180)');
test_valid_value('color', 'oklch(0.5 calc(0.05 * sibling-count()) 180)');
test_valid_value('color', 'oklch(0.5 0.2 calc(30deg * sibling-index()))');
test_valid_value('color', 'oklch(0.5 0.2 180 / calc(0.1 * sibling-index()))');
test_invalid_value('color', 'color(srgb calc(1px * sibling-index()) 0 0)');
test_invalid_value('color', 'oklch(calc(1px * sibling-index()) 0 0)');
</script>
</body>
</html>