Rotation axis parallel to the z axis should not serialize using the "…

…z" keyword for the rotate property

https://bugs.webkit.org/show_bug.cgi?id=225101

Reviewed by Antti Koivisto.

LayoutTests/imported/w3c:

Update the tests per web-platform-tests/wpt#28712 as well as their expectations.

* web-platform-tests/css/css-transforms/animation/rotate-composition-expected.txt:
* web-platform-tests/css/css-transforms/animation/rotate-interpolation-expected.txt:
* web-platform-tests/css/css-transforms/animation/rotate-interpolation.html:
* web-platform-tests/css/css-transforms/parsing/rotate-parsing-valid-expected.txt:
* web-platform-tests/css/css-transforms/parsing/rotate-parsing-valid.html:

Source/WebCore:

The CSS spec has changed to drop the "z" keyword or any other axis parallel to the z axis when parsing the
rotate property in w3c/csswg-drafts#6147.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::computedRotate):
* css/parser/CSSPropertyParser.cpp:
(WebCore::consumeRotate):


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@276768 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/imported/w3c/ChangeLog

@@ -1,3 +1,18 @@
+2021-04-29  Antoine Quint  <graouts@webkit.org>
+
+        Rotation axis parallel to the z axis should not serialize using the "z" keyword for the rotate property
+        https://bugs.webkit.org/show_bug.cgi?id=225101
+
+        Reviewed by Antti Koivisto.
+
+        Update the tests per https://github.com/web-platform-tests/wpt/pull/28712 as well as their expectations.
+
+        * web-platform-tests/css/css-transforms/animation/rotate-composition-expected.txt:
+        * web-platform-tests/css/css-transforms/animation/rotate-interpolation-expected.txt:
+        * web-platform-tests/css/css-transforms/animation/rotate-interpolation.html:
+        * web-platform-tests/css/css-transforms/parsing/rotate-parsing-valid-expected.txt:
+        * web-platform-tests/css/css-transforms/parsing/rotate-parsing-valid.html:
+
 2021-04-28  Rob Buis  <rbuis@igalia.com>
 
         [aspect-ratio] Treat border/padding correctly for box-sizing: border-box

LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/rotate-composition-expected.txt

@@ -39,7 +39,7 @@ FAIL Compositing: property <rotate> underlying [1 0 0 90deg] from add [0 1 0 180
 FAIL Compositing: property <rotate> underlying [1 0 0 90deg] from add [0 1 0 180deg] to replace [0 0 1 90deg] at (0) should be [-4.32978e-17 -0.707107 -0.707107 180deg] assert_equals: expected "0 - 0.71 - 0.71 180deg " but got "y 180deg "
 FAIL Compositing: property <rotate> underlying [1 0 0 90deg] from add [0 1 0 180deg] to replace [0 0 1 90deg] at (0.25) should be [-1.48952e-16 -0.894427 -0.447214 131.81deg] assert_equals: expected "0 - 0.89 - 0.45 131.81deg " but got "0 0.96 0.28 148.6deg "
 FAIL Compositing: property <rotate> underlying [1 0 0 90deg] from add [0 1 0 180deg] to replace [0 0 1 90deg] at (0.75) should be [-2.94392e-17 -0.707107 0.707107 70.5288deg] assert_equals: expected "0 - 0.71 0.71 70.53deg " but got "0 0.51 0.86 98.42deg "
-FAIL Compositing: property <rotate> underlying [1 0 0 90deg] from add [0 1 0 180deg] to replace [0 0 1 90deg] at (1) should be [90deg] assert_equals: expected "90deg " but got "z 90deg "
+PASS Compositing: property <rotate> underlying [1 0 0 90deg] from add [0 1 0 180deg] to replace [0 0 1 90deg] at (1) should be [90deg]
 FAIL Compositing: property <rotate> underlying [1 0 0 90deg] from add [0 1 0 180deg] to replace [0 0 1 90deg] at (2) should be [-6.12323e-17 -1 -4.71028e-16 90deg] assert_equals: expected "0 - 1 0 90deg " but got "0 - 1 0 180deg "
 PASS Compositing: property <rotate> underlying [none] from add [none] to replace [0 1 0 100deg] at (-1) should be [0 1 0 -100deg]
 PASS Compositing: property <rotate> underlying [none] from add [none] to replace [0 1 0 100deg] at (0) should be [none]

LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/rotate-interpolation-expected.txt

@@ -24,25 +24,25 @@ PASS Web Animations: property <rotate> from [100deg] to [180deg] at (0.875) shou
 PASS Web Animations: property <rotate> from [100deg] to [180deg] at (1) should be [180deg]
 PASS Web Animations: property <rotate> from [100deg] to [180deg] at (2) should be [260deg]
 PASS CSS Transitions: property <rotate> from [45deg] to [-1 1 0 60deg] at (-1) should be [0.447214 -0.447214 0.774597 104.478deg]
-PASS CSS Transitions: property <rotate> from [45deg] to [-1 1 0 60deg] at (0) should be [z 45deg]
+PASS CSS Transitions: property <rotate> from [45deg] to [-1 1 0 60deg] at (0) should be [45deg]
 PASS CSS Transitions: property <rotate> from [45deg] to [-1 1 0 60deg] at (0.125) should be [-0.136456 0.136456 0.981203 40.6037deg]
 PASS CSS Transitions: property <rotate> from [45deg] to [-1 1 0 60deg] at (0.875) should be [-0.70246 0.70246 0.114452 53.1994deg]
 PASS CSS Transitions: property <rotate> from [45deg] to [-1 1 0 60deg] at (1) should be [-0.71 0.71 0 60deg]
 FAIL CSS Transitions: property <rotate> from [45deg] to [-1 1 0 60deg] at (2) should be [-0.637897 0.637897 -0.431479 124.975deg] assert_equals: expected "- 0.64 0.64 - 0.43 124.97deg " but got "- 0.64 0.64 - 0.43 124.98deg "
 PASS CSS Transitions with transition: all: property <rotate> from [45deg] to [-1 1 0 60deg] at (-1) should be [0.447214 -0.447214 0.774597 104.478deg]
-PASS CSS Transitions with transition: all: property <rotate> from [45deg] to [-1 1 0 60deg] at (0) should be [z 45deg]
+PASS CSS Transitions with transition: all: property <rotate> from [45deg] to [-1 1 0 60deg] at (0) should be [45deg]
 PASS CSS Transitions with transition: all: property <rotate> from [45deg] to [-1 1 0 60deg] at (0.125) should be [-0.136456 0.136456 0.981203 40.6037deg]
 PASS CSS Transitions with transition: all: property <rotate> from [45deg] to [-1 1 0 60deg] at (0.875) should be [-0.70246 0.70246 0.114452 53.1994deg]
 PASS CSS Transitions with transition: all: property <rotate> from [45deg] to [-1 1 0 60deg] at (1) should be [-0.71 0.71 0 60deg]
 FAIL CSS Transitions with transition: all: property <rotate> from [45deg] to [-1 1 0 60deg] at (2) should be [-0.637897 0.637897 -0.431479 124.975deg] assert_equals: expected "- 0.64 0.64 - 0.43 124.97deg " but got "- 0.64 0.64 - 0.43 124.98deg "
 PASS CSS Animations: property <rotate> from [45deg] to [-1 1 0 60deg] at (-1) should be [0.447214 -0.447214 0.774597 104.478deg]
-PASS CSS Animations: property <rotate> from [45deg] to [-1 1 0 60deg] at (0) should be [z 45deg]
+PASS CSS Animations: property <rotate> from [45deg] to [-1 1 0 60deg] at (0) should be [45deg]
 PASS CSS Animations: property <rotate> from [45deg] to [-1 1 0 60deg] at (0.125) should be [-0.136456 0.136456 0.981203 40.6037deg]
 PASS CSS Animations: property <rotate> from [45deg] to [-1 1 0 60deg] at (0.875) should be [-0.70246 0.70246 0.114452 53.1994deg]
 PASS CSS Animations: property <rotate> from [45deg] to [-1 1 0 60deg] at (1) should be [-0.71 0.71 0 60deg]
 FAIL CSS Animations: property <rotate> from [45deg] to [-1 1 0 60deg] at (2) should be [-0.637897 0.637897 -0.431479 124.975deg] assert_equals: expected "- 0.64 0.64 - 0.43 124.97deg " but got "- 0.64 0.64 - 0.43 124.98deg "
 PASS Web Animations: property <rotate> from [45deg] to [-1 1 0 60deg] at (-1) should be [0.447214 -0.447214 0.774597 104.478deg]
-PASS Web Animations: property <rotate> from [45deg] to [-1 1 0 60deg] at (0) should be [z 45deg]
+PASS Web Animations: property <rotate> from [45deg] to [-1 1 0 60deg] at (0) should be [45deg]
 PASS Web Animations: property <rotate> from [45deg] to [-1 1 0 60deg] at (0.125) should be [-0.136456 0.136456 0.981203 40.6037deg]
 PASS Web Animations: property <rotate> from [45deg] to [-1 1 0 60deg] at (0.875) should be [-0.70246 0.70246 0.114452 53.1994deg]
 PASS Web Animations: property <rotate> from [45deg] to [-1 1 0 60deg] at (1) should be [-0.71 0.71 0 60deg]

LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/rotate-interpolation.html

@@ -56,7 +56,7 @@
   to: '-1 1 0 60deg',
 }, [
   {at: -1, expect: '0.447214 -0.447214 0.774597 104.478deg'},
-  {at: 0, expect: 'z 45deg'},
+  {at: 0, expect: '45deg'},
   {at: 0.125, expect: '-0.136456 0.136456 0.981203 40.6037deg'},
   {at: 0.875, expect: '-0.70246 0.70246 0.114452 53.1994deg'},
   {at: 1, expect: '-0.71 0.71 0 60deg'},

LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/parsing/rotate-parsing-valid-expected.txt

@@ -12,7 +12,7 @@ PASS e.style['rotate'] = "y 400grad" should set the property value
 PASS e.style['rotate'] = "400grad y" should set the property value
 PASS e.style['rotate'] = "0 0.5 0 400grad" should set the property value
 PASS e.style['rotate'] = "0 1 0 400grad" should set the property value
-PASS e.style['rotate'] = "z 400grad" should set the property value
+PASS e.style['rotate'] = "400grad" should set the property value
 PASS e.style['rotate'] = "400grad z" should set the property value
 PASS e.style['rotate'] = "0 0 0.5 400grad" should set the property value
 PASS e.style['rotate'] = "0 0 1 400grad" should set the property value

LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/parsing/rotate-parsing-valid.html

@@ -24,7 +24,7 @@
 test_valid_value("rotate", "400grad 100 200 300", "100 200 300 400grad");
 test_valid_value("rotate", "0 0 0 400grad", "0 0 0 400grad");
 
-// If the axis is parallel with the x, y, or z axis, it must serialize as the appropriate keyword.
+// If the axis is parallel with the x or y axis, it must serialize as the appropriate keyword.
 test_valid_value("rotate", "x 400grad");
 test_valid_value("rotate", "400grad x", "x 400grad");
 test_valid_value("rotate", "0.5 0 0 400grad", "x 400grad");
@@ -35,10 +35,11 @@
 test_valid_value("rotate", "0 0.5 0 400grad", "y 400grad");
 test_valid_value("rotate", "0 1 0 400grad", "y 400grad");
 
-test_valid_value("rotate", "z 400grad");
-test_valid_value("rotate", "400grad z", "z 400grad");
-test_valid_value("rotate", "0 0 0.5 400grad", "z 400grad");
-test_valid_value("rotate", "0 0 1 400grad", "z 400grad");
+// If the axis is parallel with the z axis the property must serialize as just an <angle>.
+test_valid_value("rotate", "400grad");
+test_valid_value("rotate", "400grad z", "400grad");
+test_valid_value("rotate", "0 0 0.5 400grad", "400grad");
+test_valid_value("rotate", "0 0 1 400grad", "400grad");
 </script>
 </body>
 </html>

Source/WebCore/ChangeLog

@@ -1,3 +1,18 @@
+2021-04-29  Antoine Quint  <graouts@webkit.org>
+
+        Rotation axis parallel to the z axis should not serialize using the "z" keyword for the rotate property
+        https://bugs.webkit.org/show_bug.cgi?id=225101
+
+        Reviewed by Antti Koivisto.
+
+        The CSS spec has changed to drop the "z" keyword or any other axis parallel to the z axis when parsing the
+        rotate property in https://github.com/w3c/csswg-drafts/pull/6147.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::computedRotate):
+        * css/parser/CSSPropertyParser.cpp:
+        (WebCore::consumeRotate):
+
 2021-04-29  Zalan Bujtas  <zalan@apple.com>
 
         [LFC][IFC] Incorrect middle alignment for inline boxes when line-height is present

Source/WebCore/css/CSSComputedStyleDeclaration.cpp

@@ -653,7 +653,7 @@ static Ref<CSSValue> computedRotate(RenderObject* renderer, const RenderStyle& s
     if (!rotate || !rendererCanBeTransformed(renderer) || rotate->isIdentity())
         return cssValuePool.createIdentifierValue(CSSValueNone);
 
-    if (!rotate->is3DOperation())
+    if (!rotate->is3DOperation() || (!rotate->x() && !rotate->y() && rotate->z()))
         return cssValuePool.createValue(rotate->angle(), CSSUnitType::CSS_DEG);
 
     auto list = CSSValueList::createSpaceSeparated();
@@ -662,8 +662,6 @@ static Ref<CSSValue> computedRotate(RenderObject* renderer, const RenderStyle& s
         list->append(cssValuePool.createIdentifierValue(CSSValueX));
     else if (!rotate->x() && rotate->y() && !rotate->z())
         list->append(cssValuePool.createIdentifierValue(CSSValueY));
-    else if (!rotate->x() && !rotate->y() && rotate->z())
-        list->append(cssValuePool.createIdentifierValue(CSSValueZ));
     else {
         list->append(cssValuePool.createValue(rotate->x(), CSSUnitType::CSS_NUMBER));
         list->append(cssValuePool.createValue(rotate->y(), CSSUnitType::CSS_NUMBER));

Source/WebCore/css/parser/CSSPropertyParser.cpp

@@ -2076,17 +2076,15 @@ static RefPtr<CSSValue> consumeRotate(CSSParserTokenRange& range, CSSParserMode
         } else if (!x && y && !z) {
             list = CSSValueList::createSpaceSeparated();
             list->append(CSSPrimitiveValue::createIdentifier(CSSValueY));
-        } else if (!x && !y && z) {
+        } else if (!x && !y && z)
             list = CSSValueList::createSpaceSeparated();
-            list->append(CSSPrimitiveValue::createIdentifier(CSSValueZ));
-        }
 
         // Finally, we must append the angle.
         list->append(*angle);
     } else if (!list->length()) {
         // The second valid case is if we have no item in the list, meaning we have either an optional rotation axis
         // using an identifier. In that case, we must add the axis identifier is specified and then add the angle.
-        if (axisIdentifier)
+        if (is<CSSPrimitiveValue>(axisIdentifier) && downcast<CSSPrimitiveValue>(*axisIdentifier).valueID() != CSSValueZ)
             list->append(*axisIdentifier);
         list->append(*angle);
     } else