Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-conditional/container-queries/container-rule-cssom.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Conditional Test: CSSContainerRule API</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style id="style_elm">
</style>
<script>
const sheet = style_elm.sheet;
function insertRule(source_text) {
try {
while (sheet.cssRules.length) {
sheet.deleteRule(0);
}
sheet.insertRule(source_text);
return sheet.cssRules[0];
} catch (e) {
return null;
}
}
test(() => {
const rule = insertRule("@container Name {}");
assert_true(!!rule, "Rule successfully parsed");
assert_equals(rule.containerName, "Name");
assert_equals(rule.containerQuery, "");
}, "containerName without query");
test(() => {
const rule = insertRule("@container (width > 300px) {}");
assert_true(!!rule, "Rule successfully parsed");
assert_equals(rule.containerName, "");
assert_equals(rule.containerQuery, "(width > 300px)");
}, "containerQuery without name");
test(() => {
const rule = insertRule("@container Name (width > 300px) {}");
assert_true(!!rule, "Rule successfully parsed");
assert_equals(rule.containerName, "Name");
assert_equals(rule.containerQuery, "(width > 300px)");
}, "containerName and containerQuery");
</script>