| <!DOCTYPE html> |
| <body> |
| <style> |
| .parent { |
| font-variation-settings: "test" 30; |
| } |
| .target { |
| font-variation-settings: "test" 10; |
| } |
| </style> |
| <script src="resources/interpolation-test.js"></script> |
| <script> |
| assertInterpolation({ |
| property: 'font-variation-settings', |
| from: neutralKeyframe, |
| to: '"test" 20', |
| }, [ |
| {at: -0.5, is: "'test' 5"}, |
| {at: 0, is: "'test' 10"}, |
| {at: 0.3, is: "'test' 13"}, |
| {at: 0.7, is: "'test' 17"}, |
| {at: 1, is: "'test' 20"}, |
| {at: 1.5, is: "'test' 25"}, |
| ]); |
| |
| assertNoInterpolation({ |
| property: 'font-variation-settings', |
| from: 'initial', |
| to: "'test' 50", |
| }); |
| |
| assertInterpolation({ |
| property: 'font-variation-settings', |
| from: 'inherit', |
| to: "'test' 20", |
| }, [ |
| {at: -0.5, is: "'test' 35"}, |
| {at: 0, is: "'test' 30"}, |
| {at: 0.3, is: "'test' 27"}, |
| {at: 0.7, is: "'test' 23"}, |
| {at: 1, is: "'test' 20"}, |
| {at: 1.5, is: "'test' 15"}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'font-variation-settings', |
| from: 'unset', |
| to: "'test' 20", |
| }, [ |
| {at: -0.5, is: "'test' 35"}, |
| {at: 0, is: "'test' 30"}, |
| {at: 0.3, is: "'test' 27"}, |
| {at: 0.7, is: "'test' 23"}, |
| {at: 1, is: "'test' 20"}, |
| {at: 1.5, is: "'test' 15"}, |
| ]); |
| |
| assertNoInterpolation({ |
| property: 'font-variation-settings', |
| from: "'test' 20", |
| to: "normal", |
| }); |
| |
| assertInterpolation({ |
| property: 'font-variation-settings', |
| from: "'test' 20", |
| to: "'test' 30", |
| }, [ |
| {at: -0.5, is: "'test' 15"}, |
| {at: 0, is: "'test' 20"}, |
| {at: 0.3, is: "'test' 23"}, |
| {at: 0.7, is: "'test' 27"}, |
| {at: 1, is: "'test' 30"}, |
| {at: 1.5, is: "'test' 35"}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'font-variation-settings', |
| from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20", |
| to: "'aaaa' 10, 'bbbb' 20, 'cccc' 30", |
| }, [ |
| {at: -0.5, is: "'aaaa' -5, 'bbbb' 5, 'cccc' 15"}, |
| {at: 0, is: "'aaaa' 0, 'bbbb' 10, 'cccc' 20"}, |
| {at: 0.3, is: "'aaaa' 3, 'bbbb' 13, 'cccc' 23"}, |
| {at: 0.7, is: "'aaaa' 7, 'bbbb' 17, 'cccc' 27"}, |
| {at: 1, is: "'aaaa' 10, 'bbbb' 20, 'cccc' 30"}, |
| {at: 1.5, is: "'aaaa' 15, 'bbbb' 25, 'cccc' 35"}, |
| ]); |
| |
| assertNoInterpolation({ |
| property: 'font-variation-settings', |
| from: "'aaaa' 0, 'bbbb' 10", |
| to: "'aaaa' 10, 'bbbb' 20, 'cccc' 30", |
| }); |
| |
| assertNoInterpolation({ |
| property: 'font-variation-settings', |
| from: "'aaaa' 10, 'bbbb' 20, 'cccc' 30", |
| to: "'aaaa' 0, 'bbbb' 10", |
| }); |
| |
| assertNoInterpolation({ |
| property: 'font-variation-settings', |
| from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20", |
| to: "'cccc' 10, 'bbbb' 20, 'aaaa' 30", |
| }); |
| |
| assertNoInterpolation({ |
| property: 'font-variation-settings', |
| from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20", |
| to: "'dddd' 10, 'eeee' 20, 'ffff' 30", |
| }); |
| </script> |
