1 files changed, 161 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-fonts/animations/font-variation-settings-interpolation.html b/testing/web-platform/tests/css/css-fonts/animations/font-variation-settings-interpolation.html
new file mode 100644
index 0000000000..cb99d7b255
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/animations/font-variation-settings-interpolation.html
@@ -0,0 +1,161 @@
+<!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>