Source code
Revision control
Copy as Markdown
Other Tools
function assert_implements_size_container_queries() {
assert_implements(CSS.supports("container-type:size"),
"Basic support for size container queries required");
}
function assert_implements_scroll_state_container_queries() {
assert_implements(CSS.supports("container-type:scroll-state"),
"Basic support for scroll-state container queries required");
}
function assert_implements_style_container_queries() {
// TODO: Replace with CSS.supports() when/if this can be expressed with at-rule().
const sheet = new CSSStyleSheet();
// No support means the style() function is <general-enclosed> which should
// affect serialization. Although serialization for <general-enclosed> is not
// specified[1], unknown function names are unlikely to be resolved to be
// serialized lower-case. Also, keeping the case is currently interoperable.
//
sheet.replaceSync('@container STYLE(--foo: bar){}');
assert_implements(sheet.cssRules[0].containerQuery === "style(--foo: bar)",
"Basic support for style container queries required");
}
function cleanup_container_query_main() {
const main = document.querySelector("#cq-main");
while (main.firstChild)
main.firstChild.remove();
}
function set_container_query_style(text) {
let style = document.createElement('style');
style.innerText = text;
document.querySelector("#cq-main").append(style);
return style;
}
function test_cq_rule_invalid(query) {
const ruleText = `@container ${query} {}`;
test(t => {
t.add_cleanup(cleanup_container_query_main);
let style = set_container_query_style(ruleText);
assert_equals(style.sheet.rules.length, 0);
}, `@container rule should be invalid: ${ruleText} {}`);
}
function test_cq_rule_valid(query) {
const ruleText = `@container ${query} {}`;
test(t => {
t.add_cleanup(cleanup_container_query_main);
let style = set_container_query_style(`@container ${query} {}`);
assert_equals(style.sheet.rules.length, 1);
}, `@container rule should be valid: ${ruleText} {}`);
}
function test_cq_condition_invalid(condition) {
test(t => {
t.add_cleanup(cleanup_container_query_main);
let style = set_container_query_style(`@container name ${condition} {}`);
assert_equals(style.sheet.rules.length, 0);
}, `Query condition should be invalid: ${condition}`);
}
// Tests that 1) the condition parses, and 2) is either "unknown" or not, as
// specified.
function test_cq_condition_valid(condition, unknown) {
test(t => {
t.add_cleanup(cleanup_container_query_main);
let style = set_container_query_style(`
@container name ${condition} {}
@container name (${condition}) or (not (${condition})) { main { --match:true; } }
`);
assert_equals(style.sheet.rules.length, 2);
const expected = unknown ? '' : 'true';
assert_equals(getComputedStyle(document.querySelector("#cq-main")).getPropertyValue('--match'), expected);
}, `Query condition should be valid: ${condition}`);
}
function test_cq_condition_known(condition) {
test_cq_condition_valid(condition, false /* unknown */);
}
function test_cq_condition_unknown(condition) {
test_cq_condition_valid(condition, true /* unknown */);
}
function test_container_name_invalid(container_name) {
test(t => {
t.add_cleanup(cleanup_container_query_main);
let style = set_container_query_style(`@container ${container_name} not (width) {}`);
assert_equals(style.sheet.rules.length, 0);
}, `Container name: ${container_name}`);
}
function test_container_name_valid(container_name) {
test(t => {
t.add_cleanup(cleanup_container_query_main);
let style = set_container_query_style(`@container ${container_name} not (width) {}`);
assert_equals(style.sheet.rules.length, 1);
}, `Container name: ${container_name}`);
}