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
|
<!DOCTYPE html>
<title>Custom Functions: Local substitution of var() in attribute value</title>
<link rel="help" href="https://drafts.csswg.org/css-mixins-1/#locally-substitute-a-var">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/utils.js"></script>
<div id=target data-x="var(--x)" data-f="--f()"></div>
<div id=main></div>
<!-- To pass, a test must produce matching computed values for --actual and
--expected on #target. -->
<template data-name="var() in attribute value substitutes locally">
<style>
@function --f() {
--x: PASS;
result: attr(data-x type(*));
}
#target {
--x: FAIL;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="var() in attribute value substitutes locally, argument">
<style>
@function --f(--x) {
result: attr(data-x type(*));
}
#target {
--x: FAIL;
--actual: --f(PASS);
--expected: PASS;
}
</style>
</template>
<template data-name="var() in attribute value substitutes locally, typed">
<style>
@function --f() returns <length> {
--x: calc(10px + 2px);
result: attr(data-x type(<length>));
}
#target {
--x: calc(10px + 1px);
--actual: --f();
--expected: 12px;
}
</style>
</template>
<template data-name="attr() fallback substitutes locally">
<style>
@function --f() {
--x: PASS;
result: attr(data-unknown, var(--x));
}
#target {
--x: FAIL;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="attr() cycle through local">
<style>
@function --f() {
--x: attr(data-x type(*));
--y: attr(data-x type(*), PASS);
result: var(--y, PASS);
}
#target {
--x: FAIL1;
--y: FAIL2;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="attr() cycle through unused fallback in local">
<style>
@function --f() {
--valid: PASS;
--x: var(--valid, attr(data-x type(*)));
--y: attr(data-x type(*), FAIL);
result: var(--y, FAIL);
}
#target {
--x: FAIL1;
--y: FAIL2;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="attr() cycle through function">
<style>
@function --f() {
--local: --g();
result: var(--local);
}
@function --g() {
result: attr(data-f type(*));
}
#target {
--local: FAIL;
--tmp: --f();
--actual: var(--tmp, PASS);
--expected: PASS;
}
</style>
</template>
<script>
test_all_templates();
</script>
|
