diff --git a/layout/style/ServoStyleConstsInlines.h b/layout/style/ServoStyleConstsInlines.h
index 39d0efce00a8..50893f511292 100644
--- a/layout/style/ServoStyleConstsInlines.h
+++ b/layout/style/ServoStyleConstsInlines.h
@@ -700,9 +700,12 @@ CSSCoord StyleCalcLengthPercentage::ResolveToCSSPixels(CSSCoord aBasis) const {
   return Servo_ResolveCalcLengthPercentage(this, aBasis);
 }
 
-nscoord StyleCalcLengthPercentage::Resolve(nscoord aBasis) const {
-  return detail::DefaultLengthToAppUnits(
-      ResolveToCSSPixels(CSSPixel::FromAppUnits(aBasis)));
+template <typename Rounder>
+nscoord StyleCalcLengthPercentage::Resolve(nscoord aBasis,
+                                           Rounder aRounder) const {
+  static_assert(std::is_same_v<decltype(aRounder(1.0f)), nscoord>);
+  CSSCoord result = ResolveToCSSPixels(CSSPixel::FromAppUnits(aBasis));
+  return aRounder(result * AppUnitsPerCSSPixel());
 }
 
 template <>
@@ -727,11 +730,10 @@ CSSCoord LengthPercentage::ResolveToCSSPixelsWith(T aPercentageGetter) const {
   return ResolveToCSSPixels(aPercentageGetter());
 }
 
-template <typename T, typename PercentRounder>
-nscoord LengthPercentage::Resolve(T aPercentageGetter,
-                                  PercentRounder aPercentRounder) const {
+template <typename T, typename Rounder>
+nscoord LengthPercentage::Resolve(T aPercentageGetter, Rounder aRounder) const {
   static_assert(std::is_same_v<decltype(aPercentageGetter()), nscoord>);
-  static_assert(std::is_same_v<decltype(aPercentRounder(1.0f)), nscoord>);
+  static_assert(std::is_same_v<decltype(aRounder(1.0f)), nscoord>);
   if (ConvertsToLength()) {
     return ToLength();
   }
@@ -740,9 +742,9 @@ nscoord LengthPercentage::Resolve(T aPercentageGetter,
   }
   nscoord basis = aPercentageGetter();
   if (IsPercentage()) {
-    return aPercentRounder(basis * AsPercentage()._0);
+    return aRounder(basis * AsPercentage()._0);
   }
-  return AsCalc().Resolve(basis);
+  return AsCalc().Resolve(basis, aRounder);
 }
 
 nscoord LengthPercentage::Resolve(nscoord aPercentageBasis) const {
@@ -755,11 +757,10 @@ nscoord LengthPercentage::Resolve(T aPercentageGetter) const {
   return Resolve(aPercentageGetter, detail::DefaultPercentLengthToAppUnits);
 }
 
-template <typename PercentRounder>
+template <typename Rounder>
 nscoord LengthPercentage::Resolve(nscoord aPercentageBasis,
-                                  PercentRounder aPercentRounder) const {
-  return Resolve([aPercentageBasis] { return aPercentageBasis; },
-                 aPercentRounder);
+                                  Rounder aRounder) const {
+  return Resolve([aPercentageBasis] { return aPercentageBasis; }, aRounder);
 }
 
 void LengthPercentage::ScaleLengthsBy(float aScale) {
diff --git a/servo/ports/geckolib/cbindgen.toml b/servo/ports/geckolib/cbindgen.toml
index 69e622674ef7..3edab4dfbbfb 100644
--- a/servo/ports/geckolib/cbindgen.toml
+++ b/servo/ports/geckolib/cbindgen.toml
@@ -368,7 +368,8 @@ renaming_overrides_prefixing = true
 
 "CalcLengthPercentage" = """
   inline CSSCoord ResolveToCSSPixels(CSSCoord aBasis) const;
-  inline nscoord Resolve(nscoord aBasis) const;
+  template<typename Rounder>
+  inline nscoord Resolve(nscoord aBasis, Rounder) const;
 """
 
 "GenericCalcNode" = """
@@ -429,10 +430,10 @@ renaming_overrides_prefixing = true
   inline bool IsDefinitelyZero() const;
   inline CSSCoord ResolveToCSSPixels(CSSCoord aPercentageBasisInCSSPixels) const;
   template<typename T> inline CSSCoord ResolveToCSSPixelsWith(T aPercentageGetter) const;
-  template<typename T, typename PercentRounder>
-  inline nscoord Resolve(T aPercentageGetter, PercentRounder) const;
-  template<typename PercentRounder>
-  inline nscoord Resolve(nscoord aPercentageBasis, PercentRounder) const;
+  template<typename T, typename Rounder>
+  inline nscoord Resolve(T aPercentageGetter, Rounder) const;
+  template<typename Rounder>
+  inline nscoord Resolve(nscoord aPercentageBasis, Rounder) const;
   template<typename T> inline nscoord Resolve(T aPercentageGetter) const;
   inline nscoord Resolve(nscoord aPercentageBasis) const;
 """
diff --git a/testing/web-platform/meta/css/css-values/calc-rounding-001.html.ini b/testing/web-platform/meta/css/css-values/calc-rounding-001.html.ini
new file mode 100644
index 000000000000..4d4e97b22a3d
--- /dev/null
+++ b/testing/web-platform/meta/css/css-values/calc-rounding-001.html.ini
@@ -0,0 +1,3 @@
+[calc-rounding-001.html]
+  expected: FAIL
+  bug: 1881220
diff --git a/testing/web-platform/meta/css/css-values/calc-rounding-002.html.ini b/testing/web-platform/meta/css/css-values/calc-rounding-002.html.ini
new file mode 100644
index 000000000000..8682654c8cc7
--- /dev/null
+++ b/testing/web-platform/meta/css/css-values/calc-rounding-002.html.ini
@@ -0,0 +1,3 @@
+[calc-rounding-002.html]
+  expected: FAIL
+  bug: 1881220
diff --git a/testing/web-platform/tests/css/css-values/calc-rounding-003-ref.html b/testing/web-platform/tests/css/css-values/calc-rounding-003-ref.html
new file mode 100644
index 000000000000..e80dd7b95c88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-rounding-003-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+  .outer {
+    width: 100px;
+    height: 40px;
+    border: 1px solid;
+  }
+</style>
+<div class="outer"></div>
diff --git a/testing/web-platform/tests/css/css-values/calc-rounding-003.html b/testing/web-platform/tests/css/css-values/calc-rounding-003.html
new file mode 100644
index 000000000000..bf609e1c1d4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-rounding-003.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1893127">
+<link rel="help" href="https://drafts.csswg.org/css-values/#funcdef-calc">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="match" href="calc-rounding-003-ref.html">
+<style>
+  .outer {
+    width: 100px;
+    border: 1px solid;
+  }
+  .inner {
+    height: 40px;
+    vertical-align: top;
+    display: inline-block;
+    --margin: 4.009px;
+    width: calc(50% - 2 * var(--margin));
+    margin-inline: var(--margin);
+  }
+</style>
+<div class="outer"
+  ><div class="inner"></div
+  ><div class="inner"></div
+></div>