Make Servo compatible with Stylo with prefers-color-scheme support (#34423)

* Make Servo compatible with Stylo with prefer-color-scheme support

Signed-off-by: Nico Burns <nico@nicoburns.com>

Update imports to work with deduped version of stylo PR

Signed-off-by: Nico Burns <nico@nicoburns.com>

Switch back to stylo main branch

Signed-off-by: Nico Burns <nico@nicoburns.com>

* Fix unit tests

Signed-off-by: Nico Burns <nico@nicoburns.com>

* Update text expectations

Signed-off-by: Nico Burns <nico@nicoburns.com>

---------

Signed-off-by: Nico Burns <nico@nicoburns.com>

Cargo.lock

@@ -1617,7 +1617,7 @@ dependencies = [
 [[package]]
 name = "dom"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2024-11-01#4eb9da3b639baab6b16a43b8512b5c11c087fc2c"
+source = "git+https://github.com/servo/stylo?branch=2024-11-01#16c1b6858581ab837f04a30cc5bc762ca1cbad23"
 dependencies = [
  "bitflags 2.6.0",
  "malloc_size_of",
@@ -4246,7 +4246,7 @@ dependencies = [
 [[package]]
 name = "malloc_size_of"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2024-11-01#4eb9da3b639baab6b16a43b8512b5c11c087fc2c"
+source = "git+https://github.com/servo/stylo?branch=2024-11-01#16c1b6858581ab837f04a30cc5bc762ca1cbad23"
 dependencies = [
  "app_units",
  "cssparser",
@@ -6196,7 +6196,7 @@ dependencies = [
 [[package]]
 name = "selectors"
 version = "0.26.0"
-source = "git+https://github.com/servo/stylo?branch=2024-11-01#4eb9da3b639baab6b16a43b8512b5c11c087fc2c"
+source = "git+https://github.com/servo/stylo?branch=2024-11-01#16c1b6858581ab837f04a30cc5bc762ca1cbad23"
 dependencies = [
  "bitflags 2.6.0",
  "cssparser",
@@ -6484,7 +6484,7 @@ dependencies = [
 [[package]]
 name = "servo_arc"
 version = "0.4.0"
-source = "git+https://github.com/servo/stylo?branch=2024-11-01#4eb9da3b639baab6b16a43b8512b5c11c087fc2c"
+source = "git+https://github.com/servo/stylo?branch=2024-11-01#16c1b6858581ab837f04a30cc5bc762ca1cbad23"
 dependencies = [
  "serde",
  "stable_deref_trait",
@@ -6493,7 +6493,7 @@ dependencies = [
 [[package]]
 name = "servo_atoms"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2024-11-01#4eb9da3b639baab6b16a43b8512b5c11c087fc2c"
+source = "git+https://github.com/servo/stylo?branch=2024-11-01#16c1b6858581ab837f04a30cc5bc762ca1cbad23"
 dependencies = [
  "string_cache",
  "string_cache_codegen",
@@ -6866,7 +6866,7 @@ checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
 [[package]]
 name = "static_prefs"
 version = "0.1.0"
-source = "git+https://github.com/servo/stylo?branch=2024-11-01#4eb9da3b639baab6b16a43b8512b5c11c087fc2c"
+source = "git+https://github.com/servo/stylo?branch=2024-11-01#16c1b6858581ab837f04a30cc5bc762ca1cbad23"
 
 [[package]]
 name = "strck"
@@ -6925,7 +6925,7 @@ checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"
 [[package]]
 name = "style"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2024-11-01#4eb9da3b639baab6b16a43b8512b5c11c087fc2c"
+source = "git+https://github.com/servo/stylo?branch=2024-11-01#16c1b6858581ab837f04a30cc5bc762ca1cbad23"
 dependencies = [
  "app_units",
  "arrayvec",
@@ -6983,7 +6983,7 @@ dependencies = [
 [[package]]
 name = "style_config"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2024-11-01#4eb9da3b639baab6b16a43b8512b5c11c087fc2c"
+source = "git+https://github.com/servo/stylo?branch=2024-11-01#16c1b6858581ab837f04a30cc5bc762ca1cbad23"
 dependencies = [
  "lazy_static",
 ]
@@ -6991,7 +6991,7 @@ dependencies = [
 [[package]]
 name = "style_derive"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2024-11-01#4eb9da3b639baab6b16a43b8512b5c11c087fc2c"
+source = "git+https://github.com/servo/stylo?branch=2024-11-01#16c1b6858581ab837f04a30cc5bc762ca1cbad23"
 dependencies = [
  "darling",
  "proc-macro2",
@@ -7021,7 +7021,7 @@ dependencies = [
 [[package]]
 name = "style_traits"
 version = "0.0.1"
-source = "git+https://github.com/servo/stylo?branch=2024-11-01#4eb9da3b639baab6b16a43b8512b5c11c087fc2c"
+source = "git+https://github.com/servo/stylo?branch=2024-11-01#16c1b6858581ab837f04a30cc5bc762ca1cbad23"
 dependencies = [
  "app_units",
  "bitflags 2.6.0",
@@ -7384,7 +7384,7 @@ dependencies = [
 [[package]]
 name = "to_shmem"
 version = "0.1.0"
-source = "git+https://github.com/servo/stylo?branch=2024-11-01#4eb9da3b639baab6b16a43b8512b5c11c087fc2c"
+source = "git+https://github.com/servo/stylo?branch=2024-11-01#16c1b6858581ab837f04a30cc5bc762ca1cbad23"
 dependencies = [
  "cssparser",
  "servo_arc",
@@ -7397,7 +7397,7 @@ dependencies = [
 [[package]]
 name = "to_shmem_derive"
 version = "0.1.0"
-source = "git+https://github.com/servo/stylo?branch=2024-11-01#4eb9da3b639baab6b16a43b8512b5c11c087fc2c"
+source = "git+https://github.com/servo/stylo?branch=2024-11-01#16c1b6858581ab837f04a30cc5bc762ca1cbad23"
 dependencies = [
  "darling",
  "proc-macro2",

components/layout_thread/lib.rs

@@ -87,6 +87,7 @@ use style::logical_geometry::LogicalPoint;
 use style::media_queries::{Device, MediaList, MediaType};
 use style::properties::style_structs::Font;
 use style::properties::{ComputedValues, PropertyId};
+use style::queries::values::PrefersColorScheme;
 use style::selector_parser::{PseudoElement, SnapshotMap};
 use style::servo::media_queries::FontMetricsProvider;
 use style::servo::restyle_damage::ServoRestyleDamage;
@@ -591,6 +592,8 @@ impl LayoutThread {
             Scale::new(window_size.device_pixel_ratio.get()),
             Box::new(LayoutFontMetricsProvider),
             ComputedValues::initial_values_with_font_override(font),
+            // TODO: obtain preferred color scheme from embedder
+            PrefersColorScheme::Light,
         );
 
         LayoutThread {
@@ -1414,6 +1417,8 @@ impl LayoutThread {
             Scale::new(window_size_data.device_pixel_ratio.get()),
             Box::new(LayoutFontMetricsProvider),
             self.stylist.device().default_computed_values().to_arc(),
+            // TODO: obtain preferred color scheme from embedder
+            PrefersColorScheme::Light,
         );
 
         // Preserve any previously computed root font size.

components/layout_thread_2020/lib.rs

@@ -73,6 +73,7 @@ use style::invalidation::element::restyle_hints::RestyleHint;
 use style::media_queries::{Device, MediaList, MediaType};
 use style::properties::style_structs::Font;
 use style::properties::{ComputedValues, PropertyId};
+use style::queries::values::PrefersColorScheme;
 use style::selector_parser::{PseudoElement, SnapshotMap};
 use style::servo::media_queries::FontMetricsProvider;
 use style::shared_lock::{SharedRwLock, SharedRwLockReadGuard, StylesheetGuards};
@@ -570,6 +571,8 @@ impl LayoutThread {
             Scale::new(window_size.device_pixel_ratio.get()),
             Box::new(LayoutFontMetricsProvider(font_context.clone())),
             ComputedValues::initial_values_with_font_override(font),
+            // TODO: obtain preferred color scheme from embedder
+            PrefersColorScheme::Light,
         );
 
         LayoutThread {
@@ -1121,6 +1124,8 @@ impl LayoutThread {
             Scale::new(window_size_data.device_pixel_ratio.get()),
             Box::new(LayoutFontMetricsProvider(self.font_context.clone())),
             self.stylist.device().default_computed_values().to_arc(),
+            // TODO: obtain preferred color scheme from embedder
+            PrefersColorScheme::Light,
         );
 
         // Preserve any previously computed root font size.

tests/unit/style/custom_properties.rs

@@ -15,6 +15,7 @@ use style::font_metrics::FontMetrics;
 use style::media_queries::{Device, MediaType};
 use style::properties::style_structs::Font;
 use style::properties::{ComputedValues, CustomDeclaration, CustomDeclarationValue, StyleBuilder};
+use style::queries::values::PrefersColorScheme;
 use style::rule_cache::RuleCacheConditions;
 use style::rule_tree::CascadeLevel;
 use style::servo::media_queries::FontMetricsProvider;
@@ -72,6 +73,7 @@ fn cascade(
         Scale::new(1.0),
         Box::new(DummyMetricsProvider),
         initial_style,
+        PrefersColorScheme::Light,
     );
     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

@@ -14,6 +14,7 @@ use style::properties::style_structs::Font;
 use style::properties::{
     longhands, ComputedValues, Importance, PropertyDeclaration, PropertyDeclarationBlock,
 };
+use style::queries::values::PrefersColorScheme;
 use style::rule_tree::StyleSource;
 use style::selector_map::SelectorMap;
 use style::selector_parser::{SelectorImpl, SelectorParser};
@@ -256,6 +257,7 @@ fn mock_stylist() -> Stylist {
         Scale::new(1.0),
         Box::new(DummyMetricsProvider),
         initial_style,
+        PrefersColorScheme::Light,
     );
     Stylist::new(device, QuirksMode::NoQuirks)
 }

tests/wpt/meta/css/mediaqueries/prefers-color-scheme.html.ini

@@ -8,9 +8,6 @@
   [Should be parseable in a CSS stylesheet: '(prefers-color-scheme)']
     expected: FAIL
 
-  [Check that prefer-color-scheme evaluates to true in the boolean context]
-    expected: FAIL
-
   [Should be parseable in a CSS stylesheet: '(prefers-color-scheme: dark)']
     expected: FAIL
 
@@ -19,12 +16,3 @@
 
   [Should be parseable in JS: '(prefers-color-scheme: light)']
     expected: FAIL
-
-  [Should be known: '(prefers-color-scheme)']
-    expected: FAIL
-
-  [Should be known: '(prefers-color-scheme: light)']
-    expected: FAIL
-
-  [Should be known: '(prefers-color-scheme: dark)']
-    expected: FAIL