Bug 1186204 - Allow animations with backface-visibility: hidden to run in the compositor. r=firefox-animation-reviewers,devtools-reviewers,nchevobbe,boris

The check is not fully correct as per the comment (bug 779598 removed
the preserve-3d check).

I went through the relevant bugs and nothing misbehaves with this
afaict.

Differential Revision: https://phabricator.services.mozilla.com/D199609

devtools/client/inspector/animation/test/browser_animation_animated-property-name.js

@@ -8,23 +8,9 @@
 // * display compositor sign when the property was running on compositor.
 // * display warning when the property is runnable on compositor but was not.
 
-const TEST_DATA = [
-  {
-    property: "opacity",
-    isOnCompositor: true,
-  },
-  {
-    property: "transform",
-    isWarning: true,
-  },
-  {
-    property: "width",
-  },
-];
-
-add_task(async function () {
+async function test_element(className, data) {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-  await removeAnimatedElementsExcept([".compositor-notall"]);
+  await removeAnimatedElementsExcept([className]);
   const { panel } = await openAnimationInspector();
 
   info("Checking animated property name component");
@@ -33,15 +19,15 @@ add_task(async function () {
   );
   is(
     animatedPropertyNameEls.length,
-    TEST_DATA.length,
-    `Number of animated property name elements should be ${TEST_DATA.length}`
+    data.length,
+    `Number of animated property name elements should be ${data.length}`
   );
 
   for (const [
     index,
     animatedPropertyNameEl,
   ] of animatedPropertyNameEls.entries()) {
-    const { property, isOnCompositor, isWarning } = TEST_DATA[index];
+    const { property, isOnCompositor, isWarning } = data[index];
 
     info(`Checking text content for ${property}`);
 
@@ -110,4 +96,29 @@ add_task(async function () {
       );
     }
   }
+}
+
+add_task(async function compositor_notall() {
+  await test_element(".compositor-notall", [
+    {
+      property: "opacity",
+      isOnCompositor: true,
+    },
+    {
+      property: "transform",
+      isOnCompositor: true,
+    },
+    {
+      property: "width",
+    },
+  ]);
+});
+
+add_task(async function compositor_warning() {
+  await test_element(".compositor-warning", [
+    {
+      property: "opacity",
+      isWarning: true,
+    },
+  ]);
 });

devtools/client/inspector/animation/test/doc_simple_animation.html

@@ -90,8 +90,16 @@
 
     .compositor-notall {
       animation: compositor-notall 2s infinite;
-      /* Blocks the transform animation from running in the compositor */
-      backface-visibility: hidden;
+    }
+
+    .compositor-warning {
+      animation: compositor-all 2s infinite;
+    }
+
+    .warning-observer {
+      width: 10px;
+      height: 10px;
+      background-image: -moz-element(#warning);
     }
 
     .longhand {
@@ -159,7 +167,9 @@
   <div class="ball end-delay"></div>
   <div class="ball compositor-all"></div>
   <div class="ball compositor-notall"></div>
+  <div class="ball compositor-warning" id="warning"></div>
   <div class="ball longhand"></div>
+  <div class="warning-observer"></div>
   <script>
     /* globals KeyframeEffect, Animation */
     "use strict";

dom/animation/AnimationPerformanceWarning.cpp

@@ -41,9 +41,6 @@ bool AnimationPerformanceWarning::ToLocalizedString(
 
       return NS_SUCCEEDED(ToLocalizedStringWithIntParams<2>(
           "CompositorAnimationWarningContentTooLargeArea", aLocalizedString));
-    case Type::TransformBackfaceVisibilityHidden:
-      key = "CompositorAnimationWarningTransformBackfaceVisibilityHidden";
-      break;
     case Type::TransformSVG:
       key = "CompositorAnimationWarningTransformSVG";
       break;

dom/animation/AnimationPerformanceWarning.h

@@ -21,7 +21,6 @@ struct AnimationPerformanceWarning {
     None,
     ContentTooLarge,
     ContentTooLargeArea,
-    TransformBackfaceVisibilityHidden,
     TransformSVG,
     TransformFrameInactive,
     TransformIsBlockedByImportantRules,

dom/animation/KeyframeEffect.cpp

@@ -1636,15 +1636,6 @@ bool KeyframeEffect::CanAnimateTransformOnCompositor(
   const nsIFrame* primaryFrame =
       nsLayoutUtils::GetPrimaryFrameFromStyleFrame(aFrame);
 
-  // Note that testing BackfaceIsHidden() is not a sufficient test for
-  // what we need for animating backface-visibility correctly if we
-  // remove the above test for Extend3DContext(); that would require
-  // looking at backface-visibility on descendants as well. See bug 1186204.
-  if (primaryFrame->BackfaceIsHidden()) {
-    aPerformanceWarning =
-        AnimationPerformanceWarning::Type::TransformBackfaceVisibilityHidden;
-    return false;
-  }
   // Async 'transform' animations of aFrames with SVG transforms is not
   // supported.  See bug 779599.
   if (primaryFrame->IsSVGTransformed()) {

dom/animation/test/chrome/test_animation_performance_warning.html

@@ -421,8 +421,7 @@ function testStyleChanges() {
       expected: [
         {
           property: 'transform',
-          runningOnCompositor: false,
-          warning: 'CompositorAnimationWarningTransformBackfaceVisibilityHidden'
+          runningOnCompositor: true,
         }
       ]
     },
@@ -435,8 +434,7 @@ function testStyleChanges() {
       expected: [
         {
           property: 'translate',
-          runningOnCompositor: false,
-          warning: 'CompositorAnimationWarningTransformBackfaceVisibilityHidden'
+          runningOnCompositor: true,
         }
       ]
     },
@@ -479,13 +477,11 @@ function testStyleChanges() {
         },
         {
           property: 'transform',
-          runningOnCompositor: false,
-          warning: 'CompositorAnimationWarningTransformBackfaceVisibilityHidden'
+          runningOnCompositor: true,
         },
         {
           property: 'translate',
-          runningOnCompositor: false,
-          warning: 'CompositorAnimationWarningTransformBackfaceVisibilityHidden'
+          runningOnCompositor: true,
         }
       ]
     },
@@ -649,8 +645,7 @@ function testMultipleAnimations() {
           expected: [
             {
               property: 'transform',
-              runningOnCompositor: false,
-              warning: 'CompositorAnimationWarningTransformBackfaceVisibilityHidden'
+              runningOnCompositor: true,
             }
           ]
         },
@@ -661,8 +656,7 @@ function testMultipleAnimations() {
           expected: [
             {
               property: 'translate',
-              runningOnCompositor: false,
-              warning: 'CompositorAnimationWarningTransformBackfaceVisibilityHidden'
+              runningOnCompositor: true,
             }
           ]
         },

dom/locales/en-US/chrome/layout/layout_errors.properties

@@ -19,9 +19,6 @@ CompositorAnimationWarningContentTooLargeArea=Animation cannot be run on the com
 ## (%3$S, %4$S) is a pair of integer values of a limit based on the viewport size
 ## (%5$S, %6$S) is a pair of integer values of an absolute limit
 CompositorAnimationWarningContentTooLarge2=Animation cannot be run on the compositor because the frame size (%1$S, %2$S) is too large relative to the viewport (larger than (%3$S, %4$S)) or larger than the maximum allowed value (%5$S, %6$S)
-## LOCALIZATION NOTE(CompositorAnimationWarningTransformBackfaceVisibilityHidden):
-## 'backface-visibility: hidden' is a CSS property, don't translate it.
-CompositorAnimationWarningTransformBackfaceVisibilityHidden=Animations of ‘backface-visibility: hidden’ transforms cannot be run on the compositor
 ## LOCALIZATION NOTE(CompositorAnimationWarningTransformSVG,
 ##                   CompositorAnimationWarningTransformFrameInactive,
 ##                   CompositorAnimationWarningOpacityFrameInactive):