| <!doctype html> |
| <title>Evaluation of queries</title> |
| <link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-rule"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="support/cq-testcommon.js"></script> |
| <style> |
| #container { |
| width: 1px; |
| height: 0px; |
| container-type: size; |
| --applied:false; |
| } |
| </style> |
| <div id=container> |
| <div id=inner></div> |
| </div> |
| <script> |
| setup(() => assert_implements_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); |
| }; |
| |
| // We don't care about specific features in this file, only higher level |
| // evaluation like "and", "or", and so forth. The features "width", "height" |
| // and "unknown" are arbitrarily chosen to represent true, false, and |
| // unknown values, respectively. |
| |
| test_query('(width)', true); |
| test_query('(height)', false); |
| test_query('(unknown)', false); |
| test_query('unknown(width)', false); |
| |
| // Nesting in <container-query>: |
| test_query('((width))', true); |
| test_query('((height))', false); |
| test_query('((unknown))', false); |
| test_query('((((width))))', true); |
| test_query('((((height))))', false); |
| test_query('((((unknown))))', false); |
| |
| // "not" in <container-query>: |
| test_query('(not (width))', false); |
| test_query('(not (height))', true); |
| test_query('(not (unknown))', false); |
| test_query('(not unknown(width))', false); |
| |
| // "and" in <container-query>: |
| test_query('((width) and (width))', true); |
| test_query('((width) and (width) and (width))', true); |
| test_query('((height) and (height))', false); |
| test_query('((height) and (width) and (width))', false); |
| test_query('((width) and (height) and (width))', false); |
| test_query('((width) and (width) and (height))', false); |
| test_query('((unknown) and (width) and (width))', false); |
| test_query('((width) and (unknown) and (width))', false); |
| test_query('((width) and (width) and (unknown))', false); |
| |
| // "or" in <container-query>: |
| test_query('((width) or (width))', true); |
| test_query('((width) or (width) or (width))', true); |
| test_query('((height) or (height))', false); |
| test_query('((height) or (width) or (width))', true); |
| test_query('((width) or (height) or (width))', true); |
| test_query('((width) or (width) or (height))', true); |
| test_query('((unknown) or (width) or (width))', true); |
| test_query('((width) or (unknown) or (width))', true); |
| test_query('((width) or (width) or (unknown))', true); |
| test_query('((unknown) or (height) or (width))', true); |
| |
| // Combinations, <container-query>: |
| test_query('(not ((width) and (width)))', false); |
| test_query('(not ((width) and (height)))', true); |
| test_query('((width) and (not ((height) or (width))))', false); |
| test_query('((height) or (not ((height) and (width))))', true); |
| test_query('((height) or ((height) and (width)))', false); |
| |
| // Note that the following assumes that elements are style containers by |
| // default [1], and that: |
| // |
| // - style(width: 1px) is a query that returns 'true', and |
| // - style(height: 2px) is a query that returns 'false'. |
| // |
| // [1] https://github.com/w3c/csswg-drafts/issues/7066 |
| |
| // Nesting in <style-query>: |
| test_query('style((width: 1px))', true); |
| test_query('style((height: 2px))', false); |
| test_query('style((unknown))', false); |
| test_query('unknown((width: 1px))', false); |
| |
| // "not" in <style-query>: |
| test_query('style(not (width: 1px))', false); |
| test_query('style(not (height: 2px))', true); |
| test_query('style(not (unknown))', false); |
| |
| // "and" in <style-query>: |
| test_query('style((width: 1px) and (width: 1px))', true); |
| test_query('style((width: 1px) and (width: 1px) and (width: 1px))', true); |
| test_query('style((height: 2px) and (height: 2px))', false); |
| test_query('style((height: 2px) and (width: 1px) and (width: 1px))', false); |
| test_query('style((width: 1px) and (height: 2px) and (width: 1px))', false); |
| test_query('style((width: 1px) and (width: 1px) and (height: 2px))', false); |
| test_query('style((unknown) and (width: 1px) and (width: 1px))', false); |
| test_query('style((width: 1px) and (unknown) and (width: 1px))', false); |
| test_query('style((width: 1px) and (width: 1px) and (unknown))', false); |
| |
| // "or" in <style-query>: |
| test_query('style((width: 1px) or (width: 1px))', true); |
| test_query('style((width: 1px) or (width: 1px) or (width: 1px))', true); |
| test_query('style((height: 2px) or (height: 2px))', false); |
| test_query('style((height: 2px) or (width: 1px) or (width: 1px))', true); |
| test_query('style((width: 1px) or (height: 2px) or (width: 1px))', true); |
| test_query('style((width: 1px) or (width: 1px) or (height: 2px))', true); |
| test_query('style((unknown) or (width: 1px) or (width: 1px))', true); |
| test_query('style((width: 1px) or (unknown) or (width: 1px))', true); |
| test_query('style((width: 1px) or (width: 1px) or (unknown))', true); |
| test_query('style((unknown) or (height: 2px) or (width: 1px))', true); |
| |
| // Combinations, <style-query>: |
| test_query('style(not ((width: 1px) and (width: 1px)))', false); |
| test_query('style(not ((width: 1px) and (height: 2px)))', true); |
| test_query('style((width: 1px) and (not ((height: 2px) or (width: 1px))))', false); |
| test_query('style((height: 2px) or (not ((height: 2px) and (width: 1px))))', true); |
| test_query('style((height: 2px) or ((height: 2px) and (width: 1px)))', false); |
| |
| </script> |
