--- a/dom/animation/KeyframeUtils.cpp
+++ b/dom/animation/KeyframeUtils.cpp
@@ -446,17 +446,18 @@ ConvertKeyframeSequence(JSContext* aCx,
     Keyframe* keyframe = aResult.AppendElement(fallible);
     if (!keyframe) {
       return false;
     }
     if (!keyframeDict.mOffset.IsNull()) {
       keyframe->mOffset.emplace(keyframeDict.mOffset.Value());
     }
 
-    if (!keyframeDict.mComposite.IsNull()) {
+    if (StaticPrefs::dom_animations_api_compositing_enabled() &&
+        !keyframeDict.mComposite.IsNull()) {
       keyframe->mComposite.emplace(keyframeDict.mComposite.Value());
     }
 
     // Look for additional property-values pairs on the object.
     nsTArray<PropertyValuesPair> propertyValuePairs;
     if (value.isObject()) {
       JS::Rooted<JSObject*> object(aCx, &value.toObject());
       if (!GetPropertyValuesPairs(aCx, object,
@@ -1181,36 +1182,38 @@ GetKeyframeListFromPropertyIndexedKeyfra
       aResult[i].mTimingFunction = easings[i % easings.Length()];
     }
   }
 
   // Fill in any composite operations.
   //
   // This corresponds to step 5, "Otherwise," branch, substep 12 of
   // https://drafts.csswg.org/web-animations/#processing-a-keyframes-argument
-  const FallibleTArray<Nullable<dom::CompositeOperation>>* compositeOps =
-    nullptr;
-  AutoTArray<Nullable<dom::CompositeOperation>, 1> singleCompositeOp;
-  auto& composite = keyframeDict.mComposite;
-  if (composite.IsCompositeOperation()) {
-    singleCompositeOp.AppendElement(composite.GetAsCompositeOperation());
-    const FallibleTArray<Nullable<dom::CompositeOperation>>& asFallibleArray =
-      singleCompositeOp;
-    compositeOps = &asFallibleArray;
-  } else if (composite.IsCompositeOperationOrNullSequence()) {
-    compositeOps = &composite.GetAsCompositeOperationOrNullSequence();
-  }
+  if (StaticPrefs::dom_animations_api_compositing_enabled()) {
+    const FallibleTArray<Nullable<dom::CompositeOperation>>* compositeOps =
+      nullptr;
+    AutoTArray<Nullable<dom::CompositeOperation>, 1> singleCompositeOp;
+    auto& composite = keyframeDict.mComposite;
+    if (composite.IsCompositeOperation()) {
+      singleCompositeOp.AppendElement(composite.GetAsCompositeOperation());
+      const FallibleTArray<Nullable<dom::CompositeOperation>>& asFallibleArray =
+        singleCompositeOp;
+      compositeOps = &asFallibleArray;
+    } else if (composite.IsCompositeOperationOrNullSequence()) {
+      compositeOps = &composite.GetAsCompositeOperationOrNullSequence();
+    }
 
-  // Fill in and repeat as needed.
-  if (compositeOps && !compositeOps->IsEmpty()) {
-    size_t length = compositeOps->Length();
-    for (size_t i = 0; i < aResult.Length(); i++) {
-      if (!compositeOps->ElementAt(i % length).IsNull()) {
-        aResult[i].mComposite.emplace(
-          compositeOps->ElementAt(i % length).Value());
+    // Fill in and repeat as needed.
+    if (compositeOps && !compositeOps->IsEmpty()) {
+      size_t length = compositeOps->Length();
+      for (size_t i = 0; i < aResult.Length(); i++) {
+        if (!compositeOps->ElementAt(i % length).IsNull()) {
+          aResult[i].mComposite.emplace(
+            compositeOps->ElementAt(i % length).Value());
+        }
       }
     }
   }
 }
 
 /**
  * Returns true if the supplied set of keyframes has keyframe values for
  * any property for which it does not also supply a value for the 0% and 100%

--- a/dom/animation/test/mozilla/file_disable_animations_api_compositing.html
+++ b/dom/animation/test/mozilla/file_disable_animations_api_compositing.html
@@ -66,11 +66,57 @@ test(t => {
   assert_equals(
     getComputedStyle(div).marginLeft,
     '50px',
     'Animations should NOT add together'
   );
 }, 'KeyframeEffectOptions.composite should be ignored if the'
    + ' compositing pref is disabled');
 
+test(t => {
+  const div = addDiv(t);
+  const anim1 = div.animate({ marginLeft: ['0px', '100px'] }, 100 * MS_PER_SEC);
+  anim1.pause();
+  anim1.currentTime = 50 * MS_PER_SEC;
+
+  const anim2 = div.animate(
+    [
+      { marginLeft: '0px', composite: 'add' },
+      { marginLeft: '100px', composite: 'add' },
+    ],
+    100 * MS_PER_SEC
+  );
+  anim2.pause();
+  anim2.currentTime = 50 * MS_PER_SEC;
+
+  assert_equals(
+    getComputedStyle(div).marginLeft,
+    '50px',
+    'Animations should NOT add together'
+  );
+}, 'composite member is ignored on keyframes when using array notation');
+
+test(t => {
+  const div = addDiv(t);
+  const anim1 = div.animate(
+    { marginLeft: ['0px', '100px'] },
+    100 * MS_PER_SEC
+  );
+  anim1.pause();
+  anim1.currentTime = 50 * MS_PER_SEC;
+
+  const anim2 = div.animate(
+    { marginLeft: ['0px', '100px'], composite: ['add', 'add'] },
+    100 * MS_PER_SEC
+  );
+  anim2.pause();
+  anim2.currentTime = 50 * MS_PER_SEC;
+
+  assert_equals(
+    getComputedStyle(div).marginLeft,
+    '50px',
+    'Animations should NOT add together'
+  );
+}, 'composite member is ignored on keyframes when using object notation');
+
 done();
 </script>
 </body>