| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| .parent { |
| --angle: 30deg; |
| } |
| .target { |
| --angle: 10deg; |
| } |
| </style> |
| <body> |
| <script src="../interpolation/resources/interpolation-test.js"></script> |
| <script> |
| CSS.registerProperty({ |
| name: '--angle', |
| syntax: '<angle>', |
| initialValue: '40deg', |
| inherits: false, |
| }); |
| |
| assertInterpolation({ |
| property: '--angle', |
| from: neutralKeyframe, |
| to: '20deg', |
| }, [ |
| {at: -0.3, is: '7deg'}, |
| {at: 0, is: '10deg'}, |
| {at: 0.5, is: '15deg'}, |
| {at: 1, is: '20deg'}, |
| {at: 1.5, is: '25deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--angle', |
| from: 'initial', |
| to: '20deg', |
| }, [ |
| {at: -0.3, is: '46deg'}, |
| {at: 0, is: '40deg'}, |
| {at: 0.5, is: '30deg'}, |
| {at: 1, is: '20deg'}, |
| {at: 1.5, is: '10deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--angle', |
| from: 'inherit', |
| to: '20deg', |
| }, [ |
| {at: -0.3, is: '33deg'}, |
| {at: 0, is: '30deg'}, |
| {at: 0.5, is: '25deg'}, |
| {at: 1, is: '20deg'}, |
| {at: 1.5, is: '15deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--angle', |
| from: 'unset', |
| to: '20deg', |
| }, [ |
| {at: -0.3, is: '46deg'}, |
| {at: 0, is: '40deg'}, |
| {at: 0.5, is: '30deg'}, |
| {at: 1, is: '20deg'}, |
| {at: 1.5, is: '10deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--angle', |
| from: '-10deg', |
| to: '10deg', |
| }, [ |
| {at: -0.3, is: '-16deg'}, |
| {at: 0, is: '-10deg'}, |
| {at: 0.5, is: '0deg'}, |
| {at: 1, is: '10deg'}, |
| {at: 1.5, is: '20deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--angle', |
| from: '10rad', |
| to: '20rad', |
| }, [ |
| {at: -0.3, is: '401.07deg'}, |
| {at: 0, is: '572.958deg'}, |
| {at: 0.5, is: '859.437deg'}, |
| {at: 1, is: '1145.92deg'}, |
| {at: 1.5, is: '1432.39deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--angle', |
| from: '200grad', |
| to: '90deg', |
| }, [ |
| {at: -0.3, is: '207deg'}, |
| {at: 0, is: '180deg'}, |
| {at: 0.5, is: '135deg'}, |
| {at: 1, is: '90deg'}, |
| {at: 1.5, is: '45deg'}, |
| ]); |
| </script> |
| </body> |
