test_getRegisteredCustomProperty.html (3607B)
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <title>Test InspectorUtils.getCSSRegisteredProperty</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 8 <style> 9 @property --color-1 { 10 syntax: "<color>"; 11 inherits: true; 12 initial-value: blue; 13 } 14 15 @property --color-2 { 16 syntax: "*"; 17 inherits: false; 18 } 19 </style> 20 </head> 21 22 <body> 23 <code>InspectorUtils.getCSSRegisteredProperty</code> 24 25 <script> 26 "use strict"; 27 28 /** Test for InspectorUtils.getCSSRegisteredProperty */ 29 30 const { Assert } = SpecialPowers.ChromeUtils.importESModule( 31 "resource://testing-common/Assert.sys.mjs" 32 ); 33 const InspectorUtils = SpecialPowers.InspectorUtils; 34 35 CSS.registerProperty({ 36 name: "--length-1", 37 syntax: "<length>", 38 initialValue: "10px", 39 inherits: true, 40 }); 41 CSS.registerProperty({ 42 name: "--length-2", 43 syntax: "foo | <integer>+ | <percentage> | <length># | auto", 44 initialValue: "100vw", 45 inherits: true 46 }); 47 CSS.registerProperty({ 48 name: "--length-3", 49 syntax: "*", 50 inherits: false 51 }); 52 CSS.registerProperty({ 53 name: "--length-4", 54 syntax: "*", 55 initialValue: "", 56 inherits: false 57 }); 58 59 is( 60 InspectorUtils.getCSSRegisteredProperty(document, "--unknown"), 61 null, 62 "Returns null when the name does not match a registered property" 63 ); 64 is( 65 InspectorUtils.getCSSRegisteredProperty(document, ""), 66 null, 67 "Returns null when passed an empty string" 68 ); 69 is( 70 InspectorUtils.getCSSRegisteredProperty(document, "color-1"), 71 null, 72 "Returns null when passed a property name without leading --" 73 ); 74 75 Assert.deepEqual( 76 InspectorUtils.getCSSRegisteredProperty(document, "--color-1"), { 77 name: "--color-1", 78 syntax: "<color>", 79 inherits: true, 80 initialValue: "blue", 81 fromJS: false, 82 }, `Got expected registered property definition for "${"--color-1"}"`); 83 84 Assert.deepEqual( 85 InspectorUtils.getCSSRegisteredProperty(document, "--color-2"), { 86 name: "--color-2", 87 syntax: "*", 88 inherits: false, 89 initialValue: null, 90 fromJS: false, 91 }, `Got expected registered property definition for "${"--color-2"}"`); 92 93 Assert.deepEqual( 94 InspectorUtils.getCSSRegisteredProperty(document, "--length-1"), { 95 name: "--length-1", 96 syntax: "<length>", 97 inherits: true, 98 initialValue: "10px", 99 fromJS: true, 100 }, `Got expected registered property definition for "${"--length-1"}"`); 101 102 Assert.deepEqual( 103 InspectorUtils.getCSSRegisteredProperty(document, "--length-2"), { 104 name: "--length-2", 105 syntax: "foo | <integer>+ | <percentage> | <length># | auto", 106 inherits: true, 107 initialValue: "100vw", 108 fromJS: true, 109 }, `Got expected registered property definition for "${"--length-2"}"`); 110 111 Assert.deepEqual( 112 InspectorUtils.getCSSRegisteredProperty(document, "--length-3"), { 113 name: "--length-3", 114 syntax: "*", 115 inherits: false, 116 initialValue: null, 117 fromJS: true, 118 }, `Got expected registered property definition for "${"--length-3"}"`); 119 120 Assert.deepEqual( 121 InspectorUtils.getCSSRegisteredProperty(document, "--length-4"), { 122 name: "--length-4", 123 syntax: "*", 124 inherits: false, 125 initialValue: "", 126 fromJS: true, 127 }, `Got expected registered property definition for "${"--length-4"}"`); 128 129 </script> 130 </pre> 131 </body> 132 133 </html>