Bug 1481866: Swap order of values in 'overflow' shorthand property. r=emilio

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

--HG--
extra : moz-landing-system : lando

devtools/shared/css/generated/properties-db.js

@@ -7549,8 +7549,8 @@ exports.CSS_PROPERTIES = {
   "overflow": {
     "isInherited": false,
     "subproperties": [
-      "overflow-x",
+      "overflow-y",
-      "overflow-y"
+      "overflow-x"
     ],
     "supports": [],
     "values": [

gfx/tests/crashtests/1325159-1.html

@@ -20,7 +20,7 @@ function boom(){
   o_2.style.MozBorderEndStyle = "dotted";
   doc.style.MozPerspective = "24.5pt";
   o_0.style.MozTransformStyle = "preserve-3d";
-  doc.style.overflow = "scroll hidden";
+  doc.style.overflow = "hidden scroll";
   doc.style.textOverflow = "''";
   o_0.style.offsetInlineStart = "calc(3*25px)";
   doc.style.paddingTop = "calc(67108864%)";

layout/base/tests/preserve3d_sorting_hit_testing2_iframe.html

@@ -40,7 +40,7 @@ div {
 
 #content {
   -ms-overflow-style: none;
-  overflow: hidden scroll;
+  overflow: scroll hidden;
   height: 100%;
   background: #fefee0;
 }

layout/forms/crashtests/367587-1.html

@@ -5,7 +5,7 @@
 
 #opt1 { display: table-footer-group; }
 #opt1 { visibility: collapse; }
-#opt1 { overflow: hidden scroll; }
+#opt1 { overflow: scroll hidden; }
 
 #opt2 { display: table-cell; }
 #opt2 { clear: left; }

layout/mathml/crashtests/355986-1.xhtml

@@ -6,7 +6,7 @@
 
 body * { 
   display: table-footer-group; 
-  overflow: hidden scroll;
+  overflow: scroll hidden;
 }
 
 </style>

layout/style/nsComputedDOMStyle.cpp

@@ -3856,21 +3856,21 @@ nsComputedDOMStyle::DoGetOverflow()
 {
   const nsStyleDisplay* display = StyleDisplay();
 
+  RefPtr<nsROCSSPrimitiveValue> overflowY = new nsROCSSPrimitiveValue;
+  overflowY->SetIdent(
+    nsCSSProps::ValueToKeywordEnum(display->mOverflowY,
+                                   nsCSSProps::kOverflowKTable));
+  if (display->mOverflowX == display->mOverflowY) {
+    return overflowY.forget();
+  }
+  RefPtr<nsDOMCSSValueList> valueList = GetROCSSValueList(false);
+  valueList->AppendCSSValue(overflowY.forget());
+
   RefPtr<nsROCSSPrimitiveValue> overflowX = new nsROCSSPrimitiveValue;
   overflowX->SetIdent(
     nsCSSProps::ValueToKeywordEnum(display->mOverflowX,
                                    nsCSSProps::kOverflowKTable));
-  if (display->mOverflowX == display->mOverflowY) {
-    return overflowX.forget();
-  }
-  RefPtr<nsDOMCSSValueList> valueList = GetROCSSValueList(false);
   valueList->AppendCSSValue(overflowX.forget());
-
-  RefPtr<nsROCSSPrimitiveValue> overflowY= new nsROCSSPrimitiveValue;
-  overflowY->SetIdent(
-    nsCSSProps::ValueToKeywordEnum(display->mOverflowY,
-                                   nsCSSProps::kOverflowKTable));
-  valueList->AppendCSSValue(overflowY.forget());
   return valueList.forget();
 }
 

layout/style/test/test_bug319381.html

@@ -38,14 +38,14 @@ if (SpecialPowers.getBoolPref("layout.css.overflow.moz-scrollbars.enabled")) {
   $('t').style.overflow = mozVals[0];
   is($('t').style.getPropertyValue("overflow-y"), "scroll", "Roundtrip");
   is($('t').style.getPropertyValue("overflow-x"), "hidden", "Roundtrip");
-  is($('t').style.overflow, "hidden scroll", "Shorthand read directly");
+  is($('t').style.overflow, "scroll hidden", "Shorthand read directly");
-  is(c(), "hidden scroll", "Shorthand computed");
+  is(c(), "scroll hidden", "Shorthand computed");
 
   $('t').style.overflow = mozVals[1];
   is($('t').style.getPropertyValue("overflow-x"), "scroll", "Roundtrip");
   is($('t').style.getPropertyValue("overflow-y"), "hidden", "Roundtrip");
-  is($('t').style.overflow, "scroll hidden", "Shorthand read directly");
+  is($('t').style.overflow, "hidden scroll", "Shorthand read directly");
-  is(c(), "scroll hidden", "Shorthand computed");
+  is(c(), "hidden scroll", "Shorthand computed");
 }
 
 for (i = 0; i < vals.length; ++i) {
@@ -58,7 +58,7 @@ for (i = 0; i < vals.length; ++i) {
     if (i == j) {
       is($('t').style.overflow, vals[i], "Shorthand serialization");
     } else {
-      is($('t').style.overflow, vals[i] + " " + vals[j], "Shorthand serialization");
+      is($('t').style.overflow, vals[j] + " " + vals[i], "Shorthand serialization");
     }
 
     // "visible" overflow-x and overflow-y become "auto" in computed style if
@@ -70,7 +70,7 @@ for (i = 0; i < vals.length; ++i) {
     } else {
       let x = vals[i] == "visible" ? "auto" : vals[i];
       let y = vals[j] == "visible" ? "auto" : vals[j];
-      is(c(), x + " " + y, "Shorthand computation");
+      is(c(), y + " " + x, "Shorthand computation");
     }
   }
 }

servo/components/style/properties/shorthands/box.mako.rs

@@ -7,7 +7,7 @@
 <%helpers:shorthand
     name="overflow"
     flags="SHORTHAND_IN_GETCS"
-    sub_properties="overflow-x overflow-y"
+    sub_properties="overflow-y overflow-x"
     spec="https://drafts.csswg.org/css-overflow/#propdef-overflow"
 >
     use properties::longhands::overflow_x::parse as parse_overflow;
@@ -52,9 +52,9 @@
                 }
             }
         % endif
-        let overflow_x = parse_overflow(context, input)?;
+        let overflow_y = parse_overflow(context, input)?;
-        let overflow_y =
+        let overflow_x =
-            input.try(|i| parse_overflow(context, i)).unwrap_or(overflow_x);
+            input.try(|i| parse_overflow(context, i)).unwrap_or(overflow_y);
         Ok(expanded! {
             overflow_x: overflow_x,
             overflow_y: overflow_y,
@@ -63,10 +63,10 @@
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
         fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
-            self.overflow_x.to_css(dest)?;
+            self.overflow_y.to_css(dest)?;
             if self.overflow_x != self.overflow_y {
                 dest.write_char(' ')?;
-                self.overflow_y.to_css(dest)?;
+                self.overflow_x.to_css(dest)?;
             }
             Ok(())
         }

testing/web-platform/meta/MANIFEST.json

@@ -537238,7 +537238,7 @@
    "testharness"
   ],
   "css/css-overflow/overflow-shorthand-001.html": [
-   "f425636c3bb4297e4e6564d1c2629dc10dde5607",
+   "d922e902720ae6a38ff9c644ddd63ddfd5e62c37",
    "testharness"
   ],
   "css/css-overflow/reference/input-scrollable-region-001-ref.html": [
@@ -565462,7 +565462,7 @@
    "testharness"
   ],
   "css/cssom/shorthand-values.html": [
-   "d8d7f5349a4561cb4d764f366236e88eb3775c8f",
+   "1e4d93acb26e3f644b103974b910203abf93c56e",
    "testharness"
   ],
   "css/cssom/style-attr-update-across-documents.html": [
@@ -565798,7 +565798,7 @@
    "reftest"
   ],
   "css/filter-effects/filter-cb-abspos-inline-001-ref.html": [
-   "6ebe4635511242cd0f5965a778a5a491cc406436",
+   "b4beae8004155c30dad4f48db3e2087f66c42c4f",
    "support"
   ],
   "css/filter-effects/filter-cb-abspos-inline-001.html": [

testing/web-platform/tests/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(x, y) {
+function testOverflowShorthand(y, x) {
   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 : `${expectedX} ${expectedY}`;
+    let expectedComputedSerialization = expectedX == expectedY ? expectedX : `${expectedY} ${expectedX}`;
-    let expectedSpecifiedSerialization = x == y ? x : `${x} ${y}`;
+    let expectedSpecifiedSerialization = x == y ? x : `${y} ${x}`;
 
     assert_equals(div.style.overflow, expectedSpecifiedSerialization);
     assert_equals(getComputedStyle(div).overflow, expectedComputedSerialization);
@@ -25,18 +25,18 @@ function testOverflowShorthand(x, y) {
     div.style.overflowY = "";
     assert_equals(div.style.overflow, "");
 
-    div.style.overflow = `${x} ${y}`;
+    div.style.overflow = `${y} ${x}`;
     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: ${x} ${y} works`);
+  }, `overflow: ${y} ${x} works`);
 }
 
 let OVERFLOW_VALUES = [ "auto", "hidden", "scroll", "visible" ];
 for (let x of OVERFLOW_VALUES)
   for (let y of OVERFLOW_VALUES)
-    testOverflowShorthand(x, y);
+    testOverflowShorthand(y, x);
 </script>

testing/web-platform/tests/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: scroll hidden;", "Overflow-x/y longhands with different keywords should serialize correctly.");
+        assert_equals(styleSheet.cssRules[4].style.cssText, "overflow: hidden scroll;", "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, "scroll hidden", "Overflow-x/y longhands with different keywords should serialize correctly.");
+        assert_equals(div.style.overflow, "hidden scroll", "Overflow-x/y longhands with different keywords should serialize correctly.");
     });
     </script>
 </head>

testing/web-platform/tests/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: scroll hidden;',
+        'overflow-x: scroll; overflow-y: hidden;': 'overflow: hidden scroll;',
         '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;',