Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 14 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-mixins/local-if-substitution.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Custom Functions: Local substitution of var() in if()</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 if() condition's custom property value substitutes locally">
<style>
@function --f() {
--x: 3px;
result: if(style(--x: 3px): PASS; else: FAIL;);
}
#target {
--x: 1px;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="var() in if() condition's specified value substitutes locally">
<style>
@function --f() {
--x: 3px;
result: if(style(--y: var(--x)): PASS; else: FAIL;);
}
#target {
--x: 1px;
--y: 3px;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="var() in if() declaration value substitutes locally">
<style>
@function --f() {
--x: PASS;
result: if(style(--true): var(--x); else: FAIL;);
}
#target {
--true: true;
--x: FAIL;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="var() in if() condition's custom property value substitutes locally, argument">
<style>
@function --f(--x) {
result: if(style(--x: 3px): PASS; else: FAIL;);
}
#target {
--x: 1px;
--actual: --f(3px);
--expected: PASS;
}
</style>
</template>
<template data-name="var() in if() condition's specified value substitutes locally, argument">
<style>
@function --f(--x) {
result: if(style(--y: var(--x)): PASS; else: FAIL;);
}
#target {
--x: 1px;
--y: 3px;
--actual: --f(3px);
--expected: PASS;
}
</style>
</template>
<template data-name="var() in if() declaration value substitutes locally, argument">
<style>
@function --f(--x) {
result: if(style(--true): var(--x); else: FAIL;);
}
#target {
--true: true;
--x: FAIL;
--actual: --f(PASS);
--expected: PASS;
}
</style>
</template>
<template data-name="dashed function in if() declaration value">
<style>
@function --f() {
result: if(style(--true): --g(); else: FAIL;);
}
@function --g() {
result: PASS;
}
#target {
--true: true;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="dashed function with argument in if() declaration value">
<style>
@function --f(--x) {
--true: true;
result: if(style(--true): --g(var(--x)); else: FAIL;);
}
@function --g(--x) {
result: var(--x, FAIL);
}
#target {
--actual: --f(PASS);
--expected: PASS;
}
</style>
</template>
<template data-name="if() cycle through local">
<style>
@function --f() {
--x: if(style(--true): var(--x); else: FAIL;);
result: var(--x, PASS);
}
#target {
--true: true;
--x: FAIL;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="if() cycle in condition custom property through local">
<style>
@function --f() {
--x: if(style(--x): FAIL1; else: FAIL2;);
result: var(--x, PASS);
}
#target {
--x: 1px;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="if() cycle in condition specified value through local">
<style>
@function --f() {
--x: if(style(--y: var(--x)): FAIL1; else: FAIL2;);
result: var(--x, PASS);
}
#target {
--y: 1px;
--x: 1px;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="if() cycle through function">
<style>
@function --f() {
--local: --g();
result: var(--local);
}
@function --g() {
result: if(style(--true): --f());
}
#target {
--true: true;
--local: FAIL;
--tmp: --f();
--actual: var(--tmp, PASS);
--expected: PASS;
}
</style>
</template>
<template data-name="if() no cycle in overridden local">
<style>
@function --f() {
--x: 3px;
result: if(style(--x): PASS; else: FAIL);
}
#target {
--x: var(--x);
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="if() no cycle in overridden argument">
<style>
@function --f(--x) {
result: if(style(--x): PASS; else: FAIL);
}
#target {
--x: var(--x);
--actual: --f(3px);
--expected: PASS;
}
</style>
</template>
<script>
test_all_templates();
</script>