Issue #2477 - Part 2: Implement shorthand properties for [margin/padding][block/inline]

layout/style/Declaration.cpp

@@ -1474,6 +1474,10 @@ Declaration::GetPropertyValueInternal(
       }
       MOZ_FALLTHROUGH;
     }
+    case eCSSProperty_margin_block:
+    case eCSSProperty_margin_inline:
+    case eCSSProperty_padding_block:
+    case eCSSProperty_padding_inline:
     case eCSSProperty_gap: {
       const nsCSSPropertyID* subprops =
         nsCSSProps::SubpropertyEntryFor(aProperty);

layout/style/nsCSSParser.cpp

@@ -1084,12 +1084,16 @@ protected:
   bool ParseListStyle();
   bool ParseListStyleType(nsCSSValue& aValue);
   bool ParseMargin();
+  bool ParseMarginBlock();
+  bool ParseMarginInline();
   bool ParseClipPath(nsCSSValue& aValue);
   bool ParseTransform(bool aIsPrefixed, bool aDisallowRelativeValues = false);
   bool ParseObjectPosition();
   bool ParseOutline();
   bool ParseOverflow();
   bool ParsePadding();
+  bool ParsePaddingBlock();
+  bool ParsePaddingInline();
   bool ParseQuotes();
   bool ParseTextAlign(nsCSSValue& aValue,
                       const KTableEntry aTable[]);
@@ -12053,6 +12057,10 @@ CSSParserImpl::ParsePropertyByFunction(nsCSSPropertyID aPropID)
     return ParseListStyle();
   case eCSSProperty_margin:
     return ParseMargin();
+  case eCSSProperty_margin_block:
+    return ParseMarginBlock();
+  case eCSSProperty_margin_inline:
+    return ParseMarginInline();
   case eCSSProperty_object_position:
     return ParseObjectPosition();
   case eCSSProperty_outline:
@@ -12061,6 +12069,10 @@ CSSParserImpl::ParsePropertyByFunction(nsCSSPropertyID aPropID)
     return ParseOverflow();
   case eCSSProperty_padding:
     return ParsePadding();
+  case eCSSProperty_padding_block:
+    return ParsePaddingBlock();
+  case eCSSProperty_padding_inline:
+    return ParsePaddingInline();
   case eCSSProperty_quotes:
     return ParseQuotes();
   case eCSSProperty_text_decoration:
@@ -15511,6 +15523,20 @@ CSSParserImpl::ParseMargin()
   return ParseBoxProperties(kMarginSideIDs);
 }
 
+bool
+CSSParserImpl::ParseMarginBlock()
+{
+  return ParseBoxPairProperties(eCSSProperty_margin_block_start,
+                                eCSSProperty_margin_block_end);
+}
+
+bool
+CSSParserImpl::ParseMarginInline()
+{
+  return ParseBoxPairProperties(eCSSProperty_margin_inline_start,
+                                eCSSProperty_margin_inline_end);
+}
+
 bool
 CSSParserImpl::ParseObjectPosition()
 {
@@ -15597,6 +15623,20 @@ CSSParserImpl::ParsePadding()
   return ParseBoxProperties(kPaddingSideIDs);
 }
 
+bool
+CSSParserImpl::ParsePaddingBlock()
+{
+  return ParseBoxPairProperties(eCSSProperty_padding_block_start,
+                                eCSSProperty_padding_block_end);
+}
+
+bool
+CSSParserImpl::ParsePaddingInline()
+{
+  return ParseBoxPairProperties(eCSSProperty_padding_inline_start,
+                                eCSSProperty_padding_inline_end);
+}
+
 bool
 CSSParserImpl::ParseQuotes()
 {

layout/style/nsCSSPropList.h

@@ -2494,6 +2494,13 @@ CSS_PROP_SHORTHAND(
         CSS_PROPERTY_UNITLESS_LENGTH_QUIRK |
         CSS_PROPERTY_APPLIES_TO_PAGE_RULE,
     "")
+CSS_PROP_SHORTHAND(
+    margin-block,
+    margin_block,
+    MarginBlock,
+    CSS_PROPERTY_PARSE_FUNCTION |
+        CSS_PROPERTY_APPLIES_TO_PAGE_RULE,
+    "")
 CSS_PROP_LOGICAL(
     margin-block-end,
     margin_block_end,
@@ -2546,6 +2553,13 @@ CSS_PROP_MARGIN(
     nullptr,
     offsetof(nsStyleMargin, mMargin),
     eStyleAnimType_Sides_Bottom)
+CSS_PROP_SHORTHAND(
+    margin-inline,
+    margin_inline,
+    MarginInline,
+    CSS_PROPERTY_PARSE_FUNCTION |
+        CSS_PROPERTY_APPLIES_TO_PAGE_RULE,
+    "")
 CSS_PROP_LOGICAL(
     margin-inline-end,
     margin_inline_end,
@@ -3245,6 +3259,12 @@ CSS_PROP_SHORTHAND(
     CSS_PROPERTY_PARSE_FUNCTION |
         CSS_PROPERTY_UNITLESS_LENGTH_QUIRK,
     "")
+CSS_PROP_SHORTHAND(
+    padding-block,
+    padding_block,
+    PaddingBlock,
+    CSS_PROPERTY_PARSE_FUNCTION,
+    "")
 CSS_PROP_LOGICAL(
     padding-block-end,
     padding_block_end,
@@ -3303,6 +3323,12 @@ CSS_PROP_PADDING(
     nullptr,
     offsetof(nsStylePadding, mPadding),
     eStyleAnimType_Sides_Bottom)
+CSS_PROP_SHORTHAND(
+    padding-inline,
+    padding_inline,
+    PaddingInline,
+    CSS_PROPERTY_PARSE_FUNCTION,
+    "")
 CSS_PROP_LOGICAL(
     padding-inline-end,
     padding_inline_end,

layout/style/nsCSSProps.cpp

@@ -2927,6 +2927,17 @@ static const nsCSSPropertyID gMarginSubpropTable[] = {
   eCSSProperty_UNKNOWN
 };
 
+static const nsCSSPropertyID gMarginBlockSubpropTable[] = {
+  eCSSProperty_margin_block_start,
+  eCSSProperty_margin_block_end,
+  eCSSProperty_UNKNOWN
+};
+
+static const nsCSSPropertyID gMarginInlineSubpropTable[] = {
+  eCSSProperty_margin_inline_start,
+  eCSSProperty_margin_inline_end,
+  eCSSProperty_UNKNOWN
+};
 
 static const nsCSSPropertyID gOutlineSubpropTable[] = {
   // nsCSSDeclaration.cpp outputs the subproperties in this order.
@@ -3023,6 +3034,18 @@ static const nsCSSPropertyID gPaddingSubpropTable[] = {
   eCSSProperty_UNKNOWN
 };
 
+static const nsCSSPropertyID gPaddingBlockSubpropTable[] = {
+  eCSSProperty_padding_block_start,
+  eCSSProperty_padding_block_end,
+  eCSSProperty_UNKNOWN
+};
+
+static const nsCSSPropertyID gPaddingInlineSubpropTable[] = {
+  eCSSProperty_padding_inline_start,
+  eCSSProperty_padding_inline_end,
+  eCSSProperty_UNKNOWN
+};
+
 static const nsCSSPropertyID gTextDecorationSubpropTable[] = {
   eCSSProperty_text_decoration_color,
   eCSSProperty_text_decoration_line,

layout/style/test/property_database.js

@@ -1810,6 +1810,22 @@ var gCSSProperties = {
     other_values: [ "rect(3px 20px 15px 4px)", "rect(17px, 21px, 33px, 2px)" ],
     invalid_values: [ "rect(17px, 21px, 33, 2px)" ]
   },
+  "margin-inline": {
+    domProp: "marginInline",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [ "margin-inline-start", "margin-inline-end" ],
+    initial_values: [ "0", "0px 0em" ],
+    other_values: [ "1px", "3em 1%", "5%",
+      "calc(2px) 1%",
+      "calc(-2px) 1%",
+      "calc(50%) 1%",
+      "calc(3*25px) calc(2px)",
+      "calc(25px*3) 1em",
+      "calc(3*25px + 50%) calc(3*25px - 50%)",
+    ],
+    invalid_values: [ "5", "..25px", ".+5px", ".px", "-.px", "++5px", "-+4px", "+-3px", "--7px", "+-.6px", "-+.5px", "++.7px", "--.4px" ],
+  },
   "margin-inline-end": {
     domProp: "marginInlineEnd",
     inherited: false,
@@ -1959,6 +1975,22 @@ var gCSSProperties = {
             ],
     invalid_values: [ "-1px", "4px -2px", "inherit 2px", "2px inherit", "2", "2px 2", "2 2px" ]
   },
+  "padding-inline": {
+    domProp: "paddingInline",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [ "padding-inline-start", "padding-inline-end" ],
+    initial_values: [ "0", "0px 0em" ],
+    other_values: [ "1px", "3em 1%", "5%",
+      "calc(2px) 1%",
+      "calc(-2px) 1%",
+      "calc(50%) 1%",
+      "calc(3*25px) calc(2px)",
+      "calc(25px*3) 1em",
+      "calc(3*25px + 50%) calc(3*25px - 50%)",
+    ],
+    invalid_values: [ "5", "..25px", ".+5px", ".px", "-.px", "++5px", "-+4px", "+-3px", "--7px", "+-.6px", "-+.5px", "++.7px", "--.4px" ],
+  },
   "padding-inline-end": {
     domProp: "paddingInlineEnd",
     inherited: false,
@@ -5269,6 +5301,22 @@ var gCSSProperties = {
     ],
     invalid_values: [ "none" ],
   },
+  "margin-block": {
+    domProp: "marginBlock",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [ "margin-block-start", "margin-block-end" ],
+    initial_values: [ "0", "0px 0em" ],
+    other_values: [ "1px", "3em 1%", "5%",
+      "calc(2px) 1%",
+      "calc(-2px) 1%",
+      "calc(50%) 1%",
+      "calc(3*25px) calc(2px)",
+      "calc(25px*3) 1em",
+      "calc(3*25px + 50%) calc(3*25px - 50%)",
+    ],
+    invalid_values: [ "5", "..25px", ".+5px", ".px", "-.px", "++5px", "-+4px", "+-3px", "--7px", "+-.6px", "-+.5px", "++.7px", "--.4px" ],
+  },
   "margin-block-end": {
     domProp: "marginBlockEnd",
     inherited: false,
@@ -5531,6 +5579,22 @@ var gCSSProperties = {
     alias_for: "inset-inline-end",
     subproperties: [ "inset-inline-end" ],
   },
+  "padding-block": {
+    domProp: "paddingBlock",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [ "padding-block-start", "padding-block-end" ],
+    initial_values: [ "0", "0px 0em" ],
+    other_values: [ "1px", "3em 1%", "5%",
+      "calc(2px) 1%",
+      "calc(-2px) 1%",
+      "calc(50%) 1%",
+      "calc(3*25px) calc(2px)",
+      "calc(25px*3) 1em",
+      "calc(3*25px + 50%) calc(3*25px - 50%)",
+    ],
+    invalid_values: [ "5", "..25px", ".+5px", ".px", "-.px", "++5px", "-+4px", "+-3px", "--7px", "+-.6px", "-+.5px", "++.7px", "--.4px" ],
+  },
   "padding-block-end": {
     domProp: "paddingBlockEnd",
     inherited: false,