Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 19 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-mixins/dashed-function-cycles.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Custom Functions: Handling cycles</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. -->
<!-- Locals / Arguments -->
<template data-name="Local with self-cycle">
<style>
@function --f() {
--x: var(--x);
result: var(--x, PASS);
}
#target {
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="Cycle reference without fallback makes result invalid">
<style>
@function --f() {
--x: var(--x);
result: var(--x);
}
#target {
--actual: --f();
/* --expected: <guaranteed-invalid> */
}
</style>
</template>
<template data-name="Local with self-cycle in fallback">
<style>
@function --f() {
--y: FAIL;
--x: var(--y, var(--x));
result: var(--x, PASS);
}
#target {
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="Local shadowing cyclic property --x">
<style>
/* The _properties_ --x and --y are in a cycle.
However, the _local_ --x is not a cycle with anything. */
@function --f() {
--x: var(--y, PASS);
result: var(--x);
}
#target {
--x: var(--y);
--y: var(--x);
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="Local shadowing cyclic outer local --x ">
<style>
/* The locals --x and --y are in a cycle in --f(). */
@function --f() {
--x: var(--y);
--y: var(--x);
result: --g();
}
@function --g() {
--x: var(--y, PASS); /* Shadows outer --x. */
result: var(--x);
}
#target {
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="Arguments shadowing cyclic properties">
<style>
@function --f(--x, --y) {
result: var(--x) var(--y);
}
#target {
--x: var(--y);
--y: var(--x);
--actual: --f(PASS-x, PASS-y);
--expected: PASS-x PASS-y;
}
</style>
</template>
<template data-name="Observing property cycle locally">
<style>
@function --f() {
result: var(--x, PASS-x) var(--x, PASS-y);
}
#target {
--x: var(--y);
--y: var(--x);
--actual: --f();
--expected: PASS-x PASS-y;
}
</style>
</template>
<template data-name="Using cyclic values with no fallback">
<style>
@function --f() {
--y: var(--x, 1);
--x: var(--y, 3);
result: var(--x) var(--y);
}
#target {
--actual: --f();
/* --expected: <guaranteed-invalid> */
}
</style>
</template>
<template data-name="Self-cycle in non-used local variable">
<style>
@function --f() {
--x: var(--x);
result: PASS;
}
#target {
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="Using cyclic value in unused fallback">
<style>
@function --f() {
--x: PASS;
result: var(--x, var(--y));
}
#target {
--y: var(--y);
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="Using cyclic value in unused fallback (local)">
<style>
@function --f() {
--x: PASS;
--y: var(--y);
result: var(--x, var(--y));
}
#target {
--actual: --f();
--expected: PASS;
}
</style>
</template>
<!-- Between <dashed-functions> -->
<!--
Note that several of these tests call functions via a "--tmp" custom property.
This is to be able to trigger a fallback when the function is in a cycle.
-->
<template data-name="Dashed-function, self-cycle">
<style>
@function --f() {
result: --f();
}
#target {
--tmp: --f();
--actual: var(--tmp, PASS);
--expected: PASS;
}
</style>
</template>
<template data-name="Cycle through other function (--g)">
<style>
@function --f() {
result: --g();
}
@function --g() {
result: --f();
}
#target {
--tmp: --g();
--actual: var(--tmp, PASS);
--expected: PASS;
}
</style>
</template>
<template data-name="Cycle through other function (--f)">
<style>
@function --f() {
result: --g();
}
@function --g() {
result: --f();
}
#target {
--tmp: --f();
--actual: var(--tmp, PASS);
--expected: PASS;
}
</style>
</template>
<template data-name="Cycle through local, self">
<style>
@function --f() {
--local: --f();
result: var(--local);
}
#target {
--local: FAIL;
--tmp: --f();
--actual: var(--tmp, PASS);
--expected: PASS;
}
</style>
</template>
<template data-name="Cycle through unused local">
<style>
@function --f() {
--unused: --f();
result: FAIL-result;
}
#target {
--local: FAIL;
--tmp: --f();
--actual: var(--tmp, PASS);
--expected: PASS;
}
</style>
</template>
<template data-name="Cycle through global, self">
<style>
@function --f() {
result: var(--global);
}
#target {
--global: --f();
--tmp: --f();
--actual: var(--tmp, PASS);
--expected: PASS;
}
</style>
</template>
<template data-name="Cycle through local, other function">
<style>
@function --f() {
result: --g();
}
@function --g() {
--local: --f();
result: var(--local);
}
#target {
--local: FAIL;
--tmp: --g();
--actual: var(--tmp, PASS);
--expected: PASS;
}
</style>
</template>
<template data-name="Cycle through various variables and other functions">
<style>
@function --f() {
--local: --g();
result: var(--local);
}
@function --g() {
--local: FAIL;
result: var(--global);
}
#target {
--local: FAIL;
--global: --f();
--tmp: --g();
--actual: var(--tmp, PASS);
--expected: PASS;
}
</style>
</template>
<script>
test_all_templates();
</script>