CSS: transform-origin specified value without appending 0px

We were previously appending a z value of 0px to the
specified value of transform-origin.

This is not needed, and violates the CSSOM shortest
serialization principle.

It was also inconsistent with our computed value results,
where we don't append a z value of 0px.

Bug: 905997
Change-Id: I76612a16e2048f568a6215804aa7e11469cb8e29
Reviewed-on: https://chromium-review.googlesource.com/c/1337669
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608721}

third_party/WebKit/LayoutTests/fast/css/transform-inline-style-expected.txt

@@ -2,5 +2,5 @@ Tests reading inline style of transition, and -webkit-transform-origin
 https://bugs.webkit.org/show_bug.cgi?id=22594
 
 style: all 1s ease 0s, left 3s cubic-bezier(0.2, 0.3, 0.6, 0.8) 2s
-style: left 30% 0px
+style: left 30%
 

third_party/WebKit/LayoutTests/fast/css/transform-inline-style-remove-expected.txt

@@ -12,7 +12,7 @@ transition property (after):
 transition duration (after):
 transition timing function (after):
 
-transform origin (before): left 30% 0px
+transform origin (before): left 30%
 transform origin X (before):
 transform origin Y (before):
 transform origin (after):

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-4/svg-style-expected.txt

@@ -13,6 +13,6 @@ svg:rect[Attributes Style] { ()
 
 [expanded] 
 :not(svg), :not(foreignObject) > svg { (user agent stylesheet)
-    transform-origin: 0px 0px 0px;
+    transform-origin: 0px 0px;
 
 

third_party/WebKit/LayoutTests/transforms/transform-origin-parsing.html

@@ -9,32 +9,32 @@ expect = expect.bind(this, 'transform-origin', 'transformOrigin');
 expect('initial').parsesAs('initial').isComputedTo('100px 50px');
 expect('inherit').parsesAs('inherit');
 
-expect('left').parsesAs('left center 0px').isComputedTo('0px 50px');
-expect('center').parsesAs('center center 0px').isComputedTo('100px 50px');
-expect('right').parsesAs('right center 0px').isComputedTo('200px 50px');
-expect('top').parsesAs('center top 0px');
-expect('bottom').parsesAs('center bottom 0px');
-expect('0').parsesAs('0px center 0px');
-expect('10%').parsesAs('10% center 0px').isComputedTo('20px 50px');
-expect('10px').parsesAs('10px center 0px').isComputedTo('10px 50px');
+expect('left').parsesAs('left center').isComputedTo('0px 50px');
+expect('center').parsesAs('center center').isComputedTo('100px 50px');
+expect('right').parsesAs('right center').isComputedTo('200px 50px');
+expect('top').parsesAs('center top');
+expect('bottom').parsesAs('center bottom');
+expect('0').parsesAs('0px center');
+expect('10%').parsesAs('10% center').isComputedTo('20px 50px');
+expect('10px').parsesAs('10px center').isComputedTo('10px 50px');
 
-expect('left top').parsesAs('left top 0px');
-expect('right bottom').parsesAs('right bottom 0px');
-expect('center center').parsesAs('center center 0px').isComputedTo('100px 50px');
-expect('center top').parsesAs('center top 0px');
-expect('center left').parsesAs('left center 0px');
-expect('top right').parsesAs('right top 0px');
-expect('left 10%').parsesAs('left 10% 0px');
-expect('left 10px').parsesAs('left 10px 0px');
-expect('10% top').parsesAs('10% top 0px');
-expect('10px top').parsesAs('10px top 0px');
-expect('10px 20%').parsesAs('10px 20% 0px');
-expect('0 0').parsesAs('0px 0px 0px');
-expect('0px 10%').parsesAs('0px 10% 0px').isComputedTo('0px 10px');
-expect('0px 20px').parsesAs('0px 20px 0px').isComputedTo('0px 20px');
-expect('0px top').parsesAs('0px top 0px').isComputedTo('0px 0px');
-expect('0px bottom').parsesAs('0px bottom 0px').isComputedTo('0px 100px');
-expect('0px center').parsesAs('0px center 0px').isComputedTo('0px 50px');
+expect('left top').parsesAs('left top');
+expect('right bottom').parsesAs('right bottom');
+expect('center center').parsesAs('center center').isComputedTo('100px 50px');
+expect('center top').parsesAs('center top');
+expect('center left').parsesAs('left center');
+expect('top right').parsesAs('right top');
+expect('left 10%').parsesAs('left 10%');
+expect('left 10px').parsesAs('left 10px');
+expect('10% top').parsesAs('10% top');
+expect('10px top').parsesAs('10px top');
+expect('10px 20%').parsesAs('10px 20%');
+expect('0 0').parsesAs('0px 0px');
+expect('0px 10%').parsesAs('0px 10%').isComputedTo('0px 10px');
+expect('0px 20px').parsesAs('0px 20px').isComputedTo('0px 20px');
+expect('0px top').parsesAs('0px top').isComputedTo('0px 0px');
+expect('0px bottom').parsesAs('0px bottom').isComputedTo('0px 100px');
+expect('0px center').parsesAs('0px center').isComputedTo('0px 50px');
 
 expect('0 0 0').parsesAs('0px 0px 0px');
 expect('10% 20% 30px').parsesAs('10% 20% 30px');

third_party/blink/renderer/core/animation/css_transform_origin_interpolation_type.h

@@ -24,9 +24,14 @@ class CSSTransformOriginInterpolationType
                                        const StyleResolverState*,
                                        ConversionCheckers&) const final {
     const CSSValueList& list = ToCSSValueList(value);
-    DCHECK_EQ(list.length(), 3U);
+    DCHECK_GE(list.length(), 2u);
     return ListInterpolationFunctions::CreateList(
-        list.length(), [&list](wtf_size_t index) {
+        3, [&list](wtf_size_t index) {
+          if (index == list.length()) {
+            return LengthInterpolationFunctions::MaybeConvertCSSValue(
+                *CSSPrimitiveValue::Create(
+                    0, CSSPrimitiveValue::UnitType::kPixels));
+          }
           const CSSValue& item = list.Item(index);
           if (index < 2)
             return CSSPositionAxisListInterpolationType::

third_party/blink/renderer/core/css/properties/longhands/transform_origin_custom.cc

@@ -30,11 +30,8 @@ const CSSValue* TransformOrigin::ParseSingleValue(
     list->Append(*result_y);
     CSSValue* result_z = css_property_parser_helpers::ConsumeLength(
         range, context.Mode(), kValueRangeAll);
-    if (!result_z) {
-      result_z =
-          CSSPrimitiveValue::Create(0, CSSPrimitiveValue::UnitType::kPixels);
-    }
-    list->Append(*result_z);
+    if (result_z)
+      list->Append(*result_z);
     return list;
   }
   return nullptr;

third_party/blink/renderer/core/css/resolver/style_builder_converter.cc

@@ -1510,15 +1510,20 @@ TransformOrigin StyleBuilderConverter::ConvertTransformOrigin(
     StyleResolverState& state,
     const CSSValue& value) {
   const CSSValueList& list = ToCSSValueList(value);
-  DCHECK_EQ(list.length(), 3U);
+  DCHECK_GE(list.length(), 2u);
   DCHECK(list.Item(0).IsPrimitiveValue() || list.Item(0).IsIdentifierValue());
   DCHECK(list.Item(1).IsPrimitiveValue() || list.Item(1).IsIdentifierValue());
-  DCHECK(list.Item(2).IsPrimitiveValue());
+  float z = 0;
+  if (list.length() == 3) {
+    DCHECK(list.Item(2).IsPrimitiveValue());
+    z = StyleBuilderConverter::ConvertComputedLength<float>(state,
+                                                            list.Item(2));
+  }
 
   return TransformOrigin(
       ConvertPositionLength<CSSValueLeft, CSSValueRight>(state, list.Item(0)),
       ConvertPositionLength<CSSValueTop, CSSValueBottom>(state, list.Item(1)),
-      StyleBuilderConverter::ConvertComputedLength<float>(state, list.Item(2)));
+      z);
 }
 
 ScrollSnapType StyleBuilderConverter::ConvertSnapType(StyleResolverState&,