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
|
<!DOCTYPE html>
<title>Custom Functions: Local var() substitution</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></div>
<div id=main></div>
<!-- To pass, a test must produce matching computed values for --actual and
--expected on #target. -->
<!-- Fallbacks -->
<template data-name="Fallback directly in result">
<style>
@function --f() {
result: var(--unknown, PASS);
}
#target {
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="Fallback via present, but invalid local">
<style>
@function --f() {
--x: var(--unknown);
result: var(--x, PASS);
}
#target {
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="Fallback is locally resolved (result)">
<style>
@function --f() {
--x: PASS;
result: var(--unknown, var(--x));
}
#target {
--x: FAIL;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="Fallback is locally resolved (local var)">
<style>
@function --f() {
--y: PASS;
--x: var(--unknown, var(--y));
result: var(--x);
}
#target {
--x: FAIL1;
--Y: FAIL2;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<script>
test_all_templates();
</script>
|
