registered-property-initial.html (4588B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#dom-propertydescriptor-initialvalue" /> 3 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#register-a-custom-property" /> 4 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#substitution" /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="./resources/utils.js"></script> 8 <div id=target></div> 9 <script> 10 11 function test_initial_value(reg, expected) { 12 let suffix = reg.inherits === true ? ', inherits' : ''; 13 test(function(){ 14 let name = generate_property(reg); 15 let actual = getComputedStyle(target).getPropertyValue(name); 16 assert_equals(actual, expected); 17 }, `Initial value for ${reg.syntax} correctly computed [${reg.initialValue}${suffix}]`); 18 } 19 20 test_initial_value({ syntax: '<length>', initialValue: 'calc(10px + 15px)' }, '25px'); 21 test_initial_value({ syntax: '<length>', initialValue: '1in' }, '96px'); 22 test_initial_value({ syntax: '<length>', initialValue: '2.54cm' }, '96px'); 23 test_initial_value({ syntax: '<length>', initialValue: '25.4mm' }, '96px'); 24 test_initial_value({ syntax: '<length>', initialValue: '6pc' }, '96px'); 25 test_initial_value({ syntax: '<length>', initialValue: '72pt' }, '96px'); 26 test_initial_value({ syntax: '<percentage>', initialValue: 'calc(10% + 20%)' }, '30%'); 27 test_initial_value({ syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)' }, 'calc(10% + 100px)'); 28 test_initial_value({ syntax: '<color>', initialValue: 'pink', inherits: true }, 'rgb(255, 192, 203)'); 29 test_initial_value({ syntax: '<color>', initialValue: 'purple' }, 'rgb(128, 0, 128)'); 30 test_initial_value({ syntax: '<transform-function>', initialValue: 'rotate(42deg)' }, 'rotate(42deg)'); 31 test_initial_value({ syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))' }, 'scale(4)'); 32 test_initial_value({ syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))' }, 'scale(3) translateX(4px)'); 33 test_initial_value({ syntax: '<url>', initialValue: 'url(a)' }, 34 `url("${new URL('a', document.baseURI)}")`); 35 test_initial_value({ syntax: '<url>+', initialValue: 'url(a) url(a)' }, 36 `url("${new URL('a', document.baseURI)}") url("${new URL('a', document.baseURI)}")`); 37 38 // Test that the initial value of the custom property 'reg' is successfully 39 // substituted into 'property'. 40 function test_substituted_value(reg, property, expected) { 41 let inherits_text = reg.inherits === true ? 'inherited' : 'non-inherited'; 42 test(function(){ 43 try { 44 let name = generate_property(reg); 45 target.style = `${property}:var(${name});`; 46 assert_equals(getComputedStyle(target).getPropertyValue(property), expected); 47 } finally { 48 target.style = ''; 49 } 50 }, `Initial ${inherits_text} value can be substituted [${reg.initialValue}, ${property}]`); 51 } 52 53 test_substituted_value({ syntax: '<color>', initialValue: 'purple', inherits: true }, 'color', 'rgb(128, 0, 128)'); 54 test_substituted_value({ syntax: '<color>', initialValue: 'pink' }, 'background-color', 'rgb(255, 192, 203)'); 55 56 // Registered properties shall substitute as a token sequence equivalent to 57 // their computed value. 58 test_substituted_value({ syntax: 'foo', initialValue: '\tfoo\t' }, '--x', 'foo'); 59 test_substituted_value({ syntax: '<angle>', initialValue: '\t1turn' }, '--x', '360deg'); 60 test_substituted_value({ syntax: '<color>', initialValue: ' pink ' }, '--x', 'rgb(255, 192, 203)'); 61 test_substituted_value({ syntax: '<custom-ident>', initialValue: '\ttest' }, '--x', 'test'); 62 test_substituted_value({ syntax: '<integer>', initialValue: 'calc(20 + 20 + 10)' }, '--x', '50'); 63 test_substituted_value({ syntax: '<length-percentage>', initialValue: '\tcalc(13% + 37px)' }, '--x', 'calc(13% + 37px)'); 64 test_substituted_value({ syntax: '<length>', initialValue: 'calc(10px + 15px)' }, '--x', '25px'); 65 test_substituted_value({ syntax: '<number>', initialValue: 'calc(13 + 37)' }, '--x', '50'); 66 test_substituted_value({ syntax: '<percentage>', initialValue: 'calc(13% + 37%)' }, '--x', '50%'); 67 test_substituted_value({ syntax: '<time>', initialValue: '2000ms' }, '--x', '2s'); 68 test_substituted_value({ syntax: '<transform-function>', initialValue: 'scale(calc(2 + 2))' }, '--x', 'scale(4)'); 69 test_substituted_value({ syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2)) translateX(calc(3px + 1px))' }, '--x', 'scale(4) translateX(4px)'); 70 71 </script>