| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| .parent { |
| --angle-list: 30deg 300deg; |
| } |
| .target { |
| --angle-list: 10deg 100deg; |
| } |
| </style> |
| <body> |
| <script src="../interpolation/resources/interpolation-test.js"></script> |
| <script> |
| CSS.registerProperty({ |
| name: '--angle-list', |
| syntax: '<angle>+', |
| initialValue: '40deg 400deg', |
| inherits: false, |
| }); |
| |
| assertInterpolation({ |
| property: '--angle-list', |
| from: 'initial', |
| to: '20deg 200deg', |
| }, [ |
| {at: -0.3, is: '46deg 460deg'}, |
| {at: 0, is: '40deg 400deg'}, |
| {at: 0.5, is: '30deg 300deg'}, |
| {at: 1, is: '20deg 200deg'}, |
| {at: 1.5, is: '10deg 100deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--angle-list', |
| from: 'inherit', |
| to: '20deg 200deg', |
| }, [ |
| {at: -0.3, is: '33deg 330deg'}, |
| {at: 0, is: '30deg 300deg'}, |
| {at: 0.5, is: '25deg 250deg'}, |
| {at: 1, is: '20deg 200deg'}, |
| {at: 1.5, is: '15deg 150deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--angle-list', |
| from: 'unset', |
| to: '20deg 200deg', |
| }, [ |
| {at: -0.3, is: '46deg 460deg'}, |
| {at: 0, is: '40deg 400deg'}, |
| {at: 0.5, is: '30deg 300deg'}, |
| {at: 1, is: '20deg 200deg'}, |
| {at: 1.5, is: '10deg 100deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--angle-list', |
| from: '-10deg -100deg', |
| to: '10deg 100deg', |
| }, [ |
| {at: -0.3, is: '-16deg -160deg'}, |
| {at: 0, is: '-10deg -100deg'}, |
| {at: 0.5, is: '0deg 0deg'}, |
| {at: 1, is: '10deg 100deg'}, |
| {at: 1.5, is: '20deg 200deg'} |
| ]); |
| |
| assertInterpolation({ |
| property: '--angle-list', |
| from: '10deg', |
| to: '100deg', |
| }, [ |
| {at: -0.3, is: '-17deg'}, |
| {at: 0, is: '10deg'}, |
| {at: 0.5, is: '55deg'}, |
| {at: 1, is: '100deg'}, |
| {at: 1.5, is: '145deg'} |
| ]); |
| |
| assertInterpolation({ |
| property: '--angle-list', |
| from: '0deg 0grad', |
| to: '1turn 400grad', |
| }, [ |
| {at: -0.3, is: '-108deg -108deg'}, |
| {at: 0, is: '0deg 0deg'}, |
| {at: 0.5, is: '180deg 180deg'}, |
| {at: 1, is: '360deg 360deg'}, |
| {at: 1.5, is: '540deg 540deg'} |
| ]); |
| |
| // Composition and neutralKeyframe tests assume that composite:add means |
| // component-wise addition, which may or may not be the behavior we want. |
| // https://github.com/w3c/css-houdini-drafts/issues/799 |
| |
| assertInterpolation({ |
| property: '--angle-list', |
| from: neutralKeyframe, |
| to: '20deg 200deg', |
| }, [ |
| {at: -0.3, is: '7deg 70deg'}, |
| {at: 0, is: '10deg 100deg'}, |
| {at: 0.5, is: '15deg 150deg'}, |
| {at: 1, is: '20deg 200deg'}, |
| {at: 1.5, is: '25deg 250deg'}, |
| ]); |
| |
| assertComposition({ |
| property: '--angle-list', |
| underlying: '50deg 60deg', |
| addFrom: '10deg 140deg', |
| addTo: '110deg 40deg', |
| }, [ |
| {at: -0.3, is: '30deg 230deg'}, |
| {at: 0, is: '60deg 200deg'}, |
| {at: 0.5, is: '110deg 150deg'}, |
| {at: 1, is: '160deg 100deg'}, |
| {at: 1.5, is: '210deg 50deg'}, |
| ]); |
| |
| assertComposition({ |
| property: '--angle-list', |
| underlying: '50deg 60deg', |
| addFrom: '10deg 140deg', |
| replaceTo: '110deg 40deg', |
| }, [ |
| {at: -0.3, is: '45deg 248deg'}, |
| {at: 0, is: '60deg 200deg'}, |
| {at: 0.5, is: '85deg 120deg'}, |
| {at: 1, is: '110deg 40deg'}, |
| {at: 1.5, is: '135deg -40deg'}, |
| ]); |
| |
| </script> |
| </body> |
