Bug 1542807 part 3 - Add some style quirks for legacy ::markers creat…

…ed from list-style-type/list-style-image. r=emilio Specifically: For "bullets", i.e. 'list-style-type:disc|circle|square| disclosure-closed|disclosure-open', we use a built-in font (-moz-bullet-font, which has glyphs for those symbols + space) to retain mostly backwards compatible rendering for those. Authors may override that with an explicit 'font-family' ::marker style though. We also use this font for 'list-style-image' in case it would fallback to one of the above when the image fails to load (so that we get the same width space). When the -moz-bullet-font is used we also set 'font-synthesis' to avoid synthesizing italic/bold for this font. Authors may override this with an explicit ::marker declaration. We also set 'letter-spacing' and 'word-spacing' to the initial value for bullets for web-compat reasons. Again, authors may override this with an explicit ::marker declaration. (This breaks backwards- compat slightly but makes us compatible with Chrome. We used to ignore these for list-style-type:<string> too.) Differential Revision: https://phabricator.services.mozilla.com/D111693
dothq · Jun 14, 2021 · e4d7dd9 · e4d7dd9
1 parent 19f1737
commit e4d7dd9
Show file tree

Hide file tree

Showing 12 changed files with 273 additions and 1 deletion.
diff --git a/layout/style/res/Mozilla_Bullet.bf b/layout/style/res/Mozilla_Bullet.bf
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<font>
+<format>2.2</format>
+
+<postscript_name>Mozilla Bullet</postscript_name>
+<name>Bullet</name>
+<subfamily>Regular</subfamily>
+<bold>false</bold>
+<italic>false</italic>
+<full_name>Mozilla Bullet</full_name>
+<unique_identifier>Mozilla Bullet</unique_identifier>
+<version>Version 1.0</version>
+<description></description>
+<copyright></copyright>
+<license></license>
+<license_url></license_url>
+<weight>400</weight>
+<units_per_em>1024</units_per_em>
+<trademark></trademark>
+<manufacturer>Mozilla</manufacturer>
+<designer>Mats Palmgren</designer>
+<vendor_url></vendor_url>
+<designer_url></designer_url>
+
+<horizontal>
+	<top_limit>84.0000000000</top_limit>
+	<top_position>66.0000000000</top_position>
+	<x-height>62.0000000000</x-height>
+	<base_line>4.0000000000</base_line>
+	<bottom_position>0.0000000000</bottom_position>
+	<bottom_limit>0.0000000000</bottom_limit>
+	<custom_guide label="center">130.5577907913</custom_guide>
+	<custom_guide label="middle">34.0000000000</custom_guide>
+</horizontal>
+
+<grid width="1.0000"/>
+<grid width="2.0000"/>
+<grid width="4.0000"/>
+<grid width="1.0000"/>
+<grid width="1.0000"/>
+<grid width="2.0000"/>
+<grid width="4.0000"/>
+<grid width="1.0000"/>
+<grid width="2.0000"/>
+<grid width="1.0000"/>
+<grid width="2.0000"/>
+<grid width="4.0000"/>
+<grid width="1.0000"/>
+<grid width="2.0000"/>
+<grid width="4.0000"/>
+<grid width="1.0000"/>
+<grid width="2.0000"/>
+<grid width="4.0000"/>
+<grid width="1.0000"/>
+<grid width="1.0000"/>
+<grid width="2.0000"/>
+<grid width="4.0000"/>
+<grid width="1.0000"/>
+<grid width="2.0000"/>
+<grid width="1.0000"/>
+<grid width="2.0000"/>
+<grid width="4.0000"/>
+<grid width="1.0000"/>
+<grid width="2.0000"/>
+<grid width="4.0000"/>
+<background scale="1" />
+
+<collection unicode="U+20">
+	<selected id="0"/>
+	<glyph id="0" left="0" right="40">
+	</glyph>
+</collection>
+
+<collection unicode="U+2022">
+	<selected id="1"/>
+	<glyph id="1" left="0" right="56.054687999999999">
+		<layer name= "Layer" visible="true">
+			<path data="S 39.8340571477,21.8512253642 Q 37.5859284387,19.6030966550 34.3912193480,18.3015483276 Q 31.1965114690,17.0000000000 28.0018023784,17.0000000000 Q 24.8070932877,17.0000000000 21.6123841971,18.3015483276 Q 18.4176751064,19.6030966550 16.1695476089,21.8512253642 Q 13.8030966551,24.0993528616 12.5015483276,27.2940619523 Q 11.2000000000,30.4887710429 11.2000000000,33.6834789219 Q 11.2000000000,36.8781880126 12.5015483276,40.0728971032 Q 13.8030966551,43.2676061939 16.1695476089,45.5157349029 Q 18.4176751064,47.7638624004 21.6123841971,49.1837329728 Q 24.8070932877,50.4852813003 28.0018023784,50.4852813003 Q 31.1965114690,50.4852813003 34.3912193480,49.1837329728 Q 37.5859284387,47.7638624004 39.8340571477,45.5157349029 Q 42.0821846453,43.2676061939 43.3837329728,40.0728971032 Q 44.6852813003,36.8781880126 44.6852813003,33.6834789219 Q 44.6852813003,30.4887710429 43.3837329728,27.2940619523 Q 42.0821846453,24.0993528616 39.8340571477,21.8512253642" />
+		</layer>
+	</glyph>
+</collection>
+
+<collection unicode="U+25aa">
+	<selected id="1"/>
+	<glyph id="1" left="0" right="56.054687999999999">
+		<layer name= "Layer" visible="true">
+			<path data="B 12.0000000000,49.8262327578 M 43.9762327578,49.8262327578 M 43.9762327578,17.8500000000 M 12.0000000000,17.8500000000 M 12.0000000000,49.8262327578" />
+		</layer>
+	</glyph>
+</collection>
+
+<collection unicode="U+25b8">
+	<selected id="0"/>
+	<glyph id="0" left="-24" right="24">
+		<layer name= "Layer" visible="true">
+			<path data="S -22.3181299324,34.0373543359 L -22.3181299324,57.9301041570 L 25.4673697100,34.0373543359 L -22.3181299324,10.1446045147 L -22.3181299324,34.0373543359" />
+		</layer>
+	</glyph>
+</collection>
+
+<collection unicode="U+25be">
+	<selected id="1"/>
+	<glyph id="0" left="-28" right="28">
+		<layer name= "Layer" visible="true">
+		</layer>
+	</glyph>
+	<glyph id="1" left="-24" right="24">
+		<layer name= "Layer" visible="true">
+			<path data="S -0.0072501788,57.9301041570 L 23.8854996423,57.9301041570 L -0.0072501788,10.1446045146 L -23.9000000000,57.9301041570 L -0.0072501788,57.9301041570" />
+		</layer>
+	</glyph>
+</collection>
+
+<collection unicode="U+25c2">
+	<selected id="1"/>
+	<glyph id="0" left="-28" right="28">
+		<layer name= "Layer" visible="true">
+		</layer>
+	</glyph>
+	<glyph id="1" left="-24" right="24">
+		<layer name= "Layer" visible="true">
+			<path data="S 22.1854996424,34.0373543358 L 22.1854996424,10.1446045147 L -25.6000000000,34.0373543358 L 22.1854996424,57.9301041570 L 22.1854996424,34.0373543358" />
+		</layer>
+	</glyph>
+</collection>
+
+<collection unicode="U+25e6">
+	<selected id="0"/>
+	<glyph id="0" left="0" right="56.054687999999999">
+		<layer name= "Layer" visible="true">
+			<path stroke="2.3999999999999999" data="B 40.0833461228,23.2212841662 C 37.0522303130,20.1901683563 32.4889602320,18.3000000000 28.2023151445,18.3000000000 T C 23.9156700571,18.3000000000 19.3523999761,20.1901683563 16.3212841662,23.2212841662 T C 13.2901683563,26.2523999761 11.4000000000,30.8156700570 11.4000000000,35.1023151445 T C 11.4000000000,39.3889602320 13.2901683564,43.9522303130 16.3212841662,46.9833461228 T C 19.3523999761,50.0144619327 23.9156700571,51.9046302890 28.2023151445,51.9046302890 T C 32.4889602320,51.9046302890 37.0522303129,50.0144619326 40.0833461228,46.9833461228 T C 43.1144619327,43.9522303130 45.0046302890,39.3889602320 45.0046302890,35.1023151445 T C 45.0046302890,30.8156700570 43.1144619327,26.2523999760 40.0833461228,23.2212841662 T" />
+		</layer>
+	</glyph>
+</collection>
+
+
+
+
+</font>
diff --git a/layout/style/res/Mozilla_Bullet.ttf b/layout/style/res/Mozilla_Bullet.ttf
diff --git a/layout/style/res/Mozilla_Bullet.woff2 b/layout/style/res/Mozilla_Bullet.woff2
diff --git a/layout/style/res/html.css b/layout/style/res/html.css
@@ -5,6 +5,11 @@
 @namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */
 @namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
 
+@font-face {
+  font-family: -moz-bullet-font;
+  src: url("data:font/woff2;base64,d09GMgABAAAAAARYAAwAAAAACqAAAAQFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cBmAAgwIRCAqKDIcYATYCJAMsCxgABCAFg2AHIBtDCFGUrM0MyM/DGJyndUclpZwnU8QPQ6wsFOHO+/yHNvV9IEqSQgsVJW2p+uZkohKbVExPEz/JUW7zk6rzYH9723UJ/4DzBII8CSzwgFMOOE4KW2rjAmh4qQWSiid60f7Y9FsXScfUpeluagFqTTQYyoQaQSubXil0lHRsBehAI9KofG/6ogF9/Hl6lBd920LmeTxj8JXBfFWKwYAY3QsAAXD17ZAB4M6Ocv/nsZlkaTl0gLipewIQEMB2d9lKDAT1ZjP/F7jmWsQ3wn8AZvZFgIIC7ESh4AP1iFb4nPnfWyJgcQArpUWqW9W96j71kHr/L9a/dNRbj+8/ujXLWCMMFYVYiXoEaZQ4YOC/E7Dkz3JEjaokxAP6i3hIUjv9fwYyE6I3yIozKkaGN63fP36aeLJmxlRZwZiFziPrMVvOlnCF98SQJfGO/Xllv/FnWAcEjrMqaMCPwVmktCDO5zzxcXqeKS+QFxYnvJLFVzKZAFcKnlZRwHEPVM3mXxNt2gdZEpkKaIAG9gbgDTU5SOYDcmX7Rr61evEA1U+1/3SMb6FFtUqh55nYleE95j2zPNxzdlnGoR5xu/PxQKzb7bFaFLvl79Z54Lx9OH+g0/PPYlcsNo/nwP2V2vsHUHsV4KqEsd+e2r6Fu2v7abkfvsb65b41uwvRvqewH25kTntqolbYsEr5DAqrX97a0jrBLjFRExVHR2dH1Za6unyZfCVZHqQP0BtYjuUYlg9J6SurcrTEiOr26m5xcuTW4Sp3ljkUYWJ9+/iVmzbzPpcuXnGeqU3U7IKjz/qeKSSCltyhuSoxkqqTZX+DXt/OMmAikC8SzVD0jg3dbhIE0eUqc04UFFrxCSXzFxgHclzRMPe0ocOjiKRoSZISE0OtpkBjECdxkkRM1KiaJV0ed0V5umBP1wyUPL2ZBGLSDh5itIHahHRF0CY5nZMGib6T3cOmDvcTSZKuPiFJFpPRGNTIOq7jl5OjDiGIoo6qEE0QtfQJ3VYUD2RZvbm5uWWCWOgR4HXAk5GxLEO0izhLdvPTfpTV3xeOnOfT96uR53CdPrPq+P9HZvzO4QCMmDr7lTcNZorT6iMOYgI+IxClMzeCspeoLt5ABGSpta6gRZmQSnzk9e9jmOAYKC7RsyGMYaB6MpbNKMiRq2U6vI0yPZuTMiODFytMrGEBi7pjGgkAMoaNLGOFSoYceaZMx1+XTC/UNpmRzY1nmwT7AIcK+fK5lYNjz893lwMTuXlD2AKl8Md+24AxitRaLH/MUMqd9z862owy/bZTuZUqs1iRQop0KdLgZwPc9JS0lprnkef1gitBCRhjgV+vjGK8BfIV8CrlVghj1vIyZfyC/AJvqbsQYAEA/v+IAQA=");
+}
+
 /* bidi */
 
 :-moz-has-dir-attr {

diff --git a/servo/components/style/properties/cascade.rs b/servo/components/style/properties/cascade.rs
@@ -794,6 +794,34 @@ impl<'a, 'b: 'a> Cascade<'a, 'b> {
             builder.add_flags(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_PADDING);
         }
 
+        if self
+            .author_specified
+            .contains(LonghandId::FontFamily)
+        {
+            builder.add_flags(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_FONT_FAMILY);
+        }
+
+        if self
+            .author_specified
+            .contains(LonghandId::LetterSpacing)
+        {
+            builder.add_flags(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_LETTER_SPACING);
+        }
+
+        if self
+            .author_specified
+            .contains(LonghandId::WordSpacing)
+        {
+            builder.add_flags(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_WORD_SPACING);
+        }
+
+        if self
+            .author_specified
+            .contains(LonghandId::FontSynthesis)
+        {
+            builder.add_flags(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_FONT_SYNTHESIS);
+        }
+
         #[cfg(feature = "servo")]
         {
             if let Some(font) = builder.get_font_if_mutated() {

diff --git a/servo/components/style/properties/computed_value_flags.rs b/servo/components/style/properties/computed_value_flags.rs
@@ -12,7 +12,7 @@ bitflags! {
     /// If we ever want to add some flags that shouldn't inherit for them,
     /// we might want to add a function to handle this.
     #[repr(C)]
-    pub struct ComputedValueFlags: u16 {
+    pub struct ComputedValueFlags: u32 {
         /// Whether the style or any of the ancestors has a text-decoration-line
         /// property that should get propagated to descendants.
         ///
@@ -89,6 +89,18 @@ bitflags! {
         /// FIXME(emilio): Try to merge this with BORDER_BACKGROUND, see
         /// https://github.com/w3c/csswg-drafts/issues/4777
         const HAS_AUTHOR_SPECIFIED_PADDING = 1 << 15;
+
+        /// Whether there are author-specified rules for `font-family`.
+        const HAS_AUTHOR_SPECIFIED_FONT_FAMILY = 1 << 16;
+
+        /// Whether there are author-specified rules for `font-synthesis`.
+        const HAS_AUTHOR_SPECIFIED_FONT_SYNTHESIS = 1 << 17;
+
+        /// Whether there are author-specified rules for `letter-spacing`.
+        const HAS_AUTHOR_SPECIFIED_LETTER_SPACING = 1 << 18;
+
+        /// Whether there are author-specified rules for `word-spacing`.
+        const HAS_AUTHOR_SPECIFIED_WORD_SPACING = 1 << 19;
     }
 }
 

diff --git a/servo/components/style/style_adjuster.rs b/servo/components/style/style_adjuster.rs
@@ -817,6 +817,52 @@ impl<'a, 'b: 'a> StyleAdjuster<'a, 'b> {
         }
     }
 
+    /// A legacy ::marker (i.e. no 'content') without an author-specified 'font-family'
+    /// and 'list-style-type:disc|circle|square|disclosure-closed|disclosure-open'
+    /// is assigned 'font-family:-moz-bullet-font'. (This is for <ul><li> etc.)
+    /// We don't want synthesized italic/bold for this font, so turn that off too.
+    /// Likewise for 'letter/word-spacing' -- unless the author specified it then reset
+    /// them to their initial value because traditionally we never added such spacing
+    /// between a legacy bullet and the list item's content, so we keep that behavior
+    /// for web-compat reasons.
+    /// We intentionally don't check 'list-style-image' below since we want it to use
+    /// the same font as its fallback ('list-style-type') in case it fails to load.
+    #[cfg(feature = "gecko")]
+    fn adjust_for_marker_pseudo(&mut self) {
+        use crate::values::computed::font::{FamilyName, FontFamily, FontFamilyList, FontFamilyNameSyntax, FontSynthesis, SingleFontFamily};
+        use crate::values::computed::text::{LetterSpacing, WordSpacing};
+
+        let is_legacy_marker = self.style.pseudo.map_or(false, |p| p.is_marker()) &&
+            self.style.get_counters().ineffective_content_property() &&
+            self.style.get_list().clone_list_style_type().is_bullet();
+        if !is_legacy_marker {
+            return;
+        }
+        if !self.style.flags.get().contains(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_FONT_FAMILY) {
+            let moz_bullet_font_family = FontFamily {
+                families: FontFamilyList::new(Box::new([SingleFontFamily::FamilyName(FamilyName {
+                    name: atom!("-moz-bullet-font"),
+                    syntax: FontFamilyNameSyntax::Identifiers,
+                })])),
+                is_system_font: false,
+            };
+            self.style.mutate_font().set_font_family(moz_bullet_font_family);
+
+            // FIXME(mats): We can remove this if support for font-synthesis is added to @font-face rules.
+            // Then we can add it to the @font-face rule in html.css instead.
+            // https://github.com/w3c/csswg-drafts/issues/6081
+            if !self.style.flags.get().contains(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_FONT_SYNTHESIS) {
+                self.style.mutate_font().set_font_synthesis(FontSynthesis::none());
+            }
+        }
+        if !self.style.flags.get().contains(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_LETTER_SPACING) {
+            self.style.mutate_inherited_text().set_letter_spacing(LetterSpacing::normal());
+        }
+        if !self.style.flags.get().contains(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_WORD_SPACING) {
+            self.style.mutate_inherited_text().set_word_spacing(WordSpacing::normal());
+        }
+    }
+
     /// Adjusts the style to account for various fixups that don't fit naturally
     /// into the cascade.
     ///
@@ -882,6 +928,7 @@ impl<'a, 'b: 'a> StyleAdjuster<'a, 'b> {
         {
             self.adjust_for_appearance(element);
             self.adjust_for_inert();
+            self.adjust_for_marker_pseudo();
         }
         self.set_bits();
     }

diff --git a/servo/components/style/values/computed/text.rs b/servo/components/style/values/computed/text.rs
@@ -110,6 +110,14 @@ impl ToComputedValue for specified::WordSpacing {
 /// A computed value for the `line-height` property.
 pub type LineHeight = GenericLineHeight<NonNegativeNumber, NonNegativeLength>;
 
+impl WordSpacing {
+    /// Return the `normal` computed value, which is just zero.
+    #[inline]
+    pub fn normal() -> Self {
+        LengthPercentage::zero()
+    }
+}
+
 #[derive(Clone, Debug, MallocSizeOf, PartialEq, ToResolvedValue)]
 #[repr(C)]
 /// text-overflow.

diff --git a/servo/components/style/values/generics/mod.rs b/servo/components/style/values/generics/mod.rs
@@ -95,6 +95,21 @@ impl CounterStyle {
     pub fn decimal() -> Self {
         CounterStyle::Name(CustomIdent(atom!("decimal")))
     }
+
+    /// Is this a bullet? (i.e. `list-style-type: disc|circle|square|disclosure-closed|disclosure-open`)
+    #[inline]
+    pub fn is_bullet(&self) -> bool {
+        match self {
+            CounterStyle::Name(CustomIdent(ref name)) => {
+                name == &atom!("disc") ||
+                    name == &atom!("circle") ||
+                    name == &atom!("square") ||
+                    name == &atom!("disclosure-closed") ||
+                    name == &atom!("disclosure-open")
+            }
+            _ => false,
+        }
+    }
 }
 
 impl Parse for CounterStyle {

diff --git a/servo/components/style/values/specified/font.rs b/servo/components/style/values/specified/font.rs
@@ -1972,6 +1972,14 @@ impl FontSynthesis {
             style: true,
         }
     }
+    #[inline]
+    /// Get the 'none' value of font-synthesis
+    pub fn none() -> Self {
+        FontSynthesis {
+            weight: false,
+            style: false,
+        }
+    }
 }
 
 impl Parse for FontSynthesis {

diff --git a/servo/components/style/values/specified/list.rs b/servo/components/style/values/specified/list.rs
@@ -67,6 +67,15 @@ impl ListStyleType {
             _ => unreachable!("Unknown counter style keyword value"),
         })))
     }
+
+    /// Is this a bullet? (i.e. `list-style-type: disc|circle|square|disclosure-closed|disclosure-open`)
+    #[inline]
+    pub fn is_bullet(&self) -> bool {
+        match self {
+            ListStyleType::CounterStyle(ref style) => style.is_bullet(),
+            _ => false,
+        }
+    }
 }
 
 #[cfg(feature = "gecko")]

diff --git a/xpcom/ds/StaticAtoms.py b/xpcom/ds/StaticAtoms.py
@@ -48,6 +48,7 @@
     Atom("mozgeneratedcontentimage", "_moz_generated_content_image"),
     Atom("mozquote", "_moz_quote"),
     Atom("mozsignature", "moz-signature"),  # Used by MailNews.
+    Atom("_moz_bullet_font", "-moz-bullet-font"),
     Atom("_moz_is_glyph", "-moz-is-glyph"),
     Atom("_moz_original_size", "_moz_original_size"),
     Atom("_moz_print_preview", "-moz-print-preview"),