diff --git a/components/style/properties/longhands/inherited_text.mako.rs b/components/style/properties/longhands/inherited_text.mako.rs
index 9784e2529e9..f01bedb177e 100644
--- a/components/style/properties/longhands/inherited_text.mako.rs
+++ b/components/style/properties/longhands/inherited_text.mako.rs
@@ -382,8 +382,8 @@ ${helpers.single_keyword(
 // text underline offset
 ${helpers.predefined_type(
     "text-underline-offset",
-    "TextDecorationLength",
-    "generics::text::GenericTextDecorationLength::Auto",
+    "LengthPercentageOrAuto",
+    "computed::LengthPercentageOrAuto::auto()",
     engines="gecko",
     animation_value_type="ComputedValue",
     gecko_pref="layout.css.text-underline-offset.enabled",
diff --git a/components/style/values/computed/text.rs b/components/style/values/computed/text.rs
index 57a142860d9..0ca2e6044ed 100644
--- a/components/style/values/computed/text.rs
+++ b/components/style/values/computed/text.rs
@@ -27,7 +27,7 @@ pub use crate::values::specified::{TextDecorationSkipInk, TextTransform};
 /// A computed value for the `initial-letter` property.
 pub type InitialLetter = GenericInitialLetter<CSSFloat, CSSInteger>;
 
-/// Implements type for `text-underline-offset` and `text-decoration-thickness` properties
+/// Implements type for `text-decoration-thickness` property.
 pub type TextDecorationLength = GenericTextDecorationLength<LengthPercentage>;
 
 /// A computed value for the `letter-spacing` property.
diff --git a/components/style/values/generics/text.rs b/components/style/values/generics/text.rs
index 6ad983e00f9..ceeb59a3d0c 100644
--- a/components/style/values/generics/text.rs
+++ b/components/style/values/generics/text.rs
@@ -123,8 +123,8 @@ impl<N, L> LineHeight<N, L> {
     }
 }
 
-/// Implements type for text-underline-offset and text-decoration-thickness
-/// which take the grammar of auto | from-font | <length> | <percentage>
+/// Implements type for text-decoration-thickness
+/// which takes the grammar of auto | from-font | <length> | <percentage>
 ///
 /// https://drafts.csswg.org/css-text-decor-4/
 #[repr(C, u8)]
diff --git a/components/style/values/specified/text.rs b/components/style/values/specified/text.rs
index 835fefa292a..438b926802f 100644
--- a/components/style/values/specified/text.rs
+++ b/components/style/values/specified/text.rs
@@ -1029,7 +1029,7 @@ pub enum TextDecorationSkipInk {
     None,
 }
 
-/// Implements type for `text-underline-offset` and `text-decoration-thickness` properties
+/// Implements type for `text-decoration-thickness` property
 pub type TextDecorationLength = GenericTextDecorationLength<LengthPercentage>;
 
 impl TextDecorationLength {
@@ -1048,21 +1048,23 @@ impl TextDecorationLength {
 
 bitflags! {
     #[derive(MallocSizeOf, SpecifiedValueInfo, ToComputedValue, ToResolvedValue, ToShmem)]
-    #[value_info(other_values = "auto,under,left,right")]
+    #[value_info(other_values = "auto,from-font,under,left,right")]
     #[repr(C)]
     /// Specified keyword values for the text-underline-position property.
-    /// (Non-exclusive, but not all combinations are allowed: only `under` may occur
-    /// together with either `left` or `right`.)
-    /// https://drafts.csswg.org/css-text-decor-3/#text-underline-position-property
+    /// (Non-exclusive, but not all combinations are allowed: the spec grammar gives
+    /// `auto | [ from-font | under ] || [ left | right ]`.)
+    /// https://drafts.csswg.org/css-text-decor-4/#text-underline-position-property
     pub struct TextUnderlinePosition: u8 {
         /// Use automatic positioning below the alphabetic baseline.
         const AUTO = 0;
+        /// Use underline position from the first available font.
+        const FROM_FONT = 1 << 0;
         /// Below the glyph box.
-        const UNDER = 1 << 0;
+        const UNDER = 1 << 1;
         /// In vertical mode, place to the left of the text.
-        const LEFT = 1 << 1;
+        const LEFT = 1 << 2;
         /// In vertical mode, place to the right of the text.
-        const RIGHT = 1 << 2;
+        const RIGHT = 1 << 3;
     }
 }
 
@@ -1085,7 +1087,12 @@ impl Parse for TextUnderlinePosition {
                 "auto" if result.is_empty() => {
                     return Ok(result);
                 },
-                "under" if !result.intersects(TextUnderlinePosition::UNDER) => {
+                "from-font" if !result.intersects(TextUnderlinePosition::FROM_FONT |
+                                                  TextUnderlinePosition::UNDER) => {
+                    result.insert(TextUnderlinePosition::FROM_FONT);
+                },
+                "under" if !result.intersects(TextUnderlinePosition::FROM_FONT |
+                                              TextUnderlinePosition::UNDER) => {
                     result.insert(TextUnderlinePosition::UNDER);
                 },
                 "left" if !result.intersects(TextUnderlinePosition::LEFT |
@@ -1131,6 +1138,7 @@ impl ToCss for TextUnderlinePosition {
             };
         }
 
+        maybe_write!(FROM_FONT => "from-font");
         maybe_write!(UNDER => "under");
         maybe_write!(LEFT => "left");
         maybe_write!(RIGHT => "right");