query-evaluation.html (3316B)
1 <!doctype html> 2 <title>Evaluation of queries</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/cq-testcommon.js"></script> 7 <style> 8 #container { 9 width: 1px; 10 height: 0px; 11 container-type: size; 12 --applied:false; 13 } 14 </style> 15 <div id=container> 16 <div id=inner></div> 17 </div> 18 <script> 19 setup(() => assert_implements_size_container_queries()); 20 21 function test_query(query, expected) { 22 test((t) => { 23 let style = document.createElement('style'); 24 t.add_cleanup(() => { style.remove(); }); 25 style.innerText = `@container ${query} { #inner { --applied:true; } }`; 26 let cs = getComputedStyle(inner); 27 assert_equals(cs.getPropertyValue('--applied'), 'false'); 28 document.head.append(style); 29 assert_equals(cs.getPropertyValue('--applied'), expected.toString()); 30 }, query); 31 }; 32 33 // We don't care about specific features in this file, only higher level 34 // evaluation like "and", "or", and so forth. The features "width", "height" 35 // and "unknown" are arbitrarily chosen to represent true, false, and 36 // unknown values, respectively. 37 38 test_query('(width)', true); 39 test_query('(height)', false); 40 test_query('(unknown)', false); 41 test_query('unknown(width)', false); 42 43 // Nesting in <container-query>: 44 test_query('((width))', true); 45 test_query('((height))', false); 46 test_query('((unknown))', false); 47 test_query('((((width))))', true); 48 test_query('((((height))))', false); 49 test_query('((((unknown))))', false); 50 51 // "not" in <container-query>: 52 test_query('(not (width))', false); 53 test_query('(not (height))', true); 54 test_query('(not (unknown))', false); 55 test_query('(not unknown(width))', false); 56 57 // "and" in <container-query>: 58 test_query('((width) and (width))', true); 59 test_query('((width) and (width) and (width))', true); 60 test_query('((height) and (height))', false); 61 test_query('((height) and (width) and (width))', false); 62 test_query('((width) and (height) and (width))', false); 63 test_query('((width) and (width) and (height))', false); 64 test_query('((unknown) and (width) and (width))', false); 65 test_query('((width) and (unknown) and (width))', false); 66 test_query('((width) and (width) and (unknown))', false); 67 68 // "or" in <container-query>: 69 test_query('((width) or (width))', true); 70 test_query('((width) or (width) or (width))', true); 71 test_query('((height) or (height))', false); 72 test_query('((height) or (width) or (width))', true); 73 test_query('((width) or (height) or (width))', true); 74 test_query('((width) or (width) or (height))', true); 75 test_query('((unknown) or (width) or (width))', false); 76 test_query('((width) or (unknown) or (width))', false); 77 test_query('((width) or (width) or (unknown))', false); 78 test_query('((unknown) or (height) or (width))', false); 79 80 // Combinations, <container-query>: 81 test_query('(not ((width) and (width)))', false); 82 test_query('(not ((width) and (height)))', true); 83 test_query('((width) and (not ((height) or (width))))', false); 84 test_query('((height) or (not ((height) and (width))))', true); 85 test_query('((height) or ((height) and (width)))', false); 86 87 </script>