Attachment 359698 Details for Bug 188697 – Patch

[patch] Patch

bug-188697-20190121193457.patch (text/plain), 188.28 KB, created by Oriol Brufau on 2019-01-21 10:34:59 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Oriol Brufau

Created: 2019-01-21 10:34:59 PST

Size: 188.28 KB

patch

obsolete

>Subversion Revision: 240106
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index e1656dffb383fc9bc35599fdae6f61228489b488..a964497d05d806b5da85d657e317cfe52abe6894 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,100 @@
>+2018-10-31  Oriol Brufau  <obrufau@igalia.com>
>+
>+        [css-logical] Implement flow-relative margin, padding and border shorthands
>+        https://bugs.webkit.org/show_bug.cgi?id=188697
>+
>+        Reviewed by Simon Fraser and Antti Koivisto.
>+
>+        Tests: imported/w3c/web-platform-tests/css/css-logical/logical-box-border-color.html
>+               imported/w3c/web-platform-tests/css/css-logical/logical-box-border-shorthands.html
>+               imported/w3c/web-platform-tests/css/css-logical/logical-box-border-style.html
>+               imported/w3c/web-platform-tests/css/css-logical/logical-box-border-width.html
>+               imported/w3c/web-platform-tests/css/css-logical/logical-box-margin.html
>+               imported/w3c/web-platform-tests/css/css-logical/logical-box-padding.html
>+               webexposed/css-properties-behind-flags.html
>+
>+        * css/CSSComputedStyleDeclaration.cpp:
>+        (WebCore::ComputedStyleExtractor::valueForPropertyinStyle):
>+        Allow the new properties to serialize their computed value.
>+
>+        (WebCore::ComputedStyleExtractor::getCSSPropertyValuesFor2SidesShorthand):
>+        (WebCore::ComputedStyleExtractor::getCSSPropertyValuesFor4SidesShorthand):
>+        * css/CSSComputedStyleDeclaration.h:
>+        Rename getCSSPropertyValuesForSidesShorthand to getCSSPropertyValuesFor4SidesShorthand,
>+        and add analogous getCSSPropertyValuesFor2SidesShorthand for serializing 2-sided
>+        shorthands.
>+
>+        * css/CSSProperties.json:
>+        Add the new properties behind the CSSLogicalEnabled runtime flag.
>+
>+        * css/CSSStyleDeclaration.cpp:
>+        (WebCore::CSSStyleDeclaration::supportedPropertyNames const):
>+        Prevent CSS properties disabled behind a runtime flag from being exposed in
>+        style declarations.
>+
>+        * css/StyleProperties.cpp:
>+        (WebCore::StyleProperties::getPropertyValue const):
>+        Allow the new properties to serialize their specified value.
>+
>+        (WebCore::StyleProperties::get2Values const):
>+        Add get2Values, analogous to get4Values, for serializing 2-sided shorthands.
>+
>+        (WebCore::StyleProperties::borderPropertyValue const):
>+        Allow borderPropertyValue to serialize arbitrary multi-sided border shorthands
>+        corresponding to width, style and color.
>+
>+        (WebCore::MutableStyleProperties::setProperty):
>+        Prevent CSS properties disabled behind a runtime flag from being set a value.
>+
>+        (WebCore::StyleProperties::asText const):
>+        Allow the new properties to be serialized in cssText.
>+        Prevent CSS shorthands disabled behind a runtime flag from appearing in cssText,
>+        and serialize the longhands instead. Note that there could be another shorthand
>+        available which is enabled, but a proper solution would require bug 190496.
>+
>+        * css/StyleProperties.h:
>+        Update declarations of borderPropertyValue and get2Values.
>+
>+        * css/makeprop.pl:
>+        (addProperty):
>+        Add isEnabledCSSProperty function for checking that a CSS property is not
>+        disabled behind a runtime flag.
>+
>+        * css/parser/CSSPropertyParser.cpp:
>+        (WebCore::cssPropertyID):
>+        Prevent CSS properties disabled behind a runtime flag from being exposed in
>+        computed styles.
>+
>+        (WebCore::CSSPropertyParser::addProperty):
>+        Prevent CSS properties disabled behind a runtime flag from being set a value.
>+
>+        (WebCore::CSSPropertyParser::consumeBorder):
>+        Change consumeBorder to provide the caller with the parsed values instead of
>+        setting properties. Then the caller can decide to which properties the values
>+        should be set, and whether border-image should be reset or not.
>+
>+        (WebCore::CSSPropertyParser::consume2ValueShorthand):
>+        (WebCore::CSSPropertyParser::consume4ValueShorthand):
>+        Rename consume4Values to consume4ValueShorthand, and add analogous
>+        consume2ValueShorthand for parsing shorthands with two longhands.
>+
>+        (WebCore::CSSPropertyParser::parseShorthand):
>+        Allow the new properties to be parsed.
>+
>+        * css/parser/CSSPropertyParser.h:
>+        Update declarations of consumeBorder, consume2ValueShorthand and
>+        consume4ValueShorthand.
>+
>+        * inspector/agents/InspectorCSSAgent.cpp:
>+        (WebCore::InspectorCSSAgent::getSupportedCSSProperties):
>+        Prevent CSS properties disabled behind a runtime flag from being exposed in
>+        the CSS inspector tool.
>+
>+        * page/RuntimeEnabledFeatures.h:
>+        (WebCore::RuntimeEnabledFeatures::setCSSLogicalEnabled):
>+        (WebCore::RuntimeEnabledFeatures::cssLogicalEnabled const):
>+        Add the CSSLogicalEnabled runtime flag.
>+
> 2019-01-16  Simon Fraser  <simon.fraser@apple.com>
> 
>         Stub out scrolling tree classes for overflow scrolling nodes on macOS
>diff --git a/Source/WebKit/ChangeLog b/Source/WebKit/ChangeLog
>index e492f8af27f8e1849826495a30f68393b87ff200..382844c5dfb7010fb5a0a16723251229c8b9aa65 100644
>--- a/Source/WebKit/ChangeLog
>+++ b/Source/WebKit/ChangeLog
>@@ -1,3 +1,14 @@
>+2018-10-31  Oriol Brufau  <obrufau@igalia.com>
>+
>+        [css-logical] Implement flow-relative margin, padding and border shorthands
>+        https://bugs.webkit.org/show_bug.cgi?id=188697
>+
>+        Reviewed by Simon Fraser and Antti Koivisto.
>+
>+        Add a CSSLogicalEnabled runtime flag.
>+
>+        * Shared/WebPreferences.yaml:
>+
> 2019-01-16  Youenn Fablet  <youenn@apple.com>
> 
>         Add a new SPI for controlling getUserMedia
>diff --git a/Source/WebKitLegacy/mac/ChangeLog b/Source/WebKitLegacy/mac/ChangeLog
>index d146bebea7ea6d0668a3601703350c2f65789187..bace2a10938fb6e645d5a34f7b80dd2f6820f1a6 100644
>--- a/Source/WebKitLegacy/mac/ChangeLog
>+++ b/Source/WebKitLegacy/mac/ChangeLog
>@@ -1,3 +1,21 @@
>+2018-10-31  Oriol Brufau  <obrufau@igalia.com>
>+
>+        [css-logical] Implement flow-relative margin, padding and border shorthands
>+        https://bugs.webkit.org/show_bug.cgi?id=188697
>+
>+        Reviewed by Simon Fraser and Antti Koivisto.
>+
>+        Add CSSLogicalEnabled runtime flag.
>+
>+        * WebView/WebPreferenceKeysPrivate.h:
>+        * WebView/WebPreferences.mm:
>+        (+[WebPreferences initialize]):
>+        (-[WebPreferences cssLogicalEnabled]):
>+        (-[WebPreferences setCSSLogicalEnabled:]):
>+        * WebView/WebPreferencesPrivate.h:
>+        * WebView/WebView.mm:
>+        (-[WebView _preferencesChanged:]):
>+
> 2019-01-15  Alex Christensen  <achristensen@webkit.org>
> 
>         Reduce use of NetworkStorageSession::defaultStorageSession in WebCore
>diff --git a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
>index ca215aae6b407143fc466230f1f9573e3d61d3ce..7986306e88306b8e4818c73031c9e9d49cc36196 100644
>--- a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
>+++ b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
>@@ -3929,24 +3929,48 @@ RefPtr<CSSValue> ComputedStyleExtractor::valueForPropertyinStyle(const RenderSty
>             }
>             return value;
>         }
>+        case CSSPropertyBorderBlock: {
>+            auto value = propertyValue(CSSPropertyBorderBlockStart, DoNotUpdateLayout);
>+            if (!compareCSSValuePtr<CSSValue>(value, propertyValue(CSSPropertyBorderBlockEnd, DoNotUpdateLayout)))
>+                return nullptr;
>+            return value;
>+        }
>+        case CSSPropertyBorderBlockColor:
>+            return getCSSPropertyValuesFor2SidesShorthand(borderBlockColorShorthand());
>+        case CSSPropertyBorderBlockStyle:
>+            return getCSSPropertyValuesFor2SidesShorthand(borderBlockStyleShorthand());
>+        case CSSPropertyBorderBlockWidth:
>+            return getCSSPropertyValuesFor2SidesShorthand(borderBlockWidthShorthand());
>         case CSSPropertyBorderBottom:
>             return getCSSPropertyValuesForShorthandProperties(borderBottomShorthand());
>         case CSSPropertyBorderColor:
>-            return getCSSPropertyValuesForSidesShorthand(borderColorShorthand());
>+            return getCSSPropertyValuesFor4SidesShorthand(borderColorShorthand());
>         case CSSPropertyBorderLeft:
>             return getCSSPropertyValuesForShorthandProperties(borderLeftShorthand());
>         case CSSPropertyBorderImage:
>             return valueForNinePieceImage(style.borderImage());
>+        case CSSPropertyBorderInline: {
>+            auto value = propertyValue(CSSPropertyBorderInlineStart, DoNotUpdateLayout);
>+            if (!compareCSSValuePtr<CSSValue>(value, propertyValue(CSSPropertyBorderInlineEnd, DoNotUpdateLayout)))
>+                return nullptr;
>+            return value;
>+        }
>+        case CSSPropertyBorderInlineColor:
>+            return getCSSPropertyValuesFor2SidesShorthand(borderInlineColorShorthand());
>+        case CSSPropertyBorderInlineStyle:
>+            return getCSSPropertyValuesFor2SidesShorthand(borderInlineStyleShorthand());
>+        case CSSPropertyBorderInlineWidth:
>+            return getCSSPropertyValuesFor2SidesShorthand(borderInlineWidthShorthand());
>         case CSSPropertyBorderRadius:
>             return borderRadiusShorthandValue(style);
>         case CSSPropertyBorderRight:
>             return getCSSPropertyValuesForShorthandProperties(borderRightShorthand());
>         case CSSPropertyBorderStyle:
>-            return getCSSPropertyValuesForSidesShorthand(borderStyleShorthand());
>+            return getCSSPropertyValuesFor4SidesShorthand(borderStyleShorthand());
>         case CSSPropertyBorderTop:
>             return getCSSPropertyValuesForShorthandProperties(borderTopShorthand());
>         case CSSPropertyBorderWidth:
>-            return getCSSPropertyValuesForSidesShorthand(borderWidthShorthand());
>+            return getCSSPropertyValuesFor4SidesShorthand(borderWidthShorthand());
>         case CSSPropertyColumnRule:
>             return getCSSPropertyValuesForShorthandProperties(columnRuleShorthand());
>         case CSSPropertyColumns:
>@@ -3954,15 +3978,22 @@ RefPtr<CSSValue> ComputedStyleExtractor::valueForPropertyinStyle(const RenderSty
>         case CSSPropertyListStyle:
>             return getCSSPropertyValuesForShorthandProperties(listStyleShorthand());
>         case CSSPropertyMargin:
>-            return getCSSPropertyValuesForSidesShorthand(marginShorthand());
>+            return getCSSPropertyValuesFor4SidesShorthand(marginShorthand());
>+        case CSSPropertyMarginBlock:
>+            return getCSSPropertyValuesFor2SidesShorthand(marginBlockShorthand());
>+        case CSSPropertyMarginInline:
>+            return getCSSPropertyValuesFor2SidesShorthand(marginInlineShorthand());
>         case CSSPropertyOutline:
>             return getCSSPropertyValuesForShorthandProperties(outlineShorthand());
>         case CSSPropertyPadding:
>-            return getCSSPropertyValuesForSidesShorthand(paddingShorthand());
>-
>+            return getCSSPropertyValuesFor4SidesShorthand(paddingShorthand());
>+        case CSSPropertyPaddingBlock:
>+            return getCSSPropertyValuesFor2SidesShorthand(paddingBlockShorthand());
>+        case CSSPropertyPaddingInline:
>+            return getCSSPropertyValuesFor2SidesShorthand(paddingInlineShorthand());
> #if ENABLE(CSS_SCROLL_SNAP)
>         case CSSPropertyScrollSnapMargin:
>-            return getCSSPropertyValuesForSidesShorthand(scrollSnapMarginShorthand());
>+            return getCSSPropertyValuesFor4SidesShorthand(scrollSnapMarginShorthand());
>         case CSSPropertyScrollSnapMarginBottom:
>             return zoomAdjustedPixelValueForLength(style.scrollSnapMarginBottom(), style);
>         case CSSPropertyScrollSnapMarginTop:
>@@ -3972,7 +4003,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::valueForPropertyinStyle(const RenderSty
>         case CSSPropertyScrollSnapMarginLeft:
>             return zoomAdjustedPixelValueForLength(style.scrollSnapMarginLeft(), style);
>         case CSSPropertyScrollPadding:
>-            return getCSSPropertyValuesForSidesShorthand(scrollPaddingShorthand());
>+            return getCSSPropertyValuesFor4SidesShorthand(scrollPaddingShorthand());
>         case CSSPropertyScrollPaddingBottom:
>             return zoomAdjustedPixelValueForLength(style.scrollPaddingBottom(), style);
>         case CSSPropertyScrollPaddingTop:
>@@ -4252,7 +4283,28 @@ Ref<CSSValueList> ComputedStyleExtractor::getCSSPropertyValuesForShorthandProper
>     return list;
> }
> 
>-RefPtr<CSSValueList> ComputedStyleExtractor::getCSSPropertyValuesForSidesShorthand(const StylePropertyShorthand& shorthand)
>+RefPtr<CSSValueList> ComputedStyleExtractor::getCSSPropertyValuesFor2SidesShorthand(const StylePropertyShorthand& shorthand)
>+{
>+    auto list = CSSValueList::createSpaceSeparated();
>+
>+    // Assume the properties are in the usual order start, end.
>+    auto startValue = propertyValue(shorthand.properties()[0], DoNotUpdateLayout);
>+    auto endValue = propertyValue(shorthand.properties()[1], DoNotUpdateLayout);
>+
>+    // All 2 properties must be specified.
>+    if (!startValue || !endValue)
>+        return nullptr;
>+
>+    bool showEnd = !compareCSSValuePtr(startValue, endValue);
>+
>+    list->append(startValue.releaseNonNull());
>+    if (showEnd)
>+        list->append(endValue.releaseNonNull());
>+
>+    return WTFMove(list);
>+}
>+
>+RefPtr<CSSValueList> ComputedStyleExtractor::getCSSPropertyValuesFor4SidesShorthand(const StylePropertyShorthand& shorthand)
> {
>     auto list = CSSValueList::createSpaceSeparated();
> 
>diff --git a/Source/WebCore/css/CSSComputedStyleDeclaration.h b/Source/WebCore/css/CSSComputedStyleDeclaration.h
>index ecbf04f6c95e75d5633f505eabd1cc43c27ec800..6bfc647deedbab90d952b65223ec203cef35996c 100644
>--- a/Source/WebCore/css/CSSComputedStyleDeclaration.h
>+++ b/Source/WebCore/css/CSSComputedStyleDeclaration.h
>@@ -92,7 +92,8 @@ private:
>     Ref<CSSPrimitiveValue> currentColorOrValidColor(const RenderStyle*, const Color&) const;
> 
>     Ref<CSSValueList> getCSSPropertyValuesForShorthandProperties(const StylePropertyShorthand&);
>-    RefPtr<CSSValueList> getCSSPropertyValuesForSidesShorthand(const StylePropertyShorthand&);
>+    RefPtr<CSSValueList> getCSSPropertyValuesFor2SidesShorthand(const StylePropertyShorthand&);
>+    RefPtr<CSSValueList> getCSSPropertyValuesFor4SidesShorthand(const StylePropertyShorthand&);
>     Ref<CSSValueList> getBackgroundShorthandValue();
>     Ref<CSSValueList> getCSSPropertyValuesForGridShorthand(const StylePropertyShorthand&);
> 
>diff --git a/Source/WebCore/css/CSSProperties.json b/Source/WebCore/css/CSSProperties.json
>index 16dd74523b65ec1ade82d145ae09a74fd136dbb2..22885bc094f4cd1ba48009118cc24e63cf069beb 100644
>--- a/Source/WebCore/css/CSSProperties.json
>+++ b/Source/WebCore/css/CSSProperties.json
>@@ -124,6 +124,10 @@
>         "specified macro define is enabled. Prefix the macro define with '!' to",
>         "generate code when the macro define is not enabled.",
>         "",
>+        "* runtime-flag:",
>+        "The name of the flag on RuntimeEnabledFeatures (e.g. \"cssLogical\")",
>+        "that conditionally enables the property.",
>+        "",
>         "2. Lesser known capabilities of this file format",
>         "",
>         "Conditional CSS keyword value:",
>@@ -1192,6 +1196,36 @@
>                 "url": "https://www.w3.org/TR/css3-background/#the-border-shorthands"
>             }
>         },
>+        "border-block": {
>+            "codegen-properties": {
>+                "runtime-flag": "cssLogical",
>+                "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"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-shorthands"
>+            }
>+        },
>+        "border-block-color": {
>+            "codegen-properties": {
>+                "runtime-flag": "cssLogical",
>+                "longhands": [
>+                    "border-block-start-color",
>+                    "border-block-end-color"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-color"
>+            }
>+        },
>         "border-block-end": {
>             "codegen-properties": {
>                 "aliases": [
>@@ -1320,6 +1354,32 @@
>                 "url": "https://www.w3.org/TR/css-logical/#border-width"
>             }
>         },
>+        "border-block-style": {
>+            "codegen-properties": {
>+                "runtime-flag": "cssLogical",
>+                "longhands": [
>+                    "border-block-start-style",
>+                    "border-block-end-style"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-style"
>+            }
>+        },
>+        "border-block-width": {
>+            "codegen-properties": {
>+                "runtime-flag": "cssLogical",
>+                "longhands": [
>+                    "border-block-start-width",
>+                    "border-block-end-width"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-width"
>+            }
>+        },
>         "border-bottom": {
>             "codegen-properties": {
>                 "longhands": [
>@@ -1489,6 +1549,36 @@
>                 "url": "https://www.w3.org/TR/css3-background/#the-border-image-width"
>             }
>         },
>+        "border-inline": {
>+            "codegen-properties": {
>+                "runtime-flag": "cssLogical",
>+                "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"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-shorthands"
>+            }
>+        },
>+        "border-inline-color": {
>+            "codegen-properties": {
>+                "runtime-flag": "cssLogical",
>+                "longhands": [
>+                    "border-inline-start-color",
>+                    "border-inline-end-color"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-color"
>+            }
>+        },
>         "border-inline-end": {
>             "codegen-properties": {
>                 "aliases": [
>@@ -1617,6 +1707,32 @@
>                 "url": "https://www.w3.org/TR/css-logical/#border-width"
>             }
>         },
>+        "border-inline-style": {
>+            "codegen-properties": {
>+                "runtime-flag": "cssLogical",
>+                "longhands": [
>+                    "border-inline-start-style",
>+                    "border-inline-end-style"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-style"
>+            }
>+        },
>+        "border-inline-width": {
>+            "codegen-properties": {
>+                "runtime-flag": "cssLogical",
>+                "longhands": [
>+                    "border-inline-start-width",
>+                    "border-inline-end-width"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-width"
>+            }
>+        },
>         "border-left": {
>             "codegen-properties": {
>                 "longhands": [
>@@ -2647,6 +2763,19 @@
>                 "url": "https://www.w3.org/TR/CSS22/box.html#propdef-margin"
>             }
>         },
>+        "margin-block": {
>+            "codegen-properties": {
>+                "runtime-flag": "cssLogical",
>+                "longhands": [
>+                    "margin-block-start",
>+                    "margin-block-end"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#margin-properties"
>+            }
>+        },
>         "margin-block-end": {
>             "codegen-properties": {
>                 "aliases": [
>@@ -2681,6 +2810,19 @@
>                 "url": "https://www.w3.org/TR/CSS22/box.html#propdef-margin-bottom"
>             }
>         },
>+        "margin-inline": {
>+            "codegen-properties": {
>+                "runtime-flag": "cssLogical",
>+                "longhands": [
>+                    "margin-inline-start",
>+                    "margin-inline-end"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#margin-properties"
>+            }
>+        },
>         "margin-inline-end": {
>             "codegen-properties": {
>                 "aliases": [
>@@ -3067,6 +3209,19 @@
>                 "url": "https://www.w3.org/TR/CSS22/box.html#propdef-padding"
>             }
>         },
>+        "padding-block": {
>+            "codegen-properties": {
>+                "runtime-flag": "cssLogical",
>+                "longhands": [
>+                    "padding-block-start",
>+                    "padding-block-end"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#padding-properties"
>+            }
>+        },
>         "padding-block-end": {
>             "codegen-properties": {
>                 "aliases": [
>@@ -3101,6 +3256,19 @@
>                 "url": "https://www.w3.org/TR/CSS22/box.html#propdef-padding-bottom"
>             }
>         },
>+        "padding-inline": {
>+            "codegen-properties": {
>+                "runtime-flag": "cssLogical",
>+                "longhands": [
>+                    "padding-inline-start",
>+                    "padding-inline-end"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#padding-properties"
>+            }
>+        },
>         "padding-inline-end": {
>             "codegen-properties": {
>                 "aliases": [
>diff --git a/Source/WebCore/css/CSSStyleDeclaration.cpp b/Source/WebCore/css/CSSStyleDeclaration.cpp
>index 04d717ffde62a2e85d58235aa150e1ff1250c9d6..5110938f750a84540b8669ff3b53c2661c0e4f0d 100644
>--- a/Source/WebCore/css/CSSStyleDeclaration.cpp
>+++ b/Source/WebCore/css/CSSStyleDeclaration.cpp
>@@ -241,9 +241,12 @@ static CSSPropertyInfo parseJavaScriptCSSPropertyName(const AtomicString& proper
> 
>     auto* hashTableEntry = findProperty(name, outputLength);
>     if (auto propertyID = hashTableEntry ? hashTableEntry->id : 0) {
>-        propertyInfo.hadPixelOrPosPrefix = hadPixelOrPosPrefix;
>-        propertyInfo.propertyID = static_cast<CSSPropertyID>(propertyID);
>-        propertyInfoCache.get().add(propertyNameString, propertyInfo);
>+        auto id = static_cast<CSSPropertyID>(propertyID);
>+        if (isEnabledCSSProperty(id)) {
>+            propertyInfo.hadPixelOrPosPrefix = hadPixelOrPosPrefix;
>+            propertyInfo.propertyID = id;
>+            propertyInfoCache.get().add(propertyNameString, propertyInfo);
>+        }
>     }
>     return propertyInfo;
> }
>@@ -308,21 +311,25 @@ ExceptionOr<void> CSSStyleDeclaration::setNamedItem(const AtomicString& property
> 
> Vector<AtomicString> CSSStyleDeclaration::supportedPropertyNames() const
> {
>+    static unsigned numNames = 0;
>     static const AtomicString* const cssPropertyNames = [] {
>         String names[numCSSProperties];
>-        for (int i = 0; i < numCSSProperties; ++i)
>-            names[i] = getJSPropertyName(static_cast<CSSPropertyID>(firstCSSProperty + i));
>-        std::sort(&names[0], &names[numCSSProperties], WTF::codePointCompareLessThan);
>-        auto* identifiers = new AtomicString[numCSSProperties];
>-        for (int i = 0; i < numCSSProperties; ++i)
>+        for (int i = 0; i < numCSSProperties; ++i) {
>+            CSSPropertyID id = static_cast<CSSPropertyID>(firstCSSProperty + i);
>+            if (isEnabledCSSProperty(id))
>+                names[numNames++] = getJSPropertyName(id);
>+        }
>+        std::sort(&names[0], &names[numNames], WTF::codePointCompareLessThan);
>+        auto* identifiers = new AtomicString[numNames];
>+        for (unsigned i = 0; i < numNames; ++i)
>             identifiers[i] = names[i];
>         return identifiers;
>     }();
> 
>     Vector<AtomicString> result;
>-    result.reserveInitialCapacity(numCSSProperties);
>+    result.reserveInitialCapacity(numNames);
> 
>-    for (unsigned i = 0; i < numCSSProperties; ++i)
>+    for (unsigned i = 0; i < numNames; ++i)
>         result.uncheckedAppend(cssPropertyNames[i]);
> 
>     return result;
>diff --git a/Source/WebCore/css/StyleProperties.cpp b/Source/WebCore/css/StyleProperties.cpp
>index 7bddbdc353563ab7482ad6a7de415a651b11b881..84a8b9eb2df53d80f041cfb5e891c312d9965bfe 100644
>--- a/Source/WebCore/css/StyleProperties.cpp
>+++ b/Source/WebCore/css/StyleProperties.cpp
>@@ -150,7 +150,7 @@ String StyleProperties::getPropertyValue(CSSPropertyID propertyID) const
>     case CSSPropertyBackground:
>         return getLayeredShorthandValue(backgroundShorthand());
>     case CSSPropertyBorder:
>-        return borderPropertyValue();
>+        return borderPropertyValue(borderWidthShorthand(), borderStyleShorthand(), borderColorShorthand());
>     case CSSPropertyBorderTop:
>         return getShorthandValue(borderTopShorthand());
>     case CSSPropertyBorderRight:
>@@ -159,10 +159,26 @@ String StyleProperties::getPropertyValue(CSSPropertyID propertyID) const
>         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:
>@@ -203,12 +219,20 @@ String StyleProperties::getPropertyValue(CSSPropertyID propertyID) const
>         return fontValue();
>     case CSSPropertyMargin:
>         return get4Values(marginShorthand());
>+    case CSSPropertyMarginBlock:
>+        return get2Values(marginBlockShorthand());
>+    case CSSPropertyMarginInline:
>+        return get2Values(marginInlineShorthand());
>     case CSSPropertyWebkitMarginCollapse:
>         return getShorthandValue(webkitMarginCollapseShorthand());
>     case CSSPropertyOverflow:
>         return getCommonValue(overflowShorthand());
>     case CSSPropertyPadding:
>         return get4Values(paddingShorthand());
>+    case CSSPropertyPaddingBlock:
>+        return get2Values(paddingBlockShorthand());
>+    case CSSPropertyPaddingInline:
>+        return get2Values(paddingInlineShorthand());
>     case CSSPropertyTransition:
>         return getLayeredShorthandValue(transitionShorthand());
>     case CSSPropertyListStyle:
>@@ -356,6 +380,44 @@ String StyleProperties::fontValue() const
>     return result.toString();
> }
> 
>+String StyleProperties::get2Values(const StylePropertyShorthand& shorthand) const
>+{
>+    // Assume the properties are in the usual order start, end.
>+    int startValueIndex = findPropertyIndex(shorthand.properties()[0]);
>+    int endValueIndex = findPropertyIndex(shorthand.properties()[1]);
>+
>+    if (startValueIndex == -1 || endValueIndex == -1)
>+        return { };
>+
>+    auto start = propertyAt(startValueIndex);
>+    auto end = propertyAt(endValueIndex);
>+
>+    // All 2 properties must be specified.
>+    if (!start.value() || !end.value())
>+        return { };
>+
>+    // Important flags must be the same
>+    if (start.isImportant() != end.isImportant())
>+        return { };
>+
>+    if (start.isInherited() && end.isInherited())
>+        return getValueName(CSSValueInherit);
>+
>+    if (start.value()->isInitialValue() || end.value()->isInitialValue()) {
>+        if (start.value()->isInitialValue() && end.value()->isInitialValue() && !start.isImplicit())
>+            return getValueName(CSSValueInitial);
>+        return { };
>+    }
>+
>+    StringBuilder result;
>+    result.append(start.value()->cssText());
>+    if (!start.value()->equals(*end.value())) {
>+        result.append(' ');
>+        result.append(end.value()->cssText());
>+    }
>+    return result.toString();
>+}
>+
> String StyleProperties::get4Values(const StylePropertyShorthand& shorthand) const
> {
>     // Assume the properties are in the usual order top, right, bottom, left.
>@@ -621,9 +683,9 @@ String StyleProperties::getAlignmentShorthandValue(const StylePropertyShorthand&
>     return value;
> }
> 
>-String StyleProperties::borderPropertyValue() const
>+String StyleProperties::borderPropertyValue(const StylePropertyShorthand& width, const StylePropertyShorthand& style, const StylePropertyShorthand& color) const
> {
>-    const StylePropertyShorthand properties[3] = { borderWidthShorthand(), borderStyleShorthand(), borderColorShorthand() };
>+    const StylePropertyShorthand properties[3] = { width, style, color };
>     String commonValue;
>     StringBuilder result;
>     for (size_t i = 0; i < WTF_ARRAY_LENGTH(properties); ++i) {
>@@ -763,6 +825,9 @@ bool StyleProperties::isPropertyImplicit(CSSPropertyID propertyID) const
> 
> bool MutableStyleProperties::setProperty(CSSPropertyID propertyID, const String& value, bool important, CSSParserContext parserContext)
> {
>+    if (!isEnabledCSSProperty(propertyID))
>+        return false;
>+
>     // Setting the value to an empty string just removes the property in both IE and Gecko.
>     // Setting it to null seems to produce less consistent results, but we treat it just the same.
>     if (value.isEmpty())
>@@ -909,7 +974,23 @@ String StyleProperties::asText() const
>         CSSPropertyID propertyID = property.id();
>         CSSPropertyID shorthandPropertyID = CSSPropertyInvalid;
>         CSSPropertyID borderFallbackShorthandProperty = CSSPropertyInvalid;
>+        CSSPropertyID borderBlockFallbackShorthandProperty = CSSPropertyInvalid;
>+        CSSPropertyID borderInlineFallbackShorthandProperty = CSSPropertyInvalid;
>         String value;
>+        auto serializeBorderShorthand = [&] (const CSSPropertyID borderProperty, const CSSPropertyID fallbackProperty) {
>+            // FIXME: Deal with cases where only some of border sides are specified.
>+            ASSERT(borderProperty - firstCSSProperty < shorthandPropertyAppeared.size());
>+            if (!shorthandPropertyAppeared[borderProperty - firstCSSProperty] && isEnabledCSSProperty(borderProperty)) {
>+                value = getPropertyValue(borderProperty);
>+                if (value.isNull())
>+                    shorthandPropertyAppeared.set(borderProperty - firstCSSProperty);
>+                else
>+                    shorthandPropertyID = borderProperty;
>+            } else if (shorthandPropertyUsed[borderProperty - firstCSSProperty])
>+                shorthandPropertyID = borderProperty;
>+            if (!shorthandPropertyID)
>+                shorthandPropertyID = fallbackProperty;
>+        };
>         
>         if (property.value() && property.value()->isPendingSubstitutionValue()) {
>             auto& substitutionValue = downcast<CSSPendingSubstitutionValue>(*property.value());
>@@ -959,19 +1040,39 @@ String StyleProperties::asText() const
>             case CSSPropertyBorderLeftColor:
>                 if (!borderFallbackShorthandProperty)
>                     borderFallbackShorthandProperty = CSSPropertyBorderColor;
>-
>-                // FIXME: Deal with cases where only some of border-(top|right|bottom|left) are specified.
>-                ASSERT(CSSPropertyBorder - firstCSSProperty < shorthandPropertyAppeared.size());
>-                if (!shorthandPropertyAppeared[CSSPropertyBorder - firstCSSProperty]) {
>-                    value = borderPropertyValue();
>-                    if (value.isNull())
>-                        shorthandPropertyAppeared.set(CSSPropertyBorder - firstCSSProperty);
>-                    else
>-                        shorthandPropertyID = CSSPropertyBorder;
>-                } else if (shorthandPropertyUsed[CSSPropertyBorder - firstCSSProperty])
>-                    shorthandPropertyID = CSSPropertyBorder;
>-                if (!shorthandPropertyID)
>-                    shorthandPropertyID = borderFallbackShorthandProperty;
>+                serializeBorderShorthand(CSSPropertyBorder, borderFallbackShorthandProperty);
>+                break;
>+            case CSSPropertyBorderBlockStartWidth:
>+            case CSSPropertyBorderBlockEndWidth:
>+                if (!borderBlockFallbackShorthandProperty)
>+                    borderBlockFallbackShorthandProperty = CSSPropertyBorderBlockWidth;
>+                FALLTHROUGH;
>+            case CSSPropertyBorderBlockStartStyle:
>+            case CSSPropertyBorderBlockEndStyle:
>+                if (!borderBlockFallbackShorthandProperty)
>+                    borderBlockFallbackShorthandProperty = CSSPropertyBorderBlockStyle;
>+                FALLTHROUGH;
>+            case CSSPropertyBorderBlockStartColor:
>+            case CSSPropertyBorderBlockEndColor:
>+                if (!borderBlockFallbackShorthandProperty)
>+                    borderBlockFallbackShorthandProperty = CSSPropertyBorderBlockColor;
>+                serializeBorderShorthand(CSSPropertyBorderBlock, borderBlockFallbackShorthandProperty);
>+                break;
>+            case CSSPropertyBorderInlineStartWidth:
>+            case CSSPropertyBorderInlineEndWidth:
>+                if (!borderInlineFallbackShorthandProperty)
>+                    borderInlineFallbackShorthandProperty = CSSPropertyBorderInlineWidth;
>+                FALLTHROUGH;
>+            case CSSPropertyBorderInlineStartStyle:
>+            case CSSPropertyBorderInlineEndStyle:
>+                if (!borderInlineFallbackShorthandProperty)
>+                    borderInlineFallbackShorthandProperty = CSSPropertyBorderInlineStyle;
>+                FALLTHROUGH;
>+            case CSSPropertyBorderInlineStartColor:
>+            case CSSPropertyBorderInlineEndColor:
>+                if (!borderInlineFallbackShorthandProperty)
>+                    borderInlineFallbackShorthandProperty = CSSPropertyBorderInlineColor;
>+                serializeBorderShorthand(CSSPropertyBorderInline, borderInlineFallbackShorthandProperty);
>                 break;
>             case CSSPropertyWebkitBorderHorizontalSpacing:
>             case CSSPropertyWebkitBorderVerticalSpacing:
>@@ -996,6 +1097,14 @@ String StyleProperties::asText() const
>             case CSSPropertyMarginLeft:
>                 shorthandPropertyID = CSSPropertyMargin;
>                 break;
>+            case CSSPropertyMarginBlockStart:
>+            case CSSPropertyMarginBlockEnd:
>+                shorthandPropertyID = CSSPropertyMarginBlock;
>+                break;
>+            case CSSPropertyMarginInlineStart:
>+            case CSSPropertyMarginInlineEnd:
>+                shorthandPropertyID = CSSPropertyMarginInline;
>+                break;
>             case CSSPropertyOutlineWidth:
>             case CSSPropertyOutlineStyle:
>             case CSSPropertyOutlineColor:
>@@ -1011,6 +1120,14 @@ String StyleProperties::asText() const
>             case CSSPropertyPaddingLeft:
>                 shorthandPropertyID = CSSPropertyPadding;
>                 break;
>+            case CSSPropertyPaddingBlockStart:
>+            case CSSPropertyPaddingBlockEnd:
>+                shorthandPropertyID = CSSPropertyPaddingBlock;
>+                break;
>+            case CSSPropertyPaddingInlineStart:
>+            case CSSPropertyPaddingInlineEnd:
>+                shorthandPropertyID = CSSPropertyPaddingInline;
>+                break;
> #if ENABLE(CSS_SCROLL_SNAP)
>             case CSSPropertyScrollPaddingTop:
>             case CSSPropertyScrollPaddingRight:
>@@ -1066,7 +1183,7 @@ String StyleProperties::asText() const
>         }
> 
>         unsigned shortPropertyIndex = shorthandPropertyID - firstCSSProperty;
>-        if (shorthandPropertyID) {
>+        if (shorthandPropertyID && isEnabledCSSProperty(shorthandPropertyID)) {
>             ASSERT(shortPropertyIndex < shorthandPropertyUsed.size());
>             if (shorthandPropertyUsed[shortPropertyIndex])
>                 continue;
>diff --git a/Source/WebCore/css/StyleProperties.h b/Source/WebCore/css/StyleProperties.h
>index 4c48a891da0681f863561d1a142bc3e6f4c6baab..e8572e29751c1bbabdc298fd815d2a8886a9383b 100644
>--- a/Source/WebCore/css/StyleProperties.h
>+++ b/Source/WebCore/css/StyleProperties.h
>@@ -162,8 +162,9 @@ private:
>     String getShorthandValue(const StylePropertyShorthand&) const;
>     String getCommonValue(const StylePropertyShorthand&) const;
>     String getAlignmentShorthandValue(const StylePropertyShorthand&) const;
>-    String borderPropertyValue() const;
>+    String borderPropertyValue(const StylePropertyShorthand&, const StylePropertyShorthand&, const StylePropertyShorthand&) const;
>     String getLayeredShorthandValue(const StylePropertyShorthand&) const;
>+    String get2Values(const StylePropertyShorthand&) const;
>     String get4Values(const StylePropertyShorthand&) const;
>     String borderSpacingValue(const StylePropertyShorthand&) const;
>     String fontValue() const;
>diff --git a/Source/WebCore/css/makeprop.pl b/Source/WebCore/css/makeprop.pl
>index e4cb4758bea81fe1b0902dd2fe91e20356142f06..869735f10a89c452f6154984f9db61f1b980d506 100755
>--- a/Source/WebCore/css/makeprop.pl
>+++ b/Source/WebCore/css/makeprop.pl
>@@ -60,6 +60,7 @@ my %defines = map { $_ => 1 } split(/ /, $defines);
> 
> my @names;
> my @internalProprerties;
>+my %runtimeFlags;
> my $numPredefinedProperties = 2;
> my %nameIsInherited;
> my %nameIsHighPriority;
>@@ -199,6 +200,8 @@ sub addProperty($$)
>                 } elsif ($codegenOptionName eq "internal-only") {
>                     # internal-only properties exist to make it easier to parse compound properties (e.g. background-repeat) as if they were shorthands.
>                     push @internalProprerties, $name
>+                } elsif ($codegenOptionName eq "runtime-flag") {
>+                    $runtimeFlags{$name} = $codegenProperties->{"runtime-flag"};
>                 } else {
>                     die "Unrecognized codegen property \"$codegenOptionName\" for $name property.";
>                 }
>@@ -243,6 +246,7 @@ print GPERF << "EOF";
> #include \"CSSProperty.h\"
> #include \"CSSPropertyNames.h\"
> #include \"HashTools.h\"
>+#include "RuntimeEnabledFeatures.h"
> #include <wtf/ASCIICType.h>
> #include <wtf/text/AtomicString.h>
> #include <wtf/text/WTFString.h>
>@@ -320,6 +324,22 @@ print GPERF << "EOF";
>     }
> }
> 
>+bool isEnabledCSSProperty(const CSSPropertyID id)
>+{
>+    switch (id) {
>+EOF
>+
>+foreach my $name (keys %runtimeFlags) {
>+  print GPERF "    case CSSPropertyID::CSSProperty" . $nameToId{$name} . ":\n";
>+  print GPERF "        return RuntimeEnabledFeatures::sharedFeatures()." . $runtimeFlags{$name} . "Enabled();\n";
>+}
>+
>+print GPERF << "EOF";
>+    default:
>+        return true;
>+    }
>+}
>+
> const char* getPropertyName(CSSPropertyID id)
> {
>     if (id < firstCSSProperty)
>@@ -465,6 +485,7 @@ print HEADER "const CSSPropertyID lastHighPriorityProperty = CSSProperty" . $nam
> print HEADER << "EOF";
> 
> bool isInternalCSSProperty(const CSSPropertyID);
>+bool isEnabledCSSProperty(const CSSPropertyID);
> const char* getPropertyName(CSSPropertyID);
> const WTF::AtomicString& getPropertyNameAtomicString(CSSPropertyID id);
> WTF::String getPropertyNameString(CSSPropertyID id);
>diff --git a/Source/WebCore/css/parser/CSSPropertyParser.cpp b/Source/WebCore/css/parser/CSSPropertyParser.cpp
>index ec6e0036457a9d75415a43f8164eacd3d687ef3a..ed8c9c28871f7d05fd07c46c49320173c2c4f412 100644
>--- a/Source/WebCore/css/parser/CSSPropertyParser.cpp
>+++ b/Source/WebCore/css/parser/CSSPropertyParser.cpp
>@@ -146,7 +146,12 @@ static CSSPropertyID cssPropertyID(const CharacterType* propertyName, unsigned l
>     }
>     
>     const Property* hashTableEntry = findProperty(name, length);
>-    return hashTableEntry ? static_cast<CSSPropertyID>(hashTableEntry->id) : CSSPropertyInvalid;
>+    if (hashTableEntry) {
>+        auto propertyID = static_cast<CSSPropertyID>(hashTableEntry->id);
>+        if (isEnabledCSSProperty(propertyID))
>+            return propertyID;
>+    }
>+    return CSSPropertyInvalid;
> }
> 
> static bool isAppleLegacyCssValueKeyword(const char* valueKeyword, unsigned length)
>@@ -227,6 +232,9 @@ CSSPropertyParser::CSSPropertyParser(const CSSParserTokenRange& range, const CSS
> 
> void CSSPropertyParser::addProperty(CSSPropertyID property, CSSPropertyID currentShorthand, Ref<CSSValue>&& value, bool important, bool implicit)
> {
>+    if (!isEnabledCSSProperty(property))
>+        return;
>+
>     int shorthandIndex = 0;
>     bool setFromShorthand = false;
> 
>@@ -4990,12 +4998,8 @@ bool CSSPropertyParser::consumeFlex(bool important)
>     return true;
> }
> 
>-bool CSSPropertyParser::consumeBorder(bool important)
>+bool CSSPropertyParser::consumeBorder(RefPtr<CSSValue>& width, RefPtr<CSSValue>& style, RefPtr<CSSValue>& color)
> {
>-    RefPtr<CSSValue> width;
>-    RefPtr<CSSValue> style;
>-    RefPtr<CSSValue> color;
>-
>     while (!width || !style || !color) {
>         if (!width) {
>             width = consumeLineWidth(m_range, m_context.mode, UnitlessQuirk::Forbid);
>@@ -5025,15 +5029,28 @@ bool CSSPropertyParser::consumeBorder(bool important)
>     if (!color)
>         color = CSSValuePool::singleton().createImplicitInitialValue();
> 
>-    addExpandedPropertyForValue(CSSPropertyBorderWidth, width.releaseNonNull(), important);
>-    addExpandedPropertyForValue(CSSPropertyBorderStyle, style.releaseNonNull(), important);
>-    addExpandedPropertyForValue(CSSPropertyBorderColor, color.releaseNonNull(), important);
>-    addExpandedPropertyForValue(CSSPropertyBorderImage, CSSValuePool::singleton().createImplicitInitialValue(), important);
>+    return m_range.atEnd();
>+}
>+
>+bool CSSPropertyParser::consume2ValueShorthand(const StylePropertyShorthand& shorthand, bool important)
>+{
>+    ASSERT(shorthand.length() == 2);
>+    const CSSPropertyID* longhands = shorthand.properties();
>+    RefPtr<CSSValue> start = parseSingleValue(longhands[0], shorthand.id());
>+    if (!start)
>+        return false;
>+
>+    RefPtr<CSSValue> end = parseSingleValue(longhands[1], shorthand.id());
>+    bool endImplicit = !end;
>+    if (endImplicit)
>+        end = start;
>+    addProperty(longhands[0], shorthand.id(), start.releaseNonNull(), important);
>+    addProperty(longhands[1], shorthand.id(), end.releaseNonNull(), important, endImplicit);
> 
>     return m_range.atEnd();
> }
> 
>-bool CSSPropertyParser::consume4Values(const StylePropertyShorthand& shorthand, bool important)
>+bool CSSPropertyParser::consume4ValueShorthand(const StylePropertyShorthand& shorthand, bool important)
> {
>     ASSERT(shorthand.length() == 4);
>     const CSSPropertyID* longhands = shorthand.properties();
>@@ -5731,23 +5748,67 @@ bool CSSPropertyParser::parseShorthand(CSSPropertyID property, bool important)
>         // of -webkit-text-decoration completely.
>         return consumeShorthandGreedily(webkitTextDecorationShorthand(), important);
>     case CSSPropertyMargin:
>-        return consume4Values(marginShorthand(), important);
>+        return consume4ValueShorthand(marginShorthand(), important);
>+    case CSSPropertyMarginBlock:
>+        return consume2ValueShorthand(marginBlockShorthand(), important);
>+    case CSSPropertyMarginInline:
>+        return consume2ValueShorthand(marginInlineShorthand(), important);
>     case CSSPropertyPadding:
>-        return consume4Values(paddingShorthand(), important);
>+        return consume4ValueShorthand(paddingShorthand(), important);
>+    case CSSPropertyPaddingBlock:
>+        return consume2ValueShorthand(paddingBlockShorthand(), important);
>+    case CSSPropertyPaddingInline:
>+        return consume2ValueShorthand(paddingInlineShorthand(), important);
> #if ENABLE(CSS_SCROLL_SNAP)
>     case CSSPropertyScrollSnapMargin:
>-        return consume4Values(scrollSnapMarginShorthand(), important);
>+        return consume4ValueShorthand(scrollSnapMarginShorthand(), important);
>     case CSSPropertyScrollPadding:
>-        return consume4Values(scrollPaddingShorthand(), important);
>+        return consume4ValueShorthand(scrollPaddingShorthand(), important);
> #endif
>     case CSSPropertyWebkitTextEmphasis:
>         return consumeShorthandGreedily(webkitTextEmphasisShorthand(), important);
>     case CSSPropertyOutline:
>         return consumeShorthandGreedily(outlineShorthand(), important);
>+    case CSSPropertyBorderInline: {
>+        RefPtr<CSSValue> width;
>+        RefPtr<CSSValue> style;
>+        RefPtr<CSSValue> color;
>+        if (!consumeBorder(width, style, color))
>+            return false;
>+
>+        addExpandedPropertyForValue(CSSPropertyBorderInlineWidth, width.releaseNonNull(), important);
>+        addExpandedPropertyForValue(CSSPropertyBorderInlineStyle, style.releaseNonNull(), important);
>+        addExpandedPropertyForValue(CSSPropertyBorderInlineColor, color.releaseNonNull(), important);
>+        return true;
>+    }
>+    case CSSPropertyBorderInlineColor:
>+        return consume2ValueShorthand(borderInlineColorShorthand(), important);
>+    case CSSPropertyBorderInlineStyle:
>+        return consume2ValueShorthand(borderInlineStyleShorthand(), important);
>+    case CSSPropertyBorderInlineWidth:
>+        return consume2ValueShorthand(borderInlineWidthShorthand(), important);
>     case CSSPropertyBorderInlineStart:
>         return consumeShorthandGreedily(borderInlineStartShorthand(), important);
>     case CSSPropertyBorderInlineEnd:
>         return consumeShorthandGreedily(borderInlineEndShorthand(), important);
>+    case CSSPropertyBorderBlock: {
>+        RefPtr<CSSValue> width;
>+        RefPtr<CSSValue> style;
>+        RefPtr<CSSValue> color;
>+        if (!consumeBorder(width, style, color))
>+            return false;
>+
>+        addExpandedPropertyForValue(CSSPropertyBorderBlockWidth, width.releaseNonNull(), important);
>+        addExpandedPropertyForValue(CSSPropertyBorderBlockStyle, style.releaseNonNull(), important);
>+        addExpandedPropertyForValue(CSSPropertyBorderBlockColor, color.releaseNonNull(), important);
>+        return true;
>+    }
>+    case CSSPropertyBorderBlockColor:
>+        return consume2ValueShorthand(borderBlockColorShorthand(), important);
>+    case CSSPropertyBorderBlockStyle:
>+        return consume2ValueShorthand(borderBlockStyleShorthand(), important);
>+    case CSSPropertyBorderBlockWidth:
>+        return consume2ValueShorthand(borderBlockWidthShorthand(), important);
>     case CSSPropertyBorderBlockStart:
>         return consumeShorthandGreedily(borderBlockStartShorthand(), important);
>     case CSSPropertyBorderBlockEnd:
>@@ -5785,11 +5846,11 @@ bool CSSPropertyParser::parseShorthand(CSSPropertyID property, bool important)
>         return true;
>     }
>     case CSSPropertyBorderColor:
>-        return consume4Values(borderColorShorthand(), important);
>+        return consume4ValueShorthand(borderColorShorthand(), important);
>     case CSSPropertyBorderStyle:
>-        return consume4Values(borderStyleShorthand(), important);
>+        return consume4ValueShorthand(borderStyleShorthand(), important);
>     case CSSPropertyBorderWidth:
>-        return consume4Values(borderWidthShorthand(), important);
>+        return consume4ValueShorthand(borderWidthShorthand(), important);
>     case CSSPropertyBorderTop:
>         return consumeShorthandGreedily(borderTopShorthand(), important);
>     case CSSPropertyBorderRight:
>@@ -5798,8 +5859,19 @@ bool CSSPropertyParser::parseShorthand(CSSPropertyID property, bool important)
>         return consumeShorthandGreedily(borderBottomShorthand(), important);
>     case CSSPropertyBorderLeft:
>         return consumeShorthandGreedily(borderLeftShorthand(), important);
>-    case CSSPropertyBorder:
>-        return consumeBorder(important);
>+    case CSSPropertyBorder: {
>+        RefPtr<CSSValue> width;
>+        RefPtr<CSSValue> style;
>+        RefPtr<CSSValue> color;
>+        if (!consumeBorder(width, style, color))
>+            return false;
>+
>+        addExpandedPropertyForValue(CSSPropertyBorderWidth, width.releaseNonNull(), important);
>+        addExpandedPropertyForValue(CSSPropertyBorderStyle, style.releaseNonNull(), important);
>+        addExpandedPropertyForValue(CSSPropertyBorderColor, color.releaseNonNull(), important);
>+        addExpandedPropertyForValue(CSSPropertyBorderImage, CSSValuePool::singleton().createImplicitInitialValue(), important);
>+        return true;
>+    }
>     case CSSPropertyBorderImage:
>         return consumeBorderImage(property, important);
>     case CSSPropertyWebkitMaskPosition:
>diff --git a/Source/WebCore/css/parser/CSSPropertyParser.h b/Source/WebCore/css/parser/CSSPropertyParser.h
>index 1dc05ef88dac260ae6107229b8da96cc4b17e774..bcd1b927fcc5868fdcd0d97dd962586410d3a989 100644
>--- a/Source/WebCore/css/parser/CSSPropertyParser.h
>+++ b/Source/WebCore/css/parser/CSSPropertyParser.h
>@@ -69,11 +69,12 @@ private:
>     void addProperty(CSSPropertyID, CSSPropertyID, Ref<CSSValue>&&, bool important, bool implicit = false);
>     void addExpandedPropertyForValue(CSSPropertyID propId, Ref<CSSValue>&&, bool);
> 
>-    bool consumeBorder(bool important);
>+    bool consumeBorder(RefPtr<CSSValue>& width, RefPtr<CSSValue>& style, RefPtr<CSSValue>& color);
> 
>     bool parseShorthand(CSSPropertyID, bool important);
>     bool consumeShorthandGreedily(const StylePropertyShorthand&, bool important);
>-    bool consume4Values(const StylePropertyShorthand&, bool important);
>+    bool consume2ValueShorthand(const StylePropertyShorthand&, bool important);
>+    bool consume4ValueShorthand(const StylePropertyShorthand&, bool important);
> 
>     // Legacy parsing allows <string>s for animation-name
>     bool consumeAnimationShorthand(const StylePropertyShorthand&, bool important);
>diff --git a/Source/WebCore/inspector/agents/InspectorCSSAgent.cpp b/Source/WebCore/inspector/agents/InspectorCSSAgent.cpp
>index 5a3a4b2b8a5c1da724e89f43ab4c88dc6f0ce48b..4577652579af56497c52beb2d9dc125b45ed54d8 100644
>--- a/Source/WebCore/inspector/agents/InspectorCSSAgent.cpp
>+++ b/Source/WebCore/inspector/agents/InspectorCSSAgent.cpp
>@@ -719,7 +719,7 @@ void InspectorCSSAgent::getSupportedCSSProperties(ErrorString&, RefPtr<JSON::Arr
>     auto properties = JSON::ArrayOf<Inspector::Protocol::CSS::CSSPropertyInfo>::create();
>     for (int i = firstCSSProperty; i <= lastCSSProperty; ++i) {
>         CSSPropertyID propertyID = convertToCSSPropertyID(i);
>-        if (isInternalCSSProperty(propertyID))
>+        if (isInternalCSSProperty(propertyID) || !isEnabledCSSProperty(propertyID))
>             continue;
> 
>         auto property = Inspector::Protocol::CSS::CSSPropertyInfo::create()
>@@ -739,7 +739,8 @@ void InspectorCSSAgent::getSupportedCSSProperties(ErrorString&, RefPtr<JSON::Arr
>             auto longhands = JSON::ArrayOf<String>::create();
>             for (unsigned j = 0; j < shorthand.length(); ++j) {
>                 CSSPropertyID longhandID = shorthand.properties()[j];
>-                longhands->addItem(getPropertyNameString(longhandID));
>+                if (isEnabledCSSProperty(longhandID))
>+                    longhands->addItem(getPropertyNameString(longhandID));
>             }
>             property->setLonghands(WTFMove(longhands));
>         }
>diff --git a/Source/WebCore/page/RuntimeEnabledFeatures.h b/Source/WebCore/page/RuntimeEnabledFeatures.h
>index 02face0d3574bdc3bb5a3318a2e721c20289e26d..3942d83ed12f328260579f4e4b69bca23d965131 100644
>--- a/Source/WebCore/page/RuntimeEnabledFeatures.h
>+++ b/Source/WebCore/page/RuntimeEnabledFeatures.h
>@@ -338,6 +338,9 @@ public:
>     bool systemPreviewEnabled() const { return m_systemPreviewEnabled; }
> #endif
> 
>+    void setCSSLogicalEnabled(bool isEnabled) { m_CSSLogicalEnabled = isEnabled; }
>+    bool cssLogicalEnabled() const { return m_CSSLogicalEnabled; }
>+
>     WEBCORE_EXPORT static RuntimeEnabledFeatures& sharedFeatures();
> 
> private:
>@@ -511,6 +514,8 @@ private:
> 
>     bool m_undoManagerAPIEnabled { false };
> 
>+    bool m_CSSLogicalEnabled { false };
>+
>     friend class WTF::NeverDestroyed<RuntimeEnabledFeatures>;
> };
> 
>diff --git a/Source/WebKit/Shared/WebPreferences.yaml b/Source/WebKit/Shared/WebPreferences.yaml
>index bbab0781933f1c7da044d0897dd235176cb0e790..fda75eb49a0b2bc1ae93f828d39acb3cb0b74b7e 100644
>--- a/Source/WebKit/Shared/WebPreferences.yaml
>+++ b/Source/WebKit/Shared/WebPreferences.yaml
>@@ -1536,3 +1536,11 @@ UndoManagerAPIEnabled:
>   humanReadableDescription: "Enable the UndoManager DOM API"
>   category: internal
>   webcoreBinding: RuntimeEnabledFeatures
>+
>+CSSLogicalEnabled:
>+  type: bool
>+  defaultValue: false
>+  humanReadableName: "CSS Logical Properties and Values"
>+  humanReadableDescription: "Enable CSS Logical Properties and Values"
>+  webcoreBinding: RuntimeEnabledFeatures
>+  category: internal
>diff --git a/Source/WebKitLegacy/mac/WebView/WebPreferenceKeysPrivate.h b/Source/WebKitLegacy/mac/WebView/WebPreferenceKeysPrivate.h
>index 090b8380687f02823524569cdf1a07c72e1d0fb7..8493a0ae9973a49a3f06da21a8f908f8bee94791 100644
>--- a/Source/WebKitLegacy/mac/WebView/WebPreferenceKeysPrivate.h
>+++ b/Source/WebKitLegacy/mac/WebView/WebPreferenceKeysPrivate.h
>@@ -263,3 +263,4 @@
> #define WebKitMediaRecorderEnabledPreferenceKey @"WebKitMediaRecorderEnabled"
> #define WebKitServerTimingEnabledPreferenceKey @"WebKitServerTimingEnabled"
> #define WebKitSelectionAcrossShadowBoundariesEnabledPreferenceKey @"WebKitSelectionAcrossShadowBoundariesEnabled"
>+#define WebKitCSSLogicalEnabledPreferenceKey @"WebKitCSSLogicalEnabled"
>diff --git a/Source/WebKitLegacy/mac/WebView/WebPreferences.mm b/Source/WebKitLegacy/mac/WebView/WebPreferences.mm
>index 789ca9cbeb521bd468ff9bae163f9c8980a8f2fd..3361b2f403ae2d29ef65ce8f83caab3f860656b2 100644
>--- a/Source/WebKitLegacy/mac/WebView/WebPreferences.mm
>+++ b/Source/WebKitLegacy/mac/WebView/WebPreferences.mm
>@@ -668,6 +668,7 @@ public:
>         [NSNumber numberWithBool:YES], WebKitPeerConnectionEnabledPreferenceKey,
> #endif
>         [NSNumber numberWithBool:YES], WebKitSelectionAcrossShadowBoundariesEnabledPreferenceKey,
>+        [NSNumber numberWithBool:NO], WebKitCSSLogicalEnabledPreferenceKey,
> #if ENABLE(INTERSECTION_OBSERVER)
>         @NO, WebKitIntersectionObserverEnabledPreferenceKey,
> #endif
>@@ -3378,6 +3379,16 @@ static NSString *classIBCreatorID = nil;
>     [self _setBoolValue:flag forKey:WebKitSelectionAcrossShadowBoundariesEnabledPreferenceKey];
> }
> 
>+- (BOOL)cssLogicalEnabled
>+{
>+    return [self _boolValueForKey:WebKitCSSLogicalEnabledPreferenceKey];
>+}
>+
>+- (void)setCSSLogicalEnabled:(BOOL)flag
>+{
>+    [self _setBoolValue:flag forKey:WebKitCSSLogicalEnabledPreferenceKey];
>+}
>+
> @end
> 
> @implementation WebPreferences (WebInternal)
>diff --git a/Source/WebKitLegacy/mac/WebView/WebPreferencesPrivate.h b/Source/WebKitLegacy/mac/WebView/WebPreferencesPrivate.h
>index 162ada1d6449f71aae288c9e1fe4a41a333a8e8f..2d7f11a5d2699ed7069c1182e41c5ca83659a8cf 100644
>--- a/Source/WebKitLegacy/mac/WebView/WebPreferencesPrivate.h
>+++ b/Source/WebKitLegacy/mac/WebView/WebPreferencesPrivate.h
>@@ -582,6 +582,9 @@ extern NSString *WebPreferencesCacheModelChangedInternalNotification WEBKIT_DEPR
> - (void)setSelectionAcrossShadowBoundariesEnabled:(BOOL)flag;
> - (BOOL)selectionAcrossShadowBoundariesEnabled;
> 
>+- (void)setCSSLogicalEnabled:(BOOL)flag;
>+- (BOOL)cssLogicalEnabled;
>+
> @property (nonatomic) BOOL visualViewportEnabled;
> @property (nonatomic) BOOL visualViewportAPIEnabled;
> @property (nonatomic) BOOL CSSOMViewScrollingAPIEnabled;
>diff --git a/Source/WebKitLegacy/mac/WebView/WebView.mm b/Source/WebKitLegacy/mac/WebView/WebView.mm
>index 64a946b713e463bef01bda1231cb9a0cc5fa2288..bd664ac78cc10dc05b35abfff6bc38ed65ad865d 100644
>--- a/Source/WebKitLegacy/mac/WebView/WebView.mm
>+++ b/Source/WebKitLegacy/mac/WebView/WebView.mm
>@@ -3081,6 +3081,8 @@ static bool needsSelfRetainWhileLoadingQuirk()
>     settings.setFullScreenEnabled([preferences fullScreenEnabled]);
> #endif
> 
>+    RuntimeEnabledFeatures::sharedFeatures().setCSSLogicalEnabled([preferences cssLogicalEnabled]);
>+
>     settings.setHiddenPageDOMTimerThrottlingEnabled([preferences hiddenPageDOMTimerThrottlingEnabled]);
> 
>     settings.setHiddenPageCSSAnimationSuspensionEnabled([preferences hiddenPageCSSAnimationSuspensionEnabled]);
>diff --git a/Tools/ChangeLog b/Tools/ChangeLog
>index 077d393294b53bee78a3c494e8655d76d98290d8..77942883d1ad0bde61d15d83b2c0ab4c9830bb4f 100644
>--- a/Tools/ChangeLog
>+++ b/Tools/ChangeLog
>@@ -1,3 +1,22 @@
>+2018-10-31  Oriol Brufau  <obrufau@igalia.com>
>+
>+        [css-logical] Implement flow-relative margin, padding and border shorthands
>+        https://bugs.webkit.org/show_bug.cgi?id=188697
>+
>+        Reviewed by Simon Fraser and Antti Koivisto.
>+
>+        * DumpRenderTree/TestOptions.cpp:
>+        (TestOptions::TestOptions):
>+        * DumpRenderTree/TestOptions.h:
>+        * DumpRenderTree/mac/DumpRenderTree.mm:
>+        (setWebPreferencesForTestOptions):
>+        Allow tests to enable the CSSLogicalEnabled flag in WK1.
>+
>+        * Scripts/webkitpy/style/checkers/jsonchecker.py:
>+        (JSONCSSPropertiesChecker.check_codegen_properties):
>+        Allow CSS property definitions to have a 'runtime-flag' parameter which
>+        disables the property when the specified runtime flag is disabled.
>+
> 2019-01-16  Youenn Fablet  <youenn@apple.com>
> 
>         Add a new SPI for controlling getUserMedia
>diff --git a/Tools/DumpRenderTree/TestOptions.cpp b/Tools/DumpRenderTree/TestOptions.cpp
>index 82d87e13ac80ee46b570964983579368e1ad2978..ee99dc94bed38e3e6161e8bb4a68a64335cce266 100644
>--- a/Tools/DumpRenderTree/TestOptions.cpp
>+++ b/Tools/DumpRenderTree/TestOptions.cpp
>@@ -107,6 +107,8 @@ TestOptions::TestOptions(const std::string& pathOrURL, const std::string& absolu
>             jscOptions = value;
>         else if (key == "experimental:WebGPUEnabled")
>             enableWebGPU = parseBooleanTestHeaderValue(value);
>+        else if (key == "internal:CSSLogicalEnabled")
>+            enableCSSLogical = parseBooleanTestHeaderValue(value);
>         pairStart = pairEnd + 1;
>     }
> }
>diff --git a/Tools/DumpRenderTree/TestOptions.h b/Tools/DumpRenderTree/TestOptions.h
>index a44ea1faac9a6433a404d8e827a1a4a6ad62d8e1..3756e9539cf576f9dbf9aa7ad592f1ff116be6cd 100644
>--- a/Tools/DumpRenderTree/TestOptions.h
>+++ b/Tools/DumpRenderTree/TestOptions.h
>@@ -44,6 +44,7 @@ struct TestOptions {
>     bool enableColorFilter { false };
>     bool enableSelectionAcrossShadowBoundaries { true };
>     bool enableWebGPU { false };
>+    bool enableCSSLogical { false };
>     std::string jscOptions;
> 
>     TestOptions(const std::string& pathOrURL, const std::string& absolutePath);
>diff --git a/Tools/DumpRenderTree/mac/DumpRenderTree.mm b/Tools/DumpRenderTree/mac/DumpRenderTree.mm
>index d491997d3252692716ba22626bdd67d411554045..d6b5a6566eed6230886fc7828ceb84ddcc5650e2 100644
>--- a/Tools/DumpRenderTree/mac/DumpRenderTree.mm
>+++ b/Tools/DumpRenderTree/mac/DumpRenderTree.mm
>@@ -1010,6 +1010,7 @@ static void setWebPreferencesForTestOptions(const TestOptions& options)
>     preferences.colorFilterEnabled = options.enableColorFilter;
>     preferences.selectionAcrossShadowBoundariesEnabled = options.enableSelectionAcrossShadowBoundaries;
>     preferences.webGPUEnabled = options.enableWebGPU;
>+    preferences.CSSLogicalEnabled = options.enableCSSLogical;
> }
> 
> // Called once on DumpRenderTree startup.
>diff --git a/Tools/Scripts/webkitpy/style/checkers/jsonchecker.py b/Tools/Scripts/webkitpy/style/checkers/jsonchecker.py
>index 464df6bcaa51855ccc49031aba2c8316a1f18fce..303d73ac73154e202ed854f01acfddffda7749f8 100644
>--- a/Tools/Scripts/webkitpy/style/checkers/jsonchecker.py
>+++ b/Tools/Scripts/webkitpy/style/checkers/jsonchecker.py
>@@ -288,6 +288,7 @@ class JSONCSSPropertiesChecker(JSONChecker):
>             'longhands': self.validate_array,
>             'name-for-methods': self.validate_string,
>             'no-default-color': self.validate_boolean,
>+            'runtime-flag': self.validate_string,
>             'setter': self.validate_string,
>             'skip-builder': self.validate_boolean,
>             'skip-codegen': self.validate_boolean,
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index e856254f6b5005505f8a1dd3c3c961e87901d7c1..eb3def44a6d461275b2e22e69bea49af7af1d7bf 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,16 @@
>+2018-10-31  Oriol Brufau  <obrufau@igalia.com>
>+
>+        [css-logical] Implement flow-relative margin, padding and border shorthands
>+        https://bugs.webkit.org/show_bug.cgi?id=188697
>+
>+        Reviewed by Simon Fraser and Antti Koivisto.
>+
>+        Add tests checking that CSS properties disabled behind runtime flags
>+        are not exposed.
>+
>+        * webexposed/css-properties-behind-flags-expected.txt: Added.
>+        * webexposed/css-properties-behind-flags.html: Added.
>+
> 2019-01-16  Alicia Boya GarcÃa  <aboya@igalia.com>
> 
>         Unreviewed GTK and WPE test gardening.
>diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
>index 02d3c2e4b3d975456db164f4f3fa52b039a17b3e..efb73dd67705529796154ade18104b96abfbf8a4 100644
>--- a/LayoutTests/imported/w3c/ChangeLog
>+++ b/LayoutTests/imported/w3c/ChangeLog
>@@ -1,3 +1,42 @@
>+2018-10-31  Oriol Brufau  <obrufau@igalia.com>
>+
>+        [css-logical] Implement flow-relative margin, padding and border shorthands
>+        https://bugs.webkit.org/show_bug.cgi?id=188697
>+
>+        Reviewed by Simon Fraser and Antti Koivisto.
>+
>+        Import tests from the WPT test suite for CSS Logical Properties and Values,
>+        and enable the CSSLogicalEnabled runtime flag for them.
>+
>+        They still have some failures because sideways writing modes have not been
>+        implemented yet (https://bugs.webkit.org/show_bug.cgi?id=166941).
>+
>+        * web-platform-tests/css/css-logical/logical-box-border-color-expected.txt:
>+        * web-platform-tests/css/css-logical/logical-box-border-color.html:
>+        * web-platform-tests/css/css-logical/logical-box-border-shorthands-expected.txt:
>+        * web-platform-tests/css/css-logical/logical-box-border-shorthands.html:
>+        * web-platform-tests/css/css-logical/logical-box-border-style-expected.txt:
>+        * web-platform-tests/css/css-logical/logical-box-border-style.html:
>+        * web-platform-tests/css/css-logical/logical-box-border-width-expected.txt:
>+        * web-platform-tests/css/css-logical/logical-box-border-width.html:
>+        * web-platform-tests/css/css-logical/logical-box-inset-expected.txt:
>+        * web-platform-tests/css/css-logical/logical-box-inset.html:
>+        * web-platform-tests/css/css-logical/logical-box-margin-expected.txt:
>+        * web-platform-tests/css/css-logical/logical-box-margin.html:
>+        * web-platform-tests/css/css-logical/logical-box-padding-expected.txt:
>+        * web-platform-tests/css/css-logical/logical-box-padding.html:
>+        * web-platform-tests/css/css-logical/logical-box-size.html:
>+        * web-platform-tests/css/css-logical/resources/test-box-properties.js:
>+        (export.createBoxPropertyGroup):
>+        (export.createSizingPropertyGroup):
>+        (export.runTests.set test):
>+        (export.runTests):
>+        * web-platform-tests/css/css-logical/resources/test-shared.js: Added.
>+        (export.testCSSValues):
>+        (export.testComputedValues):
>+        (export.makeDeclaration):
>+        * web-platform-tests/css/css-logical/resources/w3c-import.log:
>+
> 2019-01-14  Charles Vazac  <cvazac@akamai.com>
> 
>         Import current Resource-Timing WPTs
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-color-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-color-expected.txt
>index 55ebf1ed217423d1b382be9cdf75bbf17d97960e..a19384a37a8bdd0cabca5500690dd413aa973b37 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-color-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-color-expected.txt
>@@ -1,43 +1,46 @@
> 
> 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; '. 
>-FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: ltr; ', border-inline-start-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
>+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; '. 
> PASS Test that border-*-color properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. 
> PASS Test that logical border-*-color properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>-FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: rtl; ', border-inline-start-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
>+PASS Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that border-*-color properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that border-*-color properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that logical border-*-color properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '. 
>-FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: rtl; ', border-inline-start-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
>+PASS Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '. 
> PASS Test that border-*-color properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
> PASS Test that border-*-color properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
> FAIL Test that logical border-*-color properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', border-bottom-color expected "rgb(1, 1, 1)" but got "rgb(4, 4, 4)"
>-FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', border-inline-start-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
>+FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', border-bottom-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
> FAIL Test that border-*-color properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'border-inline-start-color' last on single declaration, 'writing-mode: sideways-rl; direction: rtl; ', border-block-end-color expected "rgb(1, 1, 1)" but got "rgb(4, 4, 4)"
> FAIL Test that border-*-color properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'border-inline-start-color', two declarations, 'writing-mode: sideways-rl; direction: rtl; ', border-block-end-color expected "rgb(1, 1, 1)" but got "rgb(4, 4, 4)"
> PASS Test that logical border-*-color properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '. 
>-FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: ltr; ', border-inline-start-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
>+PASS Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '. 
> PASS Test that border-*-color properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
> PASS Test that border-*-color properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
> FAIL Test that logical border-*-color properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', border-top-color expected "rgb(1, 1, 1)" but got "rgb(3, 3, 3)"
>-FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', border-inline-start-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
>+FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', border-top-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
> FAIL Test that border-*-color properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'border-inline-start-color' last on single declaration, 'writing-mode: sideways-rl; direction: ltr; ', border-left-color expected "rgb(1, 1, 1)" but got "rgb(5, 5, 5)"
> FAIL Test that border-*-color properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'border-inline-start-color', two declarations, 'writing-mode: sideways-rl; direction: ltr; ', border-left-color expected "rgb(1, 1, 1)" but got "rgb(5, 5, 5)"
> PASS Test that logical border-*-color properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '. 
>-FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: rtl; ', border-inline-start-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
>+PASS Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '. 
> PASS Test that border-*-color properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
> PASS Test that border-*-color properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
> FAIL Test that logical border-*-color properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', border-bottom-color expected "rgb(1, 1, 1)" but got "rgb(4, 4, 4)"
>-FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', border-inline-start-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
>+FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', border-bottom-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
> FAIL Test that border-*-color properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'border-inline-start-color' last on single declaration, 'writing-mode: sideways-lr; direction: ltr; ', border-left-color expected "rgb(1, 1, 1)" but got "rgb(5, 5, 5)"
> FAIL Test that border-*-color properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'border-inline-start-color', two declarations, 'writing-mode: sideways-lr; direction: ltr; ', border-left-color expected "rgb(1, 1, 1)" but got "rgb(5, 5, 5)"
> PASS Test that logical border-*-color properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '. 
>-FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: ltr; ', border-inline-start-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
>+PASS Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '. 
> PASS Test that border-*-color properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
> PASS Test that border-*-color properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
> FAIL Test that logical border-*-color properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', border-top-color expected "rgb(1, 1, 1)" but got "rgb(3, 3, 3)"
>-FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', border-inline-start-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
>+FAIL Test that border-*-color shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', border-top-color expected "rgb(1, 1, 1)" but got "rgb(0, 0, 0)"
> FAIL Test that border-*-color properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'border-inline-start-color' last on single declaration, 'writing-mode: sideways-lr; direction: rtl; ', border-block-start-color expected "rgb(1, 1, 1)" but got "rgb(3, 3, 3)"
> FAIL Test that border-*-color properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'border-inline-start-color', two declarations, 'writing-mode: sideways-lr; direction: rtl; ', border-block-start-color expected "rgb(1, 1, 1)" but got "rgb(3, 3, 3)"
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-color.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-color.html
>index c279ef4cb2aaf2b9ea24ac60801ece5222716c66..6c24631d51ba6d2db7c2efa49773689dd1ec8e44 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-color.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-color.html
>@@ -1,4 +1,4 @@
>-<!DOCTYPE html>
>+<!DOCTYPE html> 
> <meta charset="utf-8" />
> <title>CSS Logical Properties: Flow-Relative Border Colors</title>
> <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
>@@ -9,7 +9,7 @@
> 
> <div id="log"></div>
> 
>-<script src="./resources/test-box-properties.js"></script>
>-<script>
>+<script type="module">
>+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
> runTests(createBoxPropertyGroup("border-*-color", {type: "color"}));
> </script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-shorthands-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-shorthands-expected.txt
>index f83ff576b73264ddb7694f5b178341456a304168..00beeb94084822ed8ee223e588995792ad348fb2 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-shorthands-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-shorthands-expected.txt
>@@ -1,43 +1,46 @@
> 
> 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; '. 
>-FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: ltr; ', border-inline-start expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
>+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; '. 
> PASS Test that border-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. 
> PASS Test that logical border-* properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>-FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: rtl; ', border-inline-start expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
>+PASS Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that border-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that border-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that logical border-* properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '. 
>-FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: rtl; ', border-inline-start expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
>+PASS Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '. 
> PASS Test that border-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
> PASS Test that border-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
> FAIL Test that logical border-* properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', border-bottom expected "1px solid rgb(1, 1, 1)" but got "4px double rgb(4, 4, 4)"
>-FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', border-inline-start expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
>+FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', border-bottom expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
> FAIL Test that border-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'border-inline-start' last on single declaration, 'writing-mode: sideways-rl; direction: rtl; ', border-block-end expected "1px solid rgb(1, 1, 1)" but got "4px double rgb(4, 4, 4)"
> FAIL Test that border-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'border-inline-start', two declarations, 'writing-mode: sideways-rl; direction: rtl; ', border-block-end expected "1px solid rgb(1, 1, 1)" but got "4px double rgb(4, 4, 4)"
> PASS Test that logical border-* properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '. 
>-FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: ltr; ', border-inline-start expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
>+PASS Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '. 
> PASS Test that border-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
> PASS Test that border-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
> FAIL Test that logical border-* properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', border-top expected "1px solid rgb(1, 1, 1)" but got "3px dotted rgb(3, 3, 3)"
>-FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', border-inline-start expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
>+FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', border-top expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
> FAIL Test that border-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'border-inline-start' last on single declaration, 'writing-mode: sideways-rl; direction: ltr; ', border-left expected "1px solid rgb(1, 1, 1)" but got "5px groove rgb(5, 5, 5)"
> FAIL Test that border-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'border-inline-start', two declarations, 'writing-mode: sideways-rl; direction: ltr; ', border-left expected "1px solid rgb(1, 1, 1)" but got "5px groove rgb(5, 5, 5)"
> PASS Test that logical border-* properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '. 
>-FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: rtl; ', border-inline-start expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
>+PASS Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '. 
> PASS Test that border-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
> PASS Test that border-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
> FAIL Test that logical border-* properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', border-bottom expected "1px solid rgb(1, 1, 1)" but got "4px double rgb(4, 4, 4)"
>-FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', border-inline-start expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
>+FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', border-bottom expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
> FAIL Test that border-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'border-inline-start' last on single declaration, 'writing-mode: sideways-lr; direction: ltr; ', border-left expected "1px solid rgb(1, 1, 1)" but got "5px groove rgb(5, 5, 5)"
> FAIL Test that border-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'border-inline-start', two declarations, 'writing-mode: sideways-lr; direction: ltr; ', border-left expected "1px solid rgb(1, 1, 1)" but got "5px groove rgb(5, 5, 5)"
> PASS Test that logical border-* properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '. 
>-FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: ltr; ', border-inline-start expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
>+PASS Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '. 
> PASS Test that border-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
> PASS Test that border-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
> FAIL Test that logical border-* properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', border-top expected "1px solid rgb(1, 1, 1)" but got "3px dotted rgb(3, 3, 3)"
>-FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', border-inline-start expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
>+FAIL Test that border-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', border-top expected "1px solid rgb(1, 1, 1)" but got "0px none rgb(0, 0, 0)"
> FAIL Test that border-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'border-inline-start' last on single declaration, 'writing-mode: sideways-lr; direction: rtl; ', border-block-start expected "1px solid rgb(1, 1, 1)" but got "3px dotted rgb(3, 3, 3)"
> FAIL Test that border-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'border-inline-start', two declarations, 'writing-mode: sideways-lr; direction: rtl; ', border-block-start expected "1px solid rgb(1, 1, 1)" but got "3px dotted rgb(3, 3, 3)"
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-shorthands.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-shorthands.html
>index 497d9f4867f229f3bcb030f017a78ce49cad9155..b00271284c06043943746af57e2463afd01a5278 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-shorthands.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-shorthands.html
>@@ -1,4 +1,4 @@
>-<!DOCTYPE html>
>+<!DOCTYPE html> 
> <meta charset="utf-8" />
> <title>CSS Logical Properties: Flow-Relative Border Shorthands</title>
> <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
>@@ -9,7 +9,7 @@
> 
> <div id="log"></div>
> 
>-<script src="./resources/test-box-properties.js"></script>
>-<script>
>+<script type="module">
>+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
> runTests(createBoxPropertyGroup("border-*", {type: ["length", "border-style", "color"]}));
> </script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-style-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-style-expected.txt
>index 0406950e2637b62d1629541085f48d78067bd7ec..9e216e067a8103822d43691442e5a99a17c7e243 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-style-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-style-expected.txt
>@@ -1,43 +1,46 @@
> 
> 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; '. 
>-FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: ltr; ', border-inline-start-style expected "solid" but got "none"
>+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; '. 
> PASS Test that border-*-style properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. 
> PASS Test that logical border-*-style properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>-FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: rtl; ', border-inline-start-style expected "solid" but got "none"
>+PASS Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that border-*-style properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that border-*-style properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that logical border-*-style properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '. 
>-FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: rtl; ', border-inline-start-style expected "solid" but got "none"
>+PASS Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '. 
> PASS Test that border-*-style properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
> PASS Test that border-*-style properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
> FAIL Test that logical border-*-style properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', border-bottom-style expected "solid" but got "double"
>-FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', border-inline-start-style expected "solid" but got "none"
>+FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', border-bottom-style expected "solid" but got "none"
> FAIL Test that border-*-style properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'border-inline-start-style' last on single declaration, 'writing-mode: sideways-rl; direction: rtl; ', border-block-end-style expected "solid" but got "double"
> FAIL Test that border-*-style properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'border-inline-start-style', two declarations, 'writing-mode: sideways-rl; direction: rtl; ', border-block-end-style expected "solid" but got "double"
> PASS Test that logical border-*-style properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '. 
>-FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: ltr; ', border-inline-start-style expected "solid" but got "none"
>+PASS Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '. 
> PASS Test that border-*-style properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
> PASS Test that border-*-style properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
> FAIL Test that logical border-*-style properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', border-top-style expected "solid" but got "dotted"
>-FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', border-inline-start-style expected "solid" but got "none"
>+FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', border-top-style expected "solid" but got "none"
> FAIL Test that border-*-style properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'border-inline-start-style' last on single declaration, 'writing-mode: sideways-rl; direction: ltr; ', border-left-style expected "solid" but got "groove"
> FAIL Test that border-*-style properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'border-inline-start-style', two declarations, 'writing-mode: sideways-rl; direction: ltr; ', border-left-style expected "solid" but got "groove"
> PASS Test that logical border-*-style properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '. 
>-FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: rtl; ', border-inline-start-style expected "solid" but got "none"
>+PASS Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '. 
> PASS Test that border-*-style properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
> PASS Test that border-*-style properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
> FAIL Test that logical border-*-style properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', border-bottom-style expected "solid" but got "double"
>-FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', border-inline-start-style expected "solid" but got "none"
>+FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', border-bottom-style expected "solid" but got "none"
> FAIL Test that border-*-style properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'border-inline-start-style' last on single declaration, 'writing-mode: sideways-lr; direction: ltr; ', border-left-style expected "solid" but got "groove"
> FAIL Test that border-*-style properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'border-inline-start-style', two declarations, 'writing-mode: sideways-lr; direction: ltr; ', border-left-style expected "solid" but got "groove"
> PASS Test that logical border-*-style properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '. 
>-FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: ltr; ', border-inline-start-style expected "solid" but got "none"
>+PASS Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '. 
> PASS Test that border-*-style properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
> PASS Test that border-*-style properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
> FAIL Test that logical border-*-style properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', border-top-style expected "solid" but got "dotted"
>-FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', border-inline-start-style expected "solid" but got "none"
>+FAIL Test that border-*-style shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', border-top-style expected "solid" but got "none"
> FAIL Test that border-*-style properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'border-inline-start-style' last on single declaration, 'writing-mode: sideways-lr; direction: rtl; ', border-block-start-style expected "solid" but got "dotted"
> FAIL Test that border-*-style properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'border-inline-start-style', two declarations, 'writing-mode: sideways-lr; direction: rtl; ', border-block-start-style expected "solid" but got "dotted"
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-style.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-style.html
>index 4954bac3f0b3e1e3ca10db4f29a9dc2b8a2087ae..02d365cd20c97a0502b7fe991185328431526ba8 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-style.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-style.html
>@@ -1,4 +1,4 @@
>-<!DOCTYPE html>
>+<!DOCTYPE html> 
> <meta charset="utf-8" />
> <title>CSS Logical Properties: Flow-Relative Border Styles</title>
> <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
>@@ -9,7 +9,7 @@
> 
> <div id="log"></div>
> 
>-<script src="./resources/test-box-properties.js"></script>
>-<script>
>+<script type="module">
>+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
> runTests(createBoxPropertyGroup("border-*-style", {type: "border-style"}));
> </script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-width-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-width-expected.txt
>index b4a7bb18a9e1d8d5a8e9264e21cfcab04cd34ab0..52a3b8021428824d932b7ffd9bf1e465e234e563 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-width-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-width-expected.txt
>@@ -1,43 +1,46 @@
> 
> 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; '. 
>-FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: ltr; ', border-inline-start-width expected "1px" but got "3px"
>+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; '. 
> PASS Test that border-*-width properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. 
> PASS Test that logical border-*-width properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>-FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: rtl; ', border-inline-start-width expected "1px" but got "3px"
>+PASS Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that border-*-width properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that border-*-width properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that logical border-*-width properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '. 
>-FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: rtl; ', border-inline-start-width expected "1px" but got "3px"
>+PASS Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '. 
> PASS Test that border-*-width properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
> PASS Test that border-*-width properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
> FAIL Test that logical border-*-width properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', border-bottom-width expected "1px" but got "4px"
>-FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', border-inline-start-width expected "1px" but got "3px"
>+FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', border-bottom-width expected "1px" but got "3px"
> FAIL Test that border-*-width properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'border-inline-start-width' last on single declaration, 'writing-mode: sideways-rl; direction: rtl; ', border-block-end-width expected "1px" but got "4px"
> FAIL Test that border-*-width properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'border-inline-start-width', two declarations, 'writing-mode: sideways-rl; direction: rtl; ', border-block-end-width expected "1px" but got "4px"
> PASS Test that logical border-*-width properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '. 
>-FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: ltr; ', border-inline-start-width expected "1px" but got "3px"
>+PASS Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '. 
> PASS Test that border-*-width properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
> PASS Test that border-*-width properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
> FAIL Test that logical border-*-width properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', border-top-width expected "1px" but got "3px"
>-FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', border-inline-start-width expected "1px" but got "3px"
>+FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', border-top-width expected "1px" but got "3px"
> FAIL Test that border-*-width properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'border-inline-start-width' last on single declaration, 'writing-mode: sideways-rl; direction: ltr; ', border-left-width expected "1px" but got "5px"
> FAIL Test that border-*-width properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'border-inline-start-width', two declarations, 'writing-mode: sideways-rl; direction: ltr; ', border-left-width expected "1px" but got "5px"
> PASS Test that logical border-*-width properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '. 
>-FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: rtl; ', border-inline-start-width expected "1px" but got "3px"
>+PASS Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '. 
> PASS Test that border-*-width properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
> PASS Test that border-*-width properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
> FAIL Test that logical border-*-width properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', border-bottom-width expected "1px" but got "4px"
>-FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', border-inline-start-width expected "1px" but got "3px"
>+FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', border-bottom-width expected "1px" but got "3px"
> FAIL Test that border-*-width properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'border-inline-start-width' last on single declaration, 'writing-mode: sideways-lr; direction: ltr; ', border-left-width expected "1px" but got "5px"
> FAIL Test that border-*-width properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'border-inline-start-width', two declarations, 'writing-mode: sideways-lr; direction: ltr; ', border-left-width expected "1px" but got "5px"
> PASS Test that logical border-*-width properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '. 
>-FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: ltr; ', border-inline-start-width expected "1px" but got "3px"
>+PASS Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '. 
> PASS Test that border-*-width properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
> PASS Test that border-*-width properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
> FAIL Test that logical border-*-width properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', border-top-width expected "1px" but got "3px"
>-FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', border-inline-start-width expected "1px" but got "3px"
>+FAIL Test that border-*-width shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', border-top-width expected "1px" but got "3px"
> FAIL Test that border-*-width properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'border-inline-start-width' last on single declaration, 'writing-mode: sideways-lr; direction: rtl; ', border-block-start-width expected "1px" but got "3px"
> FAIL Test that border-*-width properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'border-inline-start-width', two declarations, 'writing-mode: sideways-lr; direction: rtl; ', border-block-start-width expected "1px" but got "3px"
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-width.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-width.html
>index 7396ce745b9fa58857580485c92e8f5c79757cd4..9cbe0200f4d75c8912c9ca9e1441c22e68c9f737 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-width.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-width.html
>@@ -1,4 +1,4 @@
>-<!DOCTYPE html>
>+<!DOCTYPE html> 
> <meta charset="utf-8" />
> <title>CSS Logical Properties: Flow-Relative Border Widths</title>
> <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
>@@ -9,8 +9,8 @@
> 
> <div id="log"></div>
> 
>-<script src="./resources/test-box-properties.js"></script>
>-<script>
>+<script type="module">
>+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
> runTests(createBoxPropertyGroup("border-*-width", {
>   type: "length",
>   prerequisites: {"border-*-style": "solid"},
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-inset-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-inset-expected.txt
>index 2172523855e08ddd12d09bf04ec9a28baae451e1..709eab420d40b6cfcf04a32be16f019a3d2d520e 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-inset-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-inset-expected.txt
>@@ -1,5 +1,8 @@
> 
> FAIL Test that logical inset-* properties are supported. assert_equals: logical properties in inline style, inset-inline-start expected "1px" but got ""
>+FAIL Test that inset-inline shorthand sets longhands and serializes correctly. assert_equals: shorthand in inline style, inset-inline expected "1px 2px" but got ""
>+FAIL Test that inset-block shorthand sets longhands and serializes correctly. assert_equals: shorthand in inline style, inset-block expected "1px 2px" but got ""
>+FAIL Test that inset shorthand sets longhands and serializes correctly. assert_equals: shorthand in inline style, inset expected "1px 2px 3px 4px" but got ""
> FAIL Test that logical inset-* properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: ltr; ', inset-inline-start expected "1px" but got ""
> FAIL Test that inset-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: ltr; ', inset-inline-start expected "1px" but got ""
> FAIL Test that inset-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. assert_equals: 'inset-inline-start' last on single declaration, 'writing-mode: horizontal-tb; direction: ltr; ', left expected "5px" but got "1px"
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-inset.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-inset.html
>index 005a269276f0ad762d4bffbf0a677c493a2d134e..8587d79ed917d886e33a5f4d11916fd8294b4df7 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-inset.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-inset.html
>@@ -9,8 +9,8 @@
> 
> <div id="log"></div>
> 
>-<script src="./resources/test-box-properties.js"></script>
>-<script>
>+<script type="module">
>+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
> runTests(createBoxPropertyGroup("inset-*", {
>   type: "length",
>   prerequisites: {"position": "relative"},
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-margin-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-margin-expected.txt
>index 2c95e7413b057b63712997c5598dd06cc922431c..297fd24b55d42fd0314ca9c30883f1f498457c79 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-margin-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-margin-expected.txt
>@@ -1,43 +1,46 @@
> 
> 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; '. 
>-FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: ltr; ', margin-inline-start expected "1px" but got "0px"
>+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; '. 
> PASS Test that margin-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. 
> PASS Test that logical margin-* properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>-FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: rtl; ', margin-inline-start expected "1px" but got "0px"
>+PASS Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that margin-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that margin-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that logical margin-* properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '. 
>-FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: rtl; ', margin-inline-start expected "1px" but got "0px"
>+PASS Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '. 
> PASS Test that margin-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
> PASS Test that margin-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
> FAIL Test that logical margin-* properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', margin-bottom expected "1px" but got "4px"
>-FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', margin-inline-start expected "1px" but got "0px"
>+FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', margin-bottom expected "1px" but got "0px"
> FAIL Test that margin-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'margin-inline-start' last on single declaration, 'writing-mode: sideways-rl; direction: rtl; ', margin-block-end expected "1px" but got "4px"
> FAIL Test that margin-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'margin-inline-start', two declarations, 'writing-mode: sideways-rl; direction: rtl; ', margin-block-end expected "1px" but got "4px"
> PASS Test that logical margin-* properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '. 
>-FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: ltr; ', margin-inline-start expected "1px" but got "0px"
>+PASS Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '. 
> PASS Test that margin-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
> PASS Test that margin-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
> FAIL Test that logical margin-* properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', margin-top expected "1px" but got "3px"
>-FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', margin-inline-start expected "1px" but got "0px"
>+FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', margin-top expected "1px" but got "0px"
> FAIL Test that margin-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'margin-inline-start' last on single declaration, 'writing-mode: sideways-rl; direction: ltr; ', margin-left expected "1px" but got "5px"
> FAIL Test that margin-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'margin-inline-start', two declarations, 'writing-mode: sideways-rl; direction: ltr; ', margin-left expected "1px" but got "5px"
> PASS Test that logical margin-* properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '. 
>-FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: rtl; ', margin-inline-start expected "1px" but got "0px"
>+PASS Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '. 
> PASS Test that margin-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
> PASS Test that margin-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
> FAIL Test that logical margin-* properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', margin-bottom expected "1px" but got "4px"
>-FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', margin-inline-start expected "1px" but got "0px"
>+FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', margin-bottom expected "1px" but got "0px"
> FAIL Test that margin-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'margin-inline-start' last on single declaration, 'writing-mode: sideways-lr; direction: ltr; ', margin-left expected "1px" but got "5px"
> FAIL Test that margin-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'margin-inline-start', two declarations, 'writing-mode: sideways-lr; direction: ltr; ', margin-left expected "1px" but got "5px"
> PASS Test that logical margin-* properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '. 
>-FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: ltr; ', margin-inline-start expected "1px" but got "0px"
>+PASS Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '. 
> PASS Test that margin-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
> PASS Test that margin-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
> FAIL Test that logical margin-* properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', margin-top expected "1px" but got "3px"
>-FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', margin-inline-start expected "1px" but got "0px"
>+FAIL Test that margin-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', margin-top expected "1px" but got "0px"
> FAIL Test that margin-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'margin-inline-start' last on single declaration, 'writing-mode: sideways-lr; direction: rtl; ', margin-block-start expected "1px" but got "3px"
> FAIL Test that margin-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'margin-inline-start', two declarations, 'writing-mode: sideways-lr; direction: rtl; ', margin-block-start expected "1px" but got "3px"
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-margin.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-margin.html
>index 5fcd5c38ed02f5d2db06db33677194d3775568dc..fe0f7ce1c2d619fb197f00fa85971fe594b75e05 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-margin.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-margin.html
>@@ -1,4 +1,4 @@
>-<!DOCTYPE html>
>+<!DOCTYPE html> 
> <meta charset="utf-8" />
> <title>CSS Logical Properties: Flow-Relative Margins</title>
> <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
>@@ -9,7 +9,7 @@
> 
> <div id="log"></div>
> 
>-<script src="./resources/test-box-properties.js"></script>
>-<script>
>+<script type="module">
>+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
> runTests(createBoxPropertyGroup("margin-*", {type: "length"}));
> </script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-padding-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-padding-expected.txt
>index 64760ec7ddd7cd1b0e3b9819b9ea4dfa5ca8194d..c1c7c75181ee973e914cc06a15234768f023d2d5 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-padding-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-padding-expected.txt
>@@ -1,43 +1,46 @@
> 
> 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; '. 
>-FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: ltr; ', padding-inline-start expected "1px" but got "0px"
>+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; '. 
> PASS Test that padding-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. 
> PASS Test that logical padding-* properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>-FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: rtl; ', padding-inline-start expected "1px" but got "0px"
>+PASS Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that padding-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that padding-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
> PASS Test that logical padding-* properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '. 
>-FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: rtl; ', padding-inline-start expected "1px" but got "0px"
>+PASS Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: rtl; '. 
> PASS Test that padding-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
> PASS Test that padding-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
> FAIL Test that logical padding-* properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', padding-bottom expected "1px" but got "4px"
>-FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', padding-inline-start expected "1px" but got "0px"
>+FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', padding-bottom expected "1px" but got "0px"
> FAIL Test that padding-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'padding-inline-start' last on single declaration, 'writing-mode: sideways-rl; direction: rtl; ', padding-block-end expected "1px" but got "4px"
> FAIL Test that padding-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'padding-inline-start', two declarations, 'writing-mode: sideways-rl; direction: rtl; ', padding-block-end expected "1px" but got "4px"
> PASS Test that logical padding-* properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '. 
>-FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: ltr; ', padding-inline-start expected "1px" but got "0px"
>+PASS Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-rl; direction: ltr; '. 
> PASS Test that padding-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
> PASS Test that padding-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
> FAIL Test that logical padding-* properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', padding-top expected "1px" but got "3px"
>-FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', padding-inline-start expected "1px" but got "0px"
>+FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', padding-top expected "1px" but got "0px"
> FAIL Test that padding-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'padding-inline-start' last on single declaration, 'writing-mode: sideways-rl; direction: ltr; ', padding-left expected "1px" but got "5px"
> FAIL Test that padding-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'padding-inline-start', two declarations, 'writing-mode: sideways-rl; direction: ltr; ', padding-left expected "1px" but got "5px"
> PASS Test that logical padding-* properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '. 
>-FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: rtl; ', padding-inline-start expected "1px" but got "0px"
>+PASS Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: rtl; '. 
> PASS Test that padding-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
> PASS Test that padding-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
> FAIL Test that logical padding-* properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', padding-bottom expected "1px" but got "4px"
>-FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', padding-inline-start expected "1px" but got "0px"
>+FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', padding-bottom expected "1px" but got "0px"
> FAIL Test that padding-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'padding-inline-start' last on single declaration, 'writing-mode: sideways-lr; direction: ltr; ', padding-left expected "1px" but got "5px"
> FAIL Test that padding-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'padding-inline-start', two declarations, 'writing-mode: sideways-lr; direction: ltr; ', padding-left expected "1px" but got "5px"
> PASS Test that logical padding-* properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '. 
>-FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: ltr; ', padding-inline-start expected "1px" but got "0px"
>+PASS Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: vertical-lr; direction: ltr; '. 
> PASS Test that padding-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
> PASS Test that padding-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
> FAIL Test that logical padding-* properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', padding-top expected "1px" but got "3px"
>-FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', padding-inline-start expected "1px" but got "0px"
>+FAIL Test that padding-* shorthands set the computed value of both logical and physical longhands, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', padding-top expected "1px" but got "0px"
> FAIL Test that padding-* properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'padding-inline-start' last on single declaration, 'writing-mode: sideways-lr; direction: rtl; ', padding-block-start expected "1px" but got "3px"
> FAIL Test that padding-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'padding-inline-start', two declarations, 'writing-mode: sideways-lr; direction: rtl; ', padding-block-start expected "1px" but got "3px"
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-padding.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-padding.html
>index b3f6b6fd6dcf6026e117515779b0c04b3e5d9d32..ccf9b06bc5ab925ab390d6792d5d8ecb5ec61963 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-padding.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-padding.html
>@@ -1,4 +1,4 @@
>-<!DOCTYPE html>
>+<!DOCTYPE html> 
> <meta charset="utf-8" />
> <title>CSS Logical Properties: Flow-Relative Padding</title>
> <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
>@@ -9,7 +9,7 @@
> 
> <div id="log"></div>
> 
>-<script src="./resources/test-box-properties.js"></script>
>-<script>
>+<script type="module">
>+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
> runTests(createBoxPropertyGroup("padding-*", {type: "length"}));
> </script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-size.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-size.html
>index 90d8e4405825041f601a6e7a5dedc98a85ffaa68..f90346b839c07a457aeb2be4b085cbf0a27606e9 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-size.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-size.html
>@@ -9,8 +9,8 @@
> 
> <div id="log"></div>
> 
>-<script src="./resources/test-box-properties.js"></script>
>-<script>
>+<script type="module">
>+import {runTests, createSizingPropertyGroup} from "./resources/test-box-properties.js";
> runTests(createSizingPropertyGroup(""));
> runTests(createSizingPropertyGroup("max-"));
> runTests(createSizingPropertyGroup("min-"));
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/test-box-properties.js b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/test-box-properties.js
>index 517076962a3175b62f156f28e56f127033cc7723..1f17ff296ff2c3dcf81db1a112bda24ef04eb126 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/test-box-properties.js
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/test-box-properties.js
>@@ -1,295 +1,246 @@
>-"use strict";
>-(function(exports) {
>-  const sheet = document.head.appendChild(document.createElement("style"));
>-
>-  // Specify size for outer <div> to avoid unconstrained-size warnings
>-  // when writing-mode of the inner test <div> is vertical-*
>-  const wrapper = document.body.appendChild(document.createElement("div"));
>-  wrapper.style.cssText = "width:100px; height: 100px;";
>-  const testElement = wrapper.appendChild(document.createElement("div"));
>-  testElement.id = testElement.className = "test";
>-
>-  // Values to use while testing
>-  const testValues = {
>-    "length": ["1px", "2px", "3px", "4px", "5px"],
>-    "color": ["rgb(1, 1, 1)", "rgb(2, 2, 2)", "rgb(3, 3, 3)", "rgb(4, 4, 4)", "rgb(5, 5, 5)"],
>-    "border-style": ["solid", "dashed", "dotted", "double", "groove"],
>-  };
>-
>-  // Six unique overall writing modes for property-mapping purposes.
>-  const writingModes = [
>-    {
>-      styles: [
>-        {"writing-mode": "horizontal-tb", "direction": "ltr"},
>-      ],
>-      blockStart: "top", blockEnd: "bottom", inlineStart: "left", inlineEnd: "right",
>-      block: "vertical", inline: "horizontal" },
>-    {
>-      styles: [
>-        {"writing-mode": "horizontal-tb", "direction": "rtl"},
>-      ],
>-      blockStart: "top", blockEnd: "bottom", inlineStart: "right", inlineEnd: "left",
>-      block: "vertical", inline: "horizontal" },
>-    {
>-      styles: [
>-        {"writing-mode": "vertical-rl", "direction": "rtl"},
>-        {"writing-mode": "sideways-rl", "direction": "rtl"},
>-      ],
>-      blockStart: "right", blockEnd: "left", inlineStart: "bottom", inlineEnd: "top",
>-      block: "horizontal", inline: "vertical" },
>-    {
>-      styles: [
>-        {"writing-mode": "vertical-rl", "direction": "ltr"},
>-        {"writing-mode": "sideways-rl", "direction": "ltr"},
>-      ],
>-      blockStart: "right", blockEnd: "left", inlineStart: "top", inlineEnd: "bottom",
>-      block: "horizontal", inline: "vertical" },
>-    {
>-      styles: [
>-        {"writing-mode": "vertical-lr", "direction": "rtl"},
>-        {"writing-mode": "sideways-lr", "direction": "ltr"},
>-      ],
>-      blockStart: "left", blockEnd: "right", inlineStart: "bottom", inlineEnd: "top",
>-      block: "horizontal", inline: "vertical" },
>-    {
>-      styles: [
>-        {"writing-mode": "vertical-lr", "direction": "ltr"},
>-        {"writing-mode": "sideways-lr", "direction": "rtl"},
>-      ],
>-      blockStart: "left", blockEnd: "right", inlineStart: "top", inlineEnd: "bottom",
>-      block: "horizontal", inline: "vertical" },
>-  ];
>-
>-  function testCSSValues(testName, style, expectedValues) {
>-    for (const [property, value] of expectedValues) {
>-      assert_equals(style.getPropertyValue(property), value, `${testName}, ${property}`);
>+import {
>+  testElement,
>+  writingModes,
>+  testCSSValues,
>+  testComputedValues,
>+  makeDeclaration
>+} from "./test-shared.js";
>+
>+// Values to use while testing
>+const testValues = {
>+  "length": ["1px", "2px", "3px", "4px", "5px"],
>+  "color": ["rgb(1, 1, 1)", "rgb(2, 2, 2)", "rgb(3, 3, 3)", "rgb(4, 4, 4)", "rgb(5, 5, 5)"],
>+  "border-style": ["solid", "dashed", "dotted", "double", "groove"],
>+};
>+
>+/**
>+ * Creates a group of physical and logical box properties, such as
>+ *
>+ * { physical: {
>+ *     left: "margin-left", right: "margin-right",
>+ *     top: "margin-top", bottom: "margin-bottom",
>+ *   }, logical: {
>+ *     inlineStart: "margin-inline-start", inlineEnd: "margin-inline-end",
>+ *     blockStart: "margin-block-start", blockEnd: "margin-block-end",
>+ *   }, shorthands: {
>+ *     "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-*".
>+ * @param {Object} descriptor
>+ * @param {string|string[]} descriptor.type
>+ *        Describes the kind of values accepted by the property, like "length".
>+ *        Must be a key or a collection of keys from the `testValues` object.
>+ * @param {Object={}} descriptor.prerequisites
>+ *        Represents property declarations that are needed by `property` to work.
>+ *        For example, border-width properties require a border style.
>+ */
>+export function createBoxPropertyGroup(property, descriptor) {
>+  const logical = {};
>+  const physical = {};
>+  const shorthands = {};
>+  for (const axis of ["inline", "block"]) {
>+    const shorthand = property.replace("*", axis);
>+    const longhands = [];
>+    shorthands[shorthand] = longhands;
>+    for (const side of ["start", "end"]) {
>+      const logicalSide = axis + "-" + side;
>+      const camelCase = logicalSide.replace(/-(.)/g, (match, $1) => $1.toUpperCase());
>+      const longhand = property.replace("*", logicalSide);
>+      logical[camelCase] = longhand;
>+      longhands.push(longhand);
>     }
>   }
>-
>-  function testComputedValues(testName, rules, expectedValues) {
>-    sheet.textContent = rules;
>-    const cs = getComputedStyle(testElement);
>-    testCSSValues(testName, cs, expectedValues);
>-    sheet.textContent = "";
>+  const isInset = property === "inset-*";
>+  let prerequisites = "";
>+  for (const physicalSide of ["left", "right", "top", "bottom"]) {
>+    physical[physicalSide] = isInset ? physicalSide : property.replace("*", physicalSide);
>+    prerequisites += makeDeclaration(descriptor.prerequisites, physicalSide);
>   }
>-
>-  function makeDeclaration(object = {}, replacement = "*") {
>-    let decl = "";
>-    for (const [property, value] of Object.entries(object)) {
>-      decl += `${property.replace("*", replacement)}: ${value}; `;
>+  shorthands[property.replace("-*", "")] =
>+    ["top", "right", "bottom", "left"].map(physicalSide => physical[physicalSide]);
>+  const type = [].concat(descriptor.type);
>+  return {logical, physical, shorthands, type, prerequisites, property};
>+}
>+
>+/**
>+ * Creates a group of physical and logical sizing properties.
>+ *
>+ * @param {string} prefix
>+ *        One of "", "max-" or "min-".
>+ */
>+export function createSizingPropertyGroup(prefix) {
>+  return {
>+    logical: {
>+      inline: `${prefix}inline-size`,
>+      block: `${prefix}block-size`,
>+    },
>+    physical: {
>+      horizontal: `${prefix}width`,
>+      vertical: `${prefix}height`,
>+    },
>+    type: ["length"],
>+    prerequisites: makeDeclaration({display: "block"}),
>+    property: (prefix ? prefix.slice(0, -1) + " " : "") + "sizing",
>+  };
>+}
>+
>+/**
>+ * Tests a grup of logical and physical properties in different writing modes.
>+ *
>+ * @param {Object} group
>+ *        An object returned by createBoxPropertyGroup or createSizingPropertyGroup.
>+ */
>+export function runTests(group) {
>+  const values = testValues[group.type[0]].map(function(_, i) {
>+    return group.type.map(type => testValues[type][i]).join(" ");
>+  });
>+  const logicals = Object.values(group.logical);
>+  const physicals = Object.values(group.physical);
>+  const shorthands = group.shorthands ? Object.entries(group.shorthands) : null;
>+
>+  test(function() {
>+    const expected = [];
>+    for (const [i, logicalProp] of logicals.entries()) {
>+      testElement.style.setProperty(logicalProp, values[i]);
>+      expected.push([logicalProp, values[i]]);
>     }
>-    return decl;
>-  }
>-
>-  /**
>-   * Creates a group of physical and logical box properties, such as
>-   *
>-   * { physical: {
>-   *     left: "margin-left", right: "margin-right",
>-   *     top: "margin-top", bottom: "margin-bottom",
>-   *   }, logical: {
>-   *     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-*'" }
>-   *
>-   * @param {string} property
>-   *        A string representing the property names, like "margin-*".
>-   * @param {Object} descriptor
>-   * @param {string|string[]} descriptor.type
>-   *        Describes the kind of values accepted by the property, like "length".
>-   *        Must be a key or a collection of keys from the `testValues` object.
>-   * @param {Object={}} descriptor.prerequisites
>-   *        Represents property declarations that are needed by `property` to work.
>-   *        For example, border-width properties require a border style.
>-   */
>-  exports.createBoxPropertyGroup = function(property, descriptor) {
>-    const logical = {};
>-    const physical = {};
>-    const shorthands = {};
>-    for (const axis of ["inline", "block"]) {
>-      const shorthand = property.replace("*", axis);
>-      const longhands = [];
>-      shorthands[shorthand] = longhands;
>-      for (const side of ["start", "end"]) {
>-        const logicalSide = axis + "-" + side;
>-        const camelCase = logicalSide.replace(/-(.)/g, (match, $1) => $1.toUpperCase());
>-        const longhand = property.replace("*", logicalSide);
>-        logical[camelCase] = longhand;
>-        longhands.push(longhand);
>-      }
>+    testCSSValues("logical properties in inline style", testElement.style, expected);
>+  }, `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);
>     }
>-    const isInset = property === "inset-*";
>-    let prerequisites = "";
>-    for (const physicalSide of ["left", "right", "top", "bottom"]) {
>-      physical[physicalSide] = isInset ? physicalSide : property.replace("*", physicalSide);
>-      prerequisites += makeDeclaration(descriptor.prerequisites, physicalSide);
>+    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]]);
>     }
>-    const type = [].concat(descriptor.type);
>-    return {name, logical, physical, shorthands, type, prerequisites, property};
>-  };
>-
>-  /**
>-   * Creates a group of physical and logical sizing properties.
>-   *
>-   * @param {string} prefix
>-   *        One of "", "max-" or "min-".
>-   */
>-  exports.createSizingPropertyGroup = function(prefix) {
>-    return {
>-      logical: {
>-        inline: `${prefix}inline-size`,
>-        block: `${prefix}block-size`,
>-      },
>-      physical: {
>-        horizontal: `${prefix}width`,
>-        vertical: `${prefix}height`,
>-      },
>-      type: ["length"],
>-      prerequisites: makeDeclaration({display: "block"}),
>-      property: (prefix ? prefix.slice(0, -1) + " " : "") + "sizing",
>-    };
>-  };
>-
>-  /**
>-   * Tests a grup of logical and physical properties in different writing modes.
>-   *
>-   * @param {Object} group
>-   *        An object returned by createBoxPropertyGroup or createSizingPropertyGroup.
>-   */
>-  exports.runTests = function(group) {
>-    const values = testValues[group.type[0]].map(function(_, i) {
>-      return group.type.map(type => testValues[type][i]).join(" ");
>-    });
>-    const logicals = Object.values(group.logical);
>-    const physicals = Object.values(group.physical);
>-    const shorthands = group.shorthands ? Object.entries(group.shorthands) : null;
>-
>     test(function() {
>-      const expected = [];
>-      for (const [i, logicalProp] of logicals.entries()) {
>-        testElement.style.setProperty(logicalProp, values[i]);
>-        expected.push([logicalProp, values[i]]);
>-      }
>-      testCSSValues("logical properties in inline style", testElement.style, expected);
>-    }, `Test that logical ${group.property} properties are supported.`);
>+      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);
>-
>-        const associated = {};
>-        for (const [logicalSide, logicalProp] of Object.entries(group.logical)) {
>-          const physicalProp = group.physical[writingMode[logicalSide]];
>-          associated[logicalProp] = physicalProp;
>-          associated[physicalProp] = logicalProp;
>-        }
>-
>-        // Test that logical properties are converted to their physical
>-        // equivalent correctly when all in the group are present on a single
>-        // declaration, with no overwriting of previous properties and
>-        // no physical properties present.  We put the writing mode properties
>-        // on a separate declaration to test that the computed values of these
>-        // properties are used, rather than those on the same declaration.
>-        test(function() {
>-          let decl = group.prerequisites;
>-          const expected = [];
>-          for (const [i, logicalProp] of logicals.entries()) {
>-            decl += `${logicalProp}: ${values[i]}; `;
>-            expected.push([logicalProp, values[i]]);
>-            expected.push([associated[logicalProp], values[i]]);
>-          }
>-          testComputedValues("logical properties on one declaration, writing " +
>-                             `mode properties on another, '${writingModeDecl}'`,
>-                             `.test { ${writingModeDecl} } .test { ${decl} }`,
>-                             expected);
>-        }, `Test that logical ${group.property} properties share computed values `
>-         + `with their physical associates, with '${writingModeDecl}'.`);
>+  for (const writingMode of writingModes) {
>+    for (const style of writingMode.styles) {
>+      const writingModeDecl = makeDeclaration(style);
> 
>+      const associated = {};
>+      for (const [logicalSide, logicalProp] of Object.entries(group.logical)) {
>+        const physicalProp = group.physical[writingMode[logicalSide]];
>+        associated[logicalProp] = physicalProp;
>+        associated[physicalProp] = logicalProp;
>+      }
> 
>-        // 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(" ")}; `;
>-              const expected = [];
>-              for (let [i, longhand] of longhands.entries()) {
>-                const longhandValue = shorthandValues[group.type.length > 1 ? 0 : i];
>-                expected.push([longhand, longhandValue]);
>-                expected.push([associated[longhand], longhandValue]);
>-              }
>-              testComputedValues("shorthand properties on one declaration, writing " +
>-                                 `mode properties on another, '${writingModeDecl}'`,
>-                                 `.test { ${writingModeDecl} } .test { ${decl} }`,
>-                                 expected);
>-            }
>-          }, `Test that ${group.property} shorthands set the computed value of both `
>-           + `logical and physical longhands, with '${writingModeDecl}'.`);
>+      // Test that logical properties are converted to their physical
>+      // equivalent correctly when all in the group are present on a single
>+      // declaration, with no overwriting of previous properties and
>+      // no physical properties present.  We put the writing mode properties
>+      // on a separate declaration to test that the computed values of these
>+      // properties are used, rather than those on the same declaration.
>+      test(function() {
>+        let decl = group.prerequisites;
>+        const expected = [];
>+        for (const [i, logicalProp] of logicals.entries()) {
>+          decl += `${logicalProp}: ${values[i]}; `;
>+          expected.push([logicalProp, values[i]]);
>+          expected.push([associated[logicalProp], values[i]]);
>         }
>-
>-        // Test that logical and physical properties are cascaded together,
>-        // honoring their relative order on a single declaration
>-        // (a) with a single logical property after the physical ones
>-        // (b) with a single physical property after the logical ones
>+        testComputedValues("logical properties on one declaration, writing " +
>+                           `mode properties on another, '${writingModeDecl}'`,
>+                           `.test { ${writingModeDecl} } .test { ${decl} }`,
>+                           expected);
>+      }, `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 lastIsLogical of [true, false]) {
>-            const lasts = lastIsLogical ? logicals : physicals;
>-            const others = lastIsLogical ? physicals : logicals;
>-            for (const lastProp of lasts) {
>-              let decl = writingModeDecl + group.prerequisites;
>-              const expected = [];
>-              for (const [i, prop] of others.entries()) {
>-                decl += `${prop}: ${values[i]}; `;
>-                const valueIdx = associated[prop] === lastProp ? others.length : i;
>-                expected.push([prop, values[valueIdx]]);
>-                expected.push([associated[prop], values[valueIdx]]);
>-              }
>-              decl += `${lastProp}: ${values[others.length]}; `;
>-              testComputedValues(`'${lastProp}' last on single declaration, '${writingModeDecl}'`,
>-                                 `.test { ${decl} }`,
>-                                 expected);
>+          for (const [shorthand, longhands] of shorthands) {
>+            let valueArray = shorthandValues[shorthand];
>+            const decl = group.prerequisites + `${shorthand}: ${valueArray.join(" ")}; `;
>+            const expected = [];
>+            for (let [i, longhand] of longhands.entries()) {
>+              const longhandValue = valueArray[group.type.length > 1 ? 0 : i];
>+              expected.push([longhand, longhandValue]);
>+              expected.push([associated[longhand], longhandValue]);
>             }
>+            testComputedValues("shorthand properties on one declaration, writing " +
>+                               `mode properties on another, '${writingModeDecl}'`,
>+                               `.test { ${writingModeDecl} } .test { ${decl} }`,
>+                               expected);
>           }
>-        }, `Test that ${group.property} properties honor order of appearance when both `
>-         + `logical and physical associates are declared, with '${writingModeDecl}'.`);
>+        }, `Test that ${group.property} shorthands set the computed value of both `
>+         + `logical and physical longhands, with '${writingModeDecl}'.`);
>+      }
> 
>-        // Test that logical and physical properties are cascaded properly when
>-        // on different declarations
>-        // (a) with a logical property in the high specificity rule
>-        // (b) with a physical property in the high specificity rule
>-        test(function() {
>-          for (const highIsLogical of [true, false]) {
>-            let lowDecl = writingModeDecl + group.prerequisites;
>-            const high = highIsLogical ? logicals : physicals;
>-            const others = highIsLogical ? physicals : logicals;
>+      // Test that logical and physical properties are cascaded together,
>+      // honoring their relative order on a single declaration
>+      // (a) with a single logical property after the physical ones
>+      // (b) with a single physical property after the logical ones
>+      test(function() {
>+        for (const lastIsLogical of [true, false]) {
>+          const lasts = lastIsLogical ? logicals : physicals;
>+          const others = lastIsLogical ? physicals : logicals;
>+          for (const lastProp of lasts) {
>+            let decl = writingModeDecl + group.prerequisites;
>+            const expected = [];
>             for (const [i, prop] of others.entries()) {
>-              lowDecl += `${prop}: ${values[i]}; `;
>+              decl += `${prop}: ${values[i]}; `;
>+              const valueIdx = associated[prop] === lastProp ? others.length : i;
>+              expected.push([prop, values[valueIdx]]);
>+              expected.push([associated[prop], values[valueIdx]]);
>             }
>-            for (const highProp of high) {
>-              const highDecl = `${highProp}: ${values[others.length]}; `;
>-              const expected = [];
>-              for (const [i, prop] of others.entries()) {
>-                const valueIdx = associated[prop] === highProp ? others.length : i;
>-                expected.push([prop, values[valueIdx]]);
>-                expected.push([associated[prop], values[valueIdx]]);
>-              }
>-              testComputedValues(`'${highProp}', two declarations, '${writingModeDecl}'`,
>-                                 `#test { ${highDecl} } .test { ${lowDecl} }`,
>-                                 expected);
>+            decl += `${lastProp}: ${values[others.length]}; `;
>+            testComputedValues(`'${lastProp}' last on single declaration, '${writingModeDecl}'`,
>+                               `.test { ${decl} }`,
>+                               expected);
>+          }
>+        }
>+      }, `Test that ${group.property} properties honor order of appearance when both `
>+       + `logical and physical associates are declared, with '${writingModeDecl}'.`);
>+
>+      // Test that logical and physical properties are cascaded properly when
>+      // on different declarations
>+      // (a) with a logical property in the high specificity rule
>+      // (b) with a physical property in the high specificity rule
>+      test(function() {
>+        for (const highIsLogical of [true, false]) {
>+          let lowDecl = writingModeDecl + group.prerequisites;
>+          const high = highIsLogical ? logicals : physicals;
>+          const others = highIsLogical ? physicals : logicals;
>+          for (const [i, prop] of others.entries()) {
>+            lowDecl += `${prop}: ${values[i]}; `;
>+          }
>+          for (const highProp of high) {
>+            const highDecl = `${highProp}: ${values[others.length]}; `;
>+            const expected = [];
>+            for (const [i, prop] of others.entries()) {
>+              const valueIdx = associated[prop] === highProp ? others.length : i;
>+              expected.push([prop, values[valueIdx]]);
>+              expected.push([associated[prop], values[valueIdx]]);
>             }
>+            testComputedValues(`'${highProp}', two declarations, '${writingModeDecl}'`,
>+                               `#test { ${highDecl} } .test { ${lowDecl} }`,
>+                               expected);
>           }
>-        }, `Test that ${group.property} properties honor selector specificty when both `
>-         + `logical and physical associates are declared, with '${writingModeDecl}'.`);
>-      }
>+        }
>+      }, `Test that ${group.property} properties honor selector specificty when both `
>+       + `logical and physical associates are declared, with '${writingModeDecl}'.`);
>     }
>-  };
>-})(window);
>+  }
>+}
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/test-shared.js b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/test-shared.js
>new file mode 100644
>index 0000000000000000000000000000000000000000..da3db7470134e3e8c2bebfd2a42b32acf4e72cb6
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/test-shared.js
>@@ -0,0 +1,91 @@
>+const sheet = document.head.appendChild(document.createElement("style"));
>+
>+// Specify size for outer <div> to avoid unconstrained-size warnings
>+// when writing-mode of the inner test <div> is vertical-*
>+const wrapper = document.body.appendChild(document.createElement("div"));
>+wrapper.style.cssText = "width:100px; height: 100px;";
>+export const testElement = wrapper.appendChild(document.createElement("div"));
>+testElement.id = testElement.className = "test";
>+
>+// Six unique overall writing modes for property-mapping purposes.
>+export const writingModes = [
>+  {
>+    styles: [
>+      {"writing-mode": "horizontal-tb", "direction": "ltr"},
>+    ],
>+    blockStart: "top", blockEnd: "bottom", inlineStart: "left", inlineEnd: "right",
>+    over: "top", under: "bottom", lineLeft: "left", lineRight: "right",
>+    block: "vertical", inline: "horizontal" },
>+  {
>+    styles: [
>+      {"writing-mode": "horizontal-tb", "direction": "rtl"},
>+    ],
>+    blockStart: "top", blockEnd: "bottom", inlineStart: "right", inlineEnd: "left",
>+    over: "top", under: "bottom", lineLeft: "left", lineRight: "right",
>+    block: "vertical", inline: "horizontal" },
>+  {
>+    styles: [
>+      {"writing-mode": "vertical-rl", "direction": "rtl"},
>+      {"writing-mode": "sideways-rl", "direction": "rtl"},
>+    ],
>+    blockStart: "right", blockEnd: "left", inlineStart: "bottom", inlineEnd: "top",
>+    over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
>+    block: "horizontal", inline: "vertical" },
>+  {
>+    styles: [
>+      {"writing-mode": "vertical-rl", "direction": "ltr"},
>+      {"writing-mode": "sideways-rl", "direction": "ltr"},
>+    ],
>+    blockStart: "right", blockEnd: "left", inlineStart: "top", inlineEnd: "bottom",
>+    over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
>+    block: "horizontal", inline: "vertical" },
>+  {
>+    styles: [
>+      {"writing-mode": "vertical-lr", "direction": "rtl"},
>+    ],
>+    blockStart: "left", blockEnd: "right", inlineStart: "bottom", inlineEnd: "top",
>+    over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
>+    block: "horizontal", inline: "vertical" },
>+  {
>+    styles: [
>+      {"writing-mode": "sideways-lr", "direction": "ltr"},
>+    ],
>+    blockStart: "left", blockEnd: "right", inlineStart: "bottom", inlineEnd: "top",
>+    over: "left", under: "right", lineLeft: "bottom", lineRight: "top",
>+    block: "horizontal", inline: "vertical" },
>+  {
>+    styles: [
>+      {"writing-mode": "vertical-lr", "direction": "ltr"},
>+    ],
>+    blockStart: "left", blockEnd: "right", inlineStart: "top", inlineEnd: "bottom",
>+    over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
>+    block: "horizontal", inline: "vertical" },
>+  {
>+    styles: [
>+      {"writing-mode": "sideways-lr", "direction": "rtl"},
>+    ],
>+    blockStart: "left", blockEnd: "right", inlineStart: "top", inlineEnd: "bottom",
>+    over: "left", under: "right", lineLeft: "bottom", lineRight: "top",
>+    block: "horizontal", inline: "vertical" },
>+];
>+
>+export function testCSSValues(testName, style, expectedValues) {
>+  for (const [property, value] of expectedValues) {
>+    assert_equals(style.getPropertyValue(property), value, `${testName}, ${property}`);
>+  }
>+}
>+
>+export function testComputedValues(testName, rules, expectedValues) {
>+  sheet.textContent = rules;
>+  const cs = getComputedStyle(testElement);
>+  testCSSValues(testName, cs, expectedValues);
>+  sheet.textContent = "";
>+}
>+
>+export function makeDeclaration(object = {}, replacement = "*") {
>+  let decl = "";
>+  for (const [property, value] of Object.entries(object)) {
>+    decl += `${property.replace("*", replacement)}: ${value}; `;
>+  }
>+  return decl;
>+}
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/w3c-import.log
>index 55fec91a633d2cbf2c4302ea9779ef23584bd3b4..70de95c998c2945bd9b4646125d7d22356129622 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/w3c-import.log
>@@ -15,3 +15,4 @@ None
> ------------------------------------------------------------------------
> List of files:
> /LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/test-box-properties.js
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/test-shared.js
>diff --git a/LayoutTests/webexposed/css-properties-behind-flags-expected.txt b/LayoutTests/webexposed/css-properties-behind-flags-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..237b1cea245bad66d582c8dd8c4e46481b69140c
>--- /dev/null
>+++ b/LayoutTests/webexposed/css-properties-behind-flags-expected.txt
>@@ -0,0 +1,14 @@
>+
>+PASS border-block is not exposed 
>+PASS border-block-width is not exposed 
>+PASS border-block-style is not exposed 
>+PASS border-block-color is not exposed 
>+PASS border-inline is not exposed 
>+PASS border-inline-width is not exposed 
>+PASS border-inline-style is not exposed 
>+PASS border-inline-color is not exposed 
>+PASS margin-block is not exposed 
>+PASS margin-inline is not exposed 
>+PASS padding-block is not exposed 
>+PASS padding-inline is not exposed 
>+
>diff --git a/LayoutTests/webexposed/css-properties-behind-flags.html b/LayoutTests/webexposed/css-properties-behind-flags.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..77b1418b89611fe1d13d880aeae53014763c799b
>--- /dev/null
>+++ b/LayoutTests/webexposed/css-properties-behind-flags.html
>@@ -0,0 +1,63 @@
>+<!DOCTYPE html>
>+<script src="../resources/testharness.js"></script>
>+<script src="../resources/testharnessreport.js"></script>
>+<div id="test"></div>
>+<script>
>+let hiddenProperties = [
>+    "border-block",
>+    "border-block-width",
>+    "border-block-style",
>+    "border-block-color",
>+    "border-inline",
>+    "border-inline-width",
>+    "border-inline-style",
>+    "border-inline-color",
>+    "margin-block",
>+    "margin-inline",
>+    "padding-block",
>+    "padding-inline",
>+];
>+let element = document.getElementById("test");
>+let {style} = element;
>+let ownProps = Object.getOwnPropertyNames(style);
>+let cs = getComputedStyle(element);
>+for (let property of hiddenProperties) {
>+    test(function() {
>+        let camelCase = property.replace(/-(.)/g, (match, $1) => $1.toUpperCase());
>+        style.cssText = "";
>+        let initialStyles = Object.assign({}, cs);
>+
>+        // Check that the property is not initially exposed
>+        assert_false(property in style, `${property} not in style`);
>+        assert_false(camelCase in style, `${camelCase} not in style`);
>+        assert_false(ownProps.includes(property), `${property} not in own properties`);
>+        assert_false(ownProps.includes(camelCase), `${camelCase} not in own properties`);
>+        assert_equals(style[property], undefined, `${property} value is undefined`);
>+        assert_equals(style[camelCase], undefined, `${camelCase} value is undefined`);
>+        assert_false(property in cs, `${property} not in computed style`);
>+        assert_false(camelCase in cs, `${camelCase} not in computed style`);
>+        assert_equals(cs[property], undefined, `${property} computed value is undefined`);
>+        assert_equals(cs[camelCase], undefined, `${camelCase} computed value is undefined`);
>+
>+        // Try to set a value
>+        style[property] = "inherit";
>+        style[camelCase] = "inherit";
>+        style.setProperty(property, "inherit");
>+        style.setProperty(camelCase, "inherit");
>+
>+        // Check that it had no effect
>+        assert_equals(style.cssText, "", `${property} value ignored in cssText`);
>+        assert_equals(style.getPropertyValue(property), "", `${property} value ignored in getPropertyValue`);
>+        assert_equals(style.getPropertyValue(camelCase), "", `${camelCase} value ignored in getPropertyValue`);
>+        assert_equals(cs.getPropertyValue(property), "", `${property} has no computed value`);
>+        assert_equals(cs.getPropertyValue(camelCase), "", `${camelCase} has no computed value`);
>+        assert_object_equals(initialStyles, Object.assign({}, cs), `Computed styles remain unaffected`);
>+
>+        // Check that enabled longhands cannot be serialized into this shorthand
>+        for (let longhand of ownProps)
>+            if (longhand.startsWith(camelCase))
>+                style[longhand] = "inherit";
>+        assert_false(new RegExp("(^|;\s*)" + property + ":").test(style.cssText), `longhands can't be serialized into ${property}`);
>+    }, `${property} is not exposed`);
>+}
>+</script>

Actions: View | Formatted Diff | Diff

Attachments on bug 188697: 347814 | 347827 | 347829 | 347830 | 347831 | 347849 | 347859 | 347877 | 347883 | 347884 | 347886 | 347896 | 347970 | 347973 | 348002 | 348006 | 348012 | 348013 | 348016 | 348017 | 348027 | 348029 | 348100 | 348342 | 348354 | 349335 | 349356 | 349604 | 350364 | 350367 | 350758 | 352609 | 352630 | 352658 | 352661 | 352668 | 352671 | 352673 | 352675 | 352678 | 352684 | 352715 | 352720 | 352729 | 352749 | 352784 | 352785 | 352797 | 353532 | 353539 | 353540 | 354934 | 354940 | 354946 | 354949 | 354950 | 354955 | 354961 | 359698