Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 7 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-mixins/local-attr-substitution.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Custom Functions: Local substitution of var() in attribute value</title>
<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 fallback in local">
<style>
@function --f() {
--valid: valid;
--x: var(--valid, 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 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>