Bug 1301305 - Expand the set of geometric properties to include margin and padding properties; r=hiro

If margin or padding is being animated then we should synchronize with transform
animations.

Originally I included the border-*-width properties in this set. However
I removed them because:

1. Generally animations of border-width are more subtle and it won't be
   noticeable if they are not synchronized with transform animations.

2. If authors animate the border shorthand (e.g. border: 1px blue -> 1px black)
   we will end up interpolating each of the longhands (including the widths
   despite there being no change) and yet such an animation does not really need
   to be synchronized with transform animations. Until we add code to workaround
   that it seems best to ignore border properties.

I have verified that the tests added in this patch fail without the code changes
in this patch.

MozReview-Commit-ID: AJiDAvTpFuN

--HG--
extra : rebase_source : 58462ab48acc0b1298915d0d3572915b6973ac82
extra : histedit_source : d293cfc68ff59483b4f9543a7a63b140d627a4fa

dom/animation/KeyframeEffectReadOnly.cpp

@@ -1255,10 +1255,21 @@ KeyframeEffectReadOnly::GetPresContext() const
 KeyframeEffectReadOnly::IsGeometricProperty(
   const nsCSSPropertyID aProperty)
 {
+  MOZ_ASSERT(!nsCSSProps::IsShorthand(aProperty),
+             "Property should be a longhand property");
+
   switch (aProperty) {
     case eCSSProperty_bottom:
     case eCSSProperty_height:
     case eCSSProperty_left:
+    case eCSSProperty_margin_bottom:
+    case eCSSProperty_margin_left:
+    case eCSSProperty_margin_right:
+    case eCSSProperty_margin_top:
+    case eCSSProperty_padding_bottom:
+    case eCSSProperty_padding_left:
+    case eCSSProperty_padding_right:
+    case eCSSProperty_padding_top:
     case eCSSProperty_right:
     case eCSSProperty_top:
     case eCSSProperty_width:

dom/animation/test/chrome/test_animation_performance_warning.html

@@ -291,6 +291,44 @@ function testKeyframesWithGeometricProperties() {
   });
 }
 
+// Test that the expected set of geometric properties all block transform
+// animations.
+function testSetOfGeometricProperties() {
+  const geometricProperties = [
+    'width', 'height',
+    'top', 'right', 'bottom', 'left',
+    'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
+    'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
+  ];
+
+  geometricProperties.forEach(property => {
+    promise_test(function(t) {
+      const keyframes = {
+        [propertyToIDL(property)]: [ '100px', '200px' ],
+        transform: [ 'translate(0px)', 'translate(100px)' ]
+      };
+      var animation = addDivAndAnimate(t, { class: 'compositable' },
+                                       keyframes, 100 * MS_PER_SEC);
+
+      return animation.ready.then(function() {
+        assert_animation_property_state_equals(
+          animation.effect.getProperties(),
+          [
+            {
+              property,
+              runningOnCompositor: false
+            },
+            {
+              property: 'transform',
+              runningOnCompositor: false,
+              warning: 'CompositorAnimationWarningTransformWithGeometricProperties'
+            }
+          ]);
+      }, 'Transform animation should be run on the main thread');
+    }, `${property} is treated as a geometric property`);
+  });
+}
+
 // Performance warning tests that set and clear a style property.
 function testStyleChanges() {
   [
@@ -855,6 +893,7 @@ function start() {
 
   testBasicOperation();
   testKeyframesWithGeometricProperties();
+  testSetOfGeometricProperties();
   testStyleChanges();
   testIdChanges();
   testMultipleAnimations();