Have scale function and scale property accept percentage value.

Differential Revision: https://phabricator.services.mozilla.com/D55012

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1597642
gecko-commit: 79c674504d23705095f572227f1f167dabede843
gecko-integration-branch: autoland
gecko-reviewers: emilio

css/css-transforms/parsing/scale-parsing-valid.html

@@ -14,14 +14,28 @@
 test_valid_value("scale", "none");
 
 test_valid_value("scale", "1");
+test_valid_value("scale", "1%", "0.01");
 
 test_valid_value("scale", "100");
+test_valid_value("scale", "100%", "1");
 test_valid_value("scale", "100 100", "100");
+test_valid_value("scale", "100% 100%", "1");
 test_valid_value("scale", "100 100 1", "100");
+test_valid_value("scale", "100% 100% 1", "1");
+
+test_valid_value("scale", "-100");
+test_valid_value("scale", "-100%", "-1");
+test_valid_value("scale", "-100 -100", "-100");
+test_valid_value("scale", "-100% -100%", "-1");
+test_valid_value("scale", "-100 -100 1", "-100");
+test_valid_value("scale", "-100% -100% 1", "-1");
 
 test_valid_value("scale", "100 200");
+test_valid_value("scale", "100% 200%", "1 2");
 test_valid_value("scale", "100 200 1", "100 200");
+test_valid_value("scale", "100% 200% 1", "1 2");
 test_valid_value("scale", "100 200 300");
+
 </script>
 </body>
 </html>

css/css-transforms/parsing/transform-invalid.html

@@ -23,10 +23,13 @@
 test_invalid_value("transform", "translateY(4%, 5%)");
 
 test_invalid_value("transform", "scale(6, 7, 8)");
+test_invalid_value("transform", "scale(6%, 7%, 8%)");
 
 test_invalid_value("transform", "scaleX(1, 2)");
+test_invalid_value("transform", "scaleX(1%, 2%)");
 
 test_invalid_value("transform", "scaleY(3, 4)");
+test_invalid_value("transform", "scaleY(3%, 4%)");
 
 test_invalid_value("transform", "rotate(0, 0)");
 test_invalid_value("transform", "rotate(0, 0, 0)");

css/css-transforms/parsing/transform-valid.html

@@ -26,11 +26,27 @@
 
 test_valid_value("transform", "scale(2)");
 test_valid_value("transform", "scale(3, 4)");
+
+test_valid_value("transform", "scale(-2)");
 test_valid_value("transform", "scale(-5, -6)");
 
+test_valid_value("transform", "scale(250%)", "scale(2.5)");
+test_valid_value("transform", "scale(325%, 475%)", "scale(3.25, 4.75)");
+
+test_valid_value("transform", "scale(-250%)", "scale(-2.5)");
+test_valid_value("transform", "scale(-500%, -620%)", "scale(-5, -6.2)");
+
 test_valid_value("transform", "scaleX(7)");
+test_valid_value("transform", "scaleX(720%)", "scaleX(7.2)");
 
 test_valid_value("transform", "scaleY(-8)");
+test_valid_value("transform", "scaleY(-85%)", "scaleY(-0.85)");
+
+test_valid_value("transform", "scale3d(0.5, 2.5, 3)");
+test_valid_value("transform", "scale3d(50%, 250%, 300%)", "scale3d(0.5, 2.5, 3)");
+
+test_valid_value("transform", "scale3d(-0.5, 2.5, -3)");
+test_valid_value("transform", "scale3d(-50%, 250%, -300%)", "scale3d(-0.5, 2.5, -3)");
 
 test_valid_value("transform", "rotate(0)", "rotate(0deg)");
 test_valid_value("transform", "rotate(90deg)");

css/css-transforms/transform-scale-percent-001.html

@@ -6,15 +6,15 @@
     <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
     <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
     <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-scale">
-    <meta name="assert" content='This tests that scale(50%, 50%) does nothing,
-    because scale() is defined to take numbers and not percentages.'>
+    <meta name="assert" content='This tests that scale(50%, 75%) is equivalent to scale(0.5, 0.75),
+    because scale() is defined to accept both numbers and percentages.'>
     <link rel="match" href="transform-scale-percent-ref.html">
     <style>
       div {
         background: green;
         width: 100px;
         height: 100px;
-        transform: scale(50%, 50%);
+        transform: scale(50%, 75%);
       }
     </style>
   </head>

css/css-transforms/transform-scale-percent-ref.html

@@ -9,6 +9,7 @@
         background: green;
         width: 100px;
         height: 100px;
+        transform: scale(0.5, 0.75)
       }
     </style>
   </head>