fonts: Add support for generic font families and font size configuration (#32673)

This adds support for generic font families in Servo and allows for
configuration of them as well as their default font sizes. One
interesting fix here is that now monospace default to 13px, like it does
in other browsers.

In addition to that, this exposes a new interface in Stylo which allows
setting a default style. This is quite useful for fonts, but also for
other kinds of default style settings -- like text zoom.

Fixes #8371.
Fixes #14773.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.com>

tests/unit/style/custom_properties.rs

@@ -14,7 +14,7 @@ use style::custom_properties::{
 use style::font_metrics::FontMetrics;
 use style::media_queries::{Device, MediaType};
 use style::properties::style_structs::Font;
-use style::properties::{CustomDeclaration, CustomDeclarationValue, StyleBuilder};
+use style::properties::{ComputedValues, CustomDeclaration, CustomDeclarationValue, StyleBuilder};
 use style::rule_cache::RuleCacheConditions;
 use style::rule_tree::CascadeLevel;
 use style::servo::media_queries::FontMetricsProvider;
@@ -22,6 +22,7 @@ use style::stylesheets::container_rule::ContainerSizeQuery;
 use style::stylesheets::layer_rule::LayerOrder;
 use style::stylesheets::UrlExtraData;
 use style::stylist::Stylist;
+use style::values::computed::font::GenericFontFamily;
 use style::values::computed::{Context, Length};
 use test::{self, Bencher};
 use url::Url;
@@ -40,6 +41,9 @@ impl FontMetricsProvider for DummyMetricsProvider {
     ) -> FontMetrics {
         Default::default()
     }
+    fn base_size_for_generic(&self, _: GenericFontFamily) -> Length {
+        Length::new(16.)
+    }
 }
 
 fn cascade(
@@ -60,12 +64,14 @@ fn cascade(
         })
         .collect::<Vec<_>>();
 
+    let initial_style = ComputedValues::initial_values_with_font_override(Font::initial_values());
     let device = Device::new(
         MediaType::screen(),
         QuirksMode::NoQuirks,
         Size2D::new(800., 600.),
         Scale::new(1.0),
         Box::new(DummyMetricsProvider),
+        initial_style,
     );
     let stylist = Stylist::new(device, QuirksMode::NoQuirks);
     let mut builder = StyleBuilder::new(stylist.device(), Some(&stylist), None, None, None, false);

tests/unit/style/stylist.rs

@@ -11,7 +11,9 @@ use style::context::QuirksMode;
 use style::font_metrics::FontMetrics;
 use style::media_queries::{Device, MediaType};
 use style::properties::style_structs::Font;
-use style::properties::{longhands, Importance, PropertyDeclaration, PropertyDeclarationBlock};
+use style::properties::{
+    longhands, ComputedValues, Importance, PropertyDeclaration, PropertyDeclarationBlock,
+};
 use style::selector_map::SelectorMap;
 use style::selector_parser::{SelectorImpl, SelectorParser};
 use style::servo::media_queries::FontMetricsProvider;
@@ -21,6 +23,7 @@ use style::stylist::{
     needs_revalidation_for_testing, ContainerConditionId, LayerId, Rule, ScopeConditionId, Stylist,
 };
 use style::thread_state::{self, ThreadState};
+use style::values::computed::font::GenericFontFamily;
 use style::values::computed::Length;
 use url::Url;
 
@@ -38,6 +41,9 @@ impl FontMetricsProvider for DummyMetricsProvider {
     ) -> FontMetrics {
         Default::default()
     }
+    fn base_size_for_generic(&self, _: GenericFontFamily) -> Length {
+        Length::new(16.)
+    }
 }
 
 /// Helper method to get some Rules from selector strings.
@@ -241,12 +247,14 @@ fn test_insert() {
 }
 
 fn mock_stylist() -> Stylist {
+    let initial_style = ComputedValues::initial_values_with_font_override(Font::initial_values());
     let device = Device::new(
         MediaType::screen(),
         QuirksMode::NoQuirks,
         Size2D::new(0f32, 0f32),
         Scale::new(1.0),
         Box::new(DummyMetricsProvider),
+        initial_style,
     );
     Stylist::new(device, QuirksMode::NoQuirks)
 }

tests/wpt/meta/css/css-fonts/parsing/font-family-valid.html.ini

@@ -1,3 +0,0 @@
-[font-family-valid.html]
-  [e.style['font-family'\] = "System-UI" should set the property value]
-    expected: FAIL

tests/wpt/meta/css/css-fonts/system-ui-ar.html.ini

@@ -1,2 +0,0 @@
-[system-ui-ar.html]
-  expected: FAIL

tests/wpt/meta/css/css-fonts/system-ui-mixed.html.ini

@@ -1,2 +0,0 @@
-[system-ui-mixed.html]
-  expected: FAIL

tests/wpt/meta/css/css-fonts/system-ui-ur.html.ini

@@ -1,2 +0,0 @@
-[system-ui-ur.html]
-  expected: FAIL

tests/wpt/meta/css/css-fonts/system-ui.html.ini

@@ -1,2 +0,0 @@
-[system-ui.html]
-  expected: FAIL

tests/wpt/meta/css/css-transforms/transform-input-017.html.ini

@@ -1,2 +0,0 @@
-[transform-input-017.html]
-  expected: FAIL

tests/wpt/meta/html/rendering/widgets/input-checkbox-switch-rtl.tentative.html.ini

@@ -1,2 +0,0 @@
-[input-checkbox-switch-rtl.tentative.html]
-  expected: FAIL

tests/wpt/mozilla/meta/MANIFEST.json

@@ -2236,7 +2236,7 @@
      ]
     ],
     "font_size.html": [
-     "4ffd55261f2f9e5b4dd2beaf8de8fb528c1de718",
+     "4f0fafc984a312881c0182325c1dc8876ea67f09",
      [
       null,
       [
@@ -8724,7 +8724,7 @@
      []
     ],
     "font_face_attribute_ref.html": [
-     "f018747d2ab41119af5e06d6a018101169592cab",
+     "14378f20cead025327c4cf296ac766b39ebea13a",
      []
     ],
     "font_fallback_failed_ref.html": [
@@ -8732,7 +8732,7 @@
      []
     ],
     "font_size_ref.html": [
-     "6bcf54338856d79af998eefad7bc7bb9f94d0236",
+     "923a3c45c8a5c333b575bedfff8500291547f265",
      []
     ],
     "font_style_ref.html": [

tests/wpt/mozilla/tests/css/font_face_attribute_ref.html

@@ -2,8 +2,8 @@
 <html>
 <head>
 </head>
-<body style="font-family: monospace">
-<p>Servo</p>
-<p>Servo</p>
+<body>
+<p><span style="font-family: monospace;">Servo</span></p>
+<p><span style="font-family: monospace;">Servo</span></p>
 </body>
 </html>

tests/wpt/mozilla/tests/css/font_size.html

@@ -10,10 +10,14 @@
 <p style="font-size: 200%">200% is 40px.
 <p style="font-size: smaller">smaller is 16.66666…px.
 <p style="font-size: larger">larger is 24px.
-<p style="font-size: xx-small">xx-small is 9.6px.
-<p style="font-size: x-small">x-small is 12px.
-<p style="font-size: small">small is 14.2222…px.
+    <!-- When the size is a keyword like the ones below, the resulting size is
+        based the "base size" of the generic font (or the default font size if
+        there is no generic font). Right now in Servo that size for serif is 16px
+        by default -->
+<p style="font-size: xx-small">xx-small is 9px.
+<p style="font-size: x-small">x-small is 10px.
+<p style="font-size: small">small is 13px.
 <p style="font-size: medium">medium is 16px.
-<p style="font-size: large">large is 19.2px.
+<p style="font-size: large">large is 18px.
 <p style="font-size: x-large">x-large is 24px.
 <p style="font-size: xx-large">xx-large is 32px.

tests/wpt/mozilla/tests/css/font_size_ref.html

@@ -8,10 +8,10 @@
 <p style="font-size: 40px">200% is 40px.
 <p style="font-size: 16.6666666666666666666666666666px">smaller is 16.66666…px.
 <p style="font-size: 24px">larger is 24px.
-<p style="font-size: 9.6px">xx-small is 9.6px.
-<p style="font-size: 12px">x-small is 12px.
-<p style="font-size: 14.2222222222222222222222222222px">small is 14.2222…px.
+<p style="font-size: 9px">xx-small is 9px.
+<p style="font-size: 10px">x-small is 10px.
+<p style="font-size: 13px">small is 13px.
 <p style="font-size: 16px">medium is 16px.
-<p style="font-size: 19.2px">large is 19.2px.
+<p style="font-size: 18px">large is 18px.
 <p style="font-size: 24px">x-large is 24px.
 <p style="font-size: 32px">xx-large is 32px.