Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 5 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-mixins/local-inherit-substitution.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Custom Functions: Local inherit() substitution</title>
<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>
<div id=main></div>
<!-- To pass, a test must produce matching computed values for '--actual'
and '--expected' on '#target'. -->
<template data-name="inherit() refers to parent stack frame (element)">
<style>
@function --f() {
--x: FAIL2;
result: inherit(--x);
}
#parent {
--x: FAIL1;
}
#parent > #target {
--x: PASS;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="inherit() refers to parent stack frame (other function call)">
<style>
@function --f() {
--x: PASS;
result: --g();
}
@function --g() {
--x: FAIL3;
result: inherit(--x);
}
#parent {
--x: FAIL1;
}
#parent > #target {
--x: FAIL2;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="inherit() referring to guaranteed-invalid in parent frame">
<style>
@function --f() {
--x: var(--noexist);
result: --g();
}
@function --g() {
--x: FAIL3;
result: inherit(--x, PASS);
}
#parent {
--x: FAIL1;
}
#parent > #target {
--x: FAIL2;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="inherit() referring to cycle in parent frame">
<style>
@function --f() {
--x: var(--x);
result: --g();
}
@function --g() {
--x: FAIL3;
result: inherit(--x, PASS);
}
#parent {
--x: FAIL1;
}
#parent > #target {
--x: FAIL2;
--actual: --f();
--expected: PASS;
}
</style>
</template>
<template data-name="inherit() referring to typed value in parent frame">
<style>
@function --f(--x <length>) {
result: --g();
}
@function --g() {
--x: 14px;
result: inherit(--x);
}
#parent {
--x: 12px;
}
#parent > #target {
--x: 13px;
--actual: --f(42.0px);
--expected: 42px;
}
</style>
</template>
<script>
test_all_templates();
</script>