Bug 1471814 - Add a preference for animation composite modes; r=bz,hiro
authorBrian Birtles <birtles@gmail.com>
Sat, 14 Jul 2018 09:23:03 +0900
changeset 426863 f302f2d706fba26847018e9f961548e5b5f38f5d
parent 426862 bb1c7e6f5d7a96d37baf2b2177e7ea2631cc8dfb
child 426864 bcc8cc984ddf661c63b390becfbb952c1d4ee638
push id34288
push usertoros@mozilla.com
push dateTue, 17 Jul 2018 21:54:19 +0000
treeherdermozilla-central@e9cd9d73e5a8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz, hiro
bugs1471814
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1471814 - Add a preference for animation composite modes; r=bz,hiro This feature should not be shipped until the various definitions of addition for each additive property are properly specified. Unlike other patches in this series, compositing is not frequently used internally (e.g. by DevTools etc.) so there is no need to enable this by default for system code. Also, it turns out we have inadvertently been shipping part of this feature for some time now. The next patch in this series will add tests for that case and disable that part of the feature (a suitable intent to unship will follow). This patch merely adapts and extends the existing tests without affecting the surface area covered by the combination of the newly-added pref and the existing dom.animations-api.core.enabled pref. MozReview-Commit-ID: Htr6mlyCBav
dom/animation/KeyframeEffect.cpp
dom/animation/KeyframeEffect.h
dom/animation/test/chrome.ini
dom/animation/test/crashtests/crashtests.list
dom/animation/test/mochitest.ini
dom/animation/test/mozilla/file_disable_animations_api_compositing.html
dom/animation/test/mozilla/file_disable_animations_api_core.html
dom/animation/test/mozilla/test_disable_animations_api_compositing.html
dom/animation/test/mozilla/test_disable_animations_api_core.html
dom/webidl/KeyframeEffect.webidl
layout/reftests/web-animations/reftest.list
layout/style/crashtests/crashtests.list
layout/style/test/mochitest.ini
modules/libpref/init/StaticPrefList.h
testing/web-platform/meta/css/css-animations/__dir__.ini
testing/web-platform/meta/css/css-transitions/__dir__.ini
testing/web-platform/meta/web-animations/__dir__.ini
--- a/dom/animation/KeyframeEffect.cpp
+++ b/dom/animation/KeyframeEffect.cpp
@@ -16,24 +16,24 @@
 #include "mozilla/AutoRestore.h"
 #include "mozilla/ComputedStyleInlines.h"
 #include "mozilla/EffectSet.h"
 #include "mozilla/FloatingPoint.h" // For IsFinite
 #include "mozilla/LayerAnimationInfo.h"
 #include "mozilla/LookAndFeel.h" // For LookAndFeel::GetInt
 #include "mozilla/KeyframeUtils.h"
 #include "mozilla/ServoBindings.h"
+#include "mozilla/StaticPrefs.h"
 #include "mozilla/TypeTraits.h"
 #include "Layers.h" // For Layer
 #include "nsComputedDOMStyle.h" // nsComputedDOMStyle::GetComputedStyle
 #include "nsContentUtils.h"
 #include "nsCSSPropertyIDSet.h"
 #include "nsCSSProps.h" // For nsCSSProps::PropHasFlags
 #include "nsCSSPseudoElements.h" // For CSSPseudoElementType
-#include "nsDocument.h" // For nsDocument::IsWebAnimationsEnabled
 #include "nsIFrame.h"
 #include "nsIPresShell.h"
 #include "nsIScriptError.h"
 #include "nsRefreshDriver.h"
 
 namespace mozilla {
 
 bool
@@ -83,33 +83,25 @@ KeyframeEffect::KeyframeEffect(
 
 JSObject*
 KeyframeEffect::WrapObject(JSContext* aCx,
                                    JS::Handle<JSObject*> aGivenProto)
 {
   return KeyframeEffect_Binding::Wrap(aCx, this, aGivenProto);
 }
 
-IterationCompositeOperation KeyframeEffect::IterationComposite(
-  CallerType /*aCallerType*/) const
+IterationCompositeOperation KeyframeEffect::IterationComposite() const
 {
   return mEffectOptions.mIterationComposite;
 }
 
 void
 KeyframeEffect::SetIterationComposite(
-  const IterationCompositeOperation& aIterationComposite,
-  CallerType aCallerType)
+  const IterationCompositeOperation& aIterationComposite)
 {
-  // Ignore iterationComposite if the Web Animations API is not enabled,
-  // then the default value 'Replace' will be used.
-  if (!nsDocument::IsWebAnimationsEnabled(aCallerType)) {
-    return;
-  }
-
   if (mEffectOptions.mIterationComposite == aIterationComposite) {
     return;
   }
 
   if (mAnimation && mAnimation->IsRelevant()) {
     nsNodeUtils::AnimationChanged(mAnimation);
   }
 
@@ -592,19 +584,19 @@ KeyframeEffectOptionsFromUnion(
 
 template <class OptionsType>
 static KeyframeEffectParams
 KeyframeEffectParamsFromUnion(const OptionsType& aOptions,
                               CallerType aCallerType)
 {
   KeyframeEffectParams result;
   if (aOptions.IsUnrestrictedDouble() ||
-      // Ignore iterationComposite if the Web Animations API is not enabled,
-      // then the default value 'Replace' will be used.
-      !nsDocument::IsWebAnimationsEnabled(aCallerType)) {
+      // Ignore iterationComposite and composite if the corresponding pref is
+      // not set. The default value 'Replace' will be used instead.
+      !StaticPrefs::dom_animations_api_compositing_enabled()) {
     return result;
   }
 
   const KeyframeEffectOptions& options =
     KeyframeEffectOptionsFromUnion(aOptions);
   result.mIterationComposite = options.mIterationComposite;
   result.mComposite = options.mComposite;
   return result;
--- a/dom/animation/KeyframeEffect.h
+++ b/dom/animation/KeyframeEffect.h
@@ -169,23 +169,19 @@ public:
   void SetTarget(const Nullable<ElementOrCSSPseudoElement>& aTarget);
 
   void GetKeyframes(JSContext*& aCx,
                     nsTArray<JSObject*>& aResult,
                     ErrorResult& aRv);
   void GetProperties(nsTArray<AnimationPropertyDetails>& aProperties,
                      ErrorResult& aRv) const;
 
-  // aCallerType is not used in the getter so we supply a default value so that
-  // internal users don't need to specify this value.
-  IterationCompositeOperation IterationComposite(
-    CallerType aCallerType = CallerType::System) const;
+  IterationCompositeOperation IterationComposite() const;
   void SetIterationComposite(
-    const IterationCompositeOperation& aIterationComposite,
-    CallerType aCallerType);
+    const IterationCompositeOperation& aIterationComposite);
 
   CompositeOperation Composite() const;
   void SetComposite(const CompositeOperation& aComposite);
 
   void NotifySpecifiedTimingUpdated();
   void NotifyAnimationTimingUpdated();
   void RequestRestyle(EffectCompositor::RestyleType aRestyleType);
   void SetAnimation(Animation* aAnimation) override;
--- a/dom/animation/test/chrome.ini
+++ b/dom/animation/test/chrome.ini
@@ -1,9 +1,11 @@
 [DEFAULT]
+prefs =
+  dom.animations-api.compositing.enabled=true
 support-files =
   testcommon.js
   ../../imptests/testharness.js
   ../../imptests/testharnessreport.js
   !/dom/animation/test/chrome/file_animate_xrays.html
 
 [chrome/test_animate_xrays.html]
 # file_animate_xrays.html needs to go in mochitest.ini since it is served
--- a/dom/animation/test/crashtests/crashtests.list
+++ b/dom/animation/test/crashtests/crashtests.list
@@ -8,35 +8,35 @@ pref(dom.animations-api.core.enabled,tru
 pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.timelines.enabled,true) load 1216842-6.html
 load 1272475-1.html
 load 1272475-2.html
 load 1278485-1.html
 pref(dom.animations-api.timelines.enabled,true) load 1277272-1.html
 load 1282691-1.html
 pref(dom.animations-api.core.enabled,true) load 1291413-1.html
 pref(dom.animations-api.core.enabled,true) load 1291413-2.html
-pref(dom.animations-api.core.enabled,true) load 1304886-1.html
+pref(dom.animations-api.compositing.enabled,true) load 1304886-1.html
 pref(dom.animations-api.core.enabled,true) load 1309198-1.html
 pref(dom.animations-api.implicit-keyframes.enabled,true) load 1322382-1.html
 pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.implicit-keyframes.enabled,true) load 1322291-1.html
 pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.implicit-keyframes.enabled,true) load 1322291-2.html
-pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.implicit-keyframes.enabled,true) load 1323114-1.html
-pref(dom.animations-api.core.enabled,true) load 1323114-2.html
+pref(dom.animations-api.implicit-keyframes.enabled,true) pref(dom.animations-api.compositing.enabled,true) load 1323114-1.html
+pref(dom.animations-api.compositing.enabled,true) load 1323114-2.html
 pref(dom.animations-api.implicit-keyframes.enabled,true) load 1323119-1.html
 pref(dom.animations-api.implicit-keyframes.enabled,true) load 1324554-1.html
-pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.implicit-keyframes.enabled,true) load 1325193-1.html
+pref(dom.animations-api.implicit-keyframes.enabled,true) pref(dom.animations-api.compositing.enabled,true) load 1325193-1.html
 pref(dom.animations-api.implicit-keyframes.enabled,true) load 1330190-1.html
-pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.implicit-keyframes.enabled,true) load 1330190-2.html
-pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.implicit-keyframes.enabled,true) load 1330513-1.html
+pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.implicit-keyframes.enabled,true) pref(dom.animations-api.compositing.enabled,true) load 1330190-2.html
+pref(dom.animations-api.implicit-keyframes.enabled,true) pref(dom.animations-api.compositing.enabled,true) load 1330513-1.html
 pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.timelines.enabled,true) load 1333539-1.html
 pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.timelines.enabled,true) load 1333539-2.html
 load 1334582-1.html
 load 1334582-2.html
 load 1334583-1.html
-pref(dom.animations-api.core.enabled,true) load 1335998-1.html
+pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.compositing.enabled,true) load 1335998-1.html
 pref(dom.animations-api.core.enabled,true) load 1343589-1.html
 pref(dom.animations-api.core.enabled,true) load 1359658-1.html
 pref(dom.animations-api.implicit-keyframes.enabled,true) load 1373712-1.html
 pref(dom.animations-api.implicit-keyframes.enabled,true) load 1379606-1.html
 load 1393605-1.html
 load 1400022-1.html
 pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.implicit-keyframes.enabled,true) load 1401809.html
 pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.timelines.enabled,true) pref(dom.animations-api.implicit-keyframes.enabled,true) load 1411318-1.html
--- a/dom/animation/test/mochitest.ini
+++ b/dom/animation/test/mochitest.ini
@@ -1,20 +1,21 @@
 [DEFAULT]
 prefs =
+  dom.animations-api.compositing.enabled=true
   dom.animations-api.core.enabled=true
   dom.animations-api.implicit-keyframes.enabled=true
   dom.animations-api.timelines.enabled=true
 # Support files for chrome tests that we want to load over HTTP need
 # to go in here, not chrome.ini.
 support-files =
   chrome/file_animate_xrays.html
   mozilla/xhr_doc.html
   mozilla/file_deferred_start.html
-  mozilla/file_disable_animations_api_core.html
+  mozilla/file_disable_animations_api_compositing.html
   mozilla/file_disable_animations_api_implicit_keyframes.html
   mozilla/file_disable_animations_api_timelines.html
   mozilla/file_discrete_animations.html
   mozilla/file_restyles.html
   mozilla/file_transition_finish_on_compositor.html
   ../../../layout/style/test/property_database.js
   testcommon.js
   !/dom/events/test/event_leak_utils.js
@@ -36,17 +37,17 @@ support-files =
 [css-transitions/test_setting-effect.html]
 [document-timeline/test_document-timeline.html]
 skip-if = (verify && !debug && (os == 'mac'))
 [document-timeline/test_request_animation_frame.html]
 [mozilla/test_cascade.html]
 [mozilla/test_cubic_bezier_limits.html]
 [mozilla/test_deferred_start.html]
 skip-if = (toolkit == 'android' && debug) || (os == 'win' && bits == 64) # Bug 1363957
-[mozilla/test_disable_animations_api_core.html]
+[mozilla/test_disable_animations_api_compositing.html]
 [mozilla/test_disable_animations_api_implicit_keyframes.html]
 [mozilla/test_disable_animations_api_timelines.html]
 [mozilla/test_disabled_properties.html]
 [mozilla/test_discrete_animations.html]
 [mozilla/test_distance_of_basic_shape.html]
 [mozilla/test_distance_of_filter.html]
 [mozilla/test_distance_of_transform.html]
 [mozilla/test_document_timeline_origin_time_range.html]
rename from dom/animation/test/mozilla/file_disable_animations_api_core.html
rename to dom/animation/test/mozilla/file_disable_animations_api_compositing.html
--- a/dom/animation/test/mozilla/file_disable_animations_api_core.html
+++ b/dom/animation/test/mozilla/file_disable_animations_api_compositing.html
@@ -1,30 +1,76 @@
 <!doctype html>
 <meta charset=utf-8>
 <script src="../testcommon.js"></script>
 <body>
 <script>
 'use strict';
 
-test(function(t) {
-  var div = addDiv(t);
-  var anim =
-    div.animate({ marginLeft: ['0px', '10px'] },
-                { duration: 100 * MS_PER_SEC,
-                  easing: 'linear',
-                  iterations: 10,
-                  iterationComposite: 'accumulate' });
-  anim.pause();
+test(t => {
+  const anim = addDiv(t).animate(
+    { marginLeft: ['0px', '10px'] },
+    {
+      duration: 100 * MS_PER_SEC,
+      iterations: 10,
+      iterationComposite: 'accumulate',
+      composite: 'add',
+    }
+  );
+  assert_false(
+    'iterationComposite' in anim.effect,
+    'The KeyframeEffect.iterationComposite member is not present'
+  );
+  assert_false(
+    'composite' in anim.effect,
+    'The KeyframeEffect.composite member is not present'
+  );
+}, 'The iterationComposite and composite members are not present on Animation'
+   + ' when the compositing pref is disabled');
 
-  // NOTE: We can't check iterationComposite value itself though API since
-  // Animation.effect is also behind the the Web Animations API.  So we just
-  // check that style value is not affected by iterationComposite.
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    { marginLeft: ['0px', '10px'] },
+    {
+      duration: 100 * MS_PER_SEC,
+      iterations: 10,
+      iterationComposite: 'accumulate',
+    }
+  );
+  anim.pause();
   anim.currentTime = 200 * MS_PER_SEC;
-  assert_equals(getComputedStyle(div).marginLeft, '0px',
-    'Animated style should not be accumulated when the Web Animations API is ' +
-    'not enabled even if accumulate is specified in the constructor');
-}, 'iterationComposite should not affect at all if the Web Animations API ' +
-   'is not enabled');
+
+  assert_equals(
+    getComputedStyle(div).marginLeft,
+    '0px',
+    'Animated style should NOT accumulate'
+  );
+}, 'KeyframeEffectOptions.iterationComposite should be ignored if the'
+   + ' compositing pref is disabled');
+
+test(t => {
+  const div = addDiv(t);
+  const anim1 = div.animate(
+    { marginLeft: ['0px', '100px'] },
+    { duration: 100 * MS_PER_SEC }
+  );
+  anim1.pause();
+  anim1.currentTime = 50 * MS_PER_SEC;
+
+  const anim2 = div.animate(
+    { marginLeft: ['0px', '100px'] },
+    { duration: 100 * MS_PER_SEC, composite: 'add' }
+  );
+  anim2.pause();
+  anim2.currentTime = 50 * MS_PER_SEC;
+
+  assert_equals(
+    getComputedStyle(div).marginLeft,
+    '50px',
+    'Animations should NOT add together'
+  );
+}, 'KeyframeEffectOptions.composite should be ignored if the'
+   + ' compositing pref is disabled');
 
 done();
 </script>
 </body>
rename from dom/animation/test/mozilla/test_disable_animations_api_core.html
rename to dom/animation/test/mozilla/test_disable_animations_api_compositing.html
--- a/dom/animation/test/mozilla/test_disable_animations_api_core.html
+++ b/dom/animation/test/mozilla/test_disable_animations_api_compositing.html
@@ -2,13 +2,13 @@
 <meta charset=utf-8>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <div id="log"></div>
 <script>
 'use strict';
 setup({explicit_done: true});
 SpecialPowers.pushPrefEnv(
-  { "set": [["dom.animations-api.core.enabled", false]]},
+  { "set": [["dom.animations-api.compositing.enabled", false]]},
   function() {
-    window.open("file_disable_animations_api_core.html");
+    window.open("file_disable_animations_api_compositing.html");
   });
 </script>
--- a/dom/webidl/KeyframeEffect.webidl
+++ b/dom/webidl/KeyframeEffect.webidl
@@ -25,18 +25,19 @@ dictionary KeyframeEffectOptions : Effec
 [Func="nsDocument::IsWebAnimationsEnabled",
  RunConstructorInCallerCompartment,
  Constructor ((Element or CSSPseudoElement)? target,
               object? keyframes,
               optional (unrestricted double or KeyframeEffectOptions) options),
  Constructor (KeyframeEffect source)]
 interface KeyframeEffect : AnimationEffect {
   attribute (Element or CSSPseudoElement)?  target;
-  [NeedsCallerType]
+  [Pref="dom.animations-api.compositing.enabled"]
   attribute IterationCompositeOperation     iterationComposite;
+  [Pref="dom.animations-api.compositing.enabled"]
   attribute CompositeOperation              composite;
   [Throws] sequence<object> getKeyframes ();
   [Throws] void             setKeyframes (object? keyframes);
 };
 
 // Non-standard extensions
 dictionary AnimationPropertyValueDetails {
   required double             offset;
--- a/layout/reftests/web-animations/reftest.list
+++ b/layout/reftests/web-animations/reftest.list
@@ -12,13 +12,13 @@ test-pref(dom.animations-api.core.enable
 test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-keyframe.html stacking-context-animation-ref.html
 test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-keyframe-in-delay.html stacking-context-animation-ref.html
 test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-target.html stacking-context-animation-changing-target-ref.html
 
 test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-target-in-delay.html stacking-context-animation-changing-target-ref.html
 test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-effect.html stacking-context-animation-ref.html
 test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-display-property.html stacking-context-animation-ref.html
 == stacking-context-transform-losing-css-animation-in-delay.html stacking-context-animation-ref.html
-test-pref(dom.animations-api.core.enabled,true) == style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html style-updates-for-iteration-composite-ref.html
-test-pref(dom.animations-api.core.enabled,true) == style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html style-updates-for-iteration-composite-ref.html
-test-pref(dom.animations-api.core.enabled,true) == style-updates-on-current-iteration-changed.html style-updates-for-iteration-composite-ref.html
+test-pref(dom.animations-api.core.enabled,true) test-pref(dom.animations-api.compositing.enabled,true) == style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html style-updates-for-iteration-composite-ref.html
+test-pref(dom.animations-api.core.enabled,true) test-pref(dom.animations-api.compositing.enabled,true) == style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html style-updates-for-iteration-composite-ref.html
+test-pref(dom.animations-api.core.enabled,true) test-pref(dom.animations-api.compositing.enabled,true) == style-updates-on-current-iteration-changed.html style-updates-for-iteration-composite-ref.html
 test-pref(dom.animations-api.core.enabled,true) == cancel-animation-with-selector-matching.html about:blank
 == child-in-animating-element-display-none.html child-in-animating-element-display-none-ref.html
--- a/layout/style/crashtests/crashtests.list
+++ b/layout/style/crashtests/crashtests.list
@@ -190,17 +190,17 @@ load 1377256-1.html
 load 1378064-1.html
 load 1378814.html
 load 1380800.html
 load link-transition-before.html
 load 1381420-1.html
 load 1381682.html
 load 1382672.html
 load 1382710.html
-pref(dom.animations-api.core.enabled,true) pref(dom.animations-api.implicit-keyframes.enabled,true) load 1383493-1.html
+pref(dom.animations-api.compositing.enabled,true) pref(dom.animations-api.implicit-keyframes.enabled,true) load 1383493-1.html
 load 1383001.html
 load 1383001-2.html
 load 1383319.html
 pref(dom.animations-api.implicit-keyframes.enabled,true) load 1383589-1.html
 load 1383975.html
 load border-image-visited-link.html
 load content-only-on-link-before.html
 load content-only-on-visited-before.html
@@ -221,17 +221,17 @@ load 1391577.html
 load 1393189.html
 pref(dom.animations-api.implicit-keyframes.enabled,true) load 1393580.html
 load 1389645.html
 load 1390726.html
 load 1393791.html
 load 1384232.html
 load 1395725.html
 load 1396041.html
-pref(dom.animations-api.implicit-keyframes.enabled,true) load 1397363-1.html
+pref(dom.animations-api.implicit-keyframes.enabled,true) pref(dom.animations-api.compositing.enabled,true) load 1397363-1.html
 load 1397439-1.html
 load 1395719.html
 load 1397091.html
 load 1398479.html
 load 1398581.html
 load 1399006.html
 load 1399546.html
 load 1400035.html
--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -1,10 +1,11 @@
 [DEFAULT]
 prefs =
+  dom.animations-api.compositing.enabled=true
   dom.animations-api.core.enabled=true
   dom.animations-api.implicit-keyframes.enabled=true
   dom.animations-api.timelines.enabled=true
 support-files =
   animation_utils.js
   ccd-quirks.html
   ccd.sjs
   ccd-standards.html
--- a/modules/libpref/init/StaticPrefList.h
+++ b/modules/libpref/init/StaticPrefList.h
@@ -86,16 +86,29 @@ VARCACHE_PREF(
    accessibility_monoaudio_enable,
   RelaxedAtomicBool, false
 )
 
 //---------------------------------------------------------------------------
 // DOM prefs
 //---------------------------------------------------------------------------
 
+// Is support for composite operations from the Web Animations API enabled?
+#ifdef RELEASE_OR_BETA
+# define PREF_VALUE false
+#else
+# define PREF_VALUE true
+#endif
+VARCACHE_PREF(
+  "dom.animations-api.compositing.enabled",
+   dom_animations_api_compositing_enabled,
+  bool, PREF_VALUE
+)
+#undef PREF_VALUE
+
 // Is support for animations from the Web Animations API without 0%/100%
 // keyframes enabled?
 #ifdef RELEASE_OR_BETA
 # define PREF_VALUE false
 #else
 # define PREF_VALUE true
 #endif
 VARCACHE_PREF(
--- a/testing/web-platform/meta/css/css-animations/__dir__.ini
+++ b/testing/web-platform/meta/css/css-animations/__dir__.ini
@@ -1,3 +1,4 @@
-prefs: [dom.animations-api.core.enabled:true,
+prefs: [dom.animations-api.compositing.enabled:true,
+        dom.animations-api.core.enabled:true,
         dom.animations-api.implicit-keyframes.enabled:true,
         dom.animations-api.timelines.enabled:true]
--- a/testing/web-platform/meta/css/css-transitions/__dir__.ini
+++ b/testing/web-platform/meta/css/css-transitions/__dir__.ini
@@ -1,3 +1,4 @@
-prefs: [dom.animations-api.core.enabled:true,
+prefs: [dom.animations-api.compositing.enabled:true,
+        dom.animations-api.core.enabled:true,
         dom.animations-api.implicit-keyframes.enabled:true,
         dom.animations-api.timelines.enabled:true]
--- a/testing/web-platform/meta/web-animations/__dir__.ini
+++ b/testing/web-platform/meta/web-animations/__dir__.ini
@@ -1,4 +1,5 @@
-prefs: [dom.animations-api.core.enabled:true,
+prefs: [dom.animations-api.compositing.enabled:true,
+        dom.animations-api.core.enabled:true,
         dom.animations-api.implicit-keyframes.enabled:true,
         dom.animations-api.timelines.enabled:true,
         layout.css.frames-timing.enabled:true]