Bug 1461589 - Add support for the CSS font-variant-emoji property to the style system. r=emilio

Differential Revision: https://phabricator.services.mozilla.com/D147494
2022-10-22 09:43:48 +00:00 · 2022-10-22 09:43:48 +00:00 · 89c8d6a003
--- a/devtools/server/actors/animation-type-longhand.js
+++ b/devtools/server/actors/animation-type-longhand.js
@ -69,6 +69,7 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
      "font-variant-alternates",
      "font-variant-caps",
      "font-variant-east-asian",
+      "font-variant-emoji",
      "font-variant-ligatures",
      "font-variant-numeric",
      "font-variant-position",
--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@ -3030,6 +3030,7 @@ exports.CSS_PROPERTIES = {
      "font-kerning",
      "font-variant-alternates",
      "font-variant-east-asian",
+      "font-variant-emoji",
      "font-variant-ligatures",
      "font-variant-numeric",
      "font-variant-position",
@ -6677,6 +6678,7 @@ exports.CSS_PROPERTIES = {
      "font-optical-sizing",
      "font-variant-alternates",
      "font-variant-east-asian",
+      "font-variant-emoji",
      "font-variant-ligatures",
      "font-variant-numeric",
      "font-variant-position",
@ -6938,6 +6940,7 @@ exports.CSS_PROPERTIES = {
      "font-variant-caps",
      "font-variant-alternates",
      "font-variant-east-asian",
+      "font-variant-emoji",
      "font-variant-ligatures",
      "font-variant-numeric",
      "font-variant-position"
@ -6952,6 +6955,7 @@ exports.CSS_PROPERTIES = {
      "contextual",
      "diagonal-fractions",
      "discretionary-ligatures",
+      "emoji",
      "full-width",
      "historical-forms",
      "historical-ligatures",
@ -6987,9 +6991,11 @@ exports.CSS_PROPERTIES = {
      "super",
      "swash",
      "tabular-nums",
+      "text",
      "titling-caps",
      "traditional",
      "unicase",
+      "unicode",
      "unset"
    ]
  },
@ -7060,6 +7066,24 @@ exports.CSS_PROPERTIES = {
      "unset"
    ]
  },
+  "font-variant-emoji": {
+    "isInherited": true,
+    "subproperties": [
+      "font-variant-emoji"
+    ],
+    "supports": [],
+    "values": [
+      "emoji",
+      "inherit",
+      "initial",
+      "normal",
+      "revert",
+      "revert-layer",
+      "text",
+      "unicode",
+      "unset"
+    ]
+  },
  "font-variant-ligatures": {
    "isInherited": true,
    "subproperties": [
@ -11834,6 +11858,10 @@ exports.PREFERENCES = [
    "font-optical-sizing",
    "layout.css.font-variations.enabled"
  ],
+  [
+    "font-variant-emoji",
+    "layout.css.font-variant-emoji.enabled"
+  ],
  [
    "initial-letter",
    "layout.css.initial-letter.enabled"
--- a/gfx/src/nsFont.cpp
+++ b/gfx/src/nsFont.cpp
@ -50,7 +50,8 @@ nsFont::MaxDifference nsFont::CalcDifference(const nsFont& aOther) const {
      (variantLigatures != aOther.variantLigatures) ||
      (variantNumeric != aOther.variantNumeric) ||
      (variantPosition != aOther.variantPosition) ||
-      (variantWidth != aOther.variantWidth)) {
+      (variantWidth != aOther.variantWidth) ||
+      (variantEmoji != aOther.variantEmoji)) {
    return MaxDifference::eLayoutAffecting;
  }

--- a/gfx/src/nsFont.h
+++ b/gfx/src/nsFont.h
@ -70,6 +70,7 @@ struct nsFont final {
  uint8_t variantNumeric = NS_FONT_VARIANT_NUMERIC_NORMAL;
  uint8_t variantPosition = NS_FONT_VARIANT_POSITION_NORMAL;
  uint8_t variantWidth = NS_FONT_VARIANT_WIDTH_NORMAL;
+  StyleFontVariantEmoji variantEmoji = StyleFontVariantEmoji::Normal;

  // Smoothing - controls subpixel-antialiasing (currently OSX only)
  uint8_t smoothing = NS_FONT_SMOOTHING_AUTO;
--- a/gfx/thebes/gfxFontConstants.h
+++ b/gfx/thebes/gfxFontConstants.h
@ -155,6 +155,8 @@
 #define NS_FONT_VARIANT_WIDTH_THIRD 3
 #define NS_FONT_VARIANT_WIDTH_QUARTER 4

+enum class StyleFontVariantEmoji : uint8_t { Normal, Text, Emoji, Unicode };
+
 // based on fixed offset values used within WebKit
 #define NS_FONT_SUBSCRIPT_OFFSET_RATIO (0.20)
 #define NS_FONT_SUPERSCRIPT_OFFSET_RATIO (0.34)
--- a/layout/style/ServoBindings.toml
+++ b/layout/style/ServoBindings.toml
@ -167,6 +167,7 @@ rusty-enums = [
    "mozilla::StyleBlend",
    "mozilla::StyleMaskComposite",
    "mozilla::StyleWritingModeProperty",
+    "StyleFontVariantEmoji",
 ]
 allowlist-vars = [
    "NS_ATTRVALUE_.*",
--- a/modules/libpref/init/StaticPrefList.yaml
+++ b/modules/libpref/init/StaticPrefList.yaml
@ -8058,6 +8058,13 @@
  mirror: always
  rust: true

+# Is support for font-variant-emoji enabled?
+- name: layout.css.font-variant-emoji.enabled
+  type: RelaxedAtomicBool
+  value: @IS_NIGHTLY_BUILD@
+  mirror: always
+  rust: true
+
 # Visibility level of font families available to CSS font-matching:
 #   1 - only base system fonts
 #   2 - also fonts from optional language packs
--- a/servo/components/style/properties/longhands/font.mako.rs
+++ b/servo/components/style/properties/longhands/font.mako.rs
@ -130,6 +130,18 @@ ${helpers.predefined_type(
    spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-east-asian",
 )}

+${helpers.single_keyword(
+    "font-variant-emoji",
+    "normal text emoji unicode",
+    engines="gecko",
+    gecko_pref="layout.css.font-variant-emoji.enabled",
+    has_effect_on_gecko_scrollbars=False,
+    gecko_enum_prefix="StyleFontVariantEmoji",
+    gecko_ffi_name="mFont.variantEmoji",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-emoji",
+    animation_value_type="discrete",
+)}
+
 ${helpers.predefined_type(
    "font-variant-ligatures",
    "FontVariantLigatures",
--- a/servo/components/style/properties/properties.mako.rs
+++ b/servo/components/style/properties/properties.mako.rs
@ -2604,7 +2604,7 @@ pub struct SourcePropertyDeclaration {

 // This is huge, but we allocate it on the stack and then never move it,
 // we only pass `&mut SourcePropertyDeclaration` references around.
-size_of_test!(SourcePropertyDeclaration, 632);
+size_of_test!(SourcePropertyDeclaration, 664);

 impl SourcePropertyDeclaration {
    /// Create one. It’s big, try not to move it around.
--- a/servo/components/style/properties/shorthands/font.mako.rs
+++ b/servo/components/style/properties/shorthands/font.mako.rs
@ -21,6 +21,7 @@
        ${'font-optical-sizing' if engine == 'gecko' else ''}
        ${'font-variant-alternates' if engine == 'gecko' else ''}
        ${'font-variant-east-asian' if engine == 'gecko' else ''}
+        ${'font-variant-emoji' if engine == 'gecko' else ''}
        ${'font-variant-ligatures' if engine == 'gecko' else ''}
        ${'font-variant-numeric' if engine == 'gecko' else ''}
        ${'font-variant-position' if engine == 'gecko' else ''}
@ -45,10 +46,10 @@
    <%
        gecko_sub_properties = "kerning language_override size_adjust \
                                variant_alternates variant_east_asian \
-                                variant_ligatures variant_numeric \
-                                variant_position feature_settings \
-                                variation_settings optical_sizing \
-                                palette".split()
+                                variant_emoji variant_ligatures \
+                                variant_numeric variant_position \
+                                feature_settings variation_settings \
+                                optical_sizing palette".split()
    %>
    % if engine == "gecko":
        % for prop in gecko_sub_properties:
@ -80,6 +81,7 @@
                     // line-height and palette are just reset to initial
                     line_height: LineHeight::normal(),
                     font_palette: FontPalette::normal(),
+                     font_variant_emoji: font_variant_emoji::get_initial_specified_value(),
                 })
            }
        % endif
@ -194,9 +196,14 @@
                    return Ok(());
                }
            }
+            if let Some(v) = self.font_variant_emoji {
+                if v != &font_variant_emoji::get_initial_specified_value() {
+                    return Ok(());
+                }
+            }

            % for name in gecko_sub_properties:
-            % if name != "optical_sizing" and name != "variation_settings" and name != "palette":
+            % if name != "optical_sizing" and name != "variation_settings" and name != "palette" and name != "variant_emoji":
            if self.font_${name} != &font_${name}::get_initial_specified_value() {
                return Ok(());
            }
@ -320,11 +327,12 @@
                    sub_properties="font-variant-caps
                                    ${'font-variant-alternates' if engine == 'gecko' else ''}
                                    ${'font-variant-east-asian' if engine == 'gecko' else ''}
+                                    ${'font-variant-emoji' if engine == 'gecko' else ''}
                                    ${'font-variant-ligatures' if engine == 'gecko' else ''}
                                    ${'font-variant-numeric' if engine == 'gecko' else ''}
                                    ${'font-variant-position' if engine == 'gecko' else ''}"
                    spec="https://drafts.csswg.org/css-fonts-3/#propdef-font-variant">
-    <% gecko_sub_properties = "alternates east_asian ligatures numeric position".split() %>
+    <% gecko_sub_properties = "alternates east_asian emoji ligatures numeric position".split() %>
    <%
        sub_properties = ["caps"]
        if engine == "gecko":
@ -399,8 +407,15 @@
            const TOTAL_SUBPROPS: usize = ${len(sub_properties)};
            let mut nb_normals = 0;
        % for prop in sub_properties:
-            if self.font_variant_${prop} == &font_variant_${prop}::get_initial_specified_value() {
-                nb_normals += 1;
+        % if prop == "emoji":
+            if let Some(value) = self.font_variant_${prop} {
+        % else:
+            {
+                let value = self.font_variant_${prop};
+        % endif
+                if value == &font_variant_${prop}::get_initial_specified_value() {
+                   nb_normals += 1;
+                }
            }
        % endfor

@ -418,12 +433,19 @@
            } else {
                let mut has_any = false;
            % for prop in sub_properties:
-                if self.font_variant_${prop} != &font_variant_${prop}::get_initial_specified_value() {
-                    if has_any {
-                        dest.write_str(" ")?;
+            % if prop == "emoji":
+                if let Some(value) = self.font_variant_${prop} {
+            % else:
+                {
+                    let value = self.font_variant_${prop};
+            % endif
+                    if value != &font_variant_${prop}::get_initial_specified_value() {
+                        if has_any {
+                            dest.write_str(" ")?;
+                        }
+                        has_any = true;
+                        value.to_css(dest)?;
                    }
-                    has_any = true;
-                    self.font_variant_${prop}.to_css(dest)?;
                }
            % endfor
            }