test_CSSStyleDeclaration_hasLonghandProperty.html (5623B)
1 <!DOCTYPE html> 2 <!-- 3 https://bugzilla.mozilla.org/show_bug.cgi?id=1894251 4 --> 5 <title>Test for CSSStyleDeclaration::hasLonghandProperty</title> 6 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/> 8 9 <div 10 id="target" 11 align="right" 12 style=" 13 --in-style-attribute:red; 14 --in-style-attribute-empty: ; 15 color: blue; 16 outline: 1px solid lime; 17 caret-color: var(--in-style-attribute);" 18 ></div> 19 20 <style> 21 #target { 22 --in-rule: hotpink; 23 --in-rule-empty: ; 24 background-color: peachpuff; 25 text-decoration-color: var(--in-rule); 26 padding: 1em; 27 } 28 29 @property --my-color { 30 syntax: "<color>"; 31 inherits: false; 32 initial-value: #c0ffee; 33 } 34 </style> 35 36 <script> 37 add_task(async () => { 38 const InspectorUtils = SpecialPowers.InspectorUtils; 39 const el = document.querySelector("#target"); 40 // Use InspectorUtils.getMatchingCSSRules so we get InspectorDeclaration instances, like 41 // we do in DevTools. 42 const rules = InspectorUtils.getMatchingCSSRules(el); 43 44 info("Check that hasProperty returns expected values for regular rule CSSStyleProperties") 45 const targetRule = rules.find(r => r.selectorText === "#target"); 46 ok( 47 targetRule.style.hasLonghandProperty("background-color"), 48 `hasProperty returned true for "background-color" property on #target rule` 49 ); 50 ok( 51 targetRule.style.hasLonghandProperty("text-decoration-color"), 52 `hasProperty returned true for property with a CSS variable value on #target rule` 53 ); 54 ok( 55 !targetRule.style.hasLonghandProperty("caret-color"), 56 `hasProperty returned false for non-defined "caret-color" property on #target rule` 57 ); 58 ok( 59 !targetRule.style.hasLonghandProperty("my-amazing-property"), 60 `hasProperty returned false for invalid property on #target rule` 61 ); 62 ok( 63 targetRule.style.hasLonghandProperty("--in-rule"), 64 `hasProperty returned true for "--in-rule" property on #target rule` 65 ); 66 ok( 67 targetRule.style.hasLonghandProperty("--in-rule-empty"), 68 `hasProperty returned true for "--in-rule-empty" property on #target rule` 69 ); 70 ok( 71 !targetRule.style.hasLonghandProperty("--my-color"), 72 `hasProperty returned false for registered but unset "--my-color" property on #target rule` 73 ); 74 ok( 75 !targetRule.style.hasLonghandProperty("--unknown"), 76 `hasProperty returned false for "--unknown" property on #target rule` 77 ); 78 ok( 79 !targetRule.style.hasLonghandProperty("padding"), 80 `hasProperty returned false for shorthand property (padding) on #target rule` 81 ); 82 ok( 83 targetRule.style.hasLonghandProperty("padding-top"), 84 `hasProperty returned true for longhand property (padding-top) on #target rule` 85 ); 86 87 info("Check that hasProperty returns expected values for style attribute InspectorDeclaration CSSStyleProperties") 88 const styleAttributeInspectorDeclaration = rules.find(r => r.declarationOrigin === "style-attribute"); 89 ok( 90 styleAttributeInspectorDeclaration.style.hasLonghandProperty("color"), 91 `hasProperty returned true for "color" property on style attribute` 92 ); 93 ok( 94 styleAttributeInspectorDeclaration.style.hasLonghandProperty("caret-color"), 95 `hasProperty returned true for property with a CSS variable value on style attribute` 96 ); 97 ok( 98 !styleAttributeInspectorDeclaration.style.hasLonghandProperty("background-color"), 99 `hasProperty returned false for non-defined "background-color" property on style attribute` 100 ); 101 ok( 102 styleAttributeInspectorDeclaration.style.hasLonghandProperty("--in-style-attribute"), 103 `hasProperty returned true for "--in-style-attribute" property on style attribute` 104 ); 105 ok( 106 styleAttributeInspectorDeclaration.style.hasLonghandProperty("--in-style-attribute-empty"), 107 `hasProperty returned true for "--in-style-attribute-empty" property on style attribute` 108 ); 109 ok( 110 !styleAttributeInspectorDeclaration.style.hasLonghandProperty("--my-color"), 111 `hasProperty returned false for registered but unset "--my-color" property on style attribute` 112 ); 113 ok( 114 !styleAttributeInspectorDeclaration.style.hasLonghandProperty("--unknown"), 115 `hasProperty returned false for "--unknown" property on style attribute` 116 ); 117 ok( 118 !styleAttributeInspectorDeclaration.style.hasLonghandProperty("outline"), 119 `hasProperty returned false for shorthand property (outline) on style attribute` 120 ); 121 ok( 122 styleAttributeInspectorDeclaration.style.hasLonghandProperty("outline-color"), 123 `hasProperty returned true for longhand property (outline-color) on style attribute` 124 ); 125 126 info("Check that hasProperty returns expected values for pres hints InspectorDeclaration CSSStyleProperties") 127 const presHintsInspectorDeclaration = rules.find(r => r.declarationOrigin === "pres-hints"); 128 ok( 129 presHintsInspectorDeclaration.style.hasLonghandProperty("text-align"), 130 `hasProperty returned true for "text-align" property on pres-hints style` 131 ); 132 ok( 133 !presHintsInspectorDeclaration.style.hasLonghandProperty("background-color"), 134 `hasProperty returned false for non-defined "background-color" property on pres-hints style` 135 ); 136 ok( 137 !presHintsInspectorDeclaration.style.hasLonghandProperty("--my-color"), 138 `hasProperty returned false for registered but unset "--my-color" property on pres-hints style` 139 ); 140 ok( 141 !presHintsInspectorDeclaration.style.hasLonghandProperty("--unknown"), 142 `hasProperty returned false for "--unknown" property on pres-hints style` 143 ); 144 }); 145 </script>