--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@@ -3137,16 +3137,17 @@ exports.CSS_PROPERTIES = {
       "overscroll-behavior-x",
       "overscroll-behavior-y",
       "scroll-snap-coordinate",
       "scroll-snap-destination",
       "scroll-snap-points-x",
       "scroll-snap-points-y",
       "scroll-snap-type-x",
       "scroll-snap-type-y",
+      "shape-image-threshold",
       "shape-outside",
       "shape-rendering",
       "-moz-stack-sizing",
       "stop-color",
       "stop-opacity",
       "stroke",
       "stroke-dasharray",
       "stroke-dashoffset",
@@ -3422,16 +3423,17 @@ exports.CSS_PROPERTIES = {
       "flip",
       "flow-root",
       "forwards",
       "from-image",
       "full-width",
       "geometricprecision",
       "grab",
       "grabbing",
+      "grayscale",
       "grid",
       "groove",
       "groupbox",
       "hanging",
       "hard-light",
       "help",
       "hidden",
       "hide",
@@ -10056,16 +10058,20 @@ exports.PREFERENCES = [
     "scroll-snap-type-x",
     "layout.css.scroll-snap.enabled"
   ],
   [
     "scroll-snap-type-y",
     "layout.css.scroll-snap.enabled"
   ],
   [
+    "shape-image-threshold",
+    "layout.css.shape-outside.enabled"
+  ],
+  [
     "shape-outside",
     "layout.css.shape-outside.enabled"
   ],
   [
     "text-combine-upright",
     "layout.css.text-combine-upright.enabled"
   ],
   [

--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -3754,16 +3754,26 @@ CSS_PROP_DISPLAY(
     ScrollSnapTypeY,
     CSS_PROPERTY_PARSE_VALUE,
     "layout.css.scroll-snap.enabled",
     VARIANT_HK,
     kScrollSnapTypeKTable,
     CSS_PROP_NO_OFFSET,
     eStyleAnimType_Discrete)
 CSS_PROP_DISPLAY(
+    shape-image-threshold,
+    shape_image_threshold,
+    ShapeImageThreshold,
+    CSS_PROPERTY_PARSE_VALUE,
+    "layout.css.shape-outside.enabled",
+    VARIANT_HN,
+    nullptr,
+    offsetof(nsStyleDisplay, mShapeImageThreshold),
+    eStyleAnimType_float)
+CSS_PROP_DISPLAY(
     shape-outside,
     shape_outside,
     ShapeOutside,
     CSS_PROPERTY_PARSE_VALUE |
         CSS_PROPERTY_VALUE_PARSER_FUNCTION |
         CSS_PROPERTY_APPLIES_TO_FIRST_LETTER |
         CSS_PROPERTY_START_IMAGE_LOADS |
         CSS_PROPERTY_STORES_CALC,

--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -6565,16 +6565,24 @@ nsComputedDOMStyle::GetShapeSource(
 already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetClipPath()
 {
   return GetShapeSource(StyleSVGReset()->mClipPath,
                         nsCSSProps::kClipPathGeometryBoxKTable);
 }
 
 already_AddRefed<CSSValue>
+nsComputedDOMStyle::DoGetShapeImageThreshold()
+{
+  RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
+  val->SetNumber(StyleDisplay()->mShapeImageThreshold);
+  return val.forget();
+}
+
+already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetShapeOutside()
 {
   return GetShapeSource(StyleDisplay()->mShapeOutside,
                         nsCSSProps::kShapeOutsideShapeBoxKTable);
 }
 
 void
 nsComputedDOMStyle::SetCssTextToCoord(nsAString& aCssText,

--- a/layout/style/nsComputedDOMStyle.h
+++ b/layout/style/nsComputedDOMStyle.h
@@ -520,16 +520,17 @@ private:
   already_AddRefed<CSSValue> DoGetOverscrollBehaviorY();
   already_AddRefed<CSSValue> DoGetScrollSnapType();
   already_AddRefed<CSSValue> DoGetScrollSnapTypeX();
   already_AddRefed<CSSValue> DoGetScrollSnapTypeY();
   already_AddRefed<CSSValue> DoGetScrollSnapPointsX();
   already_AddRefed<CSSValue> DoGetScrollSnapPointsY();
   already_AddRefed<CSSValue> DoGetScrollSnapDestination();
   already_AddRefed<CSSValue> DoGetScrollSnapCoordinate();
+  already_AddRefed<CSSValue> DoGetShapeImageThreshold();
   already_AddRefed<CSSValue> DoGetShapeOutside();
 
   /* User interface properties */
   already_AddRefed<CSSValue> DoGetCaretColor();
   already_AddRefed<CSSValue> DoGetCursor();
   already_AddRefed<CSSValue> DoGetForceBrokenImageIcon();
   already_AddRefed<CSSValue> DoGetIMEMode();
   already_AddRefed<CSSValue> DoGetUserFocus();

--- a/layout/style/nsComputedDOMStylePropertyList.h
+++ b/layout/style/nsComputedDOMStylePropertyList.h
@@ -225,16 +225,17 @@ COMPUTED_STYLE_PROP(ruby_align,         
 COMPUTED_STYLE_PROP(ruby_position,                 RubyPosition)
 COMPUTED_STYLE_PROP(scroll_behavior,               ScrollBehavior)
 COMPUTED_STYLE_PROP(scroll_snap_coordinate,        ScrollSnapCoordinate)
 COMPUTED_STYLE_PROP(scroll_snap_destination,       ScrollSnapDestination)
 COMPUTED_STYLE_PROP(scroll_snap_points_x,          ScrollSnapPointsX)
 COMPUTED_STYLE_PROP(scroll_snap_points_y,          ScrollSnapPointsY)
 COMPUTED_STYLE_PROP(scroll_snap_type_x,            ScrollSnapTypeX)
 COMPUTED_STYLE_PROP(scroll_snap_type_y,            ScrollSnapTypeY)
+COMPUTED_STYLE_PROP(shape_image_threshold,         ShapeImageThreshold)
 COMPUTED_STYLE_PROP(shape_outside,                 ShapeOutside)
 //// COMPUTED_STYLE_PROP(size,                     Size)
 COMPUTED_STYLE_PROP(table_layout,                  TableLayout)
 COMPUTED_STYLE_PROP(text_align,                    TextAlign)
 COMPUTED_STYLE_PROP(text_align_last,               TextAlignLast)
 COMPUTED_STYLE_PROP(text_combine_upright,          TextCombineUpright)
 COMPUTED_STYLE_PROP(text_decoration,               TextDecoration)
 COMPUTED_STYLE_PROP(text_decoration_color,         TextDecorationColor)

--- a/layout/style/nsRuleNode.cpp
+++ b/layout/style/nsRuleNode.cpp
@@ -6415,16 +6415,22 @@ nsRuleNode::ComputeDisplayData(void* aSt
 
   // orient: enum, inherit, initial
   SetValue(*aRuleData->ValueForOrient(),
            display->mOrient, conditions,
            SETVAL_ENUMERATED | SETVAL_UNSET_INITIAL,
            parentDisplay->mOrient,
            StyleOrient::Inline);
 
+  // shape-image-threshold: number, inherit, initial
+  SetFactor(*aRuleData->ValueForShapeImageThreshold(),
+            display->mShapeImageThreshold, conditions,
+            parentDisplay->mShapeImageThreshold, 0.0f,
+            SETFCT_OPACITY | SETFCT_UNSET_INITIAL);
+
   // shape-outside: none | [ <basic-shape> || <shape-box> ] | <image>
   const nsCSSValue* shapeOutsideValue = aRuleData->ValueForShapeOutside();
   switch (shapeOutsideValue->GetUnit()) {
     case eCSSUnit_Null:
       break;
     case eCSSUnit_None:
     case eCSSUnit_Initial:
     case eCSSUnit_Unset:

--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -3679,16 +3679,17 @@ nsStyleDisplay::nsStyleDisplay(const nsS
   , mAnimationTimingFunctionCount(aSource.mAnimationTimingFunctionCount)
   , mAnimationDurationCount(aSource.mAnimationDurationCount)
   , mAnimationDelayCount(aSource.mAnimationDelayCount)
   , mAnimationNameCount(aSource.mAnimationNameCount)
   , mAnimationDirectionCount(aSource.mAnimationDirectionCount)
   , mAnimationFillModeCount(aSource.mAnimationFillModeCount)
   , mAnimationPlayStateCount(aSource.mAnimationPlayStateCount)
   , mAnimationIterationCountCount(aSource.mAnimationIterationCountCount)
+  , mShapeImageThreshold(aSource.mShapeImageThreshold)
   , mShapeOutside(aSource.mShapeOutside)
 {
   MOZ_COUNT_CTOR(nsStyleDisplay);
 }
 
 nsStyleDisplay::~nsStyleDisplay()
 {
   // We don't allow releasing nsCSSValues with refcounted data in the Servo
@@ -3781,33 +3782,36 @@ nsStyleDisplay::CalcDifference(const nsS
    * if this does become common perhaps a faster-path might be worth while.
    */
 
   if (mFloat != aNewData.mFloat) {
     // Changing which side we're floating on (float:none was handled above).
     hint |= nsChangeHint_ReflowHintsForFloatAreaChange;
   }
 
-  if (mShapeOutside != aNewData.mShapeOutside) {
+  if (mShapeOutside != aNewData.mShapeOutside ||
+      mShapeImageThreshold != aNewData.mShapeImageThreshold) {
     if (aNewData.mFloat != StyleFloat::None) {
-      // If we are floating, and our shape-outside property changes, our
-      // descendants are not impacted, but our ancestor and siblings are.
+      // If we are floating, and our shape-outside or shape-image-threshold
+      // are changed, our descendants are not impacted, but our ancestor and
+      // siblings are.
+      //
       // This is similar to a float-only change, but since the ISize of the
       // float area changes arbitrarily along its block axis, more is required
       // to get the siblings to adjust properly. Hinting overflow change is
       // sufficient to trigger the correct calculation, but may be too
       // heavyweight.
 
       // XXX What is the minimum hint to ensure mShapeInfo is regenerated in
       // the next reflow?
       hint |= nsChangeHint_ReflowHintsForFloatAreaChange |
               nsChangeHint_CSSOverflowChange;
     } else {
-      // shape-outside changed, but we don't need to reflow because we're not
-      // floating.
+      // shape-outside or shape-image-threshold changed, but we don't need
+      // to reflow because we're not floating.
       hint |= nsChangeHint_NeutralChange;
     }
   }
 
   if (mVerticalAlign != aNewData.mVerticalAlign) {
     // XXX Can this just be AllReflowHints + RepaintFrame, and be included in
     // the block below?
     hint |= NS_STYLE_HINT_REFLOW;

--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@@ -2617,16 +2617,20 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsSt
            mAnimationDurationCount,
            mAnimationDelayCount,
            mAnimationNameCount,
            mAnimationDirectionCount,
            mAnimationFillModeCount,
            mAnimationPlayStateCount,
            mAnimationIterationCountCount;
 
+
+  // The threshold used for extracting a shape from shape-outside: <image>.
+  float mShapeImageThreshold = 0.0f; // [reset]
+
   mozilla::StyleShapeSource mShapeOutside; // [reset]
 
   bool IsBlockInsideStyle() const {
     return mozilla::StyleDisplay::Block == mDisplay ||
            mozilla::StyleDisplay::ListItem == mDisplay ||
            mozilla::StyleDisplay::InlineBlock == mDisplay ||
            mozilla::StyleDisplay::TableCaption == mDisplay ||
            mozilla::StyleDisplay::FlowRoot == mDisplay;