commit 8f2e67844e7042d39028f4b840bae28978bd9aac
parent 5641e22232ab301d9b8d19a2e0a5408cb2f85c0d
Author: Emilio Cobos Álvarez <emilio@crisal.io>
Date: Mon, 8 Dec 2025 12:11:46 +0000
Bug 2004653 - Fix parsing of custom media features. r=jwatt
Differential Revision: https://phabricator.services.mozilla.com/D275420
Diffstat:
2 files changed, 22 insertions(+), 1 deletion(-)
diff --git a/servo/components/style/queries/condition.rs b/servo/components/style/queries/condition.rs
@@ -11,7 +11,7 @@ use super::{FeatureFlags, FeatureType, QueryFeatureExpression};
use crate::custom_properties;
use crate::stylesheets::CustomMediaEvaluator;
use crate::values::{computed, AtomString, DashedIdent};
-use crate::{error_reporting::ContextualParseError, parser::ParserContext};
+use crate::{error_reporting::ContextualParseError, parser::ParserContext, parser::Parse};
use cssparser::{Parser, SourcePosition, Token};
use selectors::kleene_value::KleeneValue;
use servo_arc::Arc;
@@ -405,6 +405,11 @@ impl QueryCondition {
Ok(expr) => return Ok(Self::Feature(expr)),
Err(e) => e,
};
+ if static_prefs::pref!("layout.css.custom-media.enabled") {
+ if let Ok(custom) = input.try_parse(|input| DashedIdent::parse(context, input)) {
+ return Ok(Self::Custom(custom));
+ }
+ }
if let Ok(inner) = Self::parse(context, input, feature_type) {
return Ok(Self::InParens(Box::new(inner)));
}
diff --git a/testing/web-platform/tests/css/mediaqueries/at-custom-media-basic.html b/testing/web-platform/tests/css/mediaqueries/at-custom-media-basic.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<title>Basic custom media query</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.com" title="Mozilla">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=2004653">
+<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#custom-mq">
+<link rel="match" href="/css/reference/green.html">
+<style>
+@custom-media --foo (width > 0px);
+@media (--foo) {
+ :root {
+ background: green;
+ }
+}
+</style>
+<div></div>
