Bug 1526718 [wpt PR 15205] - Fix canonical form of rotate property., a=testonly
authorKevin Ellis <kevers@chromium.org>
Tue, 19 Feb 2019 14:39:11 +0000
changeset 519242 7224c725cf96a503e81edad4d038c86e0b688c26
parent 519241 142670db05d523d24176333a5106e8a971bba2d3
child 519243 ae47c9bc4af628e9143bbe8daced47c8f0016561
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1526718, 15205, 905274, 1447844, 630796
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1526718 [wpt PR 15205] - Fix canonical form of rotate property., a=testonly Automatic update from web-platform-tests Fix canonical form of rotate property. Expected behavior is outlined in the spec here: https://drafts.csswg.org/css-transforms-2/#individual-transform-serialization. Summary: * 2d serializes to just an angle. * Axis must be specified for 3-D rotations. If the axis is parallel to the x, y or z axis, the appropriate axis name must be used. Bug: 905274 Change-Id: I5d16f3301baf9720099e4b5b42a1b87077b97998 Reviewed-on: https://chromium-review.googlesource.com/c/1447844 Commit-Queue: Kevin Ellis <kevers@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#630796} -- wpt-commits: a01ac89be3f48fa64bd96d36ac1a65ac9074eb4f wpt-pr: 15205
testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-1-ref.html
testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-1.html
testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-valid.html
--- a/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-1-ref.html
+++ b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-1-ref.html
@@ -48,17 +48,17 @@
       .translate_2 {
         left: 150px;
         top: 200px;
         transform: translate(150px, 50px);
       }
       .rotate_2 {
         left: 450px;
         transform-origin: 50% 50%;
-        transform: rotate3d(0, 0, 1, 90deg);
+        transform: rotate3d(1, 0, 0, 45deg);
       }
       .row_3 {
         transform: perspective(500px);
         top: 400px;
       }
       .scale_3{
         left: 100px;
         width: 50px;
--- a/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-1.html
+++ b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-1.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>Individual transform: compare individual transform with transform functions</title>
     <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
     <link rel="author" title="Mozilla" href="https://www.mozilla.org">
     <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
-    <meta name="assert" content="Tests whether individaul transform works correctlyi by compare the rendering result with transfrom functions of the 'transform' property."/>
+    <meta name="assert" content="Tests whether individual transforms work correctly by comparing the rendering result with transform functions of the 'transform' property."/>
     <link rel="match" href="individual-transform-1-ref.html">
     <style>
       div {
         position: fixed;
         width: 100px;
         height: 100px;
         transform-origin: 0 0;
         border-style: solid;
@@ -31,17 +31,17 @@
       .translate_1 {
         left: 150px;
         /* test 'translate: <length-percentage>' */
         translate: 150px;
       }
       .rotate_1 {
         left: 450px;
         transform-origin: 50% 50%;
-        /* test 'rota: te<angle>' */
+        /* test 'rotate: <angle>' */
         rotate: 90deg;
       }
 
       .row_2 {
         top: 250px;
       }
       .scale_2{
         left: 100px;
@@ -54,18 +54,18 @@
         left: 150px;
         top: 200px;
         /* test 'translate: <length-percentage><length-percentage>' */
         translate: 150px 50px;
       }
       .rotate_2 {
         left: 450px;
         transform-origin: 50% 50%;
-        /* test 'rotate: <number>{3}<angle>'*/
-        rotate: 0 0 1 90deg;
+        /* test 'rotate: axis <angle>'*/
+        rotate: x 45deg;
       }
       .row_3 {
         transform: perspective(500px);
         top: 400px;
       }
       .scale_3{
         left: 100px;
         width: 50px;
--- a/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-valid.html
+++ b/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-valid.html
@@ -7,23 +7,29 @@
 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
 <meta name="assert" content="rotate supports the full grammar 'none | <number>{3}? <angle>'.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
+// https://drafts.csswg.org/css-transforms-2/#individual-transform-serialization
+
+// Serialize as the keyword none if and only if none was originally specified.
 test_valid_value("rotate", "none");
 
+// If a 2d rotation is specified, the property must serialize as just an <angle>.
 test_valid_value("rotate", "0deg");
 
+// If a 3d rotation is specified, the property must serialize with an axis specified.
 test_valid_value("rotate", "100 200 300 400grad");
 test_valid_value("rotate", "400grad 100 200 300", "100 200 300 400grad");
 
+// If the axis is parallel with the x, y, or z 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", "1 0 0 400grad", "x 400grad");
 
 test_valid_value("rotate", "y 400grad");
 test_valid_value("rotate", "400grad y", "y 400grad");
 test_valid_value("rotate", "0 1 0 400grad", "y 400grad");