cq-testcommon.js (4295B)
1 function assert_implements_size_container_queries() { 2 assert_implements(CSS.supports("container-type:size"), 3 "Basic support for size container queries required"); 4 } 5 6 function assert_implements_scroll_state_container_queries() { 7 assert_implements(CSS.supports("container-type:scroll-state"), 8 "Basic support for scroll-state container queries required"); 9 } 10 11 function assert_implements_style_container_queries() { 12 // TODO: Replace with CSS.supports() when/if this can be expressed with at-rule(). 13 const sheet = new CSSStyleSheet(); 14 // No support means the style() function is <general-enclosed> which should 15 // affect serialization. Although serialization for <general-enclosed> is not 16 // specified[1], unknown function names are unlikely to be resolved to be 17 // serialized lower-case. Also, keeping the case is currently interoperable. 18 // 19 // [1] https://github.com/w3c/csswg-drafts/issues/7266 20 sheet.replaceSync('@container STYLE(--foo: bar){}'); 21 assert_implements(sheet.cssRules[0].containerQuery === "style(--foo: bar)", 22 "Basic support for style container queries required"); 23 } 24 25 function cleanup_container_query_main() { 26 const main = document.querySelector("#cq-main"); 27 while (main.firstChild) 28 main.firstChild.remove(); 29 } 30 31 function set_container_query_style(text) { 32 let style = document.createElement('style'); 33 style.innerText = text; 34 document.querySelector("#cq-main").append(style); 35 return style; 36 } 37 38 function test_cq_rule_invalid(query) { 39 const ruleText = `@container ${query} {}`; 40 test(t => { 41 t.add_cleanup(cleanup_container_query_main); 42 let style = set_container_query_style(ruleText); 43 assert_equals(style.sheet.rules.length, 0); 44 }, `@container rule should be invalid: ${ruleText} {}`); 45 } 46 47 function test_cq_rule_valid(query) { 48 const ruleText = `@container ${query} {}`; 49 test(t => { 50 t.add_cleanup(cleanup_container_query_main); 51 let style = set_container_query_style(`@container ${query} {}`); 52 assert_equals(style.sheet.rules.length, 1); 53 }, `@container rule should be valid: ${ruleText} {}`); 54 } 55 56 function test_cq_condition_invalid(condition) { 57 test(t => { 58 t.add_cleanup(cleanup_container_query_main); 59 let style = set_container_query_style(`@container name ${condition} {}`); 60 assert_equals(style.sheet.rules.length, 0); 61 }, `Query condition should be invalid: ${condition}`); 62 } 63 64 // Tests that 1) the condition parses, and 2) is either "unknown" or not, as 65 // specified. 66 function test_cq_condition_valid(condition, unknown) { 67 test(t => { 68 t.add_cleanup(cleanup_container_query_main); 69 let style = set_container_query_style(` 70 @container name ${condition} {} 71 @container name (${condition}) or (not (${condition})) { main { --match:true; } } 72 `); 73 assert_equals(style.sheet.rules.length, 2); 74 const expected = unknown ? '' : 'true'; 75 assert_equals(getComputedStyle(document.querySelector("#cq-main")).getPropertyValue('--match'), expected); 76 }, `Query condition should be valid${unknown ? ' but unknown' : ''}: ${condition}`); 77 } 78 79 function test_cq_condition_known(condition) { 80 test_cq_condition_valid(condition, false /* unknown */); 81 } 82 83 function test_cq_condition_unknown(condition) { 84 test_cq_condition_valid(condition, true /* unknown */); 85 } 86 87 function test_container_name_invalid(container_name) { 88 test(t => { 89 t.add_cleanup(cleanup_container_query_main); 90 let style = set_container_query_style(`@container ${container_name} not (width) {}`); 91 assert_equals(style.sheet.rules.length, 0); 92 }, `Container name: ${container_name}`); 93 } 94 95 function test_container_name_valid(container_name) { 96 test(t => { 97 t.add_cleanup(cleanup_container_query_main); 98 let style = set_container_query_style(`@container ${container_name} not (width) {}`); 99 assert_equals(style.sheet.rules.length, 1); 100 }, `Container name: ${container_name}`); 101 } 102 103 function test_cq_condition_serialization(query, expected) { 104 test(t => { 105 t.add_cleanup(cleanup_container_query_main); 106 let style = set_container_query_style(`@container ${query} {}`); 107 assert_equals(style.sheet.rules.length, 1); 108 assert_equals(style.sheet.rules[0].conditionText, expected); 109 }, `@container conditionText serialization: ${query}`); 110 }