80 lines
3.4 KiB
HTML
80 lines
3.4 KiB
HTML
<!doctype html>
|
|
<title>Evaluation of style queries</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="support/cq-testcommon.js"></script>
|
|
<style>
|
|
#container {
|
|
--applied: false;
|
|
--foo: bar;
|
|
}
|
|
</style>
|
|
<div id=container>
|
|
<div id=inner></div>
|
|
</div>
|
|
<script>
|
|
setup(() => assert_implements_size_container_queries());
|
|
|
|
function test_query(query, expected) {
|
|
test((t) => {
|
|
let style = document.createElement('style');
|
|
t.add_cleanup(() => { style.remove(); });
|
|
style.innerText = `@container ${query} { #inner { --applied:true; } }`;
|
|
let cs = getComputedStyle(inner);
|
|
assert_equals(cs.getPropertyValue('--applied'), 'false');
|
|
document.head.append(style);
|
|
assert_equals(cs.getPropertyValue('--applied'), expected.toString());
|
|
}, query);
|
|
};
|
|
|
|
// Note that the following assumes that elements are style containers by
|
|
// default [1], and that:
|
|
//
|
|
// - style(--foo: bar) is a query that returns 'true', and
|
|
// - style(--baz: qux) is a query that returns 'false'.
|
|
//
|
|
// [1] https://github.com/w3c/csswg-drafts/issues/7066
|
|
|
|
// Nesting in <style-query>:
|
|
test_query('style((--foo: bar))', true);
|
|
test_query('style((--baz: qux))', false);
|
|
test_query('style((unknown))', false);
|
|
test_query('unknown((--foo: bar))', false);
|
|
|
|
// "not" in <style-query>:
|
|
test_query('style(not (--foo: bar))', false);
|
|
test_query('style(not (--baz: qux))', true);
|
|
test_query('style(not (unknown))', false);
|
|
|
|
// "and" in <style-query>:
|
|
test_query('style((--foo: bar) and (--foo: bar))', true);
|
|
test_query('style((--foo: bar) and (--foo: bar) and (--foo: bar))', true);
|
|
test_query('style((--baz: qux) and (--baz: qux))', false);
|
|
test_query('style((--baz: qux) and (--foo: bar) and (--foo: bar))', false);
|
|
test_query('style((--foo: bar) and (--baz: qux) and (--foo: bar))', false);
|
|
test_query('style((--foo: bar) and (--foo: bar) and (--baz: qux))', false);
|
|
test_query('style((unknown) and (--foo: bar) and (--foo: bar))', false);
|
|
test_query('style((--foo: bar) and (unknown) and (--foo: bar))', false);
|
|
test_query('style((--foo: bar) and (--foo: bar) and (unknown))', false);
|
|
|
|
// "or" in <style-query>:
|
|
test_query('style((--foo: bar) or (--foo: bar))', true);
|
|
test_query('style((--foo: bar) or (--foo: bar) or (--foo: bar))', true);
|
|
test_query('style((--baz: qux) or (--baz: qux))', false);
|
|
test_query('style((--baz: qux) or (--foo: bar) or (--foo: bar))', true);
|
|
test_query('style((--foo: bar) or (--baz: qux) or (--foo: bar))', true);
|
|
test_query('style((--foo: bar) or (--foo: bar) or (--baz: qux))', true);
|
|
test_query('style((unknown) or (--foo: bar) or (--foo: bar))', false);
|
|
test_query('style((--foo: bar) or (unknown) or (--foo: bar))', false);
|
|
test_query('style((--foo: bar) or (--foo: bar) or (unknown))', false);
|
|
test_query('style((unknown) or (--baz: qux) or (--foo: bar))', false);
|
|
|
|
// Combinations, <style-query>:
|
|
test_query('style(not ((--foo: bar) and (--foo: bar)))', false);
|
|
test_query('style(not ((--foo: bar) and (--baz: qux)))', true);
|
|
test_query('style((--foo: bar) and (not ((--baz: qux) or (--foo: bar))))', false);
|
|
test_query('style((--baz: qux) or (not ((--baz: qux) and (--foo: bar))))', true);
|
|
test_query('style((--baz: qux) or ((--baz: qux) and (--foo: bar)))', false);
|
|
|
|
</script>
|