Fix various bogus WPTs that test wrong calc serialization.

https://drafts.csswg.org/css-values-4/#calc-serialize:

> Sort the terms in the following order:
>  The number, if present
>  The percentage, if present
>  The dimensions, ordered by their units ASCII case-insensitive alphabetically
>  Comparison, trigonometric and exponential functions, in the order they appeared in the original expression.

So em goes before px. I filed w3c/csswg-drafts#4129 on
the second part of that algorithm not matching any browser.

These are tests that are marked as only failing in Firefox because we're the
only following the spec. #funtimes

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

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1567349
gecko-commit: 0bbd8e64cb9cbef70d12bcf502a8948882b63fe9
gecko-integration-branch: central
gecko-reviewers: heycam

css/css-backgrounds/parsing/background-position-x-valid.html

@@ -19,13 +19,13 @@
 test_valid_value("background-position-x", "-20%");
 test_valid_value("background-position-x", "10px");
 test_valid_value("background-position-x", "0.5em");
-test_valid_value("background-position-x", "calc(10px - 0.5em)");
+test_valid_value("background-position-x", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
 test_valid_value("background-position-x", "left -20%");
 test_valid_value("background-position-x", "right 10px");
 test_valid_value("background-position-x", "-20%, 10px");
 test_valid_value("background-position-x", "center, left, right");
 test_valid_value("background-position-x", "0.5em, x-start, x-end");
-test_valid_value("background-position-x", "calc(10px - 0.5em), left -20%, right 10px");
+test_valid_value("background-position-x", "calc(10px - 0.5em), left -20%, right 10px", "calc(-0.5em + 10px), left -20%, right 10px");
 </script>
 </body>
 </html>

css/css-backgrounds/parsing/background-position-y-valid.html

@@ -19,13 +19,13 @@
 test_valid_value("background-position-y", "-20%");
 test_valid_value("background-position-y", "10px");
 test_valid_value("background-position-y", "0.5em");
-test_valid_value("background-position-y", "calc(10px - 0.5em)");
+test_valid_value("background-position-y", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
 test_valid_value("background-position-y", "top -20%");
 test_valid_value("background-position-y", "bottom 10px");
 test_valid_value("background-position-y", "-20%, 10px");
 test_valid_value("background-position-y", "center, top, bottom");
 test_valid_value("background-position-y", "0.5em, y-start, y-end");
-test_valid_value("background-position-y", "calc(10px - 0.5em), top -20%, bottom 10px");
+test_valid_value("background-position-y", "calc(10px - 0.5em), top -20%, bottom 10px", "calc(-0.5em + 10px), top -20%, top 10px");
 </script>
 </body>
 </html>

css/css-logical/parsing/border-block-valid.html

@@ -19,7 +19,7 @@
 test_valid_value("border-block-start", "green double thin", "thin double green");
 test_valid_value("border-block-start", "green", ["green", "medium none green"]);
 test_valid_value("border-block-end", "thin", ["thin", "thin none"]);
-test_valid_value("border-block-end", "calc(10px - 0.5em) dotted red");
+test_valid_value("border-block-end", "calc(10px - 0.5em) dotted red", "calc(-0.5em + 10px) dotted red");
 </script>
 </body>
 </html>

css/css-logical/parsing/border-block-width-valid.html

@@ -13,14 +13,14 @@
 <script>
 // <length> | thin | medium | thick
 test_valid_value("border-block-start-width", "10px");
-test_valid_value("border-block-start-width", "calc(10px + 0.5em)");
+test_valid_value("border-block-start-width", "calc(10px + 0.5em)", "calc(0.5em + 10px)");
 test_valid_value("border-block-start-width", "thick");
 test_valid_value("border-block-start-width", "thin");
 test_valid_value("border-block-end-width", "0", "0px");
-test_valid_value("border-block-end-width", "calc(10px - 0.5em)");
+test_valid_value("border-block-end-width", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
 test_valid_value("border-block-end-width", "medium");
 test_valid_value("border-block-width", "10px");
-test_valid_value("border-block-width", "medium calc(10px + 0.5em)");
+test_valid_value("border-block-width", "medium calc(10px + 0.5em)", "medium calc(0.5em + 10px)");
 test_valid_value("border-block-width", "10px 10px", "10px");
 </script>
 </body>

css/css-logical/parsing/border-inline-valid.html

@@ -19,7 +19,7 @@
 test_valid_value("border-inline-start", "green double thin", "thin double green");
 test_valid_value("border-inline-start", "green", ["green", "medium none green"]);
 test_valid_value("border-inline-end", "thin", ["thin", "thin none"]);
-test_valid_value("border-inline-end", "calc(10px - 0.5em) dotted red");
+test_valid_value("border-inline-end", "calc(10px - 0.5em) dotted red", "calc(-0.5em + 10px) dotted red");
 </script>
 </body>
 </html>

css/css-logical/parsing/border-inline-width-valid.html

@@ -13,14 +13,14 @@
 <script>
 // <length> | thin | medium | thick
 test_valid_value("border-inline-start-width", "10px");
-test_valid_value("border-inline-start-width", "calc(10px + 0.5em)");
+test_valid_value("border-inline-start-width", "calc(10px + 0.5em)", "calc(0.5em + 10px)");
 test_valid_value("border-inline-start-width", "thick");
 test_valid_value("border-inline-start-width", "thin");
 test_valid_value("border-inline-end-width", "0", "0px");
-test_valid_value("border-inline-end-width", "calc(10px - 0.5em)");
+test_valid_value("border-inline-end-width", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
 test_valid_value("border-inline-end-width", "medium");
 test_valid_value("border-inline-width", "10px");
-test_valid_value("border-inline-width", "medium calc(10px + 0.5em)");
+test_valid_value("border-inline-width", "medium calc(10px + 0.5em)", "medium calc(0.5em + 10px)");
 test_valid_value("border-inline-width", "10px 10px", "10px");
 </script>
 </body>

css/css-logical/parsing/inset-block-inline-valid.html

@@ -15,16 +15,16 @@
 test_valid_value("inset-block-start", "auto");
 test_valid_value("inset-block-end", "-10px");
 test_valid_value("inset-inline-start", "-20%");
-test_valid_value("inset-inline-end", "calc(10px - 0.5em)");
+test_valid_value("inset-inline-end", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
 
 test_valid_value("inset-block", "auto");
 test_valid_value("inset-block", "-10px");
-test_valid_value("inset-block", "calc(10px - 0.5em) -20%");
+test_valid_value("inset-block", "calc(10px - 0.5em) -20%", "calc(-0.5em + 10px) -20%");
 test_valid_value("inset-block", "auto auto", "auto");
 test_valid_value("inset-inline", "-20%");
-test_valid_value("inset-inline", "calc(10px - 0.5em)");
+test_valid_value("inset-inline", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
 test_valid_value("inset-inline", "-10px auto");
-test_valid_value("inset-inline", "auto calc(10px + 0.5em)");
+test_valid_value("inset-inline", "auto calc(10px + 0.5em)", "auto calc(0.5em + 10px)");
 </script>
 </body>
 </html>

css/css-tables/parsing/border-spacing-valid.html

@@ -13,7 +13,7 @@
 <script>
 test_valid_value("border-spacing", "0px");
 test_valid_value("border-spacing", "10px 20px");
-test_valid_value("border-spacing", "calc(10px + 0.5em) calc(10px - 0.5em)");
+test_valid_value("border-spacing", "calc(10px + 0.5em) calc(10px - 0.5em)", "calc(0.5em + 10px) calc(-0.5em + 10px)");
 </script>
 </body>
 </html>