--- a/testing/web-platform/meta/web-animations/animation-model/animation-types/accumulation-per-property.html.ini
+++ b/testing/web-platform/meta/web-animations/animation-model/animation-types/accumulation-per-property.html.ini
@@ -1,1 +1,1 @@
-prefs: [layout.css.overflow-clip-box.enabled:true]
+prefs: [layout.css.font-variations.enabled:true, layout.css.overflow-clip-box.enabled:true]

--- a/testing/web-platform/meta/web-animations/animation-model/animation-types/addition-per-property.html.ini
+++ b/testing/web-platform/meta/web-animations/animation-model/animation-types/addition-per-property.html.ini
@@ -1,1 +1,1 @@
-prefs: [layout.css.overflow-clip-box.enabled:true]
+prefs: [layout.css.font-variations.enabled:true, layout.css.overflow-clip-box.enabled:true]

--- a/testing/web-platform/meta/web-animations/animation-model/animation-types/interpolation-per-property.html.ini
+++ b/testing/web-platform/meta/web-animations/animation-model/animation-types/interpolation-per-property.html.ini
@@ -1,7 +1,16 @@
-prefs: [layout.css.overflow-clip-box.enabled:true]
+prefs: [layout.css.font-variations.enabled:true, layout.css.overflow-clip-box.enabled:true]
 [interpolation-per-property.html]
   type: testharness
   [filter: interpolate different length of filter-function-list with drop-shadow function]
     expected: FAIL
     bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1345709
 
+  [font-variation-settings supports animation as float with multiple tags]
+    expected:
+      if stylo: PASS
+      FAIL
+
+  [font-variation-settings supports animation as float with multiple duplicate tags]
+    expected:
+      if stylo: PASS
+      FAIL

--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
@@ -613,16 +613,26 @@ var gCSSProperties = {
     ]
   },
   'font-variant-position': {
     // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-position
     types: [
       { type: 'discrete', options: [ [ 'sub', 'super' ] ] }
     ]
   },
+  'font-variation-settings': {
+    // https://drafts.csswg.org/css-fonts-4/#descdef-font-face-font-variation-settings
+    types: [
+      'fontVariationSettings',
+      { type: 'discrete',
+        options: [ ['"wght" 1.1, "wdth" 1', '"wdth" 5'],
+                   ['"wdth" 5', 'normal']
+                 ] },
+    ]
+  },
   'font-weight': {
     // https://drafts.csswg.org/css-fonts-3/#propdef-font-weight
     types: [
     ]
   },
   'grid-auto-columns': {
     // https://drafts.csswg.org/css-grid/#propdef-grid-auto-columns
     types: [
@@ -1471,16 +1481,43 @@ function testAnimationSamples(animation,
     animation.currentTime = testSample.time;
     assert_equals(getComputedStyle(target, type)[idlName],
                   testSample.expected,
                   'The value should be ' + testSample.expected +
                   ' at ' + testSample.time + 'ms');
   });
 }
 
+function toOrderedArray(string) {
+  return string.split(/\s*,\s/).sort();
+}
+
+// This test is for some list-based CSS properties such as font-variant-settings
+// don't specify an order for serializing computed values.
+// This test is for such the property.
+function testAnimationSamplesWithAnyOrder(animation, idlName, testSamples) {
+  const type = animation.effect.target.type;
+  const target = animation.effect.target.constructor.name === 'CSSPseudoElement'
+                 ? animation.effect.target.parentElement
+                 : animation.effect.target;
+  testSamples.forEach(testSample => {
+    animation.currentTime = testSample.time;
+
+    // Convert to array and sort the expected and actual value lists first
+    // before comparing them.
+    const computedValues =
+      toOrderedArray(getComputedStyle(target, type)[idlName]);
+    const expectedValues = toOrderedArray(testSample.expected);
+
+    assert_array_equals(computedValues, expectedValues,
+                        `The computed values should be ${expectedValues}` +
+                        ` at ${testSample.time}ms`);
+  });
+}
+
 function testAnimationSampleMatrices(animation, idlName, testSamples) {
   var target = animation.effect.target;
   testSamples.forEach(function(testSample) {
     animation.currentTime = testSample.time;
     var actual = getComputedStyle(target)[idlName];
     var expected = createMatrixFromArray(testSample.expected);
     assert_matrix_equals(actual, expected,
                          'The value should be ' + expected +

--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
@@ -1885,16 +1885,81 @@ const fontStretchType = {
     this.testAdditionOrAccumulation(property, setup, 'add');
   },
 
   testAccumulation: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'accumulate');
   },
 }
 
+const fontVariationSettingsType = {
+  testInterpolation: (property, setup) => {
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
+        target.animate({ [idlName]: ['"wght" 1.1', '"wght" 1.5'] },
+                       { duration: 1000, fill: 'both' });
+      testAnimationSamples(animation, idlName,
+                           [{ time: 0,  expected: '"wght" 1.1' },
+                            { time: 250,  expected: '"wght" 1.2' },
+                            { time: 750,  expected: '"wght" 1.4' } ]);
+    }, `${property} supports animation as float`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
+        target.animate({ [idlName]: ['"wdth" 1, "wght" 1.1',
+                                     '"wght" 1.5, "wdth" 5'] },
+                       { duration: 1000, fill: 'both' });
+      testAnimationSamplesWithAnyOrder(
+        animation, idlName,
+        [{ time: 0, expected: '"wdth" 1, "wght" 1.1' },
+         { time: 250, expected: '"wdth" 2, "wght" 1.2' },
+         { time: 750, expected: '"wdth" 4, "wght" 1.4' } ]);
+    }, `${property} supports animation as float with multiple tags`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
+        target.animate({ [idlName]: ['"wdth" 1, "wght" 1.1',
+                                     '"wght" 10, "wdth" 5, "wght" 1.5'] },
+                       { duration: 1000, fill: 'both' });
+      testAnimationSamplesWithAnyOrder(
+        animation, idlName,
+        [{ time: 250, expected: '"wdth" 2, "wght" 1.2' },
+         { time: 750, expected: '"wdth" 4, "wght" 1.4' } ]);
+    }, `${property} supports animation as float with multiple duplicate tags`);
+  },
+
+  testAdditionOrAccumulation: (property, setup, composite) => {
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style[idlName] = '"wght" 1';
+      const animation =
+        target.animate({ [idlName]: ['"wght" 1.1', '"wght" 1.5'] },
+                       { duration: 1000, composite: composite });
+      testAnimationSamples(animation, idlName,
+                           [{ time: 250,  expected: '"wght" 2.2' },
+                            { time: 750,  expected: '"wght" 2.4' } ]);
+    }, `${property} with composite type ${composite}`);
+  },
+
+  testAddition: function(property, setup) {
+    this.testAdditionOrAccumulation(property, setup, 'add');
+  },
+
+  testAccumulation: function(property, setup) {
+    this.testAdditionOrAccumulation(property, setup, 'accumulate');
+  },
+}
+
 const types = {
   color: colorType,
   discrete: discreteType,
   filterList: filterListType,
   integer: integerType,
   positiveInteger: positiveIntegerType,
   length: lengthType,
   percentage: percentageType,
@@ -1905,10 +1970,10 @@ const types = {
   transformList: transformListType,
   visibility: visibilityType,
   boxShadowList: boxShadowListType,
   textShadowList: textShadowListType,
   rect: rectType,
   position: positionType,
   dasharray: dasharrayType,
   fontStretch: fontStretchType,
+  fontVariationSettings: fontVariationSettingsType,
 };
-