at-property-cssom.html (5483B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#cssom"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 @property --valid { 7 syntax: "<color> | none"; 8 inherits: false; 9 initial-value: red; 10 } 11 @property --valid-reverse { 12 initial-value: 0px; 13 inherits: true; 14 syntax: "<length>"; 15 } 16 @property --valid-universal { 17 syntax: "*"; 18 inherits: false; 19 } 20 @property --valid-whitespace { 21 syntax: " <color># "; 22 inherits: false; 23 initial-value: red, blue; 24 } 25 @property --vALId { 26 syntax: "<color> | none"; 27 inherits: false; 28 initial-value: red; 29 } 30 @property --no-descriptors { 31 32 } 33 @property --no-syntax { 34 inherits: false; 35 initial-value: red; 36 } 37 @property --no-inherits { 38 syntax: "<color> | none"; 39 initial-value: red; 40 } 41 @property --no-initial-color-value { 42 syntax: "<color> | none"; 43 inherits: false; 44 } 45 @property --no-initial-universal-value { 46 syntax: "*"; 47 inherits: false; 48 } 49 @property --syntax-only { 50 syntax: "<color> | none"; 51 } 52 @property --inherits-only { 53 inherits: true; 54 } 55 @property --initial-value-only { 56 initial-value: red; 57 } 58 /* U+0009 CHARACTER TABULATION */ 59 @property --tab\9 tab { 60 syntax: "*"; 61 inherits: true; 62 } 63 </style> 64 <script> 65 66 function find_at_property_rule(name) { 67 for (let rule of document.styleSheets[0].cssRules) { 68 if (rule.constructor.name != "CSSPropertyRule") 69 continue; 70 if (rule.name == name) 71 return rule; 72 } 73 return null; 74 } 75 76 function test_invalid(name) { 77 test(() => { 78 let rule = find_at_property_rule(name); 79 assert_true(!rule); 80 }, `Rule for ${name} is invalid`); 81 } 82 83 function test_css_text(name, expected) { 84 test(() => { 85 let rule = find_at_property_rule(name); 86 assert_true(!!rule); 87 assert_equals(rule.cssText, expected); 88 }, `Rule for ${name} has expected cssText`); 89 } 90 91 function test_name(name) { 92 test(() => { 93 let rule = find_at_property_rule(name); 94 assert_true(!!rule); 95 assert_equals(rule.name, name); 96 }, `Rule for ${name} returns expected value for CSSPropertyRule.name`); 97 } 98 99 function test_syntax(name, expected) { 100 test(() => { 101 let rule = find_at_property_rule(name); 102 assert_true(!!rule); 103 assert_equals(rule.syntax, expected); 104 }, `Rule for ${name} returns expected value for CSSPropertyRule.syntax`); 105 } 106 107 function test_inherits(name, expected) { 108 test(() => { 109 let rule = find_at_property_rule(name); 110 assert_true(!!rule); 111 assert_equals(rule.inherits, expected); 112 }, `Rule for ${name} returns expected value for CSSPropertyRule.inherits`); 113 } 114 115 function test_initial_value(name, expected) { 116 test(() => { 117 let rule = find_at_property_rule(name); 118 assert_true(!!rule); 119 assert_equals(rule.initialValue, expected); 120 }, `Rule for ${name} returns expected value for CSSPropertyRule.initialValue`); 121 } 122 123 // Invalid @property rules. 124 test_invalid('--no-descriptors'); 125 test_invalid('--no-syntax'); 126 test_invalid('--no-inherits'); 127 test_invalid('--no-initial-color-value'); 128 test_invalid('--syntax-only', '@property --syntax-only { syntax: "<color> | none"; }'); 129 test_invalid('--inherits-only', '@property --inherits-only { inherits: true; }'); 130 test_invalid('--initial-value-only', '@property --initial-value-only { initial-value: red; }'); 131 132 // CSSPropertyRule.cssText 133 134 test_css_text('--valid', '@property --valid { syntax: "<color> | none"; inherits: false; initial-value: red; }'); 135 test_css_text('--valid-reverse', '@property --valid-reverse { syntax: "<length>"; inherits: true; initial-value: 0px; }'); 136 test_css_text('--valid-universal', '@property --valid-universal { syntax: "*"; inherits: false; }'); 137 test_css_text('--valid-whitespace', '@property --valid-whitespace { syntax: " <color># "; inherits: false; initial-value: red, blue; }'); 138 test_css_text('--vALId', '@property --vALId { syntax: "<color> | none"; inherits: false; initial-value: red; }'); 139 140 test_css_text('--no-initial-universal-value', '@property --no-initial-universal-value { syntax: "*"; inherits: false; }'); 141 142 test_css_text('--tab\ttab', '@property --tab\\9 tab { syntax: "*"; inherits: true; }'); 143 144 // CSSRule.type 145 146 test(() => { 147 let rule = find_at_property_rule('--valid'); 148 assert_equals(rule.type, 0); 149 }, 'CSSRule.type returns 0'); 150 151 // CSSPropertyRule.name 152 153 test_name('--valid'); 154 test_name('--valid-reverse'); 155 test_name('--valid-universal'); 156 test_name('--valid-whitespace'); 157 test_name('--vALId'); 158 159 test_name('--no-initial-universal-value'); 160 161 // CSSPropertyRule.syntax 162 163 test_syntax('--valid', '<color> | none'); 164 test_syntax('--valid-reverse', '<length>'); 165 test_syntax('--valid-universal', '*'); 166 test_syntax('--valid-whitespace', ' <color># '); 167 test_syntax('--vALId', '<color> | none'); 168 169 test_syntax('--no-initial-universal-value', '*'); 170 171 // CSSPropertyRule.inherits 172 173 test_inherits('--valid', false); 174 test_inherits('--valid-reverse', true); 175 test_inherits('--valid-universal', false); 176 test_inherits('--valid-whitespace', false); 177 test_inherits('--vALId', false); 178 179 test_inherits('--no-initial-universal-value', false); 180 181 // CSSPropertyRule.initialValue 182 183 test_initial_value('--valid', 'red'); 184 test_initial_value('--valid-reverse', '0px'); 185 test_initial_value('--valid-universal', null); 186 test_initial_value('--valid-whitespace', 'red, blue'); 187 test_initial_value('--vALId', 'red'); 188 189 test_initial_value('--no-initial-universal-value', null); 190 191 </script>