Sort the children of arithmetic operation for css math values

As per https://drafts.csswg.org/css-values-4/#sort-a-calculations-children
we should sort the children of arithmetic operations.

Bug: 1050968
Change-Id: I16d557602556d15a0e407c5c0f361b2057f8bfca
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4989285
Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1218248}
diff --git a/css/css-anchor-position/anchor-parse-valid.html b/css/css-anchor-position/anchor-parse-valid.html
index 14d233e..4690775 100644
--- a/css/css-anchor-position/anchor-parse-valid.html
+++ b/css/css-anchor-position/anchor-parse-valid.html
@@ -40,7 +40,7 @@
   null,
   '1px',
   '50%',
-  'calc(1px + 50%)',
+  'calc(50% + 1px)',
   'anchor(left)',
   'anchor(--bar left)',
   'anchor(--bar left, anchor(--baz right))',
diff --git a/css/css-anchor-position/anchor-size-parse-valid.html b/css/css-anchor-position/anchor-size-parse-valid.html
index 9ed4d04..32b308f 100644
--- a/css/css-anchor-position/anchor-size-parse-valid.html
+++ b/css/css-anchor-position/anchor-size-parse-valid.html
@@ -40,7 +40,7 @@
   null,
   '1px',
   '50%',
-  'calc(1px + 50%)',
+  'calc(50% + 1px)',
   'anchor-size(block)',
   'anchor-size(--bar block)',
   'anchor-size(--bar block, anchor-size(--baz inline))',
diff --git a/css/css-animations/parsing/animation-range-end-valid.html b/css/css-animations/parsing/animation-range-end-valid.html
index aeeb2ee..c394c47 100644
--- a/css/css-animations/parsing/animation-range-end-valid.html
+++ b/css/css-animations/parsing/animation-range-end-valid.html
@@ -21,7 +21,7 @@
 test_valid_value("animation-range-end", "exit-crossing 42%");
 test_valid_value("animation-range-end", "entry 42px");
 test_valid_value("animation-range-end", "entry-crossing 42px");
-test_valid_value("animation-range-end", "contain calc(10px + 10%)");
+test_valid_value("animation-range-end", "contain calc(10px + 10%)", "contain calc(10% + 10px)");
 test_valid_value("animation-range-end", "entry 1em");
 test_valid_value("animation-range-end", "exit calc(1em + 10px)");
 test_valid_value("animation-range-end", "entry 42%");
diff --git a/css/css-animations/parsing/animation-range-start-valid.html b/css/css-animations/parsing/animation-range-start-valid.html
index 309f4cc..3ca8858 100644
--- a/css/css-animations/parsing/animation-range-start-valid.html
+++ b/css/css-animations/parsing/animation-range-start-valid.html
@@ -21,7 +21,7 @@
 test_valid_value("animation-range-start", "exit-crossing 42%");
 test_valid_value("animation-range-start", "entry 42px");
 test_valid_value("animation-range-start", "entry-crossing 42px");
-test_valid_value("animation-range-start", "contain calc(10px + 10%)");
+test_valid_value("animation-range-start", "contain calc(10px + 10%)", "contain calc(10% + 10px)");
 test_valid_value("animation-range-start", "entry 1em");
 test_valid_value("animation-range-start", "exit calc(1em + 10px)");
 test_valid_value("animation-range-start", "entry 42%");
diff --git a/css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html b/css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html
index c098868..89330b8 100644
--- a/css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html
+++ b/css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html
@@ -107,7 +107,7 @@
         new CSSMathProduct(CSS.number(3))
       ),
     ]),
-    cssText: 'translate(calc(1px + 1em), 0px) rotate(calc(90deg + 360deg)) perspective(calc(1px + 1em)) skew(calc(90deg * 2), calc(360deg * 2)) scale3d(calc(1 * 2), calc(1 + 1), calc(3))',
+    cssText: 'translate(calc(1em + 1px), 0px) rotate(calc(90deg + 360deg)) perspective(calc(1em + 1px)) skew(calc(90deg * 2), calc(360deg * 2)) scale3d(calc(1 * 2), calc(1 + 1), calc(3))',
     desc: 'CSSTransformValue containing CSSMathValues'
   },
   {