Back out bug 1481866.

Summary:
The behavior the WG proposed is way more subtle than what that bug implements,
including:

 * Implementing two logical overflow longhands.
 * Expanding the overflow shorthand to different longhands depending on the
   syntax of that.

Meanwhile, Blink hasn't done the swap and will ship the same behavior that we
shipped in Firefox 61 (bug 1453148), that is, overflow-x, then overflow-y.

So I think lacking a clear way forward we should revert this change and preserve
our shipped behavior.

Reviewers: dbaron!

Tags: #secure-revision

Bug #: 1492567

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

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1492567
gecko-commit: cf9cd0662126a7ef86fb4b62f09996d02bff2ff4
gecko-integration-branch: autoland
gecko-reviewers: dbaron

css/css-overflow/overflow-shorthand-001.html

@@ -8,15 +8,15 @@
 <div id="test-div"></div>
 <script>
 let div = document.getElementById("test-div");
-function testOverflowShorthand(y, x) {
+function testOverflowShorthand(x, y) {
   test(function() {
     div.style.overflowX = x;
     div.style.overflowY = y;
 
     let expectedX = getComputedStyle(div).overflowX;
     let expectedY = getComputedStyle(div).overflowY;
-    let expectedComputedSerialization = expectedX == expectedY ? expectedX : `${expectedY} ${expectedX}`;
-    let expectedSpecifiedSerialization = x == y ? x : `${y} ${x}`;
+    let expectedComputedSerialization = expectedX == expectedY ? expectedX : `${expectedX} ${expectedY}`;
+    let expectedSpecifiedSerialization = x == y ? x : `${x} ${y}`;
 
     assert_equals(div.style.overflow, expectedSpecifiedSerialization);
     assert_equals(getComputedStyle(div).overflow, expectedComputedSerialization);
@@ -25,18 +25,18 @@
     div.style.overflowY = "";
     assert_equals(div.style.overflow, "");
 
-    div.style.overflow = `${y} ${x}`;
+    div.style.overflow = `${x} ${y}`;
     assert_equals(div.style.overflow, expectedSpecifiedSerialization);
     assert_equals(div.style.overflowX, x);
     assert_equals(div.style.overflowY, y);
     assert_equals(getComputedStyle(div).overflow, expectedComputedSerialization);
     assert_equals(getComputedStyle(div).overflowX, expectedX);
     assert_equals(getComputedStyle(div).overflowY, expectedY);
-  }, `overflow: ${y} ${x} works`);
+  }, `overflow: ${x} ${y} works`);
 }
 
 let OVERFLOW_VALUES = [ "auto", "hidden", "scroll", "visible" ];
 for (let x of OVERFLOW_VALUES)
   for (let y of OVERFLOW_VALUES)
-    testOverflowShorthand(y, x);
+    testOverflowShorthand(x, y);
 </script>

css/cssom/overflow-serialization.html

@@ -22,7 +22,7 @@
         assert_equals(styleSheet.cssRules[1].style.cssText, "overflow: hidden;", "Single value overflow with non-CSS-wide keyword should serialize correctly.");
         assert_equals(styleSheet.cssRules[2].style.cssText, "overflow: initial;", "Overflow-x/y longhands with same CSS-wide keyword should serialize correctly.");
         assert_equals(styleSheet.cssRules[3].style.cssText, "overflow: scroll;", "Overflow-x/y longhands with same non-CSS-wide keyword should serialize correctly.");
-        assert_equals(styleSheet.cssRules[4].style.cssText, "overflow: hidden scroll;", "Overflow-x/y longhands with different keywords should serialize correctly.");
+        assert_equals(styleSheet.cssRules[4].style.cssText, "overflow: scroll hidden;", "Overflow-x/y longhands with different keywords should serialize correctly.");
 
         var div = document.createElement('div');
         div.style.overflow = "inherit";
@@ -42,7 +42,7 @@
 
         div.style.overflowX = "scroll";
         div.style.overflowY = "hidden";
-        assert_equals(div.style.overflow, "hidden scroll", "Overflow-x/y longhands with different keywords should serialize correctly.");
+        assert_equals(div.style.overflow, "scroll hidden", "Overflow-x/y longhands with different keywords should serialize correctly.");
     });
     </script>
 </head>

css/cssom/shorthand-values.html

@@ -32,7 +32,7 @@
         'border: 1px; border-top-color: red;': 'border-width: 1px; border-top-color: red;',
         'border: solid; border-style: dotted': 'border: dotted;',
         'border-width: 1px;': 'border-width: 1px;',
-        'overflow-x: scroll; overflow-y: hidden;': 'overflow: hidden scroll;',
+        'overflow-x: scroll; overflow-y: hidden;': 'overflow: scroll hidden;',
         'overflow-x: scroll; overflow-y: scroll;': 'overflow: scroll;',
         'outline-width: 2px; outline-style: dotted; outline-color: blue;': 'outline: blue dotted 2px;',
         'margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;': 'margin: 1px 2px 3px 4px;',