[css-logical] Ship flow-relative shorthand and offset properties

This patch ships the already implemented properties introduced by the
CSS Logical spec.

Spec: https://drafts.csswg.org/css-logical/#box

Intent to ship: https://groups.google.com/a/chromium.org/g/blink-dev/c/E7f_WZOcTgQ/

Bug: 538475
Change-Id: I71b4a43fc3c4b14fb55ae456370d8cc4b04c903f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2379720Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#803898}

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

@@ -4864,7 +4864,6 @@
     {
       name: "inset-inline-start",
       property_methods: ["ParseSingleValue"],
-      runtime_flag: "CSSLogical",
       direction_aware_options: {
         resolver: "inline-start",
         physical_group: "inset",
@@ -4874,7 +4873,6 @@
     {
       name: "inset-inline-end",
       property_methods: ["ParseSingleValue"],
-      runtime_flag: "CSSLogical",
       direction_aware_options: {
         resolver: "inline-end",
         physical_group: "inset",
@@ -4884,7 +4882,6 @@
     {
       name: "inset-block-start",
       property_methods: ["ParseSingleValue"],
-      runtime_flag: "CSSLogical",
       direction_aware_options: {
         resolver: "block-start",
         physical_group: "inset",
@@ -4894,7 +4891,6 @@
     {
       name: "inset-block-end",
       property_methods: ["ParseSingleValue"],
-      runtime_flag: "CSSLogical",
       direction_aware_options: {
         resolver: "block-end",
         physical_group: "inset",
@@ -5190,13 +5186,11 @@
         "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", "CSSValueFromComputedStyleInternal"],
-      runtime_flag: "CSSLogical",
     },
     {
       name: "border-block-end",
@@ -5226,13 +5220,11 @@
       name: "border-block-style",
       longhands: ["border-block-start-style", "border-block-end-style"],
       property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
-      runtime_flag: "CSSLogical",
     },
     {
       name: "border-block-width",
       longhands: ["border-block-start-width", "border-block-end-width"],
       property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
-      runtime_flag: "CSSLogical",
     },
     {
       name: "border-bottom",
@@ -5264,13 +5256,11 @@
         "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", "CSSValueFromComputedStyleInternal"],
-      runtime_flag: "CSSLogical",
     },
     {
       name: "border-inline-end",
@@ -5300,13 +5290,11 @@
       name: "border-inline-style",
       longhands: ["border-inline-start-style", "border-inline-end-style"],
       property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
-      runtime_flag: "CSSLogical",
     },
     {
       name: "border-inline-width",
       longhands: ["border-inline-start-width", "border-inline-end-width"],
       property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
-      runtime_flag: "CSSLogical",
     },
     {
       name: "border-left",
@@ -5461,19 +5449,16 @@
       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", "CSSValueFromComputedStyleInternal"],
-      runtime_flag: "CSSLogical",
     },
     {
       name: "inset-inline",
       longhands: ["inset-inline-start", "inset-inline-end"],
       property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
-      runtime_flag: "CSSLogical",
     },
     {
       name: "list-style",
@@ -5490,13 +5475,11 @@
       name: "margin-block",
       longhands: ["margin-block-start", "margin-block-end"],
       property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
-      runtime_flag: "CSSLogical",
     },
     {
       name: "margin-inline",
       longhands: ["margin-inline-start", "margin-inline-end"],
       property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
-      runtime_flag: "CSSLogical",
     },
     {
       name: "marker",
@@ -5539,13 +5522,11 @@
       name: "padding-block",
       longhands: ["padding-block-start", "padding-block-end"],
       property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
-      runtime_flag: "CSSLogical",
     },
     {
       name: "padding-inline",
       longhands: ["padding-inline-start", "padding-inline-end"],
       property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
-      runtime_flag: "CSSLogical",
     },
     {
       name: "page-break-after",

third_party/blink/renderer/platform/runtime_enabled_features.json5

@@ -487,7 +487,6 @@
     {
       name: "CSSLogical",
       status: "experimental",
-      settable_from_internals: true,
     },
     {
       name: "CSSLogicalOverflow",

third_party/blink/web_tests/fast/css/inset-serialize.html

-<!DOCTYPE html>
-<meta charset="utf-8" />
-<title>CSS Logical Properties: serialization of the inset properties</title>
-<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
-<link rel="help" href="https://drafts.csswg.org/css-logical/#inset-properties" />
-<script src="../../resources/testharness.js"></script>
-<script src="../../resources/testharnessreport.js"></script>
-<script>
-function setCSSLogicalEnabled(test, value) {
-  let initialValue = internals.runtimeFlags.cssLogicalEnabled;
-  internals.runtimeFlags.cssLogicalEnabled = value;
-  test.add_cleanup(() => {
-    internals.runtimeFlags.cssLogicalEnabled = initialValue;
-  });
-}
-
-function check(inStyle, outStyle) {
-  let element = document.createElement("div");
-  element.style.cssText = inStyle;
-  assert_equals(element.style.cssText, outStyle);
-}
-
-test(function(t) {
-  setCSSLogicalEnabled(t, true);
-  check("top: 1px; right: 2px; bottom: 3px; left: 4px;", "inset: 1px 2px 3px 4px;");
-}, "Inset shorthand serializes longhands when enabled");
-
-test(function(t) {
-  setCSSLogicalEnabled(t, false);
-  let style = "top: 1px; right: 2px; bottom: 3px; left: 4px;";
-  check(style, style);
-}, "Inset longhands serialize as-is when shorthand is disabled");
-</script>

third_party/blink/web_tests/virtual/stable/webexposed/css-properties-as-js-properties-expected.txt

@@ -35,6 +35,8 @@ backgroundSize
 baselineShift
 blockSize
 border
+borderBlock
+borderBlockColor
 borderBlockEnd
 borderBlockEndColor
 borderBlockEndStyle
@@ -43,6 +45,8 @@ borderBlockStart
 borderBlockStartColor
 borderBlockStartStyle
 borderBlockStartWidth
+borderBlockStyle
+borderBlockWidth
 borderBottom
 borderBottomColor
 borderBottomLeftRadius
@@ -57,6 +61,8 @@ borderImageRepeat
 borderImageSlice
 borderImageSource
 borderImageWidth
+borderInline
+borderInlineColor
 borderInlineEnd
 borderInlineEndColor
 borderInlineEndStyle
@@ -65,6 +71,8 @@ borderInlineStart
 borderInlineStartColor
 borderInlineStartStyle
 borderInlineStartWidth
+borderInlineStyle
+borderInlineWidth
 borderLeft
 borderLeftColor
 borderLeftStyle
@@ -186,6 +194,13 @@ imageRendering
 inherits
 initialValue
 inlineSize
+inset
+insetBlock
+insetBlockEnd
+insetBlockStart
+insetInline
+insetInlineEnd
+insetInlineStart
 isolation
 item
 justifyContent
@@ -202,9 +217,11 @@ listStyleImage
 listStylePosition
 listStyleType
 margin
+marginBlock
 marginBlockEnd
 marginBlockStart
 marginBottom
+marginInline
 marginInlineEnd
 marginInlineStart
 marginLeft
@@ -253,9 +270,11 @@ overscrollBehaviorInline
 overscrollBehaviorX
 overscrollBehaviorY
 padding
+paddingBlock
 paddingBlockEnd
 paddingBlockStart
 paddingBottom
+paddingInline
 paddingInlineEnd
 paddingInlineStart
 paddingLeft

third_party/blink/web_tests/virtual/stable/webexposed/css-property-listing-expected.txt

@@ -200,6 +200,10 @@ All changes to this list should go through Blink's feature review process: http:
     image-orientation
     image-rendering
     inline-size
+    inset-block-end
+    inset-block-start
+    inset-inline-end
+    inset-inline-start
     isolation
     justify-content
     justify-items
@@ -436,6 +440,16 @@ All changes to this list should go through Blink's feature review process: http:
         border-top-color
         border-top-style
         border-top-width
+    border-block
+        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
     border-block-end
         border-block-end-color
         border-block-end-style
@@ -444,6 +458,12 @@ All changes to this list should go through Blink's feature review process: http:
         border-block-start-color
         border-block-start-style
         border-block-start-width
+    border-block-style
+        border-block-end-style
+        border-block-start-style
+    border-block-width
+        border-block-end-width
+        border-block-start-width
     border-bottom
         border-bottom-color
         border-bottom-style
@@ -459,6 +479,16 @@ All changes to this list should go through Blink's feature review process: http:
         border-image-slice
         border-image-source
         border-image-width
+    border-inline
+        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
     border-inline-end
         border-inline-end-color
         border-inline-end-style
@@ -467,6 +497,12 @@ All changes to this list should go through Blink's feature review process: http:
         border-inline-start-color
         border-inline-start-style
         border-inline-start-width
+    border-inline-style
+        border-inline-end-style
+        border-inline-start-style
+    border-inline-width
+        border-inline-end-width
+        border-inline-start-width
     border-left
         border-left-color
         border-left-style
@@ -559,6 +595,17 @@ All changes to this list should go through Blink's feature review process: http:
         grid-template-areas
         grid-template-columns
         grid-template-rows
+    inset
+        bottom
+        left
+        right
+        top
+    inset-block
+        inset-block-end
+        inset-block-start
+    inset-inline
+        inset-inline-end
+        inset-inline-start
     list-style
         list-style-image
         list-style-position
@@ -568,6 +615,12 @@ All changes to this list should go through Blink's feature review process: http:
         margin-left
         margin-right
         margin-top
+    margin-block
+        margin-block-end
+        margin-block-start
+    margin-inline
+        margin-inline-end
+        margin-inline-start
     marker
         marker-end
         marker-mid
@@ -591,6 +644,12 @@ All changes to this list should go through Blink's feature review process: http:
         padding-left
         padding-right
         padding-top
+    padding-block
+        padding-block-end
+        padding-block-start
+    padding-inline
+        padding-inline-end
+        padding-inline-start
     page-break-after
         break-after
     page-break-before