Convert logical to physical properties in keyframes for a CSS animation

First in a series of patches to fix animation of CSS logical properties.
Follow up patches will deal with programmatic animations as well as
updating animations in response to a change in writing mode or text
direction.

Bug: 1070627, 865579
Change-Id: Ibce8215bbf8238bbaf2ae2d0d35ddcca5ffdfc78
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2414552Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#807874}

third_party/blink/renderer/core/animation/css/css_animations.cc

@@ -99,7 +99,9 @@ StringKeyframeVector ProcessKeyframesRule(
     const StyleRuleKeyframes* keyframes_rule,
     const Document& document,
     const ComputedStyle* parent_style,
-    TimingFunction* default_timing_function) {
+    TimingFunction* default_timing_function,
+    WritingMode writing_mode,
+    TextDirection text_direction) {
   StringKeyframeVector keyframes;
   const HeapVector<Member<StyleRuleKeyframe>>& style_keyframes =
       keyframes_rule->Keyframes();
@@ -130,7 +132,11 @@ StringKeyframeVector ProcessKeyframesRule(
         }
         keyframe->SetEasing(std::move(timing_function));
       } else if (!CSSAnimations::IsAnimationAffectingProperty(property)) {
-        keyframe->SetCSSPropertyValue(property,
+        // Map Logical to physical property name.
+        const CSSProperty& physical_property =
+            property.ResolveDirectionAwareProperty(text_direction,
+                                                   writing_mode);
+        keyframe->SetCSSPropertyValue(physical_property,
                                       properties.PropertyAt(j).Value());
       }
     }
@@ -239,7 +245,8 @@ StringKeyframeEffectModel* CreateKeyframeEffectModel(
   //    the offset specified in the keyframe selector, and iterate over the
   //    result in reverse applying the following steps:
   keyframes = ProcessKeyframesRule(keyframes_rule, element.GetDocument(),
-                                   parent_style, default_timing_function);
+                                   parent_style, default_timing_function,
+                                   style->GetWritingMode(), style->Direction());
 
   double last_offset = 1;
   wtf_size_t merged_frame_count = 0;
@@ -306,8 +313,6 @@ StringKeyframeEffectModel* CreateKeyframeEffectModel(
     //     * All property values are replaced with their computed values.
     // 5.5 Add each physical longhand property name that was added to keyframe
     //     to animated properties.
-
-    // TODO(crbug.com/1070627): Convert logical properties.
     StringKeyframe* keyframe = keyframes[target_index];
     for (const auto& property : rule_keyframe->Properties()) {
       const CSSProperty& css_property = property.GetCSSProperty();

third_party/blink/web_tests/TestExpectations

@@ -4432,7 +4432,6 @@ crbug.com/1045599 virtual/layout-ng-grid/fast/css-grid-layout/vertical-align-do-
 
 # [css-logical]
 crbug.com/865579 external/wpt/css/css-logical/animation-001.html [ Failure Pass ]
-crbug.com/865579 external/wpt/css/css-logical/animation-002.html [ Failure Pass ]
 
 # [css-animations]
 crbug.com/993365 external/wpt/css/css-transitions/Element-getAnimations.tentative.html [ Failure Pass ]

third_party/blink/web_tests/external/wpt/css/css-logical/animation-002-expected.txt

 This is a testharness.js-based test.
-FAIL Logical properties can be animated assert_equals: expected "50px" but got "100px"
-FAIL Logical properties in animations respect the writing-mode assert_equals: expected "50px" but got "100px"
-FAIL Logical properties in animations respect the direction assert_equals: expected "50px" but got "100px"
+PASS Logical properties can be animated
+PASS Logical properties in animations respect the writing-mode
+PASS Logical properties in animations respect the direction
 PASS Declaration order is respected within @keyframes declaration blocks
 PASS Logical properties are able to override physical properties in @keyframes declaration blocks
 PASS Declaration order is respected amongst logical properties within @keyframes declaration blocks
-FAIL Physical properties and logical properties can be mixed assert_equals: expected "250px" but got "300px"
-FAIL Declaration order is respected on each keyframe individually assert_equals: expected "250px" but got "200px"
-FAIL Animations update when the writing-mode is changed assert_equals: expected "50px" but got "100px"
-PASS Filling animations update when the writing-mode is changed
-FAIL The number of interpolating properties can be increased when the writing-mode is changed assert_equals: expected "100px" but got "150px"
+PASS Physical properties and logical properties can be mixed
+PASS Declaration order is respected on each keyframe individually
+FAIL Animations update when the writing-mode is changed assert_equals: expected "50px" but got "0px"
+FAIL Filling animations update when the writing-mode is changed assert_equals: expected "100px" but got "0px"
+FAIL The number of interpolating properties can be increased when the writing-mode is changed assert_equals: expected "50px" but got "0px"
 FAIL The number of interpolating properties can be decreased when the writing-mode is changed assert_equals: expected "150px" but got "200px"
-FAIL Animations update when the writing-mode is changed through a CSS variable assert_equals: expected "50px" but got "100px"
-FAIL Animations update when the direction is changed assert_equals: expected "50px" but got "100px"
+FAIL Animations update when the writing-mode is changed through a CSS variable assert_equals: expected "50px" but got "0px"
+PASS Logical shorthand with variable references animates correctly
+FAIL Animations update when the direction is changed assert_equals: expected "0px" but got "50px"
 Harness: the test ran to completion.
 

third_party/blink/web_tests/external/wpt/css/css-logical/animation-003.tentative-expected.txt

-This is a testharness.js-based test.
-FAIL Logical properties are represented as physical properties in keyframes assert_own_property: expected property "height" missing
-Harness: the test ran to completion.
-