Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 3 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-conditional/container-queries/custom-property-style-query-multiline-var.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>CSS Container Queries Test: style() query against custom property with multi-line var() fallback</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<style>
/*
Each container declares the same logical value:
var(<undefined-var>, "my-default-value")
once on a single line and several times split across multiple lines
(the shapes a code formatter such as Prettier produces). The container
query asks whether the custom property equals "my-default-value", which
is the fallback every container is expected to resolve to.
*/
.single-line {
--my-container-var: var(--my-undefined-var, "my-default-value");
}
.multi-line {
--my-container-var: var(
--my-undefined-var,
"my-default-value"
);
}
.multi-line-newline-after-comma {
--my-container-var: var(--my-undefined-var,
"my-default-value");
}
.multi-line-newline-before-paren {
--my-container-var: var(--my-undefined-var, "my-default-value"
);
}
.multi-line-mixed {
--my-container-var:
var(
--my-undefined-var,
"my-default-value"
)
;
}
@container style(--my-container-var: "my-default-value") {
.target { --matched: true; }
}
</style>
<div class="single-line">
<div class="target" id="t-single"></div>
</div>
<div class="multi-line">
<div class="target" id="t-multi"></div>
</div>
<div class="multi-line-newline-after-comma">
<div class="target" id="t-multi-after-comma"></div>
</div>
<div class="multi-line-newline-before-paren">
<div class="target" id="t-multi-before-paren"></div>
</div>
<div class="multi-line-mixed">
<div class="target" id="t-multi-mixed"></div>
</div>
<script>
setup(() => {
assert_implements_style_container_queries();
});
function assertMatched(id, label) {
test(() => {
const value = getComputedStyle(document.getElementById(id))
.getPropertyValue("--matched").trim();
assert_equals(value, "true",
`style(--my-container-var: "my-default-value") should match for ${label}`);
}, label);
}
assertMatched("t-single", "single-line var() fallback");
assertMatched("t-multi", "multi-line var() fallback");
assertMatched("t-multi-after-comma", "newline after comma in var() fallback");
assertMatched("t-multi-before-paren", "newline before closing parentheses in var() fallback");
assertMatched("t-multi-mixed", "newline before var() and around fallback");
</script>