| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| .parent { |
| --length-list-comma: 30px, 300px; |
| } |
| .target { |
| --length-list-comma: 40px, 400px; |
| } |
| </style> |
| <body> |
| <script src="../interpolation/resources/interpolation-test.js"></script> |
| <script> |
| |
| // This file verifies correct interpolation behavior for the "list aspect" of |
| // custom property lists. The type of the values contained in the list are |
| // assumed to not matter, hence <length> was chosen here arbitrarily. |
| |
| CSS.registerProperty({ |
| name: '--length-list-comma', |
| syntax: '<length>#', |
| initialValue: '40px, 20px', |
| inherits: false |
| }); |
| |
| CSS.registerProperty({ |
| name: '--length-list-space', |
| syntax: '<length>+', |
| initialValue: '40px 20px', |
| inherits: false |
| }); |
| |
| // Verify that a property registered as a comma-separated list produces |
| // comma-separated values. |
| |
| assertInterpolation({ |
| property: '--length-list-comma', |
| from: '0px, 0px', |
| to: '10px, 100px', |
| }, [ |
| {at: -0.3, is: '-3px, -30px'}, |
| {at: 0, is: '0px, 0px'}, |
| {at: 0.5, is: '5px, 50px'}, |
| {at: 1, is: '10px, 100px'}, |
| {at: 1.5, is: '15px, 150px'} |
| ]); |
| |
| // Verify that a property registered as a space-separated list produces |
| // space-separated values. |
| |
| assertInterpolation({ |
| property: '--length-list-space', |
| from: '0px 0px', |
| to: '10px 100px', |
| }, [ |
| {at: -0.3, is: '-3px -30px'}, |
| {at: 0, is: '0px 0px'}, |
| {at: 0.5, is: '5px 50px'}, |
| {at: 1, is: '10px 100px'}, |
| {at: 1.5, is: '15px 150px'} |
| ]); |
| |
| // Verify that lists of different lengths don't interpolate: |
| |
| assertNoInterpolation({ |
| property: '--length-list-comma', |
| from: '0px', |
| to: '10px, 100px' |
| }); |
| |
| assertNoInterpolation({ |
| property: '--length-list-comma', |
| from: 'initial', |
| to: '10px' |
| }); |
| |
| assertNoInterpolation({ |
| property: '--length-list-comma', |
| from: 'unset', |
| to: '10px' |
| }); |
| |
| assertNoInterpolation({ |
| property: '--length-list-comma', |
| from: 'inherit', |
| to: '10px' |
| }); |
| |
| // Composition tests assume that composite:add mean component-wise addition, |
| // which may or may not be the behavior we want. |
| // https://github.com/w3c/css-houdini-drafts/issues/799 |
| |
| // Verify that lists of different lengths don't interpolate: |
| |
| assertNoInterpolation({ |
| property: '--length-list-comma', |
| from: neutralKeyframe, |
| to: '10px, 100px, 1000px' |
| }); |
| |
| // Verify that attempting to composite:add to an incompatible value |
| // replaces that value instead. |
| |
| assertComposition({ |
| property: '--length-list-space', |
| underlying: '50px', |
| addFrom: '10px 10px', |
| addTo: '100px 100px', |
| }, [ |
| {at: -0.3, is: '-17px -17px'}, |
| {at: 0, is: '10px 10px'}, |
| {at: 0.3, is: '37px 37px'}, |
| {at: 0.5, is: '55px 55px'}, |
| {at: 0.7, is: '73px 73px'}, |
| {at: 1, is: '100px 100px'}, |
| {at: 1.5, is: '145px 145px'}, |
| ]); |
| |
| // No interpolation between two incompatible results of a composite: |
| |
| assertComposition({ |
| property: '--length-list-space', |
| underlying: '50px 50px', |
| addFrom: '10px 10px', |
| addTo: '100px', |
| }, [ |
| {at: -0.3, is: '60px 60px'}, |
| {at: 0, is: '60px 60px'}, |
| {at: 0.3, is: '60px 60px'}, |
| {at: 0.5, is: '100px'}, |
| {at: 0.7, is: '100px'}, |
| {at: 1, is: '100px'}, |
| {at: 1.5, is: '100px'}, |
| ]); |
| |
| assertComposition({ |
| property: '--length-list-space', |
| underlying: '50px 50px', |
| addFrom: '10px 10px', |
| replaceTo: '100px', |
| }, [ |
| {at: -0.3, is: '60px 60px'}, |
| {at: 0, is: '60px 60px'}, |
| {at: 0.3, is: '60px 60px'}, |
| {at: 0.5, is: '100px'}, |
| {at: 0.7, is: '100px'}, |
| {at: 1, is: '100px'}, |
| {at: 1.5, is: '100px'}, |
| ]); |
| |
| </script> |
| </body> |
