at-custom-media-parsing.html (1379B)
1 <!DOCTYPE html> 2 <title>Custom Media Queries Parsing</title> 3 <link rel="help" href="https://www.w3.org/TR/mediaqueries-5/#custom-mq"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script> 7 function test_valid(rule) { 8 test(() => { 9 let s = new CSSStyleSheet(); 10 s.replaceSync(`${rule}`); 11 assert_equals(s.cssRules.length, 1); 12 }, `${rule} is valid`); 13 } 14 15 function test_invalid(rule) { 16 test(() => { 17 let s = new CSSStyleSheet(); 18 s.replaceSync(`${rule}`); 19 assert_equals(s.cssRules.length, 0); 20 }, `${rule} is invalid`); 21 } 22 23 test_valid('@custom-media --query (max-width: 30em)'); 24 test_valid('@custom-media --query (color), (hover)'); 25 test_valid('@custom-media --query not all and (hover: hover)'); 26 test_valid('@custom-media --query true'); 27 test_valid('@custom-media --query false'); 28 test_valid('@custom-media -- true'); 29 test_valid('@custom-media --foo/* */(width > 42px)'); 30 31 test_invalid('@custom-media query ()'); 32 test_invalid('@custom-media query (max-width: 30em)'); 33 test_invalid('@custom-media --query(max-width: 30em)'); 34 test_invalid('@custom-media --query(max-width: 30em) !'); 35 test_invalid('@custom-media -query(max-width: 30em)'); 36 test_invalid('@custom-media --query true!'); 37 test_invalid('@custom-media --query false true'); 38 </script>