Only use two value overflow shorthand when supported

Author: devongovett

build-prefixes.js

@@ -183,7 +183,8 @@ let mdnFeatures = {
   clamp: mdn.css.types.clamp.__compat.support,
   placeSelf: mdn.css.properties['place-self'].__compat.support,
   placeContent: mdn.css.properties['place-content'].__compat.support,
-  placeItems: mdn.css.properties['place-items'].__compat.support
+  placeItems: mdn.css.properties['place-items'].__compat.support,
+  overflowShorthand: mdn.css.properties['overflow'].multiple_keywords.__compat.support
 };
 
 for (let feature in mdnFeatures) {

src/compat.rs

@@ -31,6 +31,7 @@ pub enum Feature {
   DoublePositionGradients,
   FormValidation,
   Fullscreen,
+  OverflowShorthand,
   PlaceContent,
   PlaceItems,
   PlaceSelf,
@@ -1242,6 +1243,38 @@ impl Feature {
           }
         }
       }
+      Feature::OverflowShorthand => {
+        if let Some(version) = browsers.chrome {
+          if version >= 4456448 {
+            return true
+          }
+        }
+        if let Some(version) = browsers.edge {
+          if version >= 5177344 {
+            return true
+          }
+        }
+        if let Some(version) = browsers.firefox {
+          if version >= 3997696 {
+            return true
+          }
+        }
+        if let Some(version) = browsers.opera {
+          if version >= 3145728 {
+            return true
+          }
+        }
+        if let Some(version) = browsers.samsung {
+          if version >= 655360 {
+            return true
+          }
+        }
+        if let Some(version) = browsers.android {
+          if version >= 4456448 {
+            return true
+          }
+        }
+      }
     }
     false
   }

src/declaration.rs

@@ -148,6 +148,7 @@ impl DeclarationHandler {
       animation: AnimationHandler::new(targets),
       display: DisplayHandler::new(targets),
       position: PositionHandler::new(targets),
+      overflow: OverflowHandler::new(targets),
       transform: TransformHandler::new(targets),
       text: TextDecorationHandler::new(targets),
       prefix: PrefixHandler::new(targets),

src/lib.rs

@@ -5231,6 +5231,46 @@ mod tests {
         overflow: hidden auto;
       }
     "#});
+    prefix_test(r#"
+      .foo {
+        overflow: hidden auto;
+      }
+    "#, indoc! {r#"
+      .foo {
+        overflow-x: hidden;
+        overflow-y: auto;
+      }
+    "#},
+    Browsers {
+      chrome: Some(67 << 16),
+      ..Browsers::default()
+    });
+    prefix_test(r#"
+      .foo {
+        overflow: hidden hidden;
+      }
+    "#, indoc! {r#"
+      .foo {
+        overflow: hidden;
+      }
+    "#},
+    Browsers {
+      chrome: Some(67 << 16),
+      ..Browsers::default()
+    });
+    prefix_test(r#"
+      .foo {
+        overflow: hidden auto;
+      }
+    "#, indoc! {r#"
+      .foo {
+        overflow: hidden auto;
+      }
+    "#},
+    Browsers {
+      chrome: Some(68 << 16),
+      ..Browsers::default()
+    });
 
     minify_test(".foo { text-overflow: ellipsis }", ".foo{text-overflow:ellipsis}");
     prefix_test(r#"

src/properties/overflow.rs

@@ -4,6 +4,8 @@ use super::Property;
 use crate::declaration::DeclarationList;
 use crate::macros::enum_property;
 use crate::printer::Printer;
+use crate::properties::prefixes::Browsers;
+use crate::compat::Feature;
 
 enum_property!(OverflowKeyword,
   Visible,
@@ -47,10 +49,21 @@ enum_property!(TextOverflow,
 
 #[derive(Default)]
 pub struct OverflowHandler {
+  targets: Option<Browsers>,
   x: Option<OverflowKeyword>,
   y: Option<OverflowKeyword>
 }
 
+impl OverflowHandler {
+  pub fn new(targets: Option<Browsers>) -> OverflowHandler {
+    OverflowHandler {
+      targets,
+      ..OverflowHandler::default()
+    }
+  }
+}
+
+
 impl PropertyHandler for OverflowHandler {
   fn handle_property(&mut self, property: &Property, _: &mut DeclarationList) -> bool {
     use Property::*;
@@ -72,15 +85,20 @@ impl PropertyHandler for OverflowHandler {
     let x = std::mem::take(&mut self.x);
     let y = std::mem::take(&mut self.y);
 
-    if let (Some(x), Some(y)) = (x, y) {
-      dest.push(Property::Overflow(Overflow { x, y }))
-    } else {
-      if let Some(x) = x {
-        dest.push(Property::OverflowX(x))
+    match (x, y) {
+      // Only use shorthand syntax if the x and y values are the 
+      // same or the two-value syntax is supported by all targets.
+      (Some(x), Some(y)) if x == y || self.targets.is_none() || Feature::OverflowShorthand.is_compatible(self.targets.unwrap()) => {
+        dest.push(Property::Overflow(Overflow { x, y }))
       }
-
-      if let Some(y) = y {
-        dest.push(Property::OverflowY(y))
+      _ => {
+        if let Some(x) = x {
+          dest.push(Property::OverflowX(x))
+        }
+  
+        if let Some(y) = y {
+          dest.push(Property::OverflowY(y))
+        }
       }
     }
   }