223 lines
4.8 KiB
HTML
223 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<title>Custom Functions: Local substitution of var() in if()</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 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>
|