CSSContainerRule.tentative.html (1193B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSSContainerRule</title> 4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 5 <link rel="author" title="Mozilla" href="https://mozilla.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#the-csscontainerrule-interface"> 7 <script src=/resources/testharness.js></script> 8 <script src=/resources/testharnessreport.js></script> 9 <style id="sheet"></style> 10 <script> 11 const kTests = [ 12 { 13 rule: "@container name (min-width: 100px) {}", 14 name: "name", 15 query: "(min-width: 100px)", 16 }, 17 { 18 rule: "@container (min-width: 100px) {}", 19 name: "", 20 query: "(min-width: 100px)", 21 }, 22 ]; 23 24 const sheet = document.getElementById("sheet").sheet; 25 for (let { rule, name, query } of kTests) { 26 test(function() { 27 sheet.insertRule(rule, 0); 28 let r = sheet.cssRules[0]; 29 assert_true(r instanceof CSSContainerRule); 30 assert_equals(r.containerName, name, "containerName"); 31 assert_equals(r.containerQuery, query, "containerQuery"); 32 assert_equals(r.conditionText, name ? `${name} ${query}` : query, "conditionText"); 33 }, rule) 34 } 35 </script>