var-reference-registered-properties.html (9277B)
1 <!DOCTYPE HTML> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" /> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="./resources/utils.js"></script> 6 <style> 7 div { 8 --registered-length-1: 10px; 9 --registered-length-2: var(--registered-length-1); 10 --registered-length-3: var(--length-1); 11 --registered-length-4: calc(var(--length-1) + 40px); 12 --registered-length-5: var(--invalid, 70px); 13 --registered-length-6: calc(var(--registered-length-3)*4); 14 --registered-length-7: var(--123px, 6px); 15 16 --length-1: 20px; 17 --length-2: var(--registered-length-1); 18 --length-3: calc(var(--123px, 6px) + var(--123px)); 19 20 --percentage: 10%; 21 --registered-length-invalid: var(--percentage); 22 23 --registered-token-stream-1:var(--invalid); 24 --registered-token-stream-2:var(--invalid,fallback); 25 --token-stream-1:var(--registered-token-stream-1,moo); 26 27 --registered-length-list-1: 1px, var(--registered-length-1), 2px; 28 --registered-length-list-2: 1px, var(--length-1), var(--registered-length-1), 2px; 29 --registered-length-list-3: var(--registered-length-list-1), var(--registered-length-list-2); 30 } 31 </style> 32 <div id=element></div> 33 <script> 34 test(function() { 35 CSS.registerProperty({name: '--123px', syntax: '<length>', initialValue: '123px', inherits: false}); 36 37 CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initialValue: '0px', inherits: false}); 38 CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initialValue: '0px', inherits: false}); 39 CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initialValue: '0px', inherits: false}); 40 CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initialValue: '0px', inherits: false}); 41 CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initialValue: '0px', inherits: false}); 42 CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initialValue: '0px', inherits: false}); 43 CSS.registerProperty({name: '--registered-length-7', syntax: '<length>', initialValue: '0px', inherits: false}); 44 CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', initialValue: '15px', inherits: false}); 45 46 CSS.registerProperty({name: '--registered-token-stream-1', syntax: '*', inherits: false}); 47 CSS.registerProperty({name: '--registered-token-stream-2', syntax: '*', inherits: false}); 48 49 computedStyle = getComputedStyle(element); 50 assert_equals(computedStyle.getPropertyValue('--registered-length-1'), '10px'); 51 assert_equals(computedStyle.getPropertyValue('--registered-length-2'), '10px'); 52 assert_equals(computedStyle.getPropertyValue('--registered-length-3'), '20px'); 53 assert_equals(computedStyle.getPropertyValue('--registered-length-4'), '60px'); 54 assert_equals(computedStyle.getPropertyValue('--registered-length-5'), '70px'); 55 assert_equals(computedStyle.getPropertyValue('--registered-length-6'), '80px'); 56 assert_equals(computedStyle.getPropertyValue('--registered-length-7'), '123px'); 57 assert_equals(computedStyle.getPropertyValue('--length-1'), '20px'); 58 assert_equals(computedStyle.getPropertyValue('--length-2'), '10px'); 59 assert_equals(computedStyle.getPropertyValue('--length-3'), 'calc(123px + 123px)'); 60 assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'), '15px'); 61 62 assert_equals(computedStyle.getPropertyValue('--registered-token-stream-1'), ''); 63 assert_equals(computedStyle.getPropertyValue('--registered-token-stream-2'), 'fallback'); 64 assert_equals(computedStyle.getPropertyValue('--token-stream-1'), 'moo'); 65 }, "var() references work with registered properties"); 66 67 test(function(){ 68 CSS.registerProperty({ 69 name: '--registered-length-list-1', 70 syntax: '<length>#', 71 initialValue: '0px', 72 inherits: false 73 }); 74 let computedStyle = getComputedStyle(element); 75 assert_equals(computedStyle.getPropertyValue('--registered-length-list-1'), '1px, 10px, 2px'); 76 }, 'References to registered var()-properties work in registered lists'); 77 78 test(function(){ 79 CSS.registerProperty({ 80 name: '--registered-length-list-2', 81 syntax: '<length>#', 82 initialValue: '0px', 83 inherits: false 84 }); 85 let computedStyle = getComputedStyle(element); 86 assert_equals(computedStyle.getPropertyValue('--registered-length-list-2'), '1px, 20px, 10px, 2px'); 87 }, 'References to mixed registered and unregistered var()-properties work in registered lists'); 88 89 test(function(){ 90 CSS.registerProperty({ 91 name: '--registered-length-list-3', 92 syntax: '<length>#', 93 initialValue: '0px', 94 inherits: false 95 }); 96 let computedStyle = getComputedStyle(element); 97 assert_equals(computedStyle.getPropertyValue('--registered-length-list-3'), '1px, 10px, 2px, 1px, 20px, 10px, 2px'); 98 }, 'Registered lists may be concatenated'); 99 100 test(function(){ 101 CSS.registerProperty({ 102 name: '--length-em', 103 syntax: '<length>', 104 initialValue: '0px', 105 inherits: false 106 }); 107 element.style = 'font-size: 11px; --length-em: 10em; --unregistered:var(--length-em);'; 108 let computedStyle = getComputedStyle(element); 109 assert_equals(computedStyle.getPropertyValue('--unregistered'), '110px'); 110 element.style = ''; 111 }, 'Font-relative units are absolutized when substituting'); 112 113 test(function(){ 114 CSS.registerProperty({ 115 name: '--length-calc', 116 syntax: '<length>', 117 initialValue: '0px', 118 inherits: false 119 }); 120 element.style = 'font-size: 11px; --length-calc: calc(10em + 10px); --unregistered:var(--length-calc);'; 121 let computedStyle = getComputedStyle(element); 122 assert_equals(computedStyle.getPropertyValue('--unregistered'), '120px'); 123 element.style = ''; 124 }, 'Calc expressions are resolved when substituting'); 125 126 test(function(){ 127 CSS.registerProperty({ 128 name: '--length-calc-list', 129 syntax: '<length>#', 130 initialValue: '0px', 131 inherits: false 132 }); 133 element.style = 'font-size: 11px; --length-calc-list: 10em, calc(10em + 10px); --unregistered:var(--length-calc-list);'; 134 let computedStyle = getComputedStyle(element); 135 assert_equals(computedStyle.getPropertyValue('--unregistered'), '110px, 120px'); 136 element.style = ''; 137 }, 'Lists with relative units are absolutized when substituting'); 138 139 test(function(){ 140 let length = generate_property('none | <length>'); 141 let universal = generate_property('*'); 142 element.style = `font-size: 10px; ${length}: 10em; ${universal}: var(${length})`; 143 let computedStyle = getComputedStyle(element); 144 assert_equals(computedStyle.getPropertyValue(universal), '100px'); 145 element.style = ''; 146 }, 'Values are absolutized when substituting into properties with universal syntax'); 147 148 test(function(){ 149 let name = generate_property('<length>'); 150 let unregistered = '--unregistered' 151 element.style = `${name}: red; ${unregistered}: var(${name})` 152 let computedStyle = getComputedStyle(element); 153 assert_equals(computedStyle.getPropertyValue(unregistered), ''); 154 }, 'Invalid values for registered properties are serialized as the empty string') 155 156 function test_valid_fallback(syntax, value, fallback) { 157 test(function(){ 158 let name = generate_property(syntax); 159 try { 160 element.style = `${name}: ${value}; --x:var(${name},${fallback})`; 161 let computedStyle = getComputedStyle(element); 162 assert_equals(computedStyle.getPropertyValue('--x'), value); 163 } finally { 164 element.style = ''; 165 } 166 }, `Valid fallback does not invalidate var()-reference [${syntax}, ${fallback}]`); 167 } 168 169 function test_invalid_fallback(syntax, value, fallback) { 170 test(function(){ 171 let name = generate_property(syntax); 172 try { 173 element.style = `${name}: ${value}; --x:var(${name},${fallback})`; 174 let computedStyle = getComputedStyle(element); 175 assert_equals(computedStyle.getPropertyValue('--x'), value); 176 } finally { 177 element.style = ''; 178 } 179 }, `Invalid fallback doesn't invalidate var()-reference [${syntax}, ${fallback}]`); 180 } 181 182 test_valid_fallback('<length>', '40px', '10px'); 183 test_valid_fallback('<length> | <color>', '40px', 'red'); 184 test_valid_fallback('<length> | none', '40px', 'none'); 185 186 test_invalid_fallback('<length>', '40px', 'red'); 187 test_invalid_fallback('<length> | none', '40px', 'nolength'); 188 test_invalid_fallback('<length>', '40px', 'var(--novar)'); 189 190 test(function(t){ 191 CSS.registerProperty({ 192 name: '--registered-universal-no-initial', 193 syntax: '*', 194 inherits: false 195 }); 196 t.add_cleanup(() => { 197 element.style = ''; 198 }); 199 element.style = [ 200 '--registered-universal-no-initial:;', 201 'background-color: var(--registered-universal-no-initial) green', 202 ].join(';'); 203 let computedStyle = getComputedStyle(element); 204 assert_equals(computedStyle.getPropertyValue('background-color'), 'rgb(0, 128, 0)'); 205 }, 'Empty universal custom property can be substituted with var()'); 206 207 </script>