Bug 1505786 - Implement overflow-wrap: anywhere. r=xidorn,jfkthame

Per https://github.com/w3c/csswg-drafts/issues/2682

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

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

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

@@ -7578,6 +7578,7 @@ exports.CSS_PROPERTIES = {
     ],
     "supports": [],
     "values": [
+      "anywhere",
       "break-word",
       "inherit",
       "initial",
@@ -9204,6 +9205,7 @@ exports.CSS_PROPERTIES = {
     ],
     "supports": [],
     "values": [
+      "anywhere",
       "break-word",
       "inherit",
       "initial",

layout/generic/nsTextFrame.cpp

@@ -8607,8 +8607,7 @@ nsTextFrame::AddInlineMinISizeForFlow(gfxContext *aRenderingContext,
     return;
   }
 
-  // If overflow-wrap is break-word, we can wrap everywhere.
-  if (StaticPrefs::layout_css_overflow_break_intrinsic_size() &&
+  if (textStyle->mOverflowWrap == mozilla::StyleOverflowWrap::Anywhere &&
       textStyle->WordCanWrap(this)) {
     aData->OptionallyBreak();
     aData->mCurrentLine +=

layout/style/ServoBindings.toml

@@ -395,6 +395,7 @@ cbindgen-types = [
     { gecko = "StyleFontLanguageOverride", servo = "values::computed::font::FontLanguageOverride" },
     { gecko = "StylePathCommand", servo = "values::specified::svg_path::PathCommand" },
     { gecko = "StyleUnicodeRange", servo = "cssparser::UnicodeRange" },
+    { gecko = "StyleOverflowWrap", servo = "values::computed::OverflowWrap" },
 ]
 
 mapped-generic-types = [

layout/style/ServoCSSPropList.mako.py

@@ -102,6 +102,7 @@ SERIALIZED_PREDEFINED_TYPES = [
     "ListStyleType",
     "OffsetPath",
     "Opacity",
+    "OverflowWrap",
     "Quotes",
     "Resize",
     "Scale",

layout/style/nsStyleConsts.h

@@ -788,10 +788,6 @@ enum class StyleWhiteSpace : uint8_t {
 #define NS_STYLE_WORDBREAK_BREAK_ALL            1
 #define NS_STYLE_WORDBREAK_KEEP_ALL             2
 
-// See nsStyleText
-#define NS_STYLE_OVERFLOWWRAP_NORMAL            0
-#define NS_STYLE_OVERFLOWWRAP_BREAK_WORD        1
-
 // ruby-align, see nsStyleText
 #define NS_STYLE_RUBY_ALIGN_START               0
 #define NS_STYLE_RUBY_ALIGN_CENTER              1

layout/style/nsStyleStruct.cpp

@@ -4249,7 +4249,7 @@ nsStyleText::nsStyleText(const nsPresContext* aContext)
   , mTextTransform(NS_STYLE_TEXT_TRANSFORM_NONE)
   , mWhiteSpace(StyleWhiteSpace::Normal)
   , mWordBreak(NS_STYLE_WORDBREAK_NORMAL)
-  , mOverflowWrap(NS_STYLE_OVERFLOWWRAP_NORMAL)
+  , mOverflowWrap(StyleOverflowWrap::Normal)
   , mHyphens(StyleHyphens::Manual)
   , mRubyAlign(NS_STYLE_RUBY_ALIGN_SPACE_AROUND)
   , mRubyPosition(NS_STYLE_RUBY_POSITION_OVER)

layout/style/nsStyleStruct.h

@@ -1578,7 +1578,7 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleText
   uint8_t mTextTransform;               // NS_STYLE_TEXT_TRANSFORM_*
   mozilla::StyleWhiteSpace mWhiteSpace;
   uint8_t mWordBreak;                   // NS_STYLE_WORDBREAK_*
-  uint8_t mOverflowWrap;                // NS_STYLE_OVERFLOWWRAP_*
+  mozilla::StyleOverflowWrap mOverflowWrap;
   mozilla::StyleHyphens mHyphens;
   uint8_t mRubyAlign;                   // NS_STYLE_RUBY_ALIGN_*
   uint8_t mRubyPosition;                // NS_STYLE_RUBY_POSITION_*
@@ -1634,8 +1634,11 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleText
   }
 
   bool WordCanWrapStyle() const {
-    return WhiteSpaceCanWrapStyle() &&
-           mOverflowWrap == NS_STYLE_OVERFLOWWRAP_BREAK_WORD;
+    if (!WhiteSpaceCanWrapStyle()) {
+      return false;
+    }
+    return mOverflowWrap == mozilla::StyleOverflowWrap::BreakWord ||
+           mOverflowWrap == mozilla::StyleOverflowWrap::Anywhere;
   }
 
   bool HasTextEmphasis() const {

modules/libpref/init/StaticPrefList.h

@@ -804,13 +804,6 @@ VARCACHE_PREF(
   bool, false
 )
 
-// Does overflow-break: break-word affect intrinsic size?
-VARCACHE_PREF(
-  "layout.css.overflow-break.intrinsic-size",
-   layout_css_overflow_break_intrinsic_size,
-  bool, false
-)
-
 // Does arbitrary ::-webkit-* pseudo-element parsed?
 VARCACHE_PREF(
   "layout.css.unknown-webkit-pseudo-element",

servo/components/style/cbindgen.toml

@@ -49,6 +49,7 @@ include = [
   "FontDisplay",
   "FontFaceSourceListComponent",
   "FontLanguageOverride",
+  "OverflowWrap",
   "TimingFunction",
   "PathCommand",
   "UnicodeRange",

servo/components/style/properties/data.py

@@ -324,6 +324,7 @@ class Longhand(object):
                 "Opacity",
                 "OutlineStyle",
                 "OverflowClipBox",
+                "OverflowWrap",
                 "OverscrollBehavior",
                 "Percentage",
                 "Resize",

servo/components/style/properties/gecko.mako.rs

@@ -1419,6 +1419,7 @@ impl Clone for ${style_struct.gecko_struct_name} {
         "NonNegativeNumber": impl_simple,
         "Number": impl_simple,
         "Opacity": impl_simple,
+        "OverflowWrap": impl_simple,
         "Perspective": impl_style_coord,
         "Position": impl_position,
         "RGBAColor": impl_rgba_color,

servo/components/style/properties/longhands/inherited_text.mako.rs

@@ -61,15 +61,16 @@ ${helpers.predefined_type(
     servo_restyle_damage = "reflow",
 )}
 
-// Also known as "word-wrap" (which is more popular because of IE), but this is the preferred
-// name per CSS-TEXT 6.2.
-${helpers.single_keyword(
+// Also known as "word-wrap" (which is more popular because of IE), but this is
+// the preferred name per CSS-TEXT 6.2.
+${helpers.predefined_type(
     "overflow-wrap",
-    "normal break-word",
-    gecko_constant_prefix="NS_STYLE_OVERFLOWWRAP",
+    "OverflowWrap",
+    "computed::OverflowWrap::Normal",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-text/#propdef-overflow-wrap",
     alias="word-wrap",
+    needs_context=False,
     servo_restyle_damage="rebuild_and_reflow",
 )}
 

servo/components/style/values/computed/mod.rs

@@ -78,7 +78,7 @@ pub use self::svg::{SVGPaintOrder, SVGStrokeDashArray, SVGWidth};
 pub use self::table::XSpan;
 pub use self::text::{InitialLetter, LetterSpacing, LineHeight, MozTabSize};
 pub use self::text::{TextAlign, TextEmphasisPosition, TextEmphasisStyle};
-pub use self::text::{TextOverflow, WordSpacing};
+pub use self::text::{TextOverflow, WordSpacing, OverflowWrap};
 pub use self::time::Time;
 pub use self::transform::{Rotate, Scale, Transform, TransformOperation};
 pub use self::transform::{TransformOrigin, TransformStyle, Translate};

servo/components/style/values/computed/text.rs

@@ -19,6 +19,7 @@ use values::{CSSFloat, CSSInteger};
 
 pub use values::specified::TextAlignKeyword as TextAlign;
 pub use values::specified::TextEmphasisPosition;
+pub use values::specified::OverflowWrap;
 
 /// A computed value for the `initial-letter` property.
 pub type InitialLetter = GenericInitialLetter<CSSFloat, CSSInteger>;

servo/components/style/values/specified/mod.rs

@@ -76,7 +76,7 @@ pub use self::svg_path::SVGPathData;
 pub use self::table::XSpan;
 pub use self::text::{InitialLetter, LetterSpacing, LineHeight, MozTabSize, TextAlign};
 pub use self::text::{TextAlignKeyword, TextDecorationLine, TextOverflow, WordSpacing};
-pub use self::text::{TextEmphasisPosition, TextEmphasisStyle};
+pub use self::text::{TextEmphasisPosition, TextEmphasisStyle, OverflowWrap};
 pub use self::time::Time;
 pub use self::transform::{Rotate, Scale, Transform};
 pub use self::transform::{TransformOrigin, TransformStyle, Translate};

servo/components/style/values/specified/text.rs

@@ -659,6 +659,8 @@ impl ToComputedValue for TextEmphasisStyle {
     fn to_computed_value(&self, context: &Context) -> Self::ComputedValue {
         match *self {
             TextEmphasisStyle::Keyword(ref keyword) => {
+                // FIXME(emilio): This should set the rule_cache_conditions
+                // properly.
                 let default_shape = if context.style().get_inherited_box().clone_writing_mode() ==
                     SpecifiedWritingMode::HorizontalTb
                 {
@@ -680,6 +682,7 @@ impl ToComputedValue for TextEmphasisStyle {
             },
         }
     }
+
     #[inline]
     fn from_computed_value(computed: &Self::ComputedValue) -> Self {
         match *computed {
@@ -877,3 +880,24 @@ impl Parse for MozTabSize {
         )?))
     }
 }
+
+/// Values for the `overflow-wrap` property.
+#[repr(u8)]
+#[derive(
+    Clone,
+    Copy,
+    Debug,
+    Eq,
+    MallocSizeOf,
+    Parse,
+    PartialEq,
+    SpecifiedValueInfo,
+    ToComputedValue,
+    ToCss,
+)]
+#[allow(missing_docs)]
+pub enum OverflowWrap {
+    Normal,
+    BreakWord,
+    Anywhere,
+}

testing/web-platform/meta/css/css-text/overflow-wrap/overflow-wrap-min-content-size-001.html.ini

@@ -1,2 +0,0 @@
-[overflow-wrap-min-content-size-001.html]
-  prefs: [layout.css.overflow-break.intrinsic-size:true]

testing/web-platform/meta/css/css-text/overflow-wrap/overflow-wrap-min-content-size-002.html.ini

@@ -1,2 +0,0 @@
-[overflow-wrap-min-content-size-002.html]
-  prefs: [layout.css.overflow-break.intrinsic-size:true]

testing/web-platform/meta/css/css-text/overflow-wrap/overflow-wrap-min-content-size-003.html.ini

@@ -1,2 +0,0 @@
-[overflow-wrap-min-content-size-003.html]
-  prefs: [layout.css.overflow-break.intrinsic-size:true]

testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-001.html

@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<title>CSS Text Test: overflow-wrap: break-word and intrinsic sizing</title>
+<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</title>
 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
 <link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
 <meta name="flags" content="">
 <link rel="match" href="reference/overflow-wrap-min-content-size-001-ref.html">
-<meta name="assert" content="Soft wrap opportunities introduced by overflow-wrap:break-word **are** considered when calculating min-content intrinsic sizes.">
+<meta name="assert" content="Soft wrap opportunities introduced by overflow-wrap:anywhere **are** considered when calculating min-content intrinsic sizes.">
 <style>
 table {
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   max-width: 0;
   border: 0;
   border-collapse: collapse;

testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-002.html

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<title>CSS Text Test: overflow-wrap: break-word and intrinsic sizing</title>
+<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</title>
 <link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/">
 <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
 <link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
 <meta name="flags" content="">
 <link rel="match" href="reference/overflow-wrap-min-content-size-002-ref.html">
-<meta name="assert" content="overflow-wrap:break-word doesn't break grapheme cluster and min-content intrinsic size should take that into account.">
+<meta name="assert" content="overflow-wrap:anywhere doesn't break grapheme cluster and min-content intrinsic size should take that into account.">
 <style>
 #wrapper {
   width: 0px;
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
 }
 #test {
   float: left;

testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-003.html

@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<title>CSS Text Test: overflow-wrap: break-word and intrinsic sizing</title>
+<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</title>
 <link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/">
 <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
 <link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
 <meta name="flags" content="ahem">
 <link rel="match" href="reference/overflow-wrap-min-content-size-003-ref.html">
-<meta name="assert" content="overflow-wrap:break-word breaks at edge of inline elements.">
+<meta name="assert" content="overflow-wrap:anywhere breaks at edge of inline elements.">
 <style>
 #wrapper {
   width: 0px;
   font: 16px / 1 Ahem;
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   color: green;
 }
 #test {