[css-logical] Allow CSS logical shorthands to be serialized in inline and computed styles

Spec: https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertyvalue

BUG=873760

TEST=external/wpt/css/css-logical/logical-box-border-color.html
TEST=external/wpt/css/css-logical/logical-box-border-shorthands.html
TEST=external/wpt/css/css-logical/logical-box-border-style.html
TEST=external/wpt/css/css-logical/logical-box-border-width.html
TEST=external/wpt/css/css-logical/logical-box-inset.html
TEST=external/wpt/css/css-logical/logical-box-margin.html
TEST=external/wpt/css/css-logical/logical-box-padding.html

Change-Id: I60fca339c419d1d19eb6b31f0426c11f9d1cf95f
Reviewed-on: https://chromium-review.googlesource.com/1176084Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: Anders Ruud <andruud@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#584027}

third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-color-expected.txt

 This is a testharness.js-based test.
 PASS Test that logical border-*-color properties are supported.
+PASS Test that border-inline-color shorthand sets longhands and serializes correctly.
+PASS Test that border-block-color shorthand sets longhands and serializes correctly.
+PASS Test that border-color shorthand sets longhands and serializes correctly.
 PASS Test that logical border-*-color properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that border-*-color properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.

third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-shorthands-expected.txt

 This is a testharness.js-based test.
 PASS Test that logical border-* properties are supported.
+PASS Test that border-inline shorthand sets longhands and serializes correctly.
+PASS Test that border-block shorthand sets longhands and serializes correctly.
+PASS Test that border shorthand sets longhands and serializes correctly.
 PASS Test that logical border-* properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that border-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.

third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-style-expected.txt

 This is a testharness.js-based test.
 PASS Test that logical border-*-style properties are supported.
+PASS Test that border-inline-style shorthand sets longhands and serializes correctly.
+PASS Test that border-block-style shorthand sets longhands and serializes correctly.
+PASS Test that border-style shorthand sets longhands and serializes correctly.
 PASS Test that logical border-*-style properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that border-*-style properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.

third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-border-width-expected.txt

 This is a testharness.js-based test.
 PASS Test that logical border-*-width properties are supported.
+PASS Test that border-inline-width shorthand sets longhands and serializes correctly.
+PASS Test that border-block-width shorthand sets longhands and serializes correctly.
+PASS Test that border-width shorthand sets longhands and serializes correctly.
 PASS Test that logical border-*-width properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that border-*-width properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.

third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-inset-expected.txt

 This is a testharness.js-based test.
 PASS Test that logical inset-* properties are supported.
+PASS Test that inset-inline shorthand sets longhands and serializes correctly.
+PASS Test that inset-block shorthand sets longhands and serializes correctly.
+PASS Test that inset shorthand sets longhands and serializes correctly.
 PASS Test that logical inset-* properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that inset-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that inset-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.

third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-margin-expected.txt

 This is a testharness.js-based test.
 PASS Test that logical margin-* properties are supported.
+PASS Test that margin-inline shorthand sets longhands and serializes correctly.
+PASS Test that margin-block shorthand sets longhands and serializes correctly.
+PASS Test that margin shorthand sets longhands and serializes correctly.
 PASS Test that logical margin-* properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that margin-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.

third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-padding-expected.txt

 This is a testharness.js-based test.
 PASS Test that logical padding-* properties are supported.
+PASS Test that padding-inline shorthand sets longhands and serializes correctly.
+PASS Test that padding-block shorthand sets longhands and serializes correctly.
+PASS Test that padding shorthand sets longhands and serializes correctly.
 PASS Test that logical padding-* properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that padding-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.

third_party/WebKit/LayoutTests/external/wpt/css/css-logical/resources/test-box-properties.js

@@ -23,9 +23,10 @@ const testValues = {
  *     inlineStart: "margin-inline-start", inlineEnd: "margin-inline-end",
  *     blockStart: "margin-block-start", blockEnd: "margin-block-end",
  *   }, shorthands: {
- *     inline: ["margin-inline-start", "margin-inline-end"],
- *     block: ["margin-block-start", "margin-block-end"],
- *   }, type: ["length"], prerequisites: "...", property: "'margin-*'" }
+ *     "margin": ["margin-top", "margin-right", "margin-bottom", "margin-left"],
+ *     "margin-inline": ["margin-inline-start", "margin-inline-end"],
+ *     "margin-block": ["margin-block-start", "margin-block-end"],
+ *   }, type: ["length"], prerequisites: "...", property: "margin-*" }
  *
  * @param {string} property
  *        A string representing the property names, like "margin-*".
@@ -59,8 +60,10 @@ export function createBoxPropertyGroup(property, descriptor) {
     physical[physicalSide] = isInset ? physicalSide : property.replace("*", physicalSide);
     prerequisites += makeDeclaration(descriptor.prerequisites, physicalSide);
   }
+  shorthands[property.replace("-*", "")] =
+    ["top", "right", "bottom", "left"].map(physicalSide => physical[physicalSide]);
   const type = [].concat(descriptor.type);
-  return {name, logical, physical, shorthands, type, prerequisites, property};
+  return {logical, physical, shorthands, type, prerequisites, property};
 }
 
 /**
@@ -109,6 +112,29 @@ export function runTests(group) {
   }, `Test that logical ${group.property} properties are supported.`);
   testElement.style.cssText = "";
 
+  const shorthandValues = {};
+  for (const [shorthand, longhands] of shorthands || []) {
+    let valueArray;
+    if (group.type.length > 1) {
+      valueArray = [values[0]];
+    } else {
+      valueArray = testValues[group.type].slice(0, longhands.length);
+    }
+    shorthandValues[shorthand] = valueArray;
+    const value = valueArray.join(" ");
+    const expected = [[shorthand, value]];
+    for (let [i, longhand] of longhands.entries()) {
+      expected.push([longhand, valueArray[group.type.length > 1 ? 0 : i]]);
+    }
+    test(function() {
+      testElement.style.setProperty(shorthand, value);
+      testCSSValues("shorthand in inline style", testElement.style, expected);
+      const stylesheet = `.test { ${group.prerequisites} }`;
+      testComputedValues("shorthand in computed style", stylesheet, expected);
+    }, `Test that ${shorthand} shorthand sets longhands and serializes correctly.`);
+    testElement.style.cssText = "";
+  }
+
   for (const writingMode of writingModes) {
     for (const style of writingMode.styles) {
       const writingModeDecl = makeDeclaration(style);
@@ -141,21 +167,15 @@ export function runTests(group) {
       }, `Test that logical ${group.property} properties share computed values `
        + `with their physical associates, with '${writingModeDecl}'.`);
 
-
       // Test logical shorthand properties.
       if (shorthands) {
         test(function() {
           for (const [shorthand, longhands] of shorthands) {
-            let shorthandValues;
-            if (group.type.length > 1) {
-              shorthandValues = [values[0]];
-            } else {
-              shorthandValues = testValues[group.type].slice(0, longhands.length);
-            }
-            const decl = group.prerequisites + `${shorthand}: ${shorthandValues.join(" ")}; `;
+            let valueArray = shorthandValues[shorthand];
+            const decl = group.prerequisites + `${shorthand}: ${valueArray.join(" ")}; `;
             const expected = [];
             for (let [i, longhand] of longhands.entries()) {
-              const longhandValue = shorthandValues[group.type.length > 1 ? 0 : i];
+              const longhandValue = valueArray[group.type.length > 1 ? 0 : i];
               expected.push([longhand, longhandValue]);
               expected.push([associated[longhand], longhandValue]);
             }

third_party/WebKit/LayoutTests/webexposed/css-property-listing-expected.txt

@@ -449,8 +449,12 @@ All changes to this list should go through Blink's feature review process: http:
         border-top-style
         border-top-width
     border-block
-        border-block-end
-        border-block-start
+        border-block-end-color
+        border-block-end-style
+        border-block-end-width
+        border-block-start-color
+        border-block-start-style
+        border-block-start-width
     border-block-color
         border-block-end-color
         border-block-start-color
@@ -484,8 +488,12 @@ All changes to this list should go through Blink's feature review process: http:
         border-image-source
         border-image-width
     border-inline
-        border-inline-end
-        border-inline-start
+        border-inline-end-color
+        border-inline-end-style
+        border-inline-end-width
+        border-inline-start-color
+        border-inline-start-style
+        border-inline-start-width
     border-inline-color
         border-inline-end-color
         border-inline-start-color

third_party/blink/renderer/core/css/CSSProperties.json5

@@ -4534,14 +4534,17 @@
     },
     {
       name: "border-block",
-      longhands: ["border-block-start", "border-block-end"],
-      property_methods: ["ParseShorthand"],
+      longhands: [
+        "border-block-start-color", "border-block-start-style", "border-block-start-width",
+        "border-block-end-color", "border-block-end-style", "border-block-end-width"
+      ],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {
       name: "border-block-color",
       longhands: ["border-block-start-color", "border-block-end-color"],
-      property_methods: ["ParseShorthand"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {
@@ -4571,13 +4574,13 @@
     {
       name: "border-block-style",
       longhands: ["border-block-start-style", "border-block-end-style"],
-      property_methods: ["ParseShorthand"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {
       name: "border-block-width",
       longhands: ["border-block-start-width", "border-block-end-width"],
-      property_methods: ["ParseShorthand"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {
@@ -4605,14 +4608,17 @@
     },
     {
       name: "border-inline",
-      longhands: ["border-inline-start", "border-inline-end"],
-      property_methods: ["ParseShorthand"],
+      longhands: [
+        "border-inline-start-color", "border-inline-start-style", "border-inline-start-width",
+        "border-inline-end-color", "border-inline-end-style", "border-inline-end-width"
+      ],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {
       name: "border-inline-color",
       longhands: ["border-inline-start-color", "border-inline-end-color"],
-      property_methods: ["ParseShorthand"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {
@@ -4642,13 +4648,13 @@
     {
       name: "border-inline-style",
       longhands: ["border-inline-start-style", "border-inline-end-style"],
-      property_methods: ["ParseShorthand"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {
       name: "border-inline-width",
       longhands: ["border-inline-start-width", "border-inline-end-width"],
-      property_methods: ["ParseShorthand"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {
@@ -4800,22 +4806,22 @@
       property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       layout_dependent: true,
     },
+    {
+      name: "inset",
+      longhands: ["top", "right", "bottom", "left"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
+      runtime_flag: "CSSLogical",
+    },
     {
       name: "inset-block",
       longhands: ["inset-block-start", "inset-block-end"],
-      property_methods: ["ParseShorthand"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {
       name: "inset-inline",
       longhands: ["inset-inline-start", "inset-inline-end"],
-      property_methods: ["ParseShorthand"],
-      runtime_flag: "CSSLogical",
-    },
-    {
-      name: "inset",
-      longhands: ["top", "right", "bottom", "left"],
-      property_methods: ["ParseShorthand"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {
@@ -4832,13 +4838,13 @@
     {
       name: "margin-block",
       longhands: ["margin-block-start", "margin-block-end"],
-      property_methods: ["ParseShorthand"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {
       name: "margin-inline",
       longhands: ["margin-inline-start", "margin-inline-end"],
-      property_methods: ["ParseShorthand"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {
@@ -4880,13 +4886,13 @@
     {
       name: "padding-block",
       longhands: ["padding-block-start", "padding-block-end"],
-      property_methods: ["ParseShorthand"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {
       name: "padding-inline",
       longhands: ["padding-inline-start", "padding-inline-end"],
-      property_methods: ["ParseShorthand"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
       runtime_flag: "CSSLogical",
     },
     {

third_party/blink/renderer/core/css/properties/shorthands/border_block_color_custom.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/css/properties/shorthands/border_block_color.h"
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
+#include "third_party/blink/renderer/core/css/properties/computed_style_utils.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 
 namespace blink {
@@ -20,5 +22,16 @@ bool BorderBlockColor::ParseShorthand(
       borderBlockColorShorthand(), important, context, range, properties);
 }
 
+const CSSValue* BorderBlockColor::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  return ComputedStyleUtils::ValuesForInlineBlockShorthand(
+      borderBlockColorShorthand(), style, layout_object, styled_node,
+      allow_visited_style);
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/border_block_custom.cc

@@ -35,5 +35,23 @@ bool BorderBlock::ParseShorthand(
   return range.AtEnd();
 }
 
+const CSSValue* BorderBlock::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  const CSSValue* value_start =
+      GetCSSPropertyBorderBlockStart().CSSValueFromComputedStyle(
+          style, layout_object, styled_node, allow_visited_style);
+  const CSSValue* value_end =
+      GetCSSPropertyBorderBlockEnd().CSSValueFromComputedStyle(
+          style, layout_object, styled_node, allow_visited_style);
+  if (!DataEquivalent(value_start, value_end)) {
+    return nullptr;
+  }
+  return value_start;
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/border_block_style_custom.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/css/properties/shorthands/border_block_style.h"
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
+#include "third_party/blink/renderer/core/css/properties/computed_style_utils.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 
 namespace blink {
@@ -20,5 +22,16 @@ bool BorderBlockStyle::ParseShorthand(
       borderBlockStyleShorthand(), important, context, range, properties);
 }
 
+const CSSValue* BorderBlockStyle::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  return ComputedStyleUtils::ValuesForInlineBlockShorthand(
+      borderBlockStyleShorthand(), style, layout_object, styled_node,
+      allow_visited_style);
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/border_block_width_custom.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/css/properties/shorthands/border_block_width.h"
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
+#include "third_party/blink/renderer/core/css/properties/computed_style_utils.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 
 namespace blink {
@@ -20,5 +22,16 @@ bool BorderBlockWidth::ParseShorthand(
       borderBlockWidthShorthand(), important, context, range, properties);
 }
 
+const CSSValue* BorderBlockWidth::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  return ComputedStyleUtils::ValuesForInlineBlockShorthand(
+      borderBlockWidthShorthand(), style, layout_object, styled_node,
+      allow_visited_style);
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/border_inline_color_custom.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/css/properties/shorthands/border_inline_color.h"
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
+#include "third_party/blink/renderer/core/css/properties/computed_style_utils.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 
 namespace blink {
@@ -20,5 +22,16 @@ bool BorderInlineColor::ParseShorthand(
       borderInlineColorShorthand(), important, context, range, properties);
 }
 
+const CSSValue* BorderInlineColor::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  return ComputedStyleUtils::ValuesForInlineBlockShorthand(
+      borderInlineColorShorthand(), style, layout_object, styled_node,
+      allow_visited_style);
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/border_inline_custom.cc

@@ -35,5 +35,23 @@ bool BorderInline::ParseShorthand(
   return range.AtEnd();
 }
 
+const CSSValue* BorderInline::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  const CSSValue* value_start =
+      GetCSSPropertyBorderInlineStart().CSSValueFromComputedStyle(
+          style, layout_object, styled_node, allow_visited_style);
+  const CSSValue* value_end =
+      GetCSSPropertyBorderInlineEnd().CSSValueFromComputedStyle(
+          style, layout_object, styled_node, allow_visited_style);
+  if (!DataEquivalent(value_start, value_end)) {
+    return nullptr;
+  }
+  return value_start;
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/border_inline_style_custom.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/css/properties/shorthands/border_inline_style.h"
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
+#include "third_party/blink/renderer/core/css/properties/computed_style_utils.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 
 namespace blink {
@@ -20,5 +22,16 @@ bool BorderInlineStyle::ParseShorthand(
       borderInlineStyleShorthand(), important, context, range, properties);
 }
 
+const CSSValue* BorderInlineStyle::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  return ComputedStyleUtils::ValuesForInlineBlockShorthand(
+      borderInlineStyleShorthand(), style, layout_object, styled_node,
+      allow_visited_style);
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/border_inline_width_custom.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/css/properties/shorthands/border_inline_width.h"
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
+#include "third_party/blink/renderer/core/css/properties/computed_style_utils.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 
 namespace blink {
@@ -20,5 +22,16 @@ bool BorderInlineWidth::ParseShorthand(
       borderInlineWidthShorthand(), important, context, range, properties);
 }
 
+const CSSValue* BorderInlineWidth::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  return ComputedStyleUtils::ValuesForInlineBlockShorthand(
+      borderInlineWidthShorthand(), style, layout_object, styled_node,
+      allow_visited_style);
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/inset_block_custom.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/css/properties/shorthands/inset_block.h"
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
+#include "third_party/blink/renderer/core/css/properties/computed_style_utils.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 
 namespace blink {
@@ -20,5 +22,16 @@ bool InsetBlock::ParseShorthand(
       insetBlockShorthand(), important, context, range, properties);
 }
 
+const CSSValue* InsetBlock::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  return ComputedStyleUtils::ValuesForInlineBlockShorthand(
+      insetBlockShorthand(), style, layout_object, styled_node,
+      allow_visited_style);
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/inset_custom.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/css/properties/shorthands/inset.h"
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
+#include "third_party/blink/renderer/core/css/properties/computed_style_utils.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 
 namespace blink {
@@ -20,5 +22,15 @@ bool Inset::ParseShorthand(
       insetShorthand(), important, context, range, properties);
 }
 
+const CSSValue* Inset::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  return ComputedStyleUtils::ValuesForSidesShorthand(
+      insetShorthand(), style, layout_object, styled_node, allow_visited_style);
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/inset_inline_custom.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/css/properties/shorthands/inset_inline.h"
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
+#include "third_party/blink/renderer/core/css/properties/computed_style_utils.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 
 namespace blink {
@@ -20,5 +22,16 @@ bool InsetInline::ParseShorthand(
       insetInlineShorthand(), important, context, range, properties);
 }
 
+const CSSValue* InsetInline::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  return ComputedStyleUtils::ValuesForInlineBlockShorthand(
+      insetInlineShorthand(), style, layout_object, styled_node,
+      allow_visited_style);
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/margin_block_custom.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/css/properties/shorthands/margin_block.h"
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
+#include "third_party/blink/renderer/core/css/properties/computed_style_utils.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 
 namespace blink {
@@ -20,5 +22,16 @@ bool MarginBlock::ParseShorthand(
       marginBlockShorthand(), important, context, range, properties);
 }
 
+const CSSValue* MarginBlock::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  return ComputedStyleUtils::ValuesForInlineBlockShorthand(
+      marginBlockShorthand(), style, layout_object, styled_node,
+      allow_visited_style);
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/margin_inline_custom.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/css/properties/shorthands/margin_inline.h"
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
+#include "third_party/blink/renderer/core/css/properties/computed_style_utils.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 
 namespace blink {
@@ -20,5 +22,16 @@ bool MarginInline::ParseShorthand(
       marginInlineShorthand(), important, context, range, properties);
 }
 
+const CSSValue* MarginInline::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  return ComputedStyleUtils::ValuesForInlineBlockShorthand(
+      marginInlineShorthand(), style, layout_object, styled_node,
+      allow_visited_style);
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/padding_block_custom.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/css/properties/shorthands/padding_block.h"
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
+#include "third_party/blink/renderer/core/css/properties/computed_style_utils.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 
 namespace blink {
@@ -20,5 +22,16 @@ bool PaddingBlock::ParseShorthand(
       paddingBlockShorthand(), important, context, range, properties);
 }
 
+const CSSValue* PaddingBlock::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  return ComputedStyleUtils::ValuesForInlineBlockShorthand(
+      paddingBlockShorthand(), style, layout_object, styled_node,
+      allow_visited_style);
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/shorthands/padding_inline_custom.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/css/properties/shorthands/padding_inline.h"
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
+#include "third_party/blink/renderer/core/css/properties/computed_style_utils.h"
+#include "third_party/blink/renderer/core/style/computed_style.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 
 namespace blink {
@@ -20,5 +22,16 @@ bool PaddingInline::ParseShorthand(
       paddingInlineShorthand(), important, context, range, properties);
 }
 
+const CSSValue* PaddingInline::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle&,
+    const LayoutObject* layout_object,
+    Node* styled_node,
+    bool allow_visited_style) const {
+  return ComputedStyleUtils::ValuesForInlineBlockShorthand(
+      paddingInlineShorthand(), style, layout_object, styled_node,
+      allow_visited_style);
+}
+
 }  // namespace CSSShorthand
 }  // namespace blink

third_party/blink/renderer/core/css/style_property_serializer.cc

@@ -422,7 +422,8 @@ String StylePropertySerializer::SerializeShorthand(
     case CSSPropertyBackground:
       return GetLayeredShorthandValue(backgroundShorthand());
     case CSSPropertyBorder:
-      return BorderPropertyValue();
+      return BorderPropertyValue(borderWidthShorthand(), borderStyleShorthand(),
+                                 borderColorShorthand());
     case CSSPropertyBorderImage:
       return BorderImagePropertyValue();
     case CSSPropertyBorderTop:
@@ -433,10 +434,30 @@ String StylePropertySerializer::SerializeShorthand(
       return GetShorthandValue(borderBottomShorthand());
     case CSSPropertyBorderLeft:
       return GetShorthandValue(borderLeftShorthand());
+    case CSSPropertyBorderBlock:
+      return BorderPropertyValue(borderBlockWidthShorthand(),
+                                 borderBlockStyleShorthand(),
+                                 borderBlockColorShorthand());
+    case CSSPropertyBorderBlockColor:
+      return Get2Values(borderBlockColorShorthand());
+    case CSSPropertyBorderBlockStyle:
+      return Get2Values(borderBlockStyleShorthand());
+    case CSSPropertyBorderBlockWidth:
+      return Get2Values(borderBlockWidthShorthand());
     case CSSPropertyBorderBlockStart:
       return GetShorthandValue(borderBlockStartShorthand());
     case CSSPropertyBorderBlockEnd:
       return GetShorthandValue(borderBlockEndShorthand());
+    case CSSPropertyBorderInline:
+      return BorderPropertyValue(borderInlineWidthShorthand(),
+                                 borderInlineStyleShorthand(),
+                                 borderInlineColorShorthand());
+    case CSSPropertyBorderInlineColor:
+      return Get2Values(borderInlineColorShorthand());
+    case CSSPropertyBorderInlineStyle:
+      return Get2Values(borderInlineStyleShorthand());
+    case CSSPropertyBorderInlineWidth:
+      return Get2Values(borderInlineWidthShorthand());
     case CSSPropertyBorderInlineStart:
       return GetShorthandValue(borderInlineStartShorthand());
     case CSSPropertyBorderInlineEnd:
@@ -465,6 +486,12 @@ String StylePropertySerializer::SerializeShorthand(
       return GetShorthandValue(gridAreaShorthand(), " / ");
     case CSSPropertyGap:
       return GetShorthandValue(gapShorthand());
+    case CSSPropertyInset:
+      return Get4Values(insetShorthand());
+    case CSSPropertyInsetBlock:
+      return Get2Values(insetBlockShorthand());
+    case CSSPropertyInsetInline:
+      return Get2Values(insetInlineShorthand());
     case CSSPropertyPlaceContent:
       return Get2Values(placeContentShorthand());
     case CSSPropertyPlaceItems:
@@ -477,6 +504,10 @@ String StylePropertySerializer::SerializeShorthand(
       return FontVariantValue();
     case CSSPropertyMargin:
       return Get4Values(marginShorthand());
+    case CSSPropertyMarginBlock:
+      return Get2Values(marginBlockShorthand());
+    case CSSPropertyMarginInline:
+      return Get2Values(marginInlineShorthand());
     case CSSPropertyOffset:
       return OffsetValue();
     case CSSPropertyWebkitMarginCollapse:
@@ -487,6 +518,10 @@ String StylePropertySerializer::SerializeShorthand(
       return GetShorthandValue(overscrollBehaviorShorthand());
     case CSSPropertyPadding:
       return Get4Values(paddingShorthand());
+    case CSSPropertyPaddingBlock:
+      return Get2Values(paddingBlockShorthand());
+    case CSSPropertyPaddingInline:
+      return Get2Values(paddingInlineShorthand());
     case CSSPropertyTextDecoration:
       return GetShorthandValue(textDecorationShorthand());
     case CSSPropertyTransition:
@@ -996,9 +1031,11 @@ String StylePropertySerializer::GetCommonValue(
   return res;
 }
 
-String StylePropertySerializer::BorderPropertyValue() const {
-  const StylePropertyShorthand properties[3] = {
-      borderWidthShorthand(), borderStyleShorthand(), borderColorShorthand()};
+String StylePropertySerializer::BorderPropertyValue(
+    const StylePropertyShorthand& width,
+    const StylePropertyShorthand& style,
+    const StylePropertyShorthand& color) const {
+  const StylePropertyShorthand properties[3] = {width, style, color};
   StringBuilder result;
   for (size_t i = 0; i < arraysize(properties); ++i) {
     String value = GetCommonValue(properties[i]);

third_party/blink/renderer/core/css/style_property_serializer.h

@@ -44,7 +44,9 @@ class StylePropertySerializer {
 
  private:
   String GetCommonValue(const StylePropertyShorthand&) const;
-  String BorderPropertyValue() const;
+  String BorderPropertyValue(const StylePropertyShorthand&,
+                             const StylePropertyShorthand&,
+                             const StylePropertyShorthand&) const;
   String BorderImagePropertyValue() const;
   String GetLayeredShorthandValue(const StylePropertyShorthand&) const;
   String Get2Values(const StylePropertyShorthand&) const;