query-evaluation-style.html (10677B)
1 <!doctype html> 2 <title>Evaluation of style 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 @property --length { 9 syntax: "<length>"; 10 inherits: false; 11 initial-value: 3px; 12 } 13 @property --length-inherited { 14 syntax: "<length>"; 15 inherits: true; 16 initial-value: 3px; 17 } 18 @property --percentage { 19 syntax: "<percentage>"; 20 inherits: true; 21 initial-value: 30%; 22 } 23 @property --number { 24 syntax: "<number>"; 25 inherits: true; 26 initial-value: 3; 27 } 28 @property --angle { 29 syntax: "<angle>"; 30 inherits: true; 31 initial-value: 3deg; 32 } 33 @property --time { 34 syntax: "<time>"; 35 inherits: true; 36 initial-value: 3s; 37 } 38 @property --resolution { 39 syntax: "<resolution>"; 40 inherits: true; 41 initial-value: 3dpi; 42 } 43 #container { 44 --applied: false; 45 --foo: bar; 46 } 47 </style> 48 <div id=container> 49 <div id=inner data-foo="3px"></div> 50 </div> 51 <script> 52 setup(() => assert_implements_size_container_queries()); 53 54 function test_query(query, expected) { 55 test((t) => { 56 let style = document.createElement('style'); 57 t.add_cleanup(() => { style.remove(); }); 58 style.innerText = `@container ${query} { #inner { --applied:true; } }`; 59 let cs = getComputedStyle(inner); 60 assert_equals(cs.getPropertyValue('--applied'), 'false'); 61 document.head.append(style); 62 assert_equals(cs.getPropertyValue('--applied'), expected.toString()); 63 }, query); 64 }; 65 66 function test_query_with_custom_properties(query, customPropertiesData, expected) { 67 customPropertiesData.forEach(entry => { 68 const [customPropertyName, customPropertyValue] = entry; 69 document.getElementById("container").style.setProperty(customPropertyName, customPropertyValue); 70 }); 71 72 test_query(query, expected); 73 74 customPropertiesData.forEach(entry => { 75 const [customPropertyName, customPropertyValue] = entry; 76 document.getElementById("container").style.removeProperty(customPropertyName); 77 }); 78 } 79 80 // Note that the following assumes that elements are style containers by 81 // default [1], and that: 82 // 83 // - style(--foo: bar) is a query that returns 'true', and 84 // - style(--baz: qux) is a query that returns 'false'. 85 // 86 // [1] https://github.com/w3c/csswg-drafts/issues/7066 87 88 // Nesting in <style-query>: 89 test_query('style((--foo: bar))', true); 90 test_query('style((--baz: qux))', false); 91 test_query('style((unknown))', false); 92 test_query('unknown((--foo: bar))', false); 93 94 // "not" in <style-query>: 95 test_query('style(not (--foo: bar))', false); 96 test_query('style(not (--baz: qux))', true); 97 test_query('style(not (unknown))', false); 98 99 // "and" in <style-query>: 100 test_query('style((--foo: bar) and (--foo: bar))', true); 101 test_query('style((--foo: bar) and (--foo: bar) and (--foo: bar))', true); 102 test_query('style((--baz: qux) and (--baz: qux))', false); 103 test_query('style((--baz: qux) and (--foo: bar) and (--foo: bar))', false); 104 test_query('style((--foo: bar) and (--baz: qux) and (--foo: bar))', false); 105 test_query('style((--foo: bar) and (--foo: bar) and (--baz: qux))', false); 106 test_query('style((unknown) and (--foo: bar) and (--foo: bar))', false); 107 test_query('style((--foo: bar) and (unknown) and (--foo: bar))', false); 108 test_query('style((--foo: bar) and (--foo: bar) and (unknown))', false); 109 110 // "or" in <style-query>: 111 test_query('style((--foo: bar) or (--foo: bar))', true); 112 test_query('style((--foo: bar) or (--foo: bar) or (--foo: bar))', true); 113 test_query('style((--baz: qux) or (--baz: qux))', false); 114 test_query('style((--baz: qux) or (--foo: bar) or (--foo: bar))', true); 115 test_query('style((--foo: bar) or (--baz: qux) or (--foo: bar))', true); 116 test_query('style((--foo: bar) or (--foo: bar) or (--baz: qux))', true); 117 test_query('style((unknown) or (--foo: bar) or (--foo: bar))', false); 118 test_query('style((--foo: bar) or (unknown) or (--foo: bar))', false); 119 test_query('style((--foo: bar) or (--foo: bar) or (unknown))', false); 120 test_query('style((unknown) or (--baz: qux) or (--foo: bar))', false); 121 122 // Combinations, <style-query>: 123 test_query('style(not ((--foo: bar) and (--foo: bar)))', false); 124 test_query('style(not ((--foo: bar) and (--baz: qux)))', true); 125 test_query('style((--foo: bar) and (not ((--baz: qux) or (--foo: bar))))', false); 126 test_query('style((--baz: qux) or (not ((--baz: qux) and (--foo: bar))))', true); 127 test_query('style((--baz: qux) or ((--baz: qux) and (--foo: bar)))', false); 128 129 // Range style() querirs: 130 test_query('style(5 >= calc(3 + 1))', true); 131 test_query('style(1px <= 1em)', true); 132 test_query('style(5 >= 3)', true); 133 test_query('style(0 = 0px)', true); 134 test_query('style(0 = 0deg)', false); 135 test_query('style(0 >= 0px)', true); 136 test_query('style(0 < 3px)', true); 137 test_query('style(3px >= 3px)', true); 138 test_query('style(3px > 3px)', false); 139 test_query('style(1em > 1px)', true); 140 test_query('style(1em <= 1px)', false); 141 test_query('style(3turn > 3deg)', true); 142 test_query('style(3% >= 3%)', true); 143 test_query('style(3s > 3ms)', true); 144 test_query('style(3dppx > 96dpi)', true); 145 146 test_query_with_custom_properties('style(3 <= --x)', 147 [['--x', '3']], 148 true); 149 test_query_with_custom_properties('style(--x >= 3)', 150 [['--x', '3']], 151 true); 152 test_query_with_custom_properties('style(--x <= --x)', 153 [['--x', '3']], 154 true); 155 test_query_with_custom_properties('style(--x >= --y)', 156 [['--x', '3'], ['--y', '3']], 157 true); 158 test_query_with_custom_properties('style(--length > 3px)', 159 [['--length', '11px']], 160 true); 161 test_query_with_custom_properties('style(--x > 3px)', 162 [['--x', '11px']], 163 true); 164 test_query_with_custom_properties('style(--number >= 3)', 165 [['--number', '3']], 166 true); 167 test_query_with_custom_properties('style(--x >= 1)', 168 [['--x', '1']], 169 true); 170 test_query_with_custom_properties('style(--percentage > 3%)', 171 [['--percentage', '5%']], 172 true); 173 test_query_with_custom_properties('style(--x > 3%)', 174 [['--x', '5%']], 175 true); 176 test_query_with_custom_properties('style(--angle < 1turn)', 177 [['--angle', '1deg']], 178 true); 179 test_query_with_custom_properties('style(--x < 1turn)', 180 [['--x', '1deg']], 181 true); 182 test_query_with_custom_properties('style(--time <= 1000ms)', 183 [['--time', '1s']], 184 true); 185 test_query_with_custom_properties('style(--x <= 1000ms)', 186 [['--x', '1s']], 187 true); 188 test_query_with_custom_properties('style(3dppx > --resolution)', 189 [['--resolution', '96dpi']], 190 true); 191 test_query_with_custom_properties('style(3dppx > --x)', 192 [['--x', '96dpi']], 193 true); 194 195 test_query_with_custom_properties('style(--x >= calc(3px + 3px))', 196 [['--x', '7px']], 197 true); 198 test_query_with_custom_properties('style(--x <= var(--x))', 199 [['--x', '3']], 200 true); 201 test_query_with_custom_properties('style(calc(var(--x) + 1) >= var(--y))', 202 [['--x', '5'], ['--y', '3']], 203 true); 204 test_query_with_custom_properties('style(var(--x) >= --x)', 205 [['--x', '3']], 206 true); 207 test_query_with_custom_properties('style(--x <= 10em)', 208 [['--x', '10px']], 209 true); 210 211 test_query_with_custom_properties('style(--x + 1 >= --y)', 212 [['--x', '5'], ['--y', '3']], 213 false); 214 test_query_with_custom_properties('style(--x >= --y + 1)', 215 [['--x', '5'], ['--y', '3']], 216 false); 217 test_query_with_custom_properties('style(calc(--x + 1) >= --y)', 218 [['--x', '5'], ['--y', '3']], 219 false); 220 test_query_with_custom_properties('style(--x >= calc(--y + 1))', 221 [['--x', '5'], ['--y', '3']], 222 false); 223 224 test_query_with_custom_properties('style(3px > 3)', 225 [], 226 false); 227 test_query_with_custom_properties('style(3em > 3deg)', 228 [], 229 false); 230 test_query_with_custom_properties('style(1px >= 1%) or style(1px <= 1%)', 231 [], 232 false); 233 test_query_with_custom_properties('style(--length > 3)', 234 [['--length', '11em']], 235 false); 236 test_query_with_custom_properties('style(--number > 3px)', 237 [['--number', '11']], 238 false); 239 test_query_with_custom_properties('style(--x >= 3ms)', 240 [['--x', '3px']], 241 false); 242 test_query_with_custom_properties(`style(--length <= 30px)`, 243 [['--length', 'attr(data-foo type(<length>))']], 244 true); 245 246 test_query('style(10px <= 10px < 11px)', true); 247 test_query_with_custom_properties( 248 'style(3 < --x <= 5)', 249 [['--x', '5']], 250 true); 251 test_query_with_custom_properties( 252 'style(--x >= --y > --z)', 253 [['--x', '3'], ['--y', '3'], ['--z', '1']], 254 true); 255 256 </script>