container-rule-cssom.html (1405B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: CSSContainerRule API</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#the-csscontainerrule-interface"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style id="style_elm"> 7 </style> 8 <script> 9 const sheet = style_elm.sheet; 10 11 function insertRule(source_text) { 12 try { 13 while (sheet.cssRules.length) { 14 sheet.deleteRule(0); 15 } 16 sheet.insertRule(source_text); 17 return sheet.cssRules[0]; 18 } catch (e) { 19 return null; 20 } 21 } 22 23 test(() => { 24 const rule = insertRule("@container Name {}"); 25 assert_true(!!rule, "Rule successfully parsed"); 26 assert_equals(rule.containerName, "Name"); 27 assert_equals(rule.containerQuery, ""); 28 }, "containerName without query"); 29 30 test(() => { 31 const rule = insertRule("@container (width > 300px) {}"); 32 assert_true(!!rule, "Rule successfully parsed"); 33 assert_equals(rule.containerName, ""); 34 assert_equals(rule.containerQuery, "(width > 300px)"); 35 }, "containerQuery without name"); 36 37 test(() => { 38 const rule = insertRule("@container Name (width > 300px) {}"); 39 assert_true(!!rule, "Rule successfully parsed"); 40 assert_equals(rule.containerName, "Name"); 41 assert_equals(rule.containerQuery, "(width > 300px)"); 42 }, "containerName and containerQuery"); 43 </script>