Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-mixins/function-container-style.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Custom Functions: @container style queries</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#container, #target {
container-type: size;
}
#size-container {
container-type: size;
width: 100px;
height: 100px;
--x: size;
}
#parent {
--x: parent;
}
@function --f() {
result: A;
@container (style(--x: before)) {
result: B;
}
@container (style(--x: target)) {
result: C;
}
@container (style(--x: parent)) {
result: D;
}
@container (style(--x: size)) {
result: E;
}
}
#target {
--x: target;
--actual: --f();
}
#target::before {
content: "test";
--x: before;
--actual: --f();
}
</style>
<div id=size-container>
<div id=parent>
<div id=target>
</div>
</div>
</div>
<script>
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue('--x'), 'target');
assert_equals(getComputedStyle(target).getPropertyValue('--actual'), 'D');
}, 'Style query on #target should query parent element');
test(() => {
assert_equals(getComputedStyle(target, '::before').getPropertyValue('--x'), 'before');
assert_equals(getComputedStyle(target, '::before').getPropertyValue('--actual'), 'C');
}, 'Style query on ::before should query originating element');
</script>