| <!DOCTYPE HTML> |
| <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" /> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="./resources/utils.js"></script> |
| <style> |
| div { |
| --registered-length-1: 10px; |
| --registered-length-2: var(--registered-length-1); |
| --registered-length-3: var(--length-1); |
| --registered-length-4: calc(var(--length-1) + 40px); |
| --registered-length-5: var(--invalid, 70px); |
| --registered-length-6: calc(var(--registered-length-3)*4); |
| --registered-length-7: var(--123px, 6px); |
| |
| --length-1: 20px; |
| --length-2: var(--registered-length-1); |
| --length-3: calc(var(--123px, 6px) + var(--123px)); |
| |
| --percentage: 10%; |
| --registered-length-invalid: var(--percentage); |
| |
| --registered-token-stream-1:var(--invalid); |
| --registered-token-stream-2:var(--invalid,fallback); |
| --token-stream-1:var(--registered-token-stream-1,moo); |
| |
| --registered-length-list-1: 1px, var(--registered-length-1), 2px; |
| --registered-length-list-2: 1px, var(--length-1), var(--registered-length-1), 2px; |
| --registered-length-list-3: var(--registered-length-list-1), var(--registered-length-list-2); |
| } |
| </style> |
| <div id=element></div> |
| <script> |
| test(function() { |
| CSS.registerProperty({name: '--123px', syntax: '<length>', initialValue: '123px', inherits: false}); |
| |
| CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--registered-length-7', syntax: '<length>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', initialValue: '15px', inherits: false}); |
| |
| CSS.registerProperty({name: '--registered-token-stream-1', syntax: '*', inherits: false}); |
| CSS.registerProperty({name: '--registered-token-stream-2', syntax: '*', inherits: false}); |
| |
| computedStyle = getComputedStyle(element); |
| assert_equals(computedStyle.getPropertyValue('--registered-length-1'), '10px'); |
| assert_equals(computedStyle.getPropertyValue('--registered-length-2'), '10px'); |
| assert_equals(computedStyle.getPropertyValue('--registered-length-3'), '20px'); |
| assert_equals(computedStyle.getPropertyValue('--registered-length-4'), '60px'); |
| assert_equals(computedStyle.getPropertyValue('--registered-length-5'), '70px'); |
| assert_equals(computedStyle.getPropertyValue('--registered-length-6'), '80px'); |
| assert_equals(computedStyle.getPropertyValue('--registered-length-7'), '123px'); |
| assert_equals(computedStyle.getPropertyValue('--length-1'), ' 20px'); |
| assert_equals(computedStyle.getPropertyValue('--length-2'), ' 10px'); |
| assert_equals(computedStyle.getPropertyValue('--length-3'), ' calc(123px + 123px)'); |
| assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'), '15px'); |
| |
| assert_equals(computedStyle.getPropertyValue('--registered-token-stream-1'), ''); |
| assert_equals(computedStyle.getPropertyValue('--registered-token-stream-2'), 'fallback'); |
| assert_equals(computedStyle.getPropertyValue('--token-stream-1'), 'moo'); |
| }, "var() references work with registered properties"); |
| |
| test(function(){ |
| CSS.registerProperty({ |
| name: '--registered-length-list-1', |
| syntax: '<length>#', |
| initialValue: '0px', |
| inherits: false |
| }); |
| let computedStyle = getComputedStyle(element); |
| assert_equals(computedStyle.getPropertyValue('--registered-length-list-1'), '1px, 10px, 2px'); |
| }, 'References to registered var()-properties work in registered lists'); |
| |
| test(function(){ |
| CSS.registerProperty({ |
| name: '--registered-length-list-2', |
| syntax: '<length>#', |
| initialValue: '0px', |
| inherits: false |
| }); |
| let computedStyle = getComputedStyle(element); |
| assert_equals(computedStyle.getPropertyValue('--registered-length-list-2'), '1px, 20px, 10px, 2px'); |
| }, 'References to mixed registered and unregistered var()-properties work in registered lists'); |
| |
| test(function(){ |
| CSS.registerProperty({ |
| name: '--registered-length-list-3', |
| syntax: '<length>#', |
| initialValue: '0px', |
| inherits: false |
| }); |
| let computedStyle = getComputedStyle(element); |
| assert_equals(computedStyle.getPropertyValue('--registered-length-list-3'), '1px, 10px, 2px, 1px, 20px, 10px, 2px'); |
| }, 'Registered lists may be concatenated'); |
| |
| test(function(){ |
| CSS.registerProperty({ |
| name: '--length-em', |
| syntax: '<length>', |
| initialValue: '0px', |
| inherits: false |
| }); |
| element.style = 'font-size: 11px; --length-em: 10em; --unregistered:var(--length-em);'; |
| let computedStyle = getComputedStyle(element); |
| assert_equals(computedStyle.getPropertyValue('--unregistered'), '110px'); |
| element.style = ''; |
| }, 'Font-relative units are absolutized when substituting'); |
| |
| test(function(){ |
| CSS.registerProperty({ |
| name: '--length-calc', |
| syntax: '<length>', |
| initialValue: '0px', |
| inherits: false |
| }); |
| element.style = 'font-size: 11px; --length-calc: calc(10em + 10px); --unregistered:var(--length-calc);'; |
| let computedStyle = getComputedStyle(element); |
| assert_equals(computedStyle.getPropertyValue('--unregistered'), '120px'); |
| element.style = ''; |
| }, 'Calc expressions are resolved when substituting'); |
| |
| test(function(){ |
| CSS.registerProperty({ |
| name: '--length-calc-list', |
| syntax: '<length>#', |
| initialValue: '0px', |
| inherits: false |
| }); |
| element.style = 'font-size: 11px; --length-calc-list: 10em, calc(10em + 10px); --unregistered:var(--length-calc-list);'; |
| let computedStyle = getComputedStyle(element); |
| assert_equals(computedStyle.getPropertyValue('--unregistered'), '110px, 120px'); |
| element.style = ''; |
| }, 'Lists with relative units are absolutized when substituting'); |
| |
| function test_valid_fallback(syntax, value, fallback) { |
| test(function(){ |
| let name = generate_property(syntax); |
| try { |
| element.style = `${name}: ${value}; --x:var(${name},${fallback})`; |
| let computedStyle = getComputedStyle(element); |
| assert_equals(computedStyle.getPropertyValue('--x'), value); |
| } finally { |
| element.style = ''; |
| } |
| }, `Valid fallback does not invalidate var()-reference [${syntax}, ${fallback}]`); |
| } |
| |
| function test_invalid_fallback(syntax, value, fallback) { |
| test(function(){ |
| let name = generate_property(syntax); |
| try { |
| element.style = `${name}: ${value}; --x:var(${name},${fallback})`; |
| let computedStyle = getComputedStyle(element); |
| assert_equals(computedStyle.getPropertyValue('--x'), ''); |
| } finally { |
| element.style = ''; |
| } |
| }, `Invalid fallback invalidates var()-reference [${syntax}, ${fallback}]`); |
| } |
| |
| test_valid_fallback('<length>', '40px', '10px'); |
| test_valid_fallback('<length> | <color>', '40px', 'red'); |
| test_valid_fallback('<length> | none', '40px', 'none'); |
| |
| test_invalid_fallback('<length>', '40px', 'red'); |
| test_invalid_fallback('<length> | none', '40px', 'nolength'); |
| test_invalid_fallback('<length>', '40px', 'var(--novar)'); |
| |
| </script> |
