<title>Custom Functions: Evaluating a &lt;dashed-function></title>

<link rel="help" href="https://drafts.csswg.org/css-mixins-1/#substitute-a-dashed-function">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="resources/utils.js"></script>

<div id=parent>

<div id=target></div>

<div id=main></div>

<template data-name="Literal result">

<style>

@function --f() {

result: 12px;

}

#target {

--actual: --f();

--expected: 12px;

}

</style>

<template data-name="Literal result, typed return">

<style>

@function --f() returns <length> {

result: 12px;

}

#target {

--actual: --f();

--expected: 12px;

}

</style>

<template data-name="Literal result, typed return, calc">

<style>

@function --f() returns <length> {

result: calc(12px + 1px);

}

#target {

--actual: --f();

--expected: 13px;

}

</style>

<template data-name="Literal result, typed return, mismatch">

<style>

@function --f() returns <length> {

result: 12s;

}

#target {

--actual: --f();

/* --expected: <guaranteed-invalid> */

}

</style>

<template data-name="Missing result descriptor">

<style>

@function --f() {

}

#target {

--actual: --f();

/* --expected: <guaranteed-invalid> */

}

</style>

<template data-name="Literal result, empty">

<style>

@function --f() {

result:;

}

#target {

--actual: --f();

--expected:;

}

</style>

<template data-name="result cascading behavior">

<style>

@function --f() returns <length> {

result: 12px;

result: 24px; /* Overwrites previous */

}

#target {

--actual: --f();

--expected: 24px;

}

</style>

<template data-name="Another dashed-function in result">

<style>

@function --f() {

result: --g();

}

@function --g() {

result: 12px;

}

#target {

--actual: --f();

--expected: 12px;

}

</style>

<template data-name="Unused argument">

<style>

@function --f(--x) {

result: 12px;

}

#target {

--actual: --f(100px);

--expected: 12px;

}

</style>

<template data-name="Single parameter">

<style>

@function --f(--x) {

result: var(--x);

}

#target {

--actual: --f(100px);

--expected: 100px;

}

</style>

<template data-name="Multiple parameters">

<style>

@function --f(--x, --y, --z) {

result: var(--x) var(--y) var(--z);

}

#target {

--actual: --f(100px, auto, red);

--expected: 100px auto red;

}

</style>

<template data-name="Single parameter, typed">

<style>

@function --f(--x <length>) {

result: var(--x);

}

#target {

--actual: --f(100px);

--expected: 100px;

}

</style>

<template data-name="Typed parameter with calc()">

<style>

@function --f(--x <length>) {

result: var(--x);

}

#target {

--actual: --f(calc(100px + 1px));

--expected: 101px;

}

</style>

<template data-name="Untyped parameter with calc()">

<style>

@function --f(--x type(*)) {

result: var(--x);

}

#target {

--actual: --f(calc(100px + 1px));

--expected: calc(100px + 1px);

}

</style>

<template data-name="Various typed parameters">

<style>

@function --f(--x <length>, --y <angle>, --z <time>) {

result: var(--x) var(--y) var(--z);

}

#target {

--actual: --f(calc(100px + 1px), 1turn, 1000ms);

--expected: 101px 360deg 1s;

}

</style>

<template data-name="Parameter with complex type (auto)">

<style>

@function --f(--x type(<length> | auto)) {

result: var(--x);

}

#target {

--actual: --f(auto);

--expected: auto;

}

</style>

<template data-name="Parameter with complex type (px)">

<style>

@function --f(--x type(<length> | auto)) {

result: var(--x);

}

#target {

--actual: --f(10px);

--expected: 10px;

}

</style>

<template data-name="Passing argument to inner function">

<style>

@function --f(--x) {

result: --g(var(--x));

}

@function --g(--y) {

result: var(--y);

}

#target {

--actual: --f(12px);

--expected: 12px;

}

</style>

<template data-name="var() in argument resolved before call">

<style>

@function --f(--x) {

--one: FAIL;

result: var(--x);

}

#target {

--one: 1px;

--actual: --f(calc(100px + var(--one)));

--expected: calc(100px + 1px);

}

</style>

<template data-name="var() in argument resolved before call, typed">

<style>

@function --f(--x <length>) {

--one: FAIL;

result: var(--x);

}

#target {

--one: 1px;

--actual: --f(calc(100px + var(--one)));

--expected: 101px;

}

</style>

<template data-name="Argument captures IACVT due to invalid var()">

<style>

@function --f(--x) {

result: var(--x, PASS);

}

#target {

--actual: --f(var(--unknown));

--expected: PASS;

}

</style>

<template data-name="Argument captures IACVT due to invalid var(), typed">

<style>

@function --f(--x <length>) {

result: var(--x, PASS);

}

#target {

--actual: --f(var(--unknown));

--expected: PASS;

}

</style>

<template data-name="Argument captures IACVT due to type mismatch">

<style>

@function --f(--x <length>) {

result: var(--x, PASS);

}

#target {

--actual: --f(red);

--expected: PASS;

}

</style>

<template data-name="Single parameter with default value">

<style>

@function --f(--x: PASS) {

result: var(--x);

}

#target {

--actual: --f();

--expected: PASS;

}

</style>

<template data-name="Multiple parameters with defaults">

<style>

@function --f(--x, --y: 2px, --z: 3px) {

result: var(--x) var(--y) var(--z);

}

#target {

--actual: --f(1px, 5px);

--expected: 1px 5px 3px;

}

</style>

<template data-name="Multiple parameters with defaults, typed">

<style>

@function --f(--x, --y <length>: 2px, --z <length>: 3px) {

result: var(--x) var(--y) var(--z);

}

#target {

--actual: --f(1px, 5px);

--expected: 1px 5px 3px;

}

</style>

<template data-name="Default referencing another parameter">

<style>

@function --f(--x, --y: var(--x)) {

result: var(--x) var(--y);

}

#target {

--x: FAIL;

--y: FAIL;

--actual: --f(5px);

--expected: 5px 5px;

}

</style>

<template data-name="Default referencing another parameter, local interference">

<style>

@function --f(--x, --y: var(--x)) {

--x: 17px;

result: var(--x) var(--y);

}

#target {

--x: FAIL;

--y: FAIL;

--actual: --f(5px);

--expected: 17px 5px;

}

</style>

<template data-name="Default referencing another defaulted parameter">

<style>

@function --f(--x: 5px, --y: var(--x)) {

result: var(--x) var(--y);

}

#target {

--x: FAIL;

--y: FAIL;

--actual: --f();

--expected: 5px 5px;

}

</style>

<template data-name="Typed default with reference">

<style>

@function --f(--x: 5px, --y <length>: calc(var(--x) + 1px)) {

result: var(--x) var(--y);

}

#target {

--x: FAIL;

--y: FAIL;

--actual: --f();

--expected: 5px 6px;

}

</style>

<template data-name="IACVT arguments are defaulted">

<style>

@function --f(--x: 1, --y, --z: 3) {

result: var(--x) var(--y) var(--z);

}

#target {

--actual: --f(var(--unknown), 2, var(--unknown));

--expected: 1 2 3;

}

</style>

<template data-name="IACVT arguments are defaulted, typed">

<style>

@function --f(--x <number>: 1, --y <number>, --z <number>: 3) {

result: var(--x) var(--y) var(--z);

}

#target {

--actual: --f(var(--unknown), 2, var(--unknown));

--expected: 1 2 3;

}

</style>

<template data-name="Arguments are defaulted on type mismatch">

<style>

@function --f(--x <number>: 1, --y <number>, --z <number>: 3) {

result: var(--x) var(--y) var(--z);

}

#target {

--actual: --f(red, 2, 360deg);

--expected: 1 2 3;

}

</style>

<template data-name="Unused local">

<style>

@function --f() {

--x: 10px;

result: 1px;

}

#target {

--actual: --f();

--expected: 1px;

}

</style>

<template data-name="Local does not affect outer scope">

<style>

@function --f() {

--x: 10px;

result: 1px;

}

#target {

--x: 20px;

--actual: --f() var(--x);

--expected: 1px 20px;

}

</style>

<template data-name="Substituting local in result">

<style>

@function --f() {

--x: 10px;

result: var(--x);

}

#target {

--actual: --f();

--expected: 10px;

}

</style>

<template data-name="Substituting multiple locals in result">

<style>

@function --f() {

--x: 10px;

--y: 17px;

result: var(--x) var(--y);

}

#target {

--actual: --f();

--expected: 10px 17px;

}

</style>

<template data-name="Local referring to another local">

<style>

@function --f() {

--x: 10px;

--y: var(--x);

result: var(--y);

}

#target {

--actual: --f();

--expected: 10px;

}

</style>

<template data-name="Locals appearing after result">

<style>

@function --f() {

result: var(--y);

--x: 10px;

--y: var(--x);

}

#target {

--actual: --f();

--expected: 10px;

}

</style>

<template data-name="Locals cascading behavior">

<style>

@function --f() {

--x: 10px;

--y: var(--x);

result: var(--y);

--x: 20px; /* Surprise! */

}

#target {

--actual: --f();

--expected: 20px;

}

</style>

<template data-name="Custom properties are visible inside function">

<style>

@function --f() {

result: var(--x);

}

#target {

--x: 10px;

--actual: --f();

--expected: 10px;

}

</style>

<template data-name="Substitute local from outer scope">

<style>

@function --f() {

--x: PASS;

result: --g();

}

@function --g() {

result: var(--x);

}

#target {

--x: FAIL;

--actual: --f();

--expected: PASS;

}

</style>

<template data-name="Substitute argument from outer scope">

<style>

@function --f(--x) {

result: --g();

}

@function --g() {

result: var(--x);

}

#target {

--x: FAIL;

--actual: --f(PASS);

--expected: PASS;

}

</style>

<template data-name="Inner argument shadowing outer argument">

<style>

@function --f(--x) {

result: --g(PASS);

}

@function --g(--x) {

result: var(--x);

}

#target {

--x: FAIL;

--actual: --f(FAIL);

--expected: PASS;

}

</style>

<template data-name="Inner argument shadowing outer local">

<style>

@function --f() {

--x: FAIL;

result: --g(PASS);

}

@function --g(--x) {

result: var(--x);

}

#target {

--x: FAIL;

--actual: --f();

--expected: PASS;

}

</style>

<template data-name="Inner local shadowing outer argument">

<style>

@function --f(--x) {

result: --g();

}

@function --g() {

--x: PASS;

result: var(--x);

}

#target {

--x: FAIL;

--actual: --f(FAIL);

--expected: PASS;

}

</style>

<template data-name="Inner local shadowing outer local">

<style>

@function --f() {

--x: FAIL;

result: --g();

}

@function --g() {

--x: PASS;

result: var(--x);

}

#target {

--x: FAIL;

--actual: --f();

--expected: PASS;

}

</style>

<template data-name="Referencing outer local containing var()">

<style>

@function --f() {

--y: 1;

--x: var(--y);

result: --g();

}

@function --g() {

--y: 0;

result: var(--x);

}

#target {

--y: 0;

--x: FAIL;

--actual: --f();

--expected: 1;

}

</style>

<template data-name="Referencing outer typed argument">

<style>

@function --f(--l <length>: 10.00px) {

result: --g();

}

@function --g() {

result: var(--l);

}

#target {

--actual: --f();

--expected: 10px;

}

</style>

<template data-name="Same function with different scopes">

<style>

@function --one() {

--x: 1;

result: --f();

}

@function --two() {

--x: 2;

result: --f();

}

@function --three() {

--x: 3;

result: --f();

}

@function --f() {

result: var(--x);

}

#target {

--x: 0;

--actual: --one() --two() --three() --f();

--expected: 1 2 3 0;

}

</style>

<template data-name="Referencing local two frames up">

<style>

@function --a() {

--x: 1;

result: --b();

}

@function --b() {

result: --c();

}

@function --c() {

result: var(--x);

}

#target {

--x: 0;

--actual: --a();

--expected: 1;

}

</style>

<template data-name="IACVT outer local shadows property">

<style>

@function --a() {

--x: var(--unknown);

result: --b();

}

@function --b() {

result: var(--x, PASS);

}

#target {

--x: FAIL;

--actual: --a();

--expected: PASS;

}

</style>

<template data-name="Inner function call should see resolved outer locals">

<style>

@function --a() {

--x: --b();

--y: var(--px);

result: var(--x);

}

@function --b() {

result: var(--y, FAIL);

}

#target {

--px: 10px;

--actual: --a();

--expected: 10px;

}

</style>

<template data-name="Inner function call should see resolved outer locals (reverse)">

<style>

@function --a() {

--x: var(--px);

--y: --b();

result: var(--y);

}

@function --b() {

result: var(--x, FAIL);

}

#target {

--px: 10px;

--actual: --a();

--expected: 10px;

}

</style>

<template data-name="Parameter shadows custom property">

<style>

@function --f(--x) {

result: var(--x);

}

#target {

--x: FAIL;

--actual: --f(PASS);

--expected: PASS;

}

</style>

<template data-name="Local shadows parameter">

<style>

@function --f(--x) {

--x: PASS;

result: var(--x);

}

#target {

--x: FAIL1;

--actual: --f(FAIL2);

--expected: PASS;

}

</style>

<template data-name="IACVT argument shadows outer scope">

<style>

@function --f(--x) {

result: var(--x, PASS);

}

#target {

--x: FAIL;

--actual: --f(var(--unknown));

--expected: PASS;

}

</style>

<template data-name="IACVT argument shadows outer scope, typed">

<style>

@function --f(--x <length>) {

result: var(--x, PASS);

}

#target {

--x: FAIL;

--actual: --f(var(--unknown));

--expected: PASS;

}

</style>

<template data-name="IACVT argument shadows outer scope, type mismatch">

<style>

@function --f(--x <length>) {

result: var(--x, PASS);

}

#target {

--x: FAIL;

--actual: --f(red);

--expected: PASS;

}

</style>

<template data-name="Missing only argument">

<style>

@function --f(--x) {

result: 10px;

}

#target {

--actual: --f();

/* --expected: <guaranteed-invalid> */

}

</style>

<template data-name="Missing one argument of several">

<style>

@function --f(--x, --y, --z) {

result: 10px;

}

#target {

--actual: --f(1, 2);

/* --expected: <guaranteed-invalid> */

}

</style>

<template data-name="Passing list as only argument">

<style>

@function --f(--x) {

result: var(--x);

}

#target {

--actual: --f({1px,2px});

--expected: 1px,2px;

}

</style>

<template data-name="Passing list as first argument">

<style>

@function --f(--x, --y) {

result: var(--x) | var(--y);

}

#target {

--actual: --f({1px, 2px}, 3px);

--expected: 1px, 2px | 3px;

}

</style>

<template data-name="Passing list as second argument">

<style>

@function --f(--x, --y) {

result: var(--x) | var(--y);

}

#target {

--actual: --f(1px, {2px, 3px});

--expected: 1px | 2px, 3px;

}

</style>

<template data-name="Passing comma as argument">

<style>

@function --f(--x) {

result: var(--x);

}

#target {

--actual: --f({,});

--expected: ,;

}

</style>

<template data-name="Passing {} as argument">

<style>

@function --f(--x) {

result: var(--x);

}

#target {

--actual: --f({{}});

--expected: {};

}

</style>

<template data-name="Passing non-whole-value {} as argument">

<style>

@function --f(--x) {

result: var(--x);

}

#target {

--actual: --f({foo{}});

--expected: foo{};

}

</style>

<template data-name="Local variable with initial keyword">

<style>

@function --f(--x: FAIL1) {

--x: FAIL2;

--x: initial;

result: var(--x);

}

#target {

--actual: --f(PASS);

--expected: PASS;

}

</style>

<template data-name="Local variable with initial keyword, defaulted">

<style>

@function --f(--x: PASS) {

--x: FAIL;

--x: initial;

result: var(--x);

}

#target {

--actual: --f();

--expected: PASS;

}

</style>