| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <title>font-variation-settings interpolation</title> |
| <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-variation-settings"> |
| <meta name="assert" content="font-variation-settings supports animation pairwise by 'like' properties"> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/interpolation-testcommon.js"></script> |
| |
| <style> |
| .parent { |
| font-variation-settings: "test" 30; |
| } |
| .target { |
| font-variation-settings: "test" 10; |
| } |
| </style> |
| |
| <body></body> |
| |
| <script> |
| |
| // Because font-variation-settings is specced as a map rather than a list |
| // (https://github.com/w3c/csswg-drafts/issues/1959), browsers are allowed to |
| // reorder the output as they see fit. |
| function compareFontVariationSettings(actual, expected) { |
| // This is not perfect, but should serve as a reasonable comparison. We split |
| // the inputs into arrays and trim each characteristic, then sort the array |
| // and compare them. |
| const actual_arr = actual.split(',').map(x => x.trim()).sort(); |
| const expected_arr = expected.split(',').map(x => x.trim()).sort(); |
| assert_array_equals(actual_arr, expected_arr); |
| } |
| |
| test_interpolation({ |
| property: 'font-variation-settings', |
| from: neutralKeyframe, |
| to: '"test" 20', |
| comparisonFunction: compareFontVariationSettings, |
| }, [ |
| {at: -0.5, expect: "'test' 5"}, |
| {at: 0, expect: "'test' 10"}, |
| {at: 0.3, expect: "'test' 13"}, |
| {at: 0.7, expect: "'test' 17"}, |
| {at: 1, expect: "'test' 20"}, |
| {at: 1.5, expect: "'test' 25"}, |
| ]); |
| |
| test_no_interpolation({ |
| property: 'font-variation-settings', |
| from: 'initial', |
| to: "'test' 50", |
| }); |
| |
| test_interpolation({ |
| property: 'font-variation-settings', |
| from: 'inherit', |
| to: "'test' 20", |
| comparisonFunction: compareFontVariationSettings, |
| }, [ |
| {at: -0.5, expect: "'test' 35"}, |
| {at: 0, expect: "'test' 30"}, |
| {at: 0.3, expect: "'test' 27"}, |
| {at: 0.7, expect: "'test' 23"}, |
| {at: 1, expect: "'test' 20"}, |
| {at: 1.5, expect: "'test' 15"}, |
| ]); |
| |
| test_interpolation({ |
| property: 'font-variation-settings', |
| from: 'unset', |
| to: "'test' 20", |
| comparisonFunction: compareFontVariationSettings, |
| }, [ |
| {at: -0.5, expect: "'test' 35"}, |
| {at: 0, expect: "'test' 30"}, |
| {at: 0.3, expect: "'test' 27"}, |
| {at: 0.7, expect: "'test' 23"}, |
| {at: 1, expect: "'test' 20"}, |
| {at: 1.5, expect: "'test' 15"}, |
| ]); |
| |
| test_no_interpolation({ |
| property: 'font-variation-settings', |
| from: "'test' 20", |
| to: "normal", |
| }); |
| |
| test_interpolation({ |
| property: 'font-variation-settings', |
| from: "'test' 20", |
| to: "'test' 30", |
| comparisonFunction: compareFontVariationSettings, |
| }, [ |
| {at: -0.5, expect: "'test' 15"}, |
| {at: 0, expect: "'test' 20"}, |
| {at: 0.3, expect: "'test' 23"}, |
| {at: 0.7, expect: "'test' 27"}, |
| {at: 1, expect: "'test' 30"}, |
| {at: 1.5, expect: "'test' 35"}, |
| ]); |
| |
| test_interpolation({ |
| property: 'font-variation-settings', |
| from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20", |
| to: "'aaaa' 10, 'bbbb' 20, 'cccc' 30", |
| comparisonFunction: compareFontVariationSettings, |
| }, [ |
| {at: -0.5, expect: "'aaaa' -5, 'bbbb' 5, 'cccc' 15"}, |
| {at: 0, expect: "'aaaa' 0, 'bbbb' 10, 'cccc' 20"}, |
| {at: 0.3, expect: "'aaaa' 3, 'bbbb' 13, 'cccc' 23"}, |
| {at: 0.7, expect: "'aaaa' 7, 'bbbb' 17, 'cccc' 27"}, |
| {at: 1, expect: "'aaaa' 10, 'bbbb' 20, 'cccc' 30"}, |
| {at: 1.5, expect: "'aaaa' 15, 'bbbb' 25, 'cccc' 35"}, |
| ]); |
| |
| // font-variation-settings is a map, so any order works. |
| test_interpolation({ |
| property: 'font-variation-settings', |
| from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20", |
| to: "'cccc' 10, 'bbbb' 20, 'aaaa' 30", |
| comparisonFunction: compareFontVariationSettings, |
| }, [ |
| {at: -0.5, expect: "'aaaa' -15, 'bbbb' 5, 'cccc' 25"}, |
| {at: 0, expect: "'aaaa' 0, 'bbbb' 10, 'cccc' 20"}, |
| {at: 0.3, expect: "'aaaa' 9, 'bbbb' 13, 'cccc' 17"}, |
| {at: 0.7, expect: "'aaaa' 21, 'bbbb' 17, 'cccc' 13"}, |
| {at: 1, expect: "'aaaa' 30, 'bbbb' 20, 'cccc' 10"}, |
| {at: 1.5, expect: "'aaaa' 45, 'bbbb' 25, 'cccc' 5"}, |
| ]); |
| |
| test_no_interpolation({ |
| property: 'font-variation-settings', |
| from: "'aaaa' 0, 'bbbb' 10", |
| to: "'aaaa' 10, 'bbbb' 20, 'cccc' 30", |
| }); |
| |
| test_no_interpolation({ |
| property: 'font-variation-settings', |
| from: "'aaaa' 10, 'bbbb' 20, 'cccc' 30", |
| to: "'aaaa' 0, 'bbbb' 10", |
| }); |
| |
| test_no_interpolation({ |
| property: 'font-variation-settings', |
| from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20", |
| to: "'dddd' 10, 'eeee' 20, 'ffff' 30", |
| }); |
| |
| // crbug.com/910118: Test that ApplyStandardPropertyValue doesn't overflow. |
| test_interpolation({ |
| property: 'font-variation-settings', |
| from: "'aaaa' 30, 'bbbb' 20", |
| to: "'aaaa' 20, 'bbbb' 30", |
| comparisonFunction: compareFontVariationSettings, |
| }, [ |
| {at: 3.40282e+38, expect: "'aaaa' -3.40282e+38, 'bbbb' 3.40282e+38"}, |
| ]); |
| |
| </script> |
