Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 4 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-mixins/local-var-substitution.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Custom Functions: Local var() substitution</title>
<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>