| <!DOCTYPE html> | |
| <meta charset="UTF-8"> | |
| <style> | |
| .parent { | |
| flex-basis: 3%; | |
| } | |
| .target { | |
| flex-basis: 1%; | |
| } | |
| </style> | |
| <body> | |
| <script src="resources/interpolation-test.js"></script> | |
| <script> | |
| assertInterpolation({ | |
| property: 'flex-basis', | |
| from: neutralKeyframe, | |
| to: '2%', | |
| }, [ | |
| {at: -0.3, is: '0.7%'}, | |
| {at: 0, is: '1%'}, | |
| {at: 0.3, is: '1.3%'}, | |
| {at: 0.6, is: '1.6%'}, | |
| {at: 1, is: '2%'}, | |
| {at: 1.5, is: '2.5%'}, | |
| ]); | |
| assertNoInterpolation({ | |
| property: 'flex-basis', | |
| from: 'initial', | |
| to: '2%', | |
| }); | |
| assertInterpolation({ | |
| property: 'flex-basis', | |
| from: 'inherit', | |
| to: '2%', | |
| }, [ | |
| {at: -0.3, is: '3.3%'}, | |
| {at: 0, is: '3%'}, | |
| {at: 0.3, is: '2.7%'}, | |
| {at: 0.6, is: '2.4%'}, | |
| {at: 1, is: '2%'}, | |
| {at: 1.5, is: '1.5%'}, | |
| ]); | |
| assertNoInterpolation({ | |
| property: 'flex-basis', | |
| from: 'unset', | |
| to: '2%', | |
| }); | |
| assertInterpolation({ | |
| property: 'flex-basis', | |
| from: '0px', | |
| to: '100px' | |
| }, [ | |
| {at: -0.3, is: '0px'}, | |
| {at: 0, is: '0px'}, | |
| {at: 0.4, is: '40px'}, | |
| {at: 0.6, is: '60px'}, | |
| {at: 1, is: '100px'}, | |
| {at: 1.5, is: '150px'} | |
| ]); | |
| assertInterpolation({ | |
| property: 'flex-basis', | |
| from: '0%', | |
| to: '100%' | |
| }, [ | |
| {at: -0.3, is: '0%'}, | |
| {at: 0, is: '0%'}, | |
| {at: 0.4, is: '40%'}, | |
| {at: 0.6, is: '60%'}, | |
| {at: 1, is: '100%'}, | |
| {at: 1.5, is: '150%'} | |
| ]); | |
| </script> | |
| </body> |