diff --git a/components/script/dom/webidls/CSSStyleDeclaration.webidl b/components/script/dom/webidls/CSSStyleDeclaration.webidl
index 0f0b483d0b10..4314eca74f93 100644
--- a/components/script/dom/webidls/CSSStyleDeclaration.webidl
+++ b/components/script/dom/webidls/CSSStyleDeclaration.webidl
@@ -321,6 +321,14 @@ partial interface CSSStyleDeclaration {
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString right;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString left;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString bottom;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString offset-block-start;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString offsetBlockStart;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString offset-block-end;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString offsetBlockEnd;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString offset-inline-start;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString offsetInlineStart;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString offset-inline-end;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString offsetInlineEnd;
 
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString height;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString minHeight;
diff --git a/components/style/properties/helpers.mako.rs b/components/style/properties/helpers.mako.rs
index 274dc35c9982..4fdbeda88c88 100644
--- a/components/style/properties/helpers.mako.rs
+++ b/components/style/properties/helpers.mako.rs
@@ -563,13 +563,15 @@
             side = maybe_side[0]
         elif len(maybe_size) == 1:
             size = maybe_size[0]
+        def phys_ident(side, phy_side):
+            return to_rust_ident(name.replace(side, phy_side).replace("offset-", ""))
     %>
     % if side is not None:
         use logical_geometry::PhysicalSide;
         match wm.${to_rust_ident(side)}_physical_side() {
             % for phy_side in PHYSICAL_SIDES:
                 PhysicalSide::${phy_side.title()} => {
-                    ${caller.inner(physical_ident=to_rust_ident(name.replace(side, phy_side)))}
+                    ${caller.inner(physical_ident=phys_ident(side, phy_side))}
                 }
             % endfor
         }
@@ -581,9 +583,9 @@
                 physical_size = ("width", "height")
         %>
         if wm.is_vertical() {
-            ${caller.inner(physical_ident=to_rust_ident(name.replace(size, physical_size[1])))}
+            ${caller.inner(physical_ident=phys_ident(size, physical_size[1]))}
         } else {
-            ${caller.inner(physical_ident=to_rust_ident(name.replace(size, physical_size[0])))}
+            ${caller.inner(physical_ident=phys_ident(size, physical_size[0]))}
         }
     % else:
         <% raise Exception("Don't know what to do with logical property %s" % name) %>
diff --git a/components/style/properties/longhand/position.mako.rs b/components/style/properties/longhand/position.mako.rs
index 0d05c2253d88..1600045e6099 100644
--- a/components/style/properties/longhand/position.mako.rs
+++ b/components/style/properties/longhand/position.mako.rs
@@ -3,15 +3,22 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
-<% from data import ALL_SIZES %>
+<% from data import ALL_SIZES, PHYSICAL_SIDES, LOGICAL_SIDES %>
 
 <% data.new_style_struct("Position", inherited=False) %>
 
-% for side in ["top", "right", "bottom", "left"]:
+// "top" / "left" / "bottom" / "right"
+% for side in PHYSICAL_SIDES:
     ${helpers.predefined_type(side, "LengthOrPercentageOrAuto",
                               "computed::LengthOrPercentageOrAuto::Auto",
                               animatable=True)}
 % endfor
+// offset-* logical properties, map to "top" / "left" / "bottom" / "right"
+% for side in LOGICAL_SIDES:
+    ${helpers.predefined_type("offset-" + side, "LengthOrPercentageOrAuto",
+                              "computed::LengthOrPercentageOrAuto::Auto",
+                              animatable=True, logical=True)}
+% endfor
 
 <%helpers:longhand name="z-index" animatable="True">
     use values::NoViewportPercentage;