Issue #1826 - Support calc() in media queries

This commit is contained in:
Basilisk-Dev 2026-05-05 21:18:24 -04:00 • committed by EAZYBLACK
commit adde59de74
3 changed files with 14 additions and 5 deletions

View file

@ -310,7 +310,8 @@ nsMediaExpression::Matches(nsPresContext *aPresContext,
case nsMediaFeature::eLength: case nsMediaFeature::eLength:
{ {
NS_ASSERTION(actual.IsLengthUnit(), "bad actual value"); NS_ASSERTION(actual.IsLengthUnit(), "bad actual value");
NS_ASSERTION(required.IsLengthUnit(), "bad required value"); NS_ASSERTION(required.IsLengthUnit() || required.IsCalcUnit(),
"bad required value");
nscoord actualCoord = nsRuleNode::CalcLengthWithInitialFont( nscoord actualCoord = nsRuleNode::CalcLengthWithInitialFont(
aPresContext, actual); aPresContext, actual);
nscoord requiredCoord = nsRuleNode::CalcLengthWithInitialFont( nscoord requiredCoord = nsRuleNode::CalcLengthWithInitialFont(
@ -649,7 +650,8 @@ nsMediaQuery::AppendToString(nsAString& aString) const
} }
switch (feature->mValueType) { switch (feature->mValueType) {
case nsMediaFeature::eLength: case nsMediaFeature::eLength:
NS_ASSERTION(expr.mValue.IsLengthUnit(), "bad unit"); NS_ASSERTION(expr.mValue.IsLengthUnit() || expr.mValue.IsCalcUnit(),
"bad unit");
// Use 'width' as a property that takes length values // Use 'width' as a property that takes length values
// written in the normal way. // written in the normal way.
expr.mValue.AppendToString(eCSSProperty_width, aString, expr.mValue.AppendToString(eCSSProperty_width, aString,

View file

@ -3998,7 +3998,7 @@ CSSParserImpl::ParseMediaQueryExpression(nsMediaQuery* aQuery)
bool rv = false; bool rv = false;
switch (feature->mValueType) { switch (feature->mValueType) {
case nsMediaFeature::eLength: case nsMediaFeature::eLength:
rv = ParseSingleTokenNonNegativeVariant(expr->mValue, VARIANT_LENGTH, rv = ParseSingleTokenNonNegativeVariant(expr->mValue, VARIANT_LCALC,
nullptr); nullptr);
break; break;
case nsMediaFeature::eInteger: case nsMediaFeature::eInteger:

View file

@ -237,6 +237,7 @@ function run() {
expression_should_be_parseable(feature + ": 0"); expression_should_be_parseable(feature + ": 0");
expression_should_be_parseable(feature + ": 0px"); expression_should_be_parseable(feature + ": 0px");
expression_should_be_parseable(feature + ": 0em"); expression_should_be_parseable(feature + ": 0em");
expression_should_be_parseable(feature + ": calc(0px + 0em)");
expression_should_be_parseable(feature + ": -0"); expression_should_be_parseable(feature + ": -0");
expression_should_be_parseable("min-" + feature + ": -0"); expression_should_be_parseable("min-" + feature + ": -0");
expression_should_be_parseable("max-" + feature + ": -0"); expression_should_be_parseable("max-" + feature + ": -0");
@ -244,6 +245,7 @@ function run() {
expression_should_be_parseable(feature + ": 1px"); expression_should_be_parseable(feature + ": 1px");
expression_should_be_parseable(feature + ": 0.001mm"); expression_should_be_parseable(feature + ": 0.001mm");
expression_should_be_parseable(feature + ": 100000px"); expression_should_be_parseable(feature + ": 100000px");
expression_should_not_be_parseable(feature + ": calc(1px + 1%)");
expression_should_not_be_parseable(feature + ": -1px"); expression_should_not_be_parseable(feature + ": -1px");
expression_should_not_be_parseable("min-" + feature + ": -1px"); expression_should_not_be_parseable("min-" + feature + ": -1px");
expression_should_not_be_parseable("max-" + feature + ": -1px"); expression_should_not_be_parseable("max-" + feature + ": -1px");
@ -263,8 +265,9 @@ function run() {
var content_div = document.getElementById("content"); var content_div = document.getElementById("content");
content_div.style.font = "initial"; content_div.style.font = "initial";
var em_size = var em_size = parseFloat(
getComputedStyle(content_div, "").fontSize.match(/^(\d+)px$/)[1]; getComputedStyle(content_div, "").fontSize.match(/^(\d+)px$/)[1]
);
// in this test, assume the common underlying implementation is correct // in this test, assume the common underlying implementation is correct
var width_val = 117; // pick two not-too-round numbers var width_val = 117; // pick two not-too-round numbers
@ -282,7 +285,11 @@ function run() {
for (feature in features) { for (feature in features) {
var value = features[feature]; var value = features[feature];
should_apply("all and (" + feature + ": " + value + "px)"); should_apply("all and (" + feature + ": " + value + "px)");
should_apply("all and (" + feature + ": calc(" +
(value - em_size) + "px + 1em))");
should_not_apply("all and (" + feature + ": " + (value + 1) + "px)"); should_not_apply("all and (" + feature + ": " + (value + 1) + "px)");
should_not_apply("all and (" + feature + ": calc(" +
(value - em_size + 1) + "px + 1em))");
should_not_apply("all and (" + feature + ": " + (value - 1) + "px)"); should_not_apply("all and (" + feature + ": " + (value - 1) + "px)");
should_apply("all and (min-" + feature + ": " + value + "px)"); should_apply("all and (min-" + feature + ": " + value + "px)");
should_not_apply("all and (min-" + feature + ": " + (value + 1) + "px)"); should_not_apply("all and (min-" + feature + ": " + (value + 1) + "px)");