Attachment 346773 Details for Bug 188386 – Patch

[patch] Patch

bug-188386-20180808185838.patch (text/plain), 245.88 KB, created by Oriol Brufau on 2018-08-08 09:58:40 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Oriol Brufau

Created: 2018-08-08 09:58:40 PDT

Size: 245.88 KB

patch

obsolete

>Subversion Revision: 234614
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 2ba87c3e3401319a9ef2f86da9c9be584deccffc..ae9838d4ad3bc4bd2edfc016a234fc64f9bbe092 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,65 @@
>+2018-08-07  Oriol Brufau  <obrufau@igalia.com>
>+
>+        [css-logical] Implement flow-relative margin, padding, border and sizing properties
>+        https://bugs.webkit.org/show_bug.cgi?id=188386
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        These properties provide the author with the ability to control margins
>+        through logical, rather than physical, direction and dimension mappings.
>+
>+        Only longhand properties and border shorthands for specific sides are
>+        implemented as part of this patch.
>+
>+        The existing prefixed properties become aliases of the new ones.
>+
>+        The change in WebCore::isLayoutDependent fixes an existing issue that
>+        made getComputedStyle provide an old value for -webkit-logical-height
>+        and -webkit-logical-height (see https://crbug.com/849855).
>+
>+        Tests: imported/w3c/web-platform-tests/css/css-logical/animation-001.html
>+               imported/w3c/web-platform-tests/css/css-logical/animation-002.html
>+               imported/w3c/web-platform-tests/css/css-logical/animation-003.tentative.html
>+               imported/w3c/web-platform-tests/css/css-logical/cascading-001.html
>+               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-inset.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
>+               imported/w3c/web-platform-tests/css/css-logical/logical-box-size.html
>+               imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size-vlr.html
>+               imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size.html
>+               imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr.html
>+               imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size.html
>+               imported/w3c/web-platform-tests/css/css-logical/logicalprops-quirklength.html
>+
>+        * css/CSSComputedStyleDeclaration.cpp:
>+        (WebCore::isLayoutDependent):
>+        (WebCore::ComputedStyleExtractor::valueForPropertyinStyle):
>+        * css/CSSProperties.json:
>+        * css/CSSProperty.cpp:
>+        (WebCore::CSSProperty::resolveDirectionAwareProperty):
>+        (WebCore::CSSProperty::isDirectionAwareProperty):
>+        * css/StyleProperties.cpp:
>+        (WebCore::StyleProperties::getPropertyValue const):
>+        * css/parser/CSSParserFastPaths.cpp:
>+        (WebCore::isSimpleLengthPropertyID):
>+        (WebCore::isColorPropertyID):
>+        (WebCore::CSSParserFastPaths::isValidKeywordPropertyAndValue):
>+        (WebCore::CSSParserFastPaths::isKeywordPropertyID):
>+        * css/parser/CSSPropertyParser.cpp:
>+        (WebCore::CSSPropertyParser::parseSingleValue):
>+        (WebCore::CSSPropertyParser::parseShorthand):
>+        * html/HTMLTableElement.cpp:
>+        (WebCore::HTMLTableElement::collectStyleForPresentationAttribute):
>+        * rendering/RenderTableCell.cpp:
>+        (WebCore::RenderTableCell::computeCollapsedStartBorder const):
>+        (WebCore::RenderTableCell::computeCollapsedEndBorder const):
>+        (WebCore::RenderTableCell::computeCollapsedBeforeBorder const):
>+        (WebCore::RenderTableCell::computeCollapsedAfterBorder const):
>+
> 2018-08-06  Ryan Haddad  <ryanhaddad@apple.com>
> 
>         Unreviewed, rolling out r234569.
>diff --git a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
>index 6e54eabb770f1eb8153d17993a7dd96130dbd744..db9c6d79e087651443f074b6a0800a0f8a3e526c 100644
>--- a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
>+++ b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
>@@ -2320,6 +2320,8 @@ static bool isLayoutDependent(CSSPropertyID propertyID, const RenderStyle* style
>         return positionOffsetValueIsRendererDependent(style, renderer);
>     case CSSPropertyWidth:
>     case CSSPropertyHeight:
>+    case CSSPropertyInlineSize:
>+    case CSSPropertyBlockSize:
>         return renderer && !renderer->isRenderSVGModelObject() && !isNonReplacedInline(*renderer);
>     case CSSPropertyPerspectiveOrigin:
>     case CSSPropertyTransformOrigin:
>@@ -3990,36 +3992,36 @@ RefPtr<CSSValue> ComputedStyleExtractor::valueForPropertyinStyle(const RenderSty
>             break;
> 
>         /* Directional properties are resolved by resolveDirectionAwareProperty() before the switch. */
>-        case CSSPropertyWebkitBorderEnd:
>-        case CSSPropertyWebkitBorderEndColor:
>-        case CSSPropertyWebkitBorderEndStyle:
>-        case CSSPropertyWebkitBorderEndWidth:
>-        case CSSPropertyWebkitBorderStart:
>-        case CSSPropertyWebkitBorderStartColor:
>-        case CSSPropertyWebkitBorderStartStyle:
>-        case CSSPropertyWebkitBorderStartWidth:
>-        case CSSPropertyWebkitBorderAfter:
>-        case CSSPropertyWebkitBorderAfterColor:
>-        case CSSPropertyWebkitBorderAfterStyle:
>-        case CSSPropertyWebkitBorderAfterWidth:
>-        case CSSPropertyWebkitBorderBefore:
>-        case CSSPropertyWebkitBorderBeforeColor:
>-        case CSSPropertyWebkitBorderBeforeStyle:
>-        case CSSPropertyWebkitBorderBeforeWidth:
>-        case CSSPropertyWebkitMarginEnd:
>-        case CSSPropertyWebkitMarginStart:
>-        case CSSPropertyWebkitMarginAfter:
>-        case CSSPropertyWebkitMarginBefore:
>-        case CSSPropertyWebkitPaddingEnd:
>-        case CSSPropertyWebkitPaddingStart:
>-        case CSSPropertyWebkitPaddingAfter:
>-        case CSSPropertyWebkitPaddingBefore:
>-        case CSSPropertyWebkitLogicalWidth:
>-        case CSSPropertyWebkitLogicalHeight:
>-        case CSSPropertyWebkitMinLogicalWidth:
>-        case CSSPropertyWebkitMinLogicalHeight:
>-        case CSSPropertyWebkitMaxLogicalWidth:
>-        case CSSPropertyWebkitMaxLogicalHeight:
>+        case CSSPropertyBorderBlockEnd:
>+        case CSSPropertyBorderBlockEndColor:
>+        case CSSPropertyBorderBlockEndStyle:
>+        case CSSPropertyBorderBlockEndWidth:
>+        case CSSPropertyBorderBlockStart:
>+        case CSSPropertyBorderBlockStartColor:
>+        case CSSPropertyBorderBlockStartStyle:
>+        case CSSPropertyBorderBlockStartWidth:
>+        case CSSPropertyBorderInlineEnd:
>+        case CSSPropertyBorderInlineEndColor:
>+        case CSSPropertyBorderInlineEndStyle:
>+        case CSSPropertyBorderInlineEndWidth:
>+        case CSSPropertyBorderInlineStart:
>+        case CSSPropertyBorderInlineStartColor:
>+        case CSSPropertyBorderInlineStartStyle:
>+        case CSSPropertyBorderInlineStartWidth:
>+        case CSSPropertyMarginBlockEnd:
>+        case CSSPropertyMarginBlockStart:
>+        case CSSPropertyMarginInlineEnd:
>+        case CSSPropertyMarginInlineStart:
>+        case CSSPropertyPaddingBlockEnd:
>+        case CSSPropertyPaddingBlockStart:
>+        case CSSPropertyPaddingInlineEnd:
>+        case CSSPropertyPaddingInlineStart:
>+        case CSSPropertyBlockSize:
>+        case CSSPropertyInlineSize:
>+        case CSSPropertyMaxBlockSize:
>+        case CSSPropertyMaxInlineSize:
>+        case CSSPropertyMinBlockSize:
>+        case CSSPropertyMinInlineSize:
>             ASSERT_NOT_REACHED();
>             break;
> 
>diff --git a/Source/WebCore/css/CSSProperties.json b/Source/WebCore/css/CSSProperties.json
>index a51b2e6d322b49d3fe4bd3f8ad25f52bddd0cd5c..876df1f9ef518313997a79f356a2a43475161d95 100644
>--- a/Source/WebCore/css/CSSProperties.json
>+++ b/Source/WebCore/css/CSSProperties.json
>@@ -1158,6 +1158,18 @@
>                 "url": "https://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty"
>             }
>         },
>+        "block-size": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-logical-height"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#dimension-properties"
>+            }
>+        },
>         "border": {
>             "codegen-properties": {
>                 "longhands": [
>@@ -1180,6 +1192,134 @@
>                 "url": "https://www.w3.org/TR/css3-background/#the-border-shorthands"
>             }
>         },
>+        "border-block-end": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-after"
>+                ],
>+                "longhands": [
>+                    "border-block-end-width",
>+                    "border-block-end-style",
>+                    "border-block-end-color"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-shorthands"
>+            }
>+        },
>+        "border-block-end-color": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-after-color"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-color"
>+            }
>+        },
>+        "border-block-end-style": {
>+            "values": [
>+                "none",
>+                "hidden",
>+                "inset",
>+                "groove",
>+                "outset",
>+                "ridge",
>+                "dotted",
>+                "dashed",
>+                "solid",
>+                "double"
>+            ],
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-after-style"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-style"
>+            }
>+        },
>+        "border-block-end-width": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-after-width"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-width"
>+            }
>+        },
>+        "border-block-start": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-before"
>+                ],
>+                "longhands": [
>+                    "border-block-start-width",
>+                    "border-block-start-style",
>+                    "border-block-start-color"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-shorthands"
>+            }
>+        },
>+        "border-block-start-color": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-before-color"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-color"
>+            }
>+        },
>+        "border-block-start-style": {
>+            "values": [
>+                "none",
>+                "hidden",
>+                "inset",
>+                "groove",
>+                "outset",
>+                "ridge",
>+                "dotted",
>+                "dashed",
>+                "solid",
>+                "double"
>+            ],
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-before-style"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-style"
>+            }
>+        },
>+        "border-block-start-width": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-before-width"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-width"
>+            }
>+        },
>         "border-bottom": {
>             "codegen-properties": {
>                 "longhands": [
>@@ -1349,6 +1489,134 @@
>                 "url": "https://www.w3.org/TR/css3-background/#the-border-image-width"
>             }
>         },
>+        "border-inline-end": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-end"
>+                ],
>+                "longhands": [
>+                    "border-inline-end-width",
>+                    "border-inline-end-style",
>+                    "border-inline-end-color"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-shorthands"
>+            }
>+        },
>+        "border-inline-end-color": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-end-color"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-color"
>+            }
>+        },
>+        "border-inline-end-style": {
>+            "values": [
>+                "none",
>+                "hidden",
>+                "inset",
>+                "groove",
>+                "outset",
>+                "ridge",
>+                "dotted",
>+                "dashed",
>+                "solid",
>+                "double"
>+            ],
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-end-style"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-style"
>+            }
>+        },
>+        "border-inline-end-width": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-end-width"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-width"
>+            }
>+        },
>+        "border-inline-start": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-start"
>+                ],
>+                "longhands": [
>+                    "border-inline-start-width",
>+                    "border-inline-start-style",
>+                    "border-inline-start-color"
>+                ]
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-shorthands"
>+            }
>+        },
>+        "border-inline-start-color": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-start-color"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-color"
>+            }
>+        },
>+        "border-inline-start-style": {
>+            "values": [
>+                "none",
>+                "hidden",
>+                "inset",
>+                "groove",
>+                "outset",
>+                "ridge",
>+                "dotted",
>+                "dashed",
>+                "solid",
>+                "double"
>+            ],
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-start-style"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-style"
>+            }
>+        },
>+        "border-inline-start-width": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-border-start-width"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#border-width"
>+            }
>+        },
>         "border-left": {
>             "codegen-properties": {
>                 "longhands": [
>@@ -2173,6 +2441,18 @@
>                 "url": "https://www.w3.org/TR/css3-images/#image-resolution"
>             }
>         },
>+        "inline-size": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-logical-width"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#dimension-properties"
>+            }
>+        },
>         "kerning": {
>             "inherited": true,
>             "codegen-properties": {
>@@ -2367,6 +2647,30 @@
>                 "url": "https://www.w3.org/TR/CSS22/box.html#propdef-margin"
>             }
>         },
>+        "margin-block-end": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-margin-after"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#margin-properties"
>+            }
>+        },
>+        "margin-block-start": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-margin-before"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#margin-properties"
>+            }
>+        },
>         "margin-bottom": {
>             "codegen-properties": {
>                 "initial": "initialMargin",
>@@ -2377,6 +2681,30 @@
>                 "url": "https://www.w3.org/TR/CSS22/box.html#propdef-margin-bottom"
>             }
>         },
>+        "margin-inline-end": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-margin-end"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#margin-properties"
>+            }
>+        },
>+        "margin-inline-start": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-margin-start"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#margin-properties"
>+            }
>+        },
>         "margin-left": {
>             "codegen-properties": {
>                 "initial": "initialMargin",
>@@ -2481,6 +2809,18 @@
>                 "url": "https://drafts.fxtf.org/css-masking-1/#propdef-mask-type"
>             }
>         },
>+        "max-block-size": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-max-logical-height"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#dimension-properties"
>+            }
>+        },
>         "max-height": {
>             "codegen-properties": {
>                 "initial": "initialMaxSize",
>@@ -2491,6 +2831,18 @@
>                 "url": "https://www.w3.org/TR/CSS22/visudet.html#propdef-max-height"
>             }
>         },
>+        "max-inline-size": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-max-logical-width"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#dimension-properties"
>+            }
>+        },
>         "max-width": {
>             "codegen-properties": {
>                 "initial": "initialMaxSize",
>@@ -2501,6 +2853,18 @@
>                 "url": "https://www.w3.org/TR/CSS22/visudet.html#propdef-max-width"
>             }
>         },
>+        "min-block-size": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-min-logical-height"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#dimension-properties"
>+            }
>+        },
>         "min-height": {
>             "codegen-properties": {
>                 "initial": "initialMinSize",
>@@ -2511,6 +2875,18 @@
>                 "url": "https://www.w3.org/TR/CSS22/visudet.html#propdef-min-height"
>             }
>         },
>+        "min-inline-size": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-min-logical-width"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#dimension-properties"
>+            }
>+        },
>         "min-width": {
>             "codegen-properties": {
>                 "initial": "initialMinSize",
>@@ -2689,8 +3065,32 @@
>                 ]
>             },
>             "specification": {
>-                "category": "css-22",
>-                "url": "https://www.w3.org/TR/CSS22/box.html#propdef-padding"
>+                "category": "css-22",
>+                "url": "https://www.w3.org/TR/CSS22/box.html#propdef-padding"
>+            }
>+        },
>+        "padding-block-end": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-padding-after"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#padding-properties"
>+            }
>+        },
>+        "padding-block-start": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-padding-before"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#padding-properties"
>             }
>         },
>         "padding-bottom": {
>@@ -2703,6 +3103,30 @@
>                 "url": "https://www.w3.org/TR/CSS22/box.html#propdef-padding-bottom"
>             }
>         },
>+        "padding-inline-end": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-padding-end"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#padding-properties"
>+            }
>+        },
>+        "padding-inline-start": {
>+            "codegen-properties": {
>+                "aliases": [
>+                    "-webkit-padding-start"
>+                ],
>+                "skip-builder": true
>+            },
>+            "specification": {
>+                "category": "css-logical-props",
>+                "url": "https://www.w3.org/TR/css-logical/#padding-properties"
>+            }
>+        },
>         "padding-left": {
>             "codegen-properties": {
>                 "initial": "initialPadding",
>@@ -3869,150 +4293,6 @@
>                 "comment": "Differs from background-size only in the interpretation of a single value: '-webkit-background-size: l;' is equivalent to 'background-size: l l;' whereas 'background-size: l;' is equivalent to 'background-size: l auto;'"
>             }
>         },
>-        "-webkit-border-after": {
>-            "codegen-properties": {
>-                "longhands": [
>-                    "-webkit-border-after-width",
>-                    "-webkit-border-after-style",
>-                    "-webkit-border-after-color"
>-                ]
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-after-color": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-after-style": {
>-            "values": [
>-                "none",
>-                "hidden",
>-                "inset",
>-                "groove",
>-                "outset",
>-                "ridge",
>-                "dotted",
>-                "dashed",
>-                "solid",
>-                "double"
>-            ],
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-after-width": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-before": {
>-            "codegen-properties": {
>-                "longhands": [
>-                    "-webkit-border-before-width",
>-                    "-webkit-border-before-style",
>-                    "-webkit-border-before-color"
>-                ]
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-before-color": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-before-style": {
>-            "values": [
>-                "none",
>-                "hidden",
>-                "inset",
>-                "groove",
>-                "outset",
>-                "ridge",
>-                "dotted",
>-                "dashed",
>-                "solid",
>-                "double"
>-            ],
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-before-width": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-end": {
>-            "codegen-properties": {
>-                "longhands": [
>-                    "-webkit-border-end-width",
>-                    "-webkit-border-end-style",
>-                    "-webkit-border-end-color"
>-                ]
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-end-color": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-end-style": {
>-            "values": [
>-                "none",
>-                "hidden",
>-                "inset",
>-                "groove",
>-                "outset",
>-                "ridge",
>-                "dotted",
>-                "dashed",
>-                "solid",
>-                "double"
>-            ],
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-end-width": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>         "-webkit-border-fit": {
>             "values": [
>                 "border",
>@@ -4047,54 +4327,6 @@
>                 "comment": "Differs from border-radius only in the interpretation of a value consisting of two lengths: '-webkit-border-radius: l1 l2;' is equivalent to 'border-radius: l1 / l2;'."
>             }
>         },
>-        "-webkit-border-start": {
>-            "codegen-properties": {
>-                "longhands": [
>-                    "-webkit-border-start-width",
>-                    "-webkit-border-start-style",
>-                    "-webkit-border-start-color"
>-                ]
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-start-color": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-start-style": {
>-            "values": [
>-                "none",
>-                "hidden",
>-                "inset",
>-                "groove",
>-                "outset",
>-                "ridge",
>-                "dotted",
>-                "dashed",
>-                "solid",
>-                "double"
>-            ],
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-border-start-width": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>         "-webkit-border-vertical-spacing": {
>             "inherited": true,
>             "codegen-properties": {
>@@ -5135,22 +5367,6 @@
>                 "url": "https://www.w3.org/TR/css-line-grid-1/#box-snap"
>             }
>         },
>-        "-webkit-logical-width": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-logical-height": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>         "-webkit-margin-after-collapse": {
>             "values": [
>                 "collapse",
>@@ -5208,38 +5424,6 @@
>                 "status": "experimental"
>             }
>         },
>-        "-webkit-margin-after": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-margin-before": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-margin-end": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-margin-start": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>         "-webkit-marquee": {
>             "codegen-properties": {
>                 "longhands": [
>@@ -5526,38 +5710,6 @@
>                 "category": "css-masking"
>             }
>         },
>-        "-webkit-max-logical-width": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-max-logical-height": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-min-logical-width": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-min-logical-height": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>         "-webkit-nbsp-mode": {
>             "inherited": true,
>             "values": [
>@@ -5581,38 +5733,6 @@
>                 "url": "https://www.w3.org/TR/css-flexbox-1/#order-property"
>             }
>         },
>-        "-webkit-padding-after": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-padding-before": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-padding-end": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>-        "-webkit-padding-start": {
>-            "codegen-properties": {
>-                "skip-builder": true
>-            },
>-            "specification": {
>-                "category": "css-logical-props"
>-            }
>-        },
>         "perspective": {
>             "codegen-properties": {
>                 "aliases": [
>diff --git a/Source/WebCore/css/CSSProperty.cpp b/Source/WebCore/css/CSSProperty.cpp
>index 181ba5ddb48c552094dba6022e7acf03425a232e..0e6a799909db305841bcfe4403f2deb3ba2b66fd 100644
>--- a/Source/WebCore/css/CSSProperty.cpp
>+++ b/Source/WebCore/css/CSSProperty.cpp
>@@ -76,75 +76,75 @@ static const StylePropertyShorthand& borderDirections()
> CSSPropertyID CSSProperty::resolveDirectionAwareProperty(CSSPropertyID propertyID, TextDirection direction, WritingMode writingMode)
> {
>     switch (propertyID) {
>-    case CSSPropertyWebkitMarginEnd:
>+    case CSSPropertyMarginInlineEnd:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::End, marginShorthand());
>-    case CSSPropertyWebkitMarginStart:
>+    case CSSPropertyMarginInlineStart:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::Start, marginShorthand());
>-    case CSSPropertyWebkitMarginBefore:
>+    case CSSPropertyMarginBlockStart:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::Before, marginShorthand());
>-    case CSSPropertyWebkitMarginAfter:
>+    case CSSPropertyMarginBlockEnd:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::After, marginShorthand());
>-    case CSSPropertyWebkitPaddingEnd:
>+    case CSSPropertyPaddingInlineEnd:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::End, paddingShorthand());
>-    case CSSPropertyWebkitPaddingStart:
>+    case CSSPropertyPaddingInlineStart:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::Start, paddingShorthand());
>-    case CSSPropertyWebkitPaddingBefore:
>+    case CSSPropertyPaddingBlockStart:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::Before, paddingShorthand());
>-    case CSSPropertyWebkitPaddingAfter:
>+    case CSSPropertyPaddingBlockEnd:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::After, paddingShorthand());
>-    case CSSPropertyWebkitBorderEnd:
>+    case CSSPropertyBorderInlineEnd:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::End, borderDirections());
>-    case CSSPropertyWebkitBorderStart:
>+    case CSSPropertyBorderInlineStart:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::Start, borderDirections());
>-    case CSSPropertyWebkitBorderBefore:
>+    case CSSPropertyBorderBlockStart:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::Before, borderDirections());
>-    case CSSPropertyWebkitBorderAfter:
>+    case CSSPropertyBorderBlockEnd:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::After, borderDirections());
>-    case CSSPropertyWebkitBorderEndColor:
>+    case CSSPropertyBorderInlineEndColor:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::End, borderColorShorthand());
>-    case CSSPropertyWebkitBorderStartColor:
>+    case CSSPropertyBorderInlineStartColor:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::Start, borderColorShorthand());
>-    case CSSPropertyWebkitBorderBeforeColor:
>+    case CSSPropertyBorderBlockStartColor:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::Before, borderColorShorthand());
>-    case CSSPropertyWebkitBorderAfterColor:
>+    case CSSPropertyBorderBlockEndColor:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::After, borderColorShorthand());
>-    case CSSPropertyWebkitBorderEndStyle:
>+    case CSSPropertyBorderInlineEndStyle:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::End, borderStyleShorthand());
>-    case CSSPropertyWebkitBorderStartStyle:
>+    case CSSPropertyBorderInlineStartStyle:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::Start, borderStyleShorthand());
>-    case CSSPropertyWebkitBorderBeforeStyle:
>+    case CSSPropertyBorderBlockStartStyle:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::Before, borderStyleShorthand());
>-    case CSSPropertyWebkitBorderAfterStyle:
>+    case CSSPropertyBorderBlockEndStyle:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::After, borderStyleShorthand());
>-    case CSSPropertyWebkitBorderEndWidth:
>+    case CSSPropertyBorderInlineEndWidth:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::End, borderWidthShorthand());
>-    case CSSPropertyWebkitBorderStartWidth:
>+    case CSSPropertyBorderInlineStartWidth:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::Start, borderWidthShorthand());
>-    case CSSPropertyWebkitBorderBeforeWidth:
>+    case CSSPropertyBorderBlockStartWidth:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::Before, borderWidthShorthand());
>-    case CSSPropertyWebkitBorderAfterWidth:
>+    case CSSPropertyBorderBlockEndWidth:
>         return resolveToPhysicalProperty(direction, writingMode, LogicalBoxSide::After, borderWidthShorthand());
>-    case CSSPropertyWebkitLogicalWidth: {
>+    case CSSPropertyInlineSize: {
>         const CSSPropertyID properties[2] = { CSSPropertyWidth, CSSPropertyHeight };
>         return resolveToPhysicalProperty(writingMode, LogicalWidth, properties);
>     }
>-    case CSSPropertyWebkitLogicalHeight: {
>+    case CSSPropertyBlockSize: {
>         const CSSPropertyID properties[2] = { CSSPropertyWidth, CSSPropertyHeight };
>         return resolveToPhysicalProperty(writingMode, LogicalHeight, properties);
>     }
>-    case CSSPropertyWebkitMinLogicalWidth: {
>+    case CSSPropertyMinInlineSize: {
>         const CSSPropertyID properties[2] = { CSSPropertyMinWidth, CSSPropertyMinHeight };
>         return resolveToPhysicalProperty(writingMode, LogicalWidth, properties);
>     }
>-    case CSSPropertyWebkitMinLogicalHeight: {
>+    case CSSPropertyMinBlockSize: {
>         const CSSPropertyID properties[2] = { CSSPropertyMinWidth, CSSPropertyMinHeight };
>         return resolveToPhysicalProperty(writingMode, LogicalHeight, properties);
>     }
>-    case CSSPropertyWebkitMaxLogicalWidth: {
>+    case CSSPropertyMaxInlineSize: {
>         const CSSPropertyID properties[2] = { CSSPropertyMaxWidth, CSSPropertyMaxHeight };
>         return resolveToPhysicalProperty(writingMode, LogicalWidth, properties);
>     }
>-    case CSSPropertyWebkitMaxLogicalHeight: {
>+    case CSSPropertyMaxBlockSize: {
>         const CSSPropertyID properties[2] = { CSSPropertyMaxWidth, CSSPropertyMaxHeight };
>         return resolveToPhysicalProperty(writingMode, LogicalHeight, properties);
>     }
>@@ -174,32 +174,32 @@ bool CSSProperty::isDescriptorOnly(CSSPropertyID propertyID)
> bool CSSProperty::isDirectionAwareProperty(CSSPropertyID propertyID)
> {
>     switch (propertyID) {
>-    case CSSPropertyWebkitBorderEndColor:
>-    case CSSPropertyWebkitBorderEndStyle:
>-    case CSSPropertyWebkitBorderEndWidth:
>-    case CSSPropertyWebkitBorderStartColor:
>-    case CSSPropertyWebkitBorderStartStyle:
>-    case CSSPropertyWebkitBorderStartWidth:
>-    case CSSPropertyWebkitBorderBeforeColor:
>-    case CSSPropertyWebkitBorderBeforeStyle:
>-    case CSSPropertyWebkitBorderBeforeWidth:
>-    case CSSPropertyWebkitBorderAfterColor:
>-    case CSSPropertyWebkitBorderAfterStyle:
>-    case CSSPropertyWebkitBorderAfterWidth:
>-    case CSSPropertyWebkitMarginEnd:
>-    case CSSPropertyWebkitMarginStart:
>-    case CSSPropertyWebkitMarginBefore:
>-    case CSSPropertyWebkitMarginAfter:
>-    case CSSPropertyWebkitPaddingEnd:
>-    case CSSPropertyWebkitPaddingStart:
>-    case CSSPropertyWebkitPaddingBefore:
>-    case CSSPropertyWebkitPaddingAfter:
>-    case CSSPropertyWebkitLogicalWidth:
>-    case CSSPropertyWebkitLogicalHeight:
>-    case CSSPropertyWebkitMinLogicalWidth:
>-    case CSSPropertyWebkitMinLogicalHeight:
>-    case CSSPropertyWebkitMaxLogicalWidth:
>-    case CSSPropertyWebkitMaxLogicalHeight:
>+    case CSSPropertyBorderInlineEndColor:
>+    case CSSPropertyBorderInlineEndStyle:
>+    case CSSPropertyBorderInlineEndWidth:
>+    case CSSPropertyBorderInlineStartColor:
>+    case CSSPropertyBorderInlineStartStyle:
>+    case CSSPropertyBorderInlineStartWidth:
>+    case CSSPropertyBorderBlockStartColor:
>+    case CSSPropertyBorderBlockStartStyle:
>+    case CSSPropertyBorderBlockStartWidth:
>+    case CSSPropertyBorderBlockEndColor:
>+    case CSSPropertyBorderBlockEndStyle:
>+    case CSSPropertyBorderBlockEndWidth:
>+    case CSSPropertyMarginInlineEnd:
>+    case CSSPropertyMarginInlineStart:
>+    case CSSPropertyMarginBlockStart:
>+    case CSSPropertyMarginBlockEnd:
>+    case CSSPropertyPaddingInlineEnd:
>+    case CSSPropertyPaddingInlineStart:
>+    case CSSPropertyPaddingBlockStart:
>+    case CSSPropertyPaddingBlockEnd:
>+    case CSSPropertyInlineSize:
>+    case CSSPropertyBlockSize:
>+    case CSSPropertyMinInlineSize:
>+    case CSSPropertyMinBlockSize:
>+    case CSSPropertyMaxInlineSize:
>+    case CSSPropertyMaxBlockSize:
>         return true;
>     default:
>         return false;
>diff --git a/Source/WebCore/css/StyleProperties.cpp b/Source/WebCore/css/StyleProperties.cpp
>index 30dbeb42b6b5a67a06fa9c65e0fdfc6deccf9086..345013961a16262ad7208b3beebb8f487bfe6b6a 100644
>--- a/Source/WebCore/css/StyleProperties.cpp
>+++ b/Source/WebCore/css/StyleProperties.cpp
>@@ -157,6 +157,14 @@ String StyleProperties::getPropertyValue(CSSPropertyID propertyID) const
>         return getShorthandValue(borderBottomShorthand());
>     case CSSPropertyBorderLeft:
>         return getShorthandValue(borderLeftShorthand());
>+    case CSSPropertyBorderBlockStart:
>+        return getShorthandValue(borderBlockStartShorthand());
>+    case CSSPropertyBorderBlockEnd:
>+        return getShorthandValue(borderBlockEndShorthand());
>+    case CSSPropertyBorderInlineStart:
>+        return getShorthandValue(borderInlineStartShorthand());
>+    case CSSPropertyBorderInlineEnd:
>+        return getShorthandValue(borderInlineEndShorthand());
>     case CSSPropertyOutline:
>         return getShorthandValue(outlineShorthand());
>     case CSSPropertyBorderColor:
>diff --git a/Source/WebCore/css/parser/CSSParserFastPaths.cpp b/Source/WebCore/css/parser/CSSParserFastPaths.cpp
>index 4dd83783f16494caa5ab0229c6643184b20cf2b5..a92b7c04a6c6bb5398aff3470a681fd9076881a3 100644
>--- a/Source/WebCore/css/parser/CSSParserFastPaths.cpp
>+++ b/Source/WebCore/css/parser/CSSParserFastPaths.cpp
>@@ -55,14 +55,14 @@ static inline bool isSimpleLengthPropertyID(CSSPropertyID propertyId, bool& acce
>     case CSSPropertyPaddingLeft:
>     case CSSPropertyPaddingRight:
>     case CSSPropertyPaddingTop:
>-    case CSSPropertyWebkitLogicalWidth:
>-    case CSSPropertyWebkitLogicalHeight:
>-    case CSSPropertyWebkitMinLogicalWidth:
>-    case CSSPropertyWebkitMinLogicalHeight:
>-    case CSSPropertyWebkitPaddingAfter:
>-    case CSSPropertyWebkitPaddingBefore:
>-    case CSSPropertyWebkitPaddingEnd:
>-    case CSSPropertyWebkitPaddingStart:
>+    case CSSPropertyInlineSize:
>+    case CSSPropertyBlockSize:
>+    case CSSPropertyMinInlineSize:
>+    case CSSPropertyMinBlockSize:
>+    case CSSPropertyPaddingBlockEnd:
>+    case CSSPropertyPaddingBlockStart:
>+    case CSSPropertyPaddingInlineEnd:
>+    case CSSPropertyPaddingInlineStart:
>     case CSSPropertyShapeMargin:
>         acceptsNegativeNumbers = false;
>         return true;
>@@ -76,10 +76,10 @@ static inline bool isSimpleLengthPropertyID(CSSPropertyID propertyId, bool& acce
>     case CSSPropertyMarginTop:
>     case CSSPropertyRight:
>     case CSSPropertyTop:
>-    case CSSPropertyWebkitMarginAfter:
>-    case CSSPropertyWebkitMarginBefore:
>-    case CSSPropertyWebkitMarginEnd:
>-    case CSSPropertyWebkitMarginStart:
>+    case CSSPropertyMarginBlockEnd:
>+    case CSSPropertyMarginBlockStart:
>+    case CSSPropertyMarginInlineEnd:
>+    case CSSPropertyMarginInlineStart:
>     case CSSPropertyX:
>     case CSSPropertyY:
>     case CSSPropertyR:
>@@ -190,10 +190,10 @@ static inline bool isColorPropertyID(CSSPropertyID propertyId)
>     case CSSPropertyStopColor:
>     case CSSPropertyStroke:
>     case CSSPropertyStrokeColor:
>-    case CSSPropertyWebkitBorderAfterColor:
>-    case CSSPropertyWebkitBorderBeforeColor:
>-    case CSSPropertyWebkitBorderEndColor:
>-    case CSSPropertyWebkitBorderStartColor:
>+    case CSSPropertyBorderBlockEndColor:
>+    case CSSPropertyBorderBlockStartColor:
>+    case CSSPropertyBorderInlineEndColor:
>+    case CSSPropertyBorderInlineStartColor:
>     case CSSPropertyColumnRuleColor:
>     case CSSPropertyWebkitTextEmphasisColor:
>     case CSSPropertyWebkitTextFillColor:
>@@ -538,10 +538,10 @@ bool CSSParserFastPaths::isValidKeywordPropertyAndValue(CSSPropertyID propertyId
>     case CSSPropertyBorderRightStyle: // Defined as: none | hidden | dotted | dashed |
>     case CSSPropertyBorderBottomStyle: // solid | double | groove | ridge | inset | outset
>     case CSSPropertyBorderLeftStyle:
>-    case CSSPropertyWebkitBorderAfterStyle:
>-    case CSSPropertyWebkitBorderBeforeStyle:
>-    case CSSPropertyWebkitBorderEndStyle:
>-    case CSSPropertyWebkitBorderStartStyle:
>+    case CSSPropertyBorderBlockEndStyle:
>+    case CSSPropertyBorderBlockStartStyle:
>+    case CSSPropertyBorderInlineEndStyle:
>+    case CSSPropertyBorderInlineStartStyle:
>     case CSSPropertyColumnRuleStyle:
>         return valueID >= CSSValueNone && valueID <= CSSValueDouble;
>     case CSSPropertyBoxSizing:
>@@ -810,8 +810,12 @@ bool CSSParserFastPaths::isValidKeywordPropertyAndValue(CSSPropertyID propertyId
> bool CSSParserFastPaths::isKeywordPropertyID(CSSPropertyID propertyId)
> {
>     switch (propertyId) {
>+    case CSSPropertyBorderBlockEndStyle:
>+    case CSSPropertyBorderBlockStartStyle:
>     case CSSPropertyBorderBottomStyle:
>     case CSSPropertyBorderCollapse:
>+    case CSSPropertyBorderInlineEndStyle:
>+    case CSSPropertyBorderInlineStartStyle:
>     case CSSPropertyBorderLeftStyle:
>     case CSSPropertyBorderRightStyle:
>     case CSSPropertyBorderTopStyle:
>@@ -854,11 +858,7 @@ bool CSSParserFastPaths::isKeywordPropertyID(CSSPropertyID propertyId)
>     case CSSPropertyVisibility:
>     case CSSPropertyWebkitAppearance:
>     case CSSPropertyWebkitBackfaceVisibility:
>-    case CSSPropertyWebkitBorderAfterStyle:
>-    case CSSPropertyWebkitBorderBeforeStyle:
>-    case CSSPropertyWebkitBorderEndStyle:
>     case CSSPropertyWebkitBorderFit:
>-    case CSSPropertyWebkitBorderStartStyle:
>     case CSSPropertyWebkitBoxAlign:
>     case CSSPropertyWebkitBoxDirection:
>     case CSSPropertyWebkitBoxLines:
>diff --git a/Source/WebCore/css/parser/CSSPropertyParser.cpp b/Source/WebCore/css/parser/CSSPropertyParser.cpp
>index 61773879128dba61339d0ad19da0d0cb4d66e23f..02d293cd2a13ed3b7681e80efc1245700d851aad 100644
>--- a/Source/WebCore/css/parser/CSSPropertyParser.cpp
>+++ b/Source/WebCore/css/parser/CSSPropertyParser.cpp
>@@ -3943,18 +3943,18 @@ RefPtr<CSSValue> CSSPropertyParser::parseSingleValue(CSSPropertyID property, CSS
>     case CSSPropertyMaxWidth:
>     case CSSPropertyMaxHeight:
>         return consumeMaxWidthOrHeight(m_range, m_context, UnitlessQuirk::Allow);
>-    case CSSPropertyWebkitMaxLogicalWidth:
>-    case CSSPropertyWebkitMaxLogicalHeight:
>+    case CSSPropertyMaxInlineSize:
>+    case CSSPropertyMaxBlockSize:
>         return consumeMaxWidthOrHeight(m_range, m_context);
>     case CSSPropertyMinWidth:
>     case CSSPropertyMinHeight:
>     case CSSPropertyWidth:
>     case CSSPropertyHeight:
>         return consumeWidthOrHeight(m_range, m_context, UnitlessQuirk::Allow);
>-    case CSSPropertyWebkitMinLogicalWidth:
>-    case CSSPropertyWebkitMinLogicalHeight:
>-    case CSSPropertyWebkitLogicalWidth:
>-    case CSSPropertyWebkitLogicalHeight:
>+    case CSSPropertyMinInlineSize:
>+    case CSSPropertyMinBlockSize:
>+    case CSSPropertyInlineSize:
>+    case CSSPropertyBlockSize:
>         return consumeWidthOrHeight(m_range, m_context);
>     case CSSPropertyMarginTop:
>     case CSSPropertyMarginRight:
>@@ -3965,20 +3965,20 @@ RefPtr<CSSValue> CSSPropertyParser::parseSingleValue(CSSPropertyID property, CSS
>     case CSSPropertyRight:
>     case CSSPropertyTop:
>         return consumeMarginOrOffset(m_range, m_context.mode, UnitlessQuirk::Allow);
>-    case CSSPropertyWebkitMarginStart:
>-    case CSSPropertyWebkitMarginEnd:
>-    case CSSPropertyWebkitMarginBefore:
>-    case CSSPropertyWebkitMarginAfter:
>+    case CSSPropertyMarginInlineStart:
>+    case CSSPropertyMarginInlineEnd:
>+    case CSSPropertyMarginBlockStart:
>+    case CSSPropertyMarginBlockEnd:
>         return consumeMarginOrOffset(m_range, m_context.mode, UnitlessQuirk::Forbid);
>     case CSSPropertyPaddingTop:
>     case CSSPropertyPaddingRight:
>     case CSSPropertyPaddingBottom:
>     case CSSPropertyPaddingLeft:
>         return consumeLengthOrPercent(m_range, m_context.mode, ValueRangeNonNegative, UnitlessQuirk::Allow);
>-    case CSSPropertyWebkitPaddingStart:
>-    case CSSPropertyWebkitPaddingEnd:
>-    case CSSPropertyWebkitPaddingBefore:
>-    case CSSPropertyWebkitPaddingAfter:
>+    case CSSPropertyPaddingInlineStart:
>+    case CSSPropertyPaddingInlineEnd:
>+    case CSSPropertyPaddingBlockStart:
>+    case CSSPropertyPaddingBlockEnd:
>         return consumeLengthOrPercent(m_range, m_context.mode, ValueRangeNonNegative, UnitlessQuirk::Forbid);
> #if ENABLE(CSS_SCROLL_SNAP)
>     case CSSPropertyScrollSnapMarginBottom:
>@@ -4063,10 +4063,10 @@ RefPtr<CSSValue> CSSPropertyParser::parseSingleValue(CSSPropertyID property, CSS
>     case CSSPropertyWebkitTapHighlightColor:
> #endif
>     case CSSPropertyWebkitTextEmphasisColor:
>-    case CSSPropertyWebkitBorderStartColor:
>-    case CSSPropertyWebkitBorderEndColor:
>-    case CSSPropertyWebkitBorderBeforeColor:
>-    case CSSPropertyWebkitBorderAfterColor:
>+    case CSSPropertyBorderInlineStartColor:
>+    case CSSPropertyBorderInlineEndColor:
>+    case CSSPropertyBorderBlockStartColor:
>+    case CSSPropertyBorderBlockEndColor:
>     case CSSPropertyWebkitTextStrokeColor:
>     case CSSPropertyStrokeColor:
>     case CSSPropertyStopColor:
>@@ -4079,10 +4079,10 @@ RefPtr<CSSValue> CSSPropertyParser::parseSingleValue(CSSPropertyID property, CSS
>     case CSSPropertyColor:
>     case CSSPropertyBackgroundColor:
>         return consumeColor(m_range, m_context.mode, inQuirksMode());
>-    case CSSPropertyWebkitBorderStartWidth:
>-    case CSSPropertyWebkitBorderEndWidth:
>-    case CSSPropertyWebkitBorderBeforeWidth:
>-    case CSSPropertyWebkitBorderAfterWidth:
>+    case CSSPropertyBorderInlineStartWidth:
>+    case CSSPropertyBorderInlineEndWidth:
>+    case CSSPropertyBorderBlockStartWidth:
>+    case CSSPropertyBorderBlockEndWidth:
>         return consumeBorderWidth(m_range, m_context.mode, UnitlessQuirk::Forbid);
>     case CSSPropertyBorderBottomColor:
>     case CSSPropertyBorderLeftColor:
>@@ -5649,14 +5649,14 @@ bool CSSPropertyParser::parseShorthand(CSSPropertyID property, bool important)
>         return consumeShorthandGreedily(webkitTextEmphasisShorthand(), important);
>     case CSSPropertyOutline:
>         return consumeShorthandGreedily(outlineShorthand(), important);
>-    case CSSPropertyWebkitBorderStart:
>-        return consumeShorthandGreedily(webkitBorderStartShorthand(), important);
>-    case CSSPropertyWebkitBorderEnd:
>-        return consumeShorthandGreedily(webkitBorderEndShorthand(), important);
>-    case CSSPropertyWebkitBorderBefore:
>-        return consumeShorthandGreedily(webkitBorderBeforeShorthand(), important);
>-    case CSSPropertyWebkitBorderAfter:
>-        return consumeShorthandGreedily(webkitBorderAfterShorthand(), important);
>+    case CSSPropertyBorderInlineStart:
>+        return consumeShorthandGreedily(borderInlineStartShorthand(), important);
>+    case CSSPropertyBorderInlineEnd:
>+        return consumeShorthandGreedily(borderInlineEndShorthand(), important);
>+    case CSSPropertyBorderBlockStart:
>+        return consumeShorthandGreedily(borderBlockStartShorthand(), important);
>+    case CSSPropertyBorderBlockEnd:
>+        return consumeShorthandGreedily(borderBlockEndShorthand(), important);
>     case CSSPropertyWebkitTextStroke:
>         return consumeShorthandGreedily(webkitTextStrokeShorthand(), important);
>     case CSSPropertyMarker: {
>diff --git a/Source/WebCore/html/HTMLTableElement.cpp b/Source/WebCore/html/HTMLTableElement.cpp
>index 0971c048d551662cc32dc8b4062296fc2bbbf4cc..552a4a9068d397775b6e6ad22055b935d3338114 100644
>--- a/Source/WebCore/html/HTMLTableElement.cpp
>+++ b/Source/WebCore/html/HTMLTableElement.cpp
>@@ -336,8 +336,8 @@ void HTMLTableElement::collectStyleForPresentationAttribute(const QualifiedName&
>     } else if (name == alignAttr) {
>         if (!value.isEmpty()) {
>             if (equalLettersIgnoringASCIICase(value, "center")) {
>-                addPropertyToPresentationAttributeStyle(style, CSSPropertyWebkitMarginStart, CSSValueAuto);
>-                addPropertyToPresentationAttributeStyle(style, CSSPropertyWebkitMarginEnd, CSSValueAuto);
>+                addPropertyToPresentationAttributeStyle(style, CSSPropertyMarginInlineStart, CSSValueAuto);
>+                addPropertyToPresentationAttributeStyle(style, CSSPropertyMarginInlineEnd, CSSValueAuto);
>             } else
>                 addPropertyToPresentationAttributeStyle(style, CSSPropertyFloat, value);
>         }
>diff --git a/Source/WebCore/rendering/RenderTableCell.cpp b/Source/WebCore/rendering/RenderTableCell.cpp
>index 576a450ee2cac1d39e1bf18ccc358a82126a4423..3ac2d87a5af4cb7f24c6df0763f8273cfa2a232b 100644
>--- a/Source/WebCore/rendering/RenderTableCell.cpp
>+++ b/Source/WebCore/rendering/RenderTableCell.cpp
>@@ -560,8 +560,8 @@ CollapsedBorderValue RenderTableCell::computeCollapsedStartBorder(IncludeBorderC
> {
>     // For the start border, we need to check, in order of precedence:
>     // (1) Our start border.
>-    CSSPropertyID startColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyWebkitBorderStartColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>-    CSSPropertyID endColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyWebkitBorderEndColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>+    CSSPropertyID startColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyBorderInlineStartColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>+    CSSPropertyID endColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyBorderInlineEndColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>     CollapsedBorderValue result(style().borderStart(), includeColor ? style().visitedDependentColorWithColorFilter(startColorProperty) : Color(), BorderPrecedence::Cell);
> 
>     RenderTable* table = this->table();
>@@ -671,8 +671,8 @@ CollapsedBorderValue RenderTableCell::computeCollapsedEndBorder(IncludeBorderCol
> {
>     // For end border, we need to check, in order of precedence:
>     // (1) Our end border.
>-    CSSPropertyID startColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyWebkitBorderStartColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>-    CSSPropertyID endColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyWebkitBorderEndColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>+    CSSPropertyID startColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyBorderInlineStartColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>+    CSSPropertyID endColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyBorderInlineEndColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>     CollapsedBorderValue result = CollapsedBorderValue(style().borderEnd(), includeColor ? style().visitedDependentColorWithColorFilter(endColorProperty) : Color(), BorderPrecedence::Cell);
> 
>     RenderTable* table = this->table();
>@@ -784,8 +784,8 @@ CollapsedBorderValue RenderTableCell::computeCollapsedBeforeBorder(IncludeBorder
> {
>     // For before border, we need to check, in order of precedence:
>     // (1) Our before border.
>-    CSSPropertyID beforeColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyWebkitBorderBeforeColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>-    CSSPropertyID afterColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyWebkitBorderAfterColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>+    CSSPropertyID beforeColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyBorderBlockStartColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>+    CSSPropertyID afterColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyBorderBlockEndColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>     CollapsedBorderValue result = CollapsedBorderValue(style().borderBefore(), includeColor ? style().visitedDependentColorWithColorFilter(beforeColorProperty) : Color(), BorderPrecedence::Cell);
>     
>     RenderTable* table = this->table();
>@@ -881,8 +881,8 @@ CollapsedBorderValue RenderTableCell::computeCollapsedAfterBorder(IncludeBorderC
> {
>     // For after border, we need to check, in order of precedence:
>     // (1) Our after border.
>-    CSSPropertyID beforeColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyWebkitBorderBeforeColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>-    CSSPropertyID afterColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyWebkitBorderAfterColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>+    CSSPropertyID beforeColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyBorderBlockStartColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>+    CSSPropertyID afterColorProperty = includeColor ? CSSProperty::resolveDirectionAwareProperty(CSSPropertyBorderBlockEndColor, styleForCellFlow().direction(), styleForCellFlow().writingMode()) : CSSPropertyInvalid;
>     CollapsedBorderValue result = CollapsedBorderValue(style().borderAfter(), includeColor ? style().visitedDependentColorWithColorFilter(afterColorProperty) : Color(), BorderPrecedence::Cell);
>     
>     RenderTable* table = this->table();
>diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
>index 7989a883d956d87048873d94c320e6b58a89de75..cf81d62008db2a040346793e8ce23d25288a150b 100644
>--- a/LayoutTests/imported/w3c/ChangeLog
>+++ b/LayoutTests/imported/w3c/ChangeLog
>@@ -1,3 +1,68 @@
>+2018-08-07  Oriol Brufau  <obrufau@igalia.com>
>+
>+        [css-logical] Implement flow-relative margin, padding, border and sizing properties
>+        https://bugs.webkit.org/show_bug.cgi?id=188386
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        These properties provide the author with the ability to control margins
>+        through logical, rather than physical, direction and dimension mappings.
>+
>+        Only longhand properties and border shorthands for specific sides are
>+        implemented as part of this patch.
>+
>+        The existing prefixed properties become aliases of the new ones.
>+
>+        The new tests are imported from the WPT test suite for CSS Logical
>+        Properties and Values spec.
>+
>+        The tests still have some failures because sideways writing modes have
>+        not been implemented yet.
>+
>+
>+        * resources/import-expectations.json:
>+        * web-platform-tests/css/css-logical/META.yml: Added.
>+        * web-platform-tests/css/css-logical/animation-001-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/animation-001.html: Added.
>+        * web-platform-tests/css/css-logical/animation-002-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/animation-002.html: Added.
>+        * web-platform-tests/css/css-logical/animation-003.tentative-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/animation-003.tentative.html: Added.
>+        * web-platform-tests/css/css-logical/cascading-001-expected.html: Added.
>+        * web-platform-tests/css/css-logical/cascading-001.html: Added.
>+        * web-platform-tests/css/css-logical/logical-box-border-color-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logical-box-border-color.html: Added.
>+        * web-platform-tests/css/css-logical/logical-box-border-shorthands-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logical-box-border-shorthands.html: Added.
>+        * web-platform-tests/css/css-logical/logical-box-border-style-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logical-box-border-style.html: Added.
>+        * web-platform-tests/css/css-logical/logical-box-border-width-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logical-box-border-width.html: Added.
>+        * web-platform-tests/css/css-logical/logical-box-inset-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logical-box-inset.html: Added.
>+        * web-platform-tests/css/css-logical/logical-box-margin-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logical-box-margin.html: Added.
>+        * web-platform-tests/css/css-logical/logical-box-padding-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logical-box-padding.html: Added.
>+        * web-platform-tests/css/css-logical/logical-box-size-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logical-box-size.html: Added.
>+        * web-platform-tests/css/css-logical/logicalprops-block-size-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logicalprops-block-size-vlr-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logicalprops-block-size-vlr.html: Added.
>+        * web-platform-tests/css/css-logical/logicalprops-block-size.html: Added.
>+        * web-platform-tests/css/css-logical/logicalprops-inline-size-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logicalprops-inline-size-vlr-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logicalprops-inline-size-vlr.html: Added.
>+        * web-platform-tests/css/css-logical/logicalprops-inline-size.html: Added.
>+        * web-platform-tests/css/css-logical/logicalprops-quirklength-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logicalprops-quirklength.html: Added.
>+        * web-platform-tests/css/css-logical/resources/test-box-properties.js: Added.
>+        (testCSSValues):
>+        (testComputedValues):
>+        (makeDeclaration):
>+        * web-platform-tests/css/css-logical/resources/w3c-import.log: Added.
>+        * web-platform-tests/css/css-logical/w3c-import.log: Added.
>+
> 2018-08-06  Ryosuke Niwa  <rniwa@webkit.org>
> 
>         HTML parser should execute custom element reactions for setting attributes immediately after creating a custom element
>diff --git a/LayoutTests/fast/css/style-enumerate-properties.html b/LayoutTests/fast/css/style-enumerate-properties.html
>index dbe1a59b7cb64d3a6a18888330ae58ee78824a40..703d81e5ada34f567df70302f788f8af6e93a687 100644
>--- a/LayoutTests/fast/css/style-enumerate-properties.html
>+++ b/LayoutTests/fast/css/style-enumerate-properties.html
>@@ -40,7 +40,7 @@
>                 testFailed("Invalid CSS-mapped property order: '" + p + "' after '" + previous + "'");
>                 break;
>             }
>-            if (++cssPropertyCount <= 103)
>+            if (++cssPropertyCount <= 119)
>                 previous = p;
>             else {
>                 if (seenFilter)
>diff --git a/LayoutTests/imported/w3c/resources/import-expectations.json b/LayoutTests/imported/w3c/resources/import-expectations.json
>index feb825aac07b7bde69c9671b7fffec8fd561ccf5..2f58ae3dfe6f8fd247f477e49289483dacfa4980 100644
>--- a/LayoutTests/imported/w3c/resources/import-expectations.json
>+++ b/LayoutTests/imported/w3c/resources/import-expectations.json
>@@ -66,6 +66,7 @@
>     "web-platform-tests/css/css-display": "import", 
>     "web-platform-tests/css/css-grid": "import", 
>     "web-platform-tests/css/css-grid/grid-definition/": "import", 
>+    "web-platform-tests/css/css-logical": "import", 
>     "web-platform-tests/css/css-multicol": "import", 
>     "web-platform-tests/css/css-pseudo": "import", 
>     "web-platform-tests/css/css-scoping": "import", 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/META.yml b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/META.yml
>new file mode 100644
>index 0000000000000000000000000000000000000000..98d838c04e110e484cae63998cf4ee6c2dd559ed
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/META.yml
>@@ -0,0 +1,4 @@
>+spec: https://drafts.csswg.org/css-logical/
>+suggested_reviewers:
>+  - atanassov
>+  - fantasai
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-001-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..7d3439e0b1ab8d9b310a93f5d3a7515d3bf3977a
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-001-expected.txt
>@@ -0,0 +1,26 @@
>+
>+FAIL Logical properties can be animated using object notation assert_equals: expected "50px" but got "0px"
>+FAIL Logical properties can be animated using array notation assert_equals: expected "50px" but got "0px"
>+FAIL Logical properties are NOT stored as physical properties assert_equals: expected 2 but got 0
>+FAIL Logical properties in animations respect the writing-mode assert_equals: expected "50px" but got "0px"
>+FAIL Logical properties in animations respect the direction assert_equals: expected "50px" but got "0px"
>+PASS Physical properties win over logical properties in object notation 
>+PASS Physical properties win over logical properties in array notation 
>+PASS Physical properties with variables win over logical properties 
>+FAIL Logical shorthands follow the usual prioritization based on number of component longhands assert_equals: expected "100px" but got "0px"
>+FAIL Physical longhands win over logical shorthands assert_equals: expected "100px" but got "0px"
>+FAIL Logical longhands win over physical shorthands assert_equals: expected "100px" but got "200px"
>+PASS Physical shorthands win over logical shorthands 
>+PASS Physical shorthands using variables win over logical shorthands 
>+FAIL Physical properties and logical properties can be mixed assert_equals: expected "250px" but got "300px"
>+FAIL Physical shorthands and logical shorthands can be mixed assert_equals: expected "250px" but got "150px"
>+PASS Physical properties win over logical properties even when some keyframes only have logical properties 
>+FAIL Animations update when the writing-mode is changed assert_equals: expected "50px" but got "0px"
>+FAIL Filling animations update when the writing-mode is changed assert_equals: expected "100px" but got "0px"
>+FAIL Animations with implicit from values update when the writing-mode is changed assert_equals: expected "250px" but got "200px"
>+FAIL Animations with overlapping physical and logical properties update when the writing-mode is changed assert_equals: expected "50px" but got "0px"
>+FAIL Animations update when the writing-mode is changed through a CSS variable assert_equals: expected "50px" but got "0px"
>+FAIL Animations update when the direction is changed assert_equals: expected "50px" but got "0px"
>+PASS writing-mode is not animatable 
>+PASS direction is not animatable 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-001.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..8135f43275bb1d6b918fd410ec41823ea77961dd
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-001.html
>@@ -0,0 +1,323 @@
>+<!doctype html>
>+<meta charset=utf-8>
>+<title>Animating CSS logical properties using Web Animations</title>
>+<link rel="help" href="https://drafts.csswg.org/css-logical/#box">
>+<meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values.">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="../css-animations/support/testcommon.js"></script>
>+<style>
>+:root {
>+  --200px: 200px;
>+  --300px: 300px;
>+  --writingMode: horizontal-tb;
>+}
>+</style>
>+
>+<div id="log"></div>
>+<script>
>+'use strict';
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000);
>+  anim.currentTime = 500;
>+  assert_equals(getComputedStyle(div).height, '50px');
>+}, 'Logical properties can be animated using object notation');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate(
>+    [{ blockSize: '0px' }, { blockSize: '100px' }],
>+    1000
>+  );
>+  anim.currentTime = 500;
>+  assert_equals(getComputedStyle(div).height, '50px');
>+}, 'Logical properties can be animated using array notation');
>+
>+test(t => {
>+  const anim = addDiv(t).animate({ blockSize: ['0px', '100px'] }, 1000);
>+  assert_equals(anim.effect.getKeyframes().length, 2);
>+
>+  assert_own_property(anim.effect.getKeyframes()[0], 'blockSize');
>+  assert_false(anim.effect.getKeyframes()[0].hasOwnProperty('height'));
>+
>+  assert_own_property(anim.effect.getKeyframes()[1], 'blockSize');
>+  assert_false(anim.effect.getKeyframes()[1].hasOwnProperty('height'));
>+}, 'Logical properties are NOT stored as physical properties');
>+
>+test(t => {
>+  const div = addDiv(t, { style: 'writing-mode: vertical-rl' });
>+  const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000);
>+  anim.currentTime = 500;
>+  assert_equals(getComputedStyle(div).width, '50px');
>+  assert_equals(getComputedStyle(div).height, '0px');
>+}, 'Logical properties in animations respect the writing-mode');
>+
>+test(t => {
>+  const div = addDiv(t, { style: 'direction: rtl' });
>+  const anim = div.animate({ marginInlineStart: ['0px', '100px'] }, 1000);
>+  anim.currentTime = 500;
>+  assert_equals(getComputedStyle(div).marginLeft, '0px');
>+  assert_equals(getComputedStyle(div).marginRight, '50px');
>+}, 'Logical properties in animations respect the direction');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate(
>+    {
>+      blockSize: ['0px', '100px'],
>+      height: ['200px', '300px'],
>+    },
>+    1000
>+  );
>+  anim.currentTime = 500;
>+  assert_equals(getComputedStyle(div).height, '250px');
>+}, 'Physical properties win over logical properties in object notation');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate(
>+    [
>+      { height: '200px', blockSize: '0px' },
>+      { height: '300px', blockSize: '100px' },
>+    ],
>+    1000
>+  );
>+  anim.currentTime = 500;
>+  assert_equals(getComputedStyle(div).height, '250px');
>+}, 'Physical properties win over logical properties in array notation');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate(
>+    {
>+      blockSize: ['0px', '100px'],
>+      height: ['var(--200px)', 'var(--300px)'],
>+    },
>+    1000
>+  );
>+  anim.currentTime = 500;
>+  assert_equals(getComputedStyle(div).height, '250px');
>+}, 'Physical properties with variables win over logical properties');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate(
>+    {
>+      marginInlineStart: '100px',
>+      marginInline: '200px',
>+      margin: 'logical 300px',
>+    },
>+    { duration: 1, easing: 'step-start' }
>+  );
>+  assert_equals(getComputedStyle(div).marginLeft, '100px');
>+  assert_equals(getComputedStyle(div).marginRight, '200px');
>+  assert_equals(getComputedStyle(div).marginTop, '300px');
>+  assert_equals(getComputedStyle(div).marginBottom, '300px');
>+}, 'Logical shorthands follow the usual prioritization based on number of'
>+   + ' component longhands');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate(
>+    {
>+      marginInline: '100px',
>+      marginLeft: '200px',
>+    },
>+    { duration: 1, easing: 'step-start' }
>+  );
>+  assert_equals(getComputedStyle(div).marginLeft, '200px');
>+  assert_equals(getComputedStyle(div).marginRight, '100px');
>+}, 'Physical longhands win over logical shorthands');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate(
>+    {
>+      marginInlineStart: '100px',
>+      margin: '200px',
>+    },
>+    { duration: 1, easing: 'step-start' }
>+  );
>+  assert_equals(getComputedStyle(div).marginLeft, '100px');
>+  assert_equals(getComputedStyle(div).marginRight, '200px');
>+}, 'Logical longhands win over physical shorthands');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate(
>+    {
>+      marginInline: '100px',
>+      margin: '200px',
>+    },
>+    { duration: 1, easing: 'step-start' }
>+  );
>+  assert_equals(getComputedStyle(div).marginLeft, '200px');
>+  assert_equals(getComputedStyle(div).marginRight, '200px');
>+}, 'Physical shorthands win over logical shorthands');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate(
>+    {
>+      marginInline: '100px',
>+      margin: 'var(--200px)',
>+    },
>+    { duration: 1, easing: 'step-start' }
>+  );
>+  assert_equals(getComputedStyle(div).marginLeft, '200px');
>+  assert_equals(getComputedStyle(div).marginRight, '200px');
>+}, 'Physical shorthands using variables win over logical shorthands');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate([{ blockSize: '200px' }, { height: '300px' }], 1000);
>+  anim.currentTime = 500;
>+  assert_equals(getComputedStyle(div).height, '250px');
>+}, 'Physical properties and logical properties can be mixed');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate(
>+    [{ marginInline: '200px' }, { marginRight: '300px' }],
>+    1000
>+  );
>+  anim.currentTime = 500;
>+  assert_equals(getComputedStyle(div).marginRight, '250px');
>+}, 'Physical shorthands and logical shorthands can be mixed');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate(
>+    [{ blockSize: '100px', height: '200px' }, { height: '300px' }],
>+    1000
>+  );
>+  anim.currentTime = 500;
>+  assert_equals(getComputedStyle(div).height, '250px');
>+}, 'Physical properties win over logical properties even when some keyframes'
>+   + ' only have logical properties');
>+
>+test(t => {
>+  const div = addDiv(t, { style: 'width: 0px; height: 0px' });
>+  const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000);
>+  anim.currentTime = 500;
>+
>+  assert_equals(getComputedStyle(div).width, '0px');
>+  assert_equals(getComputedStyle(div).height, '50px');
>+
>+  div.style.writingMode = 'vertical-rl';
>+  assert_equals(getComputedStyle(div).width, '50px');
>+  assert_equals(getComputedStyle(div).height, '0px');
>+}, 'Animations update when the writing-mode is changed');
>+
>+test(t => {
>+  const div = addDiv(t, { style: 'width: 0px; height: 0px' });
>+  const anim = div.animate(
>+    { blockSize: ['0px', '100px'] },
>+    {
>+      duration: 1000,
>+      fill: 'forwards',
>+    }
>+  );
>+  anim.finish();
>+
>+  assert_equals(getComputedStyle(div).width, '0px');
>+  assert_equals(getComputedStyle(div).height, '100px');
>+
>+  div.style.writingMode = 'vertical-rl';
>+  assert_equals(getComputedStyle(div).width, '100px');
>+  assert_equals(getComputedStyle(div).height, '0px');
>+}, 'Filling animations update when the writing-mode is changed');
>+
>+test(t => {
>+  const div = addDiv(t, { style: 'width: 100px; height: 200px' });
>+  const anim = div.animate({ blockSize: '300px' }, 1000);
>+  anim.currentTime = 500;
>+
>+  // Initially we are animating height from 200px -> 300px
>+  assert_equals(getComputedStyle(div).width, '100px');
>+  assert_equals(getComputedStyle(div).height, '250px');
>+
>+  // After the change we are animating width from 100px -> 300px
>+  div.style.writingMode = 'vertical-rl';
>+  assert_equals(getComputedStyle(div).width, '200px');
>+  assert_equals(getComputedStyle(div).height, '200px');
>+}, 'Animations with implicit from values update when the writing-mode'
>+   + ' is changed');
>+
>+test(t => {
>+  const div = addDiv(t, { style: 'width: 0px; height: 0px' });
>+  const anim = div.animate(
>+    [
>+      { height: '200px', blockSize: '0px' },
>+      { height: '300px', blockSize: '100px' },
>+    ],
>+    1000
>+  );
>+  anim.currentTime = 500;
>+
>+  // Initially writing-mode is horizontal-tb so the 'block-size' values are
>+  // clobbered by the 'height' values.
>+
>+  assert_equals(getComputedStyle(div).width, '0px');
>+  assert_equals(getComputedStyle(div).height, '250px');
>+
>+  // After updating the writing-mode to vertical-rl the 'block-size' values
>+  // should no longer be overridden and should apply to the height.
>+
>+  div.style.writingMode = 'vertical-rl';
>+  assert_equals(getComputedStyle(div).width, '50px');
>+  assert_equals(getComputedStyle(div).height, '250px');
>+}, 'Animations with overlapping physical and logical properties update'
>+   + ' when the writing-mode is changed');
>+
>+test(t => {
>+  const div = addDiv(t, { style: 'width: 0px; height: 0px' });
>+  div.style.writingMode = 'var(--writingMode)';
>+  const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000);
>+  anim.currentTime = 500;
>+
>+  assert_equals(getComputedStyle(div).width, '0px');
>+  assert_equals(getComputedStyle(div).height, '50px');
>+
>+  div.style.setProperty('--writingMode', 'vertical-rl');
>+  assert_equals(getComputedStyle(div).width, '50px');
>+  assert_equals(getComputedStyle(div).height, '0px');
>+}, 'Animations update when the writing-mode is changed through a CSS variable');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate({ marginInlineStart: ['0px', '100px'] }, 1000);
>+  anim.currentTime = 500;
>+
>+  assert_equals(getComputedStyle(div).marginLeft, '50px');
>+  assert_equals(getComputedStyle(div).marginRight, '0px');
>+
>+  div.style.direction = 'rtl';
>+  assert_equals(getComputedStyle(div).marginLeft, '0px');
>+  assert_equals(getComputedStyle(div).marginRight, '50px');
>+}, 'Animations update when the direction is changed');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate(
>+    { writingMode: 'vertical-rl' },
>+    { duration: 1, easing: 'step-start' }
>+  );
>+  assert_equals(getComputedStyle(div).writingMode, 'horizontal-tb');
>+  assert_equals(anim.effect.getKeyframes().length, 0);
>+}, 'writing-mode is not animatable');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  const anim = div.animate(
>+    { writingMode: 'rtl' },
>+    { duration: 1, easing: 'step-start' }
>+  );
>+  anim.currentTime = 500;
>+  assert_equals(getComputedStyle(div).direction, 'ltr');
>+  assert_equals(anim.effect.getKeyframes().length, 0);
>+}, 'direction is not animatable');
>+
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-002-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-002-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..2838cec11a18dfdc7569f175916492e41f0bad62
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-002-expected.txt
>@@ -0,0 +1,16 @@
>+
>+FAIL Logical properties can be animated assert_equals: expected "50px" but got "0px"
>+FAIL Logical properties in animations respect the writing-mode assert_equals: expected "50px" but got "0px"
>+FAIL Logical properties in animations respect the direction assert_equals: expected "50px" but got "0px"
>+PASS Declaration order is respected within @keyframes declaration blocks 
>+PASS Logical properties are able to override physical properties in @keyframes declaration blocks 
>+FAIL Declaration order is respected amongst logical properties within @keyframes declaration blocks assert_equals: expected "100px" but got "0px"
>+PASS Physical properties and logical properties can be mixed 
>+PASS Declaration order is respected on each keyframe individually 
>+FAIL Animations update when the writing-mode is changed assert_equals: expected "50px" but got "0px"
>+FAIL Filling animations update when the writing-mode is changed assert_equals: expected "100px" but got "0px"
>+FAIL The number of interpolating properties can be increased when the writing-mode is changed assert_equals: expected "50px" but got "0px"
>+FAIL The number of interpolating properties can be decreased when the writing-mode is changed assert_equals: expected "150px" but got "100px"
>+FAIL Animations update when the writing-mode is changed through a CSS variable assert_equals: expected "50px" but got "0px"
>+FAIL Animations update when the direction is changed assert_equals: expected "50px" but got "0px"
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-002.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..d4f199d50e48b3e239e395fd442da9d530652066
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-002.html
>@@ -0,0 +1,213 @@
>+<!doctype html>
>+<meta charset=utf-8>
>+<title>Animating CSS logical properties using CSS Animations</title>
>+<link rel="help" href="https://drafts.csswg.org/css-logical/#box">
>+<meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values.">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="../css-animations/support/testcommon.js"></script>
>+
>+<div id="log"></div>
>+<script>
>+'use strict';
>+
>+test(t => {
>+  addStyle(t, {
>+    '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }',
>+  });
>+  const div = addDiv(t, { style: 'animation: anim 10s -5s paused linear' });
>+  assert_equals(getComputedStyle(div).height, '50px');
>+}, 'Logical properties can be animated');
>+
>+test(t => {
>+  addStyle(t, {
>+    '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }',
>+  });
>+  const div = addDiv(t, {
>+    style: 'animation: anim 10s -5s paused linear; writing-mode: vertical-rl',
>+  });
>+  assert_equals(getComputedStyle(div).width, '50px');
>+  assert_equals(getComputedStyle(div).height, '0px');
>+}, 'Logical properties in animations respect the writing-mode');
>+
>+test(t => {
>+  addStyle(t, {
>+    '@keyframes anim':
>+      'from { margin-inline-start: 0px } to { margin-inline-start: 100px }',
>+  });
>+  const div = addDiv(t, {
>+    style: 'animation: anim 10s -5s paused linear; direction: rtl',
>+  });
>+  assert_equals(getComputedStyle(div).marginLeft, '0px');
>+  assert_equals(getComputedStyle(div).marginRight, '50px');
>+}, 'Logical properties in animations respect the direction');
>+
>+test(t => {
>+  addStyle(t, {
>+    '@keyframes anim':
>+      'from { block-size: 0px; height: 200px }'
>+      + ' to { block-size: 100px; height: 300px }',
>+  });
>+  const div = addDiv(t, {
>+    style: 'animation: anim 10s -5s paused linear',
>+  });
>+  assert_equals(getComputedStyle(div).height, '250px');
>+}, 'Declaration order is respected within @keyframes declaration blocks');
>+
>+test(t => {
>+  addStyle(t, {
>+    '@keyframes anim':
>+      'to { margin-top: 200px;'
>+        + ' margin-block-start: 100px }'
>+  });
>+  const div = addDiv(t, {
>+    style: 'animation: anim 10s paused step-start',
>+  });
>+  assert_equals(getComputedStyle(div).marginTop, '100px');
>+}, 'Logical properties are able to override physical properties in'
>+   + ' @keyframes declaration blocks');
>+
>+test(t => {
>+  addStyle(t, {
>+    '@keyframes anim':
>+      'to {'
>+      + ' margin-inline: 200px;'
>+      + ' margin-inline-start: 0px;'
>+      + ' margin-inline-start: 100px }',
>+  });
>+  const div = addDiv(t, {
>+    style: 'animation: anim 10s paused step-start',
>+  });
>+  assert_equals(getComputedStyle(div).marginLeft, '100px');
>+}, 'Declaration order is respected amongst logical properties within'
>+   + ' @keyframes declaration blocks');
>+
>+test(t => {
>+  addStyle(t, {
>+    '@keyframes anim': 'from { block-size: 200px } to { height: 300px }',
>+  });
>+  const div = addDiv(t, {
>+    style: 'animation: anim 10s -5s paused linear',
>+  });
>+  assert_equals(getComputedStyle(div).height, '250px');
>+}, 'Physical properties and logical properties can be mixed');
>+
>+test(t => {
>+  addStyle(t, {
>+    '@keyframes anim':
>+      'from { height: 100px; block-size: 200px }'
>+      + ' to { block-size: 100px; height: 300px }',
>+  });
>+  const div = addDiv(t, {
>+    style: 'animation: anim 10s -5s paused linear',
>+  });
>+  assert_equals(getComputedStyle(div).height, '250px');
>+}, 'Declaration order is respected on each keyframe individually');
>+
>+test(t => {
>+  addStyle(t, {
>+    '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }',
>+  });
>+  const div = addDiv(t, {
>+    style: 'animation: anim 10s -5s paused linear; width: 0px; height: 0px',
>+  });
>+  assert_equals(getComputedStyle(div).width, '0px');
>+  assert_equals(getComputedStyle(div).height, '50px');
>+
>+  div.style.writingMode = 'vertical-rl';
>+  assert_equals(getComputedStyle(div).width, '50px');
>+  assert_equals(getComputedStyle(div).height, '0px');
>+}, 'Animations update when the writing-mode is changed');
>+
>+promise_test(async t => {
>+  addStyle(t, {
>+    '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }',
>+  });
>+  const div = addDiv(t, {
>+    style: 'animation: anim 10s -9.9s linear forwards;'
>+      + ' width: 0px; height: 0px',
>+  });
>+  const watcher = new EventWatcher(t, div, [ 'animationend' ]);
>+  await watcher.wait_for('animationend');
>+
>+  assert_equals(getComputedStyle(div).width, '0px');
>+  assert_equals(getComputedStyle(div).height, '100px');
>+
>+  div.style.writingMode = 'vertical-rl';
>+  assert_equals(getComputedStyle(div).width, '100px');
>+  assert_equals(getComputedStyle(div).height, '0px');
>+}, 'Filling animations update when the writing-mode is changed');
>+
>+test(t => {
>+  addStyle(t, {
>+    '@keyframes anim': 'to { block-size: 100px; height: 200px }',
>+  });
>+  const div = addDiv(t, {
>+    style: 'animation: anim 10s -5s paused linear; width: 0px; height: 0px',
>+  });
>+  // Initially we are interpolating the height from 0 to 200px
>+  assert_equals(getComputedStyle(div).width, '0px');
>+  assert_equals(getComputedStyle(div).height, '100px');
>+
>+  // But once we change the writing-mode, we will be interpolating *both*
>+  // the height (from 0px to 200px) *and* the width (from 0px to 100px).
>+  div.style.writingMode = 'vertical-rl';
>+  assert_equals(getComputedStyle(div).width, '50px');
>+  assert_equals(getComputedStyle(div).height, '100px');
>+}, 'The number of interpolating properties can be increased when the'
>+   + ' writing-mode is changed');
>+
>+test(t => {
>+  addStyle(t, {
>+    '@keyframes anim': 'to { width: 300px; block-size: 200px }',
>+  });
>+  const div = addDiv(t, {
>+    style: 'animation: anim 10s -5s paused linear; width: 100px; height: 100px',
>+  });
>+  // Initially we are interpolating the width (100px -> 300px) and the height
>+  // (100px -> 200px).
>+  assert_equals(getComputedStyle(div).width, '200px');
>+  assert_equals(getComputedStyle(div).height, '150px');
>+
>+  // Once we change the writing-mode, we will be interpolating *only* the
>+  // width (100px -> 200px).
>+  div.style.writingMode = 'vertical-rl';
>+  assert_equals(getComputedStyle(div).width, '150px');
>+  assert_equals(getComputedStyle(div).height, '100px');
>+}, 'The number of interpolating properties can be decreased when the'
>+   + ' writing-mode is changed');
>+
>+test(t => {
>+  addStyle(t, { ':root': '--writingMode: horizontal-tb' });
>+  addStyle(t, {
>+    '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }',
>+  });
>+  const div = addDiv(t, {
>+    style:
>+      'animation: anim 10s -5s paused linear;'
>+      + ' width: 0px; height: 0px;'
>+      + ' writing-mode: var(--writingMode)'
>+  });
>+  assert_equals(getComputedStyle(div).width, '0px');
>+  assert_equals(getComputedStyle(div).height, '50px');
>+
>+  div.style.setProperty('--writingMode', 'vertical-rl');
>+  assert_equals(getComputedStyle(div).width, '50px');
>+  assert_equals(getComputedStyle(div).height, '0px');
>+}, 'Animations update when the writing-mode is changed through a CSS variable');
>+
>+test(t => {
>+  addStyle(t, {
>+    '@keyframes anim':
>+      'from { margin-inline-start: 0px } to { margin-inline-start: 100px }',
>+  });
>+  const div = addDiv(t, { style: 'animation: anim 10s -5s paused linear' });
>+  assert_equals(getComputedStyle(div).marginLeft, '50px');
>+  assert_equals(getComputedStyle(div).marginRight, '0px');
>+
>+  div.style.direction = 'rtl';
>+  assert_equals(getComputedStyle(div).marginLeft, '0px');
>+  assert_equals(getComputedStyle(div).marginRight, '50px');
>+}, 'Animations update when the direction is changed');
>+
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-003.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-003.tentative-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..3157b6f0b077619302d708cccbc736ce9e17baaa
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-003.tentative-expected.txt
>@@ -0,0 +1,3 @@
>+
>+FAIL Logical properties are represented as physical properties in keyframes undefined is not an object (evaluating 'anim.effect')
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-003.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-003.tentative.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..bcb4e15d80c4225603ff59b92ccfc56dfc90d877
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-003.tentative.html
>@@ -0,0 +1,37 @@
>+<!doctype html>
>+<meta charset=utf-8>
>+<title>Animating CSS logical properties using CSS Animations - Web Animations reflection</title>
>+<link rel="help" href="https://drafts.csswg.org/css-logical/#box">
>+<meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values.">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="../css-animations/support/testcommon.js"></script>
>+
>+<div id="log"></div>
>+<script>
>+'use strict';
>+
>+/*
>+ * The mapping from CSS Animations to Web Animations has yet to be specified
>+ * but, when it is, we expect it to require that logical properties in CSS
>+ * keyframes be represented as physical properties in the result returned from
>+ * getKeyframes() since this is consistent with the behavior of expanding out
>+ * all shorthands in to their consituent longhands in order to resolve
>+ * overlapping properties.
>+ */
>+
>+test(t => {
>+  addStyle(t, {
>+    '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }',
>+  });
>+  const div = addDiv(t, { style: 'animation: anim 10s' });
>+  const anim = div.getAnimations()[0];
>+
>+  assert_own_property(anim.effect.getKeyframes()[0], 'height');
>+  assert_false(anim.effect.getKeyframes()[0].hasOwnProperty('blockSize'));
>+
>+  assert_own_property(anim.effect.getKeyframes()[1], 'height');
>+  assert_false(anim.effect.getKeyframes()[1].hasOwnProperty('blockSize'));
>+}, 'Logical properties are represented as physical properties in keyframes');
>+
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/cascading-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/cascading-001-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..79a432c4557bbda081a9b1c8d0dd9602c0eb85e5
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/cascading-001-expected.html
>@@ -0,0 +1,39 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+  <meta charset="utf-8">
>+  <title>CSS Logical Properties Cascading Reference</title>
>+  <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
>+  <style>
>+    div {
>+      writing-mode: horizontal-tb;
>+      direction: ltr;
>+      background-color: blue;
>+    }
>+    .horizontal {
>+      width: 100px;
>+      height: 10px;
>+    }
>+    #horizontal {
>+      width: 100px;
>+      height: 10px;
>+    }
>+    .vertical {
>+      width: 10px;
>+      height: 100px;
>+    }
>+    #vertical {
>+      width: 10px;
>+      height: 100px;
>+    }
>+  </style>
>+</head>
>+<body>
>+  <p>Test passes if there are two vertical blue boxes followed by two horizontal blue boxes.</p>
>+
>+<div class="horizontal" id="vertical"></div><br>
>+<div class="horizontal" id="vertical"></div><br>
>+<div class="vertical" id="horizontal"></div><br>
>+<div class="vertical" id="horizontal"></div><br>
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/cascading-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/cascading-001.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..653925552f870f740d3c9fc397b4dc2267994103
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/cascading-001.html
>@@ -0,0 +1,58 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+  <meta charset="utf-8">
>+  <title>CSS Logical Properties: "A computed value that has logical and physical properties is determined by applying the CSS cascade to declarations of both."</title>
>+  <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
>+  <link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-box-props">
>+  <link rel="match" href="cascading-001-ref.html">
>+  <meta name="flags" content="">
>+  <meta name="assert" content="Physical property declarations with higher specificity should override logical ones and vice versa.">
>+  <style>
>+    div {
>+      writing-mode: horizontal-tb;
>+      direction: ltr;
>+      background-color: blue;
>+    }
>+    .horizontal-logical {
>+      inline-size: 100px;
>+      block-size: 10px;
>+    }
>+    #horizontal-logical {
>+      inline-size: 100px;
>+      block-size: 10px;
>+    }
>+    .horizontal-physical {
>+      width: 100px;
>+      height: 10px;
>+    }
>+    #horizontal-physical {
>+      width: 100px;
>+      height: 10px;
>+    }
>+    .vertical-logical {
>+      inline-size: 10px;
>+      block-size: 100px;
>+    }
>+    #vertical-logical {
>+      inline-size: 10px;
>+      block-size: 100px;
>+    }
>+    .vertical-physical {
>+      width: 10px;
>+      height: 100px;
>+    }
>+    #vertical-physical {
>+      width: 10px;
>+      height: 100px;
>+    }
>+  </style>
>+</head>
>+<body>
>+  <p>Test passes if there are two vertical blue boxes followed by two horizontal blue boxes.</p>
>+<div class="horizontal-logical" id="vertical-physical"></div><br>
>+<div class="horizontal-physical" id="vertical-logical"></div><br>
>+<div class="vertical-logical" id="horizontal-physical"></div><br>
>+<div class="vertical-physical" id="horizontal-logical"></div><br>
>+</body>
>+</html>
>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
>new file mode 100644
>index 0000000000000000000000000000000000000000..55ebf1ed217423d1b382be9cdf75bbf17d97960e
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-color-expected.txt
>@@ -0,0 +1,43 @@
>+
>+PASS Test that logical border-*-color properties are supported. 
>+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 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 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 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 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 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 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 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 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 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 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
>new file mode 100644
>index 0000000000000000000000000000000000000000..c279ef4cb2aaf2b9ea24ac60801ece5222716c66
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-color.html
>@@ -0,0 +1,15 @@
>+<!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" />
>+<link rel="help" href="https://drafts.csswg.org/css-logical/#border-color">
>+<meta name="assert" content="This test checks the interaction of the flow-relative border-*-color properties with the physical ones in different writing modes." />
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+
>+<div id="log"></div>
>+
>+<script src="./resources/test-box-properties.js"></script>
>+<script>
>+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
>new file mode 100644
>index 0000000000000000000000000000000000000000..f83ff576b73264ddb7694f5b178341456a304168
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-shorthands-expected.txt
>@@ -0,0 +1,43 @@
>+
>+PASS Test that logical border-* properties are supported. 
>+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-* 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-* 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-* 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-* 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-* 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-* 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-* 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-* 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-* 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-* 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
>new file mode 100644
>index 0000000000000000000000000000000000000000..497d9f4867f229f3bcb030f017a78ce49cad9155
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-shorthands.html
>@@ -0,0 +1,15 @@
>+<!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" />
>+<link rel="help" href="https://drafts.csswg.org/css-logical/#border-shorthands">
>+<meta name="assert" content="This test checks the interaction of the flow-relative border-* shorthand properties with the physical ones in different writing modes." />
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+
>+<div id="log"></div>
>+
>+<script src="./resources/test-box-properties.js"></script>
>+<script>
>+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
>new file mode 100644
>index 0000000000000000000000000000000000000000..0406950e2637b62d1629541085f48d78067bd7ec
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-style-expected.txt
>@@ -0,0 +1,43 @@
>+
>+PASS Test that logical border-*-style properties are supported. 
>+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 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 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 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 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 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 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 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 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 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 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
>new file mode 100644
>index 0000000000000000000000000000000000000000..4954bac3f0b3e1e3ca10db4f29a9dc2b8a2087ae
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-style.html
>@@ -0,0 +1,15 @@
>+<!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" />
>+<link rel="help" href="https://drafts.csswg.org/css-logical/#border-style">
>+<meta name="assert" content="This test checks the interaction of the flow-relative border-*-style properties with the physical ones in different writing modes." />
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+
>+<div id="log"></div>
>+
>+<script src="./resources/test-box-properties.js"></script>
>+<script>
>+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
>new file mode 100644
>index 0000000000000000000000000000000000000000..b4a7bb18a9e1d8d5a8e9264e21cfcab04cd34ab0
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-width-expected.txt
>@@ -0,0 +1,43 @@
>+
>+PASS Test that logical border-*-width properties are supported. 
>+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 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 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 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 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 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 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 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 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 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 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
>new file mode 100644
>index 0000000000000000000000000000000000000000..7396ce745b9fa58857580485c92e8f5c79757cd4
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-width.html
>@@ -0,0 +1,18 @@
>+<!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" />
>+<link rel="help" href="https://drafts.csswg.org/css-logical/#border-width">
>+<meta name="assert" content="This test checks the interaction of the flow-relative border-*-width properties with the physical ones in different writing modes." />
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+
>+<div id="log"></div>
>+
>+<script src="./resources/test-box-properties.js"></script>
>+<script>
>+runTests(createBoxPropertyGroup("border-*-width", {
>+  type: "length",
>+  prerequisites: {"border-*-style": "solid"},
>+}));
>+</script>
>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
>new file mode 100644
>index 0000000000000000000000000000000000000000..2172523855e08ddd12d09bf04ec9a28baae451e1
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-inset-expected.txt
>@@ -0,0 +1,43 @@
>+
>+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 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"
>+FAIL Test that inset-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. assert_equals: 'inset-inline-start', two declarations, 'writing-mode: horizontal-tb; direction: ltr; ', left expected "5px" but got "1px"
>+FAIL Test that logical inset-* properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: rtl; ', 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: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: rtl; ', 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: rtl; '. assert_equals: 'inset-inline-start' last on single declaration, 'writing-mode: horizontal-tb; direction: rtl; ', inset-inline-end expected "1px" but got ""
>+FAIL Test that inset-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. assert_equals: 'inset-inline-start', two declarations, 'writing-mode: horizontal-tb; direction: rtl; ', inset-inline-end expected "1px" but got ""
>+FAIL Test that logical inset-* properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: rtl; ', 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: vertical-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: rtl; ', 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: vertical-rl; direction: rtl; '. assert_equals: 'inset-inline-start' last on single declaration, 'writing-mode: vertical-rl; direction: rtl; ', inset-block-end expected "1px" but got ""
>+FAIL Test that inset-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. assert_equals: 'inset-inline-start', two declarations, 'writing-mode: vertical-rl; direction: rtl; ', inset-block-end expected "1px" but got ""
>+FAIL Test that logical inset-* 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; ', 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: sideways-rl; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', 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: sideways-rl; direction: rtl; '. assert_equals: 'inset-inline-start' last on single declaration, 'writing-mode: sideways-rl; direction: rtl; ', inset-block-end expected "1px" but got ""
>+FAIL Test that inset-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'inset-inline-start', two declarations, 'writing-mode: sideways-rl; direction: rtl; ', inset-block-end expected "1px" but got ""
>+FAIL Test that logical inset-* properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; 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: vertical-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; 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: vertical-rl; direction: ltr; '. assert_equals: 'inset-inline-start' last on single declaration, 'writing-mode: vertical-rl; direction: ltr; ', inset-block-end expected "1px" but got ""
>+FAIL Test that inset-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. assert_equals: 'inset-inline-start', two declarations, 'writing-mode: vertical-rl; direction: ltr; ', inset-block-end expected "1px" but got ""
>+FAIL Test that logical inset-* 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; ', 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: sideways-rl; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; 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: sideways-rl; direction: ltr; '. assert_equals: 'inset-inline-start' last on single declaration, 'writing-mode: sideways-rl; direction: ltr; ', inset-block-end expected "1px" but got ""
>+FAIL Test that inset-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'inset-inline-start', two declarations, 'writing-mode: sideways-rl; direction: ltr; ', inset-block-end expected "1px" but got ""
>+FAIL Test that logical inset-* properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: rtl; ', 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: vertical-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: rtl; ', 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: vertical-lr; direction: rtl; '. assert_equals: 'inset-inline-start' last on single declaration, 'writing-mode: vertical-lr; direction: rtl; ', inset-block-start expected "1px" but got ""
>+FAIL Test that inset-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. assert_equals: 'inset-inline-start', two declarations, 'writing-mode: vertical-lr; direction: rtl; ', inset-block-start expected "1px" but got ""
>+FAIL Test that logical inset-* 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; ', 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: sideways-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; 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: sideways-lr; direction: ltr; '. assert_equals: 'inset-inline-start' last on single declaration, 'writing-mode: sideways-lr; direction: ltr; ', inset-block-start expected "1px" but got ""
>+FAIL Test that inset-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'inset-inline-start', two declarations, 'writing-mode: sideways-lr; direction: ltr; ', inset-block-start expected "1px" but got ""
>+FAIL Test that logical inset-* properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; 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: vertical-lr; direction: ltr; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; 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: vertical-lr; direction: ltr; '. assert_equals: 'inset-inline-start' last on single declaration, 'writing-mode: vertical-lr; direction: ltr; ', inset-block-start expected "1px" but got ""
>+FAIL Test that inset-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. assert_equals: 'inset-inline-start', two declarations, 'writing-mode: vertical-lr; direction: ltr; ', inset-block-start expected "1px" but got ""
>+FAIL Test that logical inset-* 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; ', 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: sideways-lr; direction: rtl; '. assert_equals: shorthand properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', 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: sideways-lr; direction: rtl; '. assert_equals: 'inset-inline-start' last on single declaration, 'writing-mode: sideways-lr; direction: rtl; ', inset-block-start expected "1px" but got ""
>+FAIL Test that inset-* properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'inset-inline-start', two declarations, 'writing-mode: sideways-lr; direction: rtl; ', inset-block-start expected "1px" but got ""
>+
>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
>new file mode 100644
>index 0000000000000000000000000000000000000000..005a269276f0ad762d4bffbf0a677c493a2d134e
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-inset.html
>@@ -0,0 +1,18 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8" />
>+<title>CSS Logical Properties: Flow-Relative Offsets</title>
>+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
>+<link rel="help" href="https://drafts.csswg.org/css-logical/#inset-properties">
>+<meta name="assert" content="This test checks the interaction of the flow-relative inset-* properties with the physical ones in different writing modes." />
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+
>+<div id="log"></div>
>+
>+<script src="./resources/test-box-properties.js"></script>
>+<script>
>+runTests(createBoxPropertyGroup("inset-*", {
>+  type: "length",
>+  prerequisites: {"position": "relative"},
>+}));
>+</script>
>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
>new file mode 100644
>index 0000000000000000000000000000000000000000..2c95e7413b057b63712997c5598dd06cc922431c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-margin-expected.txt
>@@ -0,0 +1,43 @@
>+
>+PASS Test that logical margin-* properties are supported. 
>+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-* 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-* 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-* 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-* 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-* 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-* 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-* 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-* 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-* 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-* 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
>new file mode 100644
>index 0000000000000000000000000000000000000000..5fcd5c38ed02f5d2db06db33677194d3775568dc
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-margin.html
>@@ -0,0 +1,15 @@
>+<!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" />
>+<link rel="help" href="https://drafts.csswg.org/css-logical/#margin-properties">
>+<meta name="assert" content="This test checks the interaction of the flow-relative margin-* properties with the physical ones in different writing modes." />
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+
>+<div id="log"></div>
>+
>+<script src="./resources/test-box-properties.js"></script>
>+<script>
>+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
>new file mode 100644
>index 0000000000000000000000000000000000000000..64760ec7ddd7cd1b0e3b9819b9ea4dfa5ca8194d
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-padding-expected.txt
>@@ -0,0 +1,43 @@
>+
>+PASS Test that logical padding-* properties are supported. 
>+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-* 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-* 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-* 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-* 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-* 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-* 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-* 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-* 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-* 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-* 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
>new file mode 100644
>index 0000000000000000000000000000000000000000..b3f6b6fd6dcf6026e117515779b0c04b3e5d9d32
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-padding.html
>@@ -0,0 +1,15 @@
>+<!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" />
>+<link rel="help" href="https://drafts.csswg.org/css-logical/#padding-properties">
>+<meta name="assert" content="This test checks the interaction of the flow-relative padding-* properties with the physical ones in different writing modes." />
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+
>+<div id="log"></div>
>+
>+<script src="./resources/test-box-properties.js"></script>
>+<script>
>+runTests(createBoxPropertyGroup("padding-*", {type: "length"}));
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-size-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-size-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..9399749f762bff93da09f0899c136d799cc65932
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-size-expected.txt
>@@ -0,0 +1,95 @@
>+
>+PASS Test that logical sizing properties are supported. 
>+PASS Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '. 
>+PASS Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. 
>+PASS Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. 
>+PASS Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>+PASS Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>+PASS Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>+PASS Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '. 
>+PASS Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
>+PASS Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
>+FAIL Test that logical sizing 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; ', height expected "1px" but got "2px"
>+FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'inline-size' last on single declaration, 'writing-mode: sideways-rl; direction: rtl; ', width expected "1px" but got "3px"
>+FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'inline-size', two declarations, 'writing-mode: sideways-rl; direction: rtl; ', width expected "1px" but got "3px"
>+PASS Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '. 
>+PASS Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
>+PASS Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
>+FAIL Test that logical sizing 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; ', height expected "1px" but got "2px"
>+FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'inline-size' last on single declaration, 'writing-mode: sideways-rl; direction: ltr; ', width expected "1px" but got "3px"
>+FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'inline-size', two declarations, 'writing-mode: sideways-rl; direction: ltr; ', width expected "1px" but got "3px"
>+PASS Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '. 
>+PASS Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
>+PASS Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
>+FAIL Test that logical sizing 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; ', height expected "1px" but got "2px"
>+FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'inline-size' last on single declaration, 'writing-mode: sideways-lr; direction: ltr; ', width expected "1px" but got "3px"
>+FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'inline-size', two declarations, 'writing-mode: sideways-lr; direction: ltr; ', width expected "1px" but got "3px"
>+PASS Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '. 
>+PASS Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
>+PASS Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
>+FAIL Test that logical sizing 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; ', height expected "1px" but got "2px"
>+FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'inline-size' last on single declaration, 'writing-mode: sideways-lr; direction: rtl; ', width expected "1px" but got "3px"
>+FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'inline-size', two declarations, 'writing-mode: sideways-lr; direction: rtl; ', width expected "1px" but got "3px"
>+PASS Test that logical max sizing properties are supported. 
>+PASS Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '. 
>+PASS Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. 
>+PASS Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. 
>+PASS Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>+PASS Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>+PASS Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>+PASS Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '. 
>+PASS Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
>+PASS Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
>+FAIL Test that logical max sizing 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; ', max-height expected "1px" but got "2px"
>+FAIL Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'max-inline-size' last on single declaration, 'writing-mode: sideways-rl; direction: rtl; ', max-width expected "1px" but got "3px"
>+FAIL Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'max-inline-size', two declarations, 'writing-mode: sideways-rl; direction: rtl; ', max-width expected "1px" but got "3px"
>+PASS Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '. 
>+PASS Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
>+PASS Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
>+FAIL Test that logical max sizing 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; ', max-height expected "1px" but got "2px"
>+FAIL Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'max-inline-size' last on single declaration, 'writing-mode: sideways-rl; direction: ltr; ', max-width expected "1px" but got "3px"
>+FAIL Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'max-inline-size', two declarations, 'writing-mode: sideways-rl; direction: ltr; ', max-width expected "1px" but got "3px"
>+PASS Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '. 
>+PASS Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
>+PASS Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
>+FAIL Test that logical max sizing 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; ', max-height expected "1px" but got "2px"
>+FAIL Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'max-inline-size' last on single declaration, 'writing-mode: sideways-lr; direction: ltr; ', max-width expected "1px" but got "3px"
>+FAIL Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'max-inline-size', two declarations, 'writing-mode: sideways-lr; direction: ltr; ', max-width expected "1px" but got "3px"
>+PASS Test that logical max sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '. 
>+PASS Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
>+PASS Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
>+FAIL Test that logical max sizing 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; ', max-height expected "1px" but got "2px"
>+FAIL Test that max sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'max-inline-size' last on single declaration, 'writing-mode: sideways-lr; direction: rtl; ', max-width expected "1px" but got "3px"
>+FAIL Test that max sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'max-inline-size', two declarations, 'writing-mode: sideways-lr; direction: rtl; ', max-width expected "1px" but got "3px"
>+PASS Test that logical min sizing properties are supported. 
>+PASS Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '. 
>+PASS Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. 
>+PASS Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. 
>+PASS Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>+PASS Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>+PASS Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. 
>+PASS Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '. 
>+PASS Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
>+PASS Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. 
>+FAIL Test that logical min sizing 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; ', min-height expected "1px" but got "2px"
>+FAIL Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'min-inline-size' last on single declaration, 'writing-mode: sideways-rl; direction: rtl; ', min-width expected "1px" but got "3px"
>+FAIL Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'min-inline-size', two declarations, 'writing-mode: sideways-rl; direction: rtl; ', min-width expected "1px" but got "3px"
>+PASS Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '. 
>+PASS Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
>+PASS Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. 
>+FAIL Test that logical min sizing 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; ', min-height expected "1px" but got "2px"
>+FAIL Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'min-inline-size' last on single declaration, 'writing-mode: sideways-rl; direction: ltr; ', min-width expected "1px" but got "3px"
>+FAIL Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'min-inline-size', two declarations, 'writing-mode: sideways-rl; direction: ltr; ', min-width expected "1px" but got "3px"
>+PASS Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '. 
>+PASS Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
>+PASS Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. 
>+FAIL Test that logical min sizing 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; ', min-height expected "1px" but got "2px"
>+FAIL Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'min-inline-size' last on single declaration, 'writing-mode: sideways-lr; direction: ltr; ', min-width expected "1px" but got "3px"
>+FAIL Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'min-inline-size', two declarations, 'writing-mode: sideways-lr; direction: ltr; ', min-width expected "1px" but got "3px"
>+PASS Test that logical min sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '. 
>+PASS Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
>+PASS Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. 
>+FAIL Test that logical min sizing 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; ', min-height expected "1px" but got "2px"
>+FAIL Test that min sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'min-inline-size' last on single declaration, 'writing-mode: sideways-lr; direction: rtl; ', min-width expected "1px" but got "3px"
>+FAIL Test that min sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'min-inline-size', two declarations, 'writing-mode: sideways-lr; direction: rtl; ', min-width expected "1px" but got "3px"
>+
>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
>new file mode 100644
>index 0000000000000000000000000000000000000000..90d8e4405825041f601a6e7a5dedc98a85ffaa68
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-size.html
>@@ -0,0 +1,17 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8" />
>+<title>CSS Logical Properties: Flow-Relative Sizing</title>
>+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
>+<link rel="help" href="https://drafts.csswg.org/css-logical/#dimension-properties">
>+<meta name="assert" content="This test checks the interaction of the flow-relative sizing properties with the physical ones in different writing modes." />
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+
>+<div id="log"></div>
>+
>+<script src="./resources/test-box-properties.js"></script>
>+<script>
>+runTests(createSizingPropertyGroup(""));
>+runTests(createSizingPropertyGroup("max-"));
>+runTests(createSizingPropertyGroup("min-"));
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..d9b8da16aff80c9a8614861485dc1b29db755490
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size-expected.txt
>@@ -0,0 +1,32 @@
>+
>+PASS .block 1 
>+PASS .block 2 
>+PASS .block 3 
>+PASS .override 1 
>+PASS .override 2 
>+PASS .tablecell 1 
>+PASS .tablecell 2 
>+PASS .tablecell 3 
>+Maximum and minimim block sizes in blocks
>+
>+block-size < min-block-size
>+
>+min-block-size < block-size â¤ max-block-size
>+
>+block-size > max-block-size
>+
>+Overridance of height and block-size
>+
>+Check that height overrides block-size
>+
>+Check that block-size overrides height
>+
>+Maximum and minimim block sizes in table cells
>+
>+block-size < min-block-size
>+
>+min-block-size < block-size â¤ max-block-size
>+
>+block-size > max-block-size
>+
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size-vlr-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size-vlr-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..228576ac2a1be258f396d52e6120b49506e33449
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size-vlr-expected.txt
>@@ -0,0 +1,32 @@
>+
>+PASS .block 1 
>+PASS .block 2 
>+PASS .block 3 
>+PASS .override 1 
>+PASS .override 2 
>+PASS .tablecell 1 
>+PASS .tablecell 2 
>+PASS .tablecell 3 
>+Maximum and minimim block sizes in blocks with vertical-lr
>+
>+block-size < min-block-size
>+
>+min-block-size < block-size â¤ max-block-size
>+
>+block-size > max-block-size
>+
>+Overridance of width and block-size in vertical-lr
>+
>+Check that width overrides block-size
>+
>+Check that block-size overrides width
>+
>+Maximum and minimim block sizes in table cells with vertical-lr
>+
>+block-size < min-block-size
>+
>+min-block-size < block-size â¤ max-block-size
>+
>+block-size > max-block-size
>+
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size-vlr.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size-vlr.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..da02e759d8ed6bb423d1bf1bf58d6929c0db4e6e
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size-vlr.html
>@@ -0,0 +1,122 @@
>+<!doctype html>
>+<meta charset="utf-8">
>+<title>CSS Logical Properties: {max-,min-}block-size vertical-lr</title>
>+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
>+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
>+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="/resources/check-layout-th.js"></script>
>+
>+<style>
>+.block {
>+  border: 1px solid #000;
>+  writing-mode: vertical-lr;
>+}
>+#block1 {
>+  block-size: 40px;
>+  min-block-size: 50px;
>+  max-block-size: 100px;
>+}
>+#block2 {
>+  block-size: 100px;
>+  min-block-size: 50px;
>+  max-block-size: 100px;
>+}
>+#block3 {
>+  block-size: 120px;
>+  min-block-size: 50px;
>+  max-block-size: 100px;
>+}
>+
>+.override {
>+  border: 1px solid #000;
>+  writing-mode: vertical-lr;
>+}
>+#override1 {
>+  block-size: 100px;
>+  width: 50px;
>+}
>+#override2 {
>+  width: 50px;
>+  block-size: 100px;
>+}
>+
>+.table {
>+  border: 1px solid #000;
>+  display: table;
>+  writing-mode: vertical-lr;
>+}
>+.tablecell {
>+  display: table-cell;
>+}
>+#table1_cell {
>+  block-size: 40px;
>+  min-block-size: 50px;
>+  max-block-size: 100px;
>+  inline-size: 100px;
>+  background-color: red;
>+}
>+#table2_cell {
>+  block-size: 100px;
>+  min-block-size: 50px;
>+  max-block-size: 100px;
>+  inline-size: 100px;
>+  background-color: blue;
>+}
>+#table3_cell {
>+  block-size: 120px;
>+  min-block-size: 50px;
>+  max-block-size: 100px;
>+  inline-size: 100px;
>+  background-color: green;
>+}
>+</style>
>+
>+<div id="log"></div>
>+
>+<h3>Maximum and minimim block sizes in blocks with vertical-lr</h3>
>+<div>
>+  <p><code>block-size</code> &lt; <code>min-block-size</code></p>
>+  <div class="block" id="block1" data-expected-client-width="50" data-expected-client-height="0"></div>
>+
>+  <p><code>min-block-size</code> &lt; <code>block-size</code> &le; <code>max-block-size</code></p>
>+  <div class="block" id="block2" data-expected-client-width="100" data-expected-client-height="0"></div>
>+
>+  <p><code>block-size</code> &gt; <code>max-block-size</code></p>
>+  <div class="block" id="block3" data-expected-client-width="100" data-expected-client-height="0"></div>
>+</div>
>+
>+<h3>Overridance of <code>width</code> and <code>block-size</code> in vertical-lr</h3>
>+<div>
>+  <p>Check that <code>width</code> overrides <code>block-size</code></p>
>+  <div class="override" id="override1" data-expected-client-width="50" data-expected-client-height="0"></div>
>+
>+  <p>Check that <code>block-size</code> overrides <code>width</code></p>
>+  <div class="override" id="override2" data-expected-client-width="100" data-expected-client-height="0"></div>
>+</div>
>+
>+<h3>Maximum and minimim block sizes in table cells with vertical-lr</h3>
>+<div>
>+  <p><code>block-size</code> &lt; <code>min-block-size</code></p>
>+  <div class="table">
>+    <div class="tablecell" id="table1_cell" data-expected-client-width="40" data-expected-client-height="100"></div>
>+  </div>
>+
>+  <p><code>min-block-size</code> &lt; <code>block-size</code> &le; <code>max-block-size</code></p>
>+  <div class="table">
>+    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
>+  </div>
>+
>+  <p><code>block-size</code> &gt; <code>max-block-size</code></p>
>+  <div class="table">
>+    <div class="tablecell" id="table3_cell" data-expected-client-width="120" data-expected-client-height="100"></div>
>+  </div>
>+</div>
>+
>+<script>
>+checkLayout(".block", false);
>+checkLayout(".override", false);
>+checkLayout(".tablecell", false);
>+done();
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..8d90c07a983855fc8ed1a7b11fbe95deabfe7e00
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size.html
>@@ -0,0 +1,123 @@
>+<!doctype html>
>+<meta charset="utf-8">
>+<title>CSS Logical Properties: {max-,min-}block-size</title>
>+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
>+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
>+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="/resources/check-layout-th.js"></script>
>+
>+<style>
>+.tests {
>+  width: 600px;
>+}
>+
>+.block {
>+  border: 1px solid #000;
>+}
>+#block1 {
>+  block-size: 40px;
>+  min-block-size: 50px;
>+  max-block-size: 100px;
>+}
>+#block2 {
>+  block-size: 100px;
>+  min-block-size: 50px;
>+  max-block-size: 100px;
>+}
>+#block3 {
>+  block-size: 120px;
>+  min-block-size: 50px;
>+  max-block-size: 100px;
>+}
>+
>+.override {
>+  border: 1px solid #000;
>+}
>+#override1 {
>+  block-size: 100px;
>+  height: 50px;
>+}
>+#override2 {
>+  height: 50px;
>+  block-size: 100px;
>+}
>+
>+.table {
>+  border: 1px solid #000;
>+  display: table;
>+}
>+.tablecell {
>+  display: table-cell;
>+}
>+#table1_cell {
>+  block-size: 40px;
>+  min-block-size: 50px;
>+  max-block-size: 100px;
>+  inline-size: 100px;
>+  background-color: red;
>+}
>+#table2_cell {
>+  block-size: 100px;
>+  min-block-size: 50px;
>+  max-block-size: 100px;
>+  inline-size: 100px;
>+  background-color: blue;
>+}
>+#table3_cell {
>+  block-size: 120px;
>+  min-block-size: 50px;
>+  max-block-size: 100px;
>+  inline-size: 100px;
>+  background-color: green;
>+}
>+</style>
>+
>+<div id="log"></div>
>+
>+<h3>Maximum and minimim block sizes in blocks</h3>
>+<div class="tests">
>+  <p><code>block-size</code> &lt; <code>min-block-size</code></p>
>+  <div class="block" id="block1" data-expected-width="600" data-expected-client-height="50"></div>
>+
>+  <p><code>min-block-size</code> &lt; <code>block-size</code> &le; <code>max-block-size</code></p>
>+  <div class="block" id="block2" data-expected-width="600" data-expected-client-height="100"></div>
>+
>+  <p><code>block-size</code> &gt; <code>max-block-size</code></p>
>+  <div class="block" id="block3" data-expected-width="600" data-expected-client-height="100"></div>
>+</div>
>+
>+<h3>Overridance of <code>height</code> and <code>block-size</code></h3>
>+<div class="tests">
>+  <p>Check that <code>height</code> overrides <code>block-size</code></p>
>+  <div class="override" id="override1" data-expected-width="600" data-expected-client-height="50"></div>
>+
>+  <p>Check that <code>block-size</code> overrides <code>height</code></p>
>+  <div class="override" id="override2" data-expected-width="600" data-expected-client-height="100"></div>
>+</div>
>+
>+<h3>Maximum and minimim block sizes in table cells</h3>
>+<div class="tests">
>+  <p><code>block-size</code> &lt; <code>min-block-size</code></p>
>+  <div class="table">
>+    <div class="tablecell" id="table1_cell" data-expected-client-width="100" data-expected-client-height="40"></div>
>+  </div>
>+
>+  <p><code>min-block-size</code> &lt; <code>block-size</code> &le; <code>max-block-size</code></p>
>+  <div class="table">
>+    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
>+  </div>
>+
>+  <p><code>block-size</code> &gt; <code>max-block-size</code></p>
>+  <div class="table">
>+    <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="120"></div>
>+  </div>
>+</div>
>+
>+<script>
>+checkLayout(".block", false);
>+checkLayout(".override", false);
>+checkLayout(".tablecell", false);
>+done();
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..18690dd917471dd51888c7e970b44cea8e7364b0
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size-expected.txt
>@@ -0,0 +1,32 @@
>+
>+PASS .block 1 
>+PASS .block 2 
>+PASS .block 3 
>+PASS .override 1 
>+PASS .override 2 
>+PASS .tablecell 1 
>+PASS .tablecell 2 
>+PASS .tablecell 3 
>+Maximum and minimim inline sizes in blocks
>+
>+inline-size < min-inline-size
>+
>+min-inline-size < inline-size â¤ max-inline-size
>+
>+inline-size > max-inline-size
>+
>+Overridance of width and inline-size
>+
>+Check that width overrides inline-size
>+
>+Check that inline-size overrides width
>+
>+Maximum and minimim inline sizes in table cells
>+
>+inline-size < min-inline-size
>+
>+min-inline-size < inline-size â¤ max-inline-size
>+
>+inline-size > max-inline-size
>+
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..3e78f6912990f068e1efe54e4c6ce94368e54e77
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr-expected.txt
>@@ -0,0 +1,32 @@
>+
>+PASS .block 1 
>+PASS .block 2 
>+PASS .block 3 
>+PASS .override 1 
>+PASS .override 2 
>+PASS .tablecell 1 
>+PASS .tablecell 2 
>+PASS .tablecell 3 
>+Maximum and minimim inline sizes in blocks with vertical-lr
>+
>+inline-size < min-inline-size
>+
>+min-inline-size < inline-size â¤ max-inline-size
>+
>+inline-size > max-inline-size
>+
>+Overridance of height and inline-size in vertical-lr
>+
>+Check that height overrides inline-size
>+
>+Check that inline-size overrides height
>+
>+Maximum and minimim inline sizes in table cells with vertical-lr
>+
>+inline-size < min-inline-size
>+
>+min-inline-size < inline-size â¤ max-inline-size
>+
>+inline-size > max-inline-size
>+
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..0a53dbbc5cf5c1df72883b6a5cd39ccea46a1284
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr.html
>@@ -0,0 +1,122 @@
>+<!doctype html>
>+<meta charset="utf-8">
>+<title>CSS Logical Properties: {max-,min-}inline-size vertical-lr</title>
>+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
>+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
>+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="/resources/check-layout-th.js"></script>
>+
>+<style>
>+.block {
>+  border: 1px solid #000;
>+  writing-mode: vertical-lr;
>+}
>+#block1 {
>+  inline-size: 40px;
>+  min-inline-size: 50px;
>+  max-inline-size: 100px;
>+}
>+#block2 {
>+  inline-size: 100px;
>+  min-inline-size: 50px;
>+  max-inline-size: 100px;
>+}
>+#block3 {
>+  inline-size: 120px;
>+  min-inline-size: 50px;
>+  max-inline-size: 100px;
>+}
>+
>+.override {
>+  border: 1px solid #000;
>+  writing-mode: vertical-lr;
>+}
>+#override1 {
>+  inline-size: 100px;
>+  height: 50px;
>+}
>+#override2 {
>+  height: 50px;
>+  inline-size: 100px;
>+}
>+
>+.table {
>+  border: 1px solid #000;
>+  display: table;
>+  writing-mode: vertical-lr;
>+}
>+.tablecell {
>+  display: table-cell;
>+}
>+#table1_cell {
>+  inline-size: 40px;
>+  min-inline-size: 50px;
>+  max-inline-size: 100px;
>+  block-size: 100px;
>+  background-color: red;
>+}
>+#table2_cell {
>+  inline-size: 100px;
>+  min-inline-size: 50px;
>+  max-inline-size: 100px;
>+  block-size: 100px;
>+  background-color: blue;
>+}
>+#table3_cell {
>+  inline-size: 120px;
>+  min-inline-size: 50px;
>+  max-inline-size: 100px;
>+  block-size: 100px;
>+  background-color: green;
>+}
>+</style>
>+
>+<div id="log"></div>
>+
>+<h3>Maximum and minimim inline sizes in blocks with vertical-lr</h3>
>+<div>
>+  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
>+  <div class="block" id="block1" data-expected-client-width="0" data-expected-client-height="50"></div>
>+
>+  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
>+  <div class="block" id="block2" data-expected-client-width="0" data-expected-client-height="100"></div>
>+
>+  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
>+  <div class="block" id="block3" data-expected-client-width="0" data-expected-client-height="100"></div>
>+</div>
>+
>+<h3>Overridance of <code>height</code> and <code>inline-size</code> in vertical-lr</h3>
>+<div>
>+  <p>Check that <code>height</code> overrides <code>inline-size</code></p>
>+  <div class="override" id="override1" data-expected-client-width="0" data-expected-client-height="50"></div>
>+
>+  <p>Check that <code>inline-size</code> overrides <code>height</code></p>
>+  <div class="override" id="override2" data-expected-client-width="0" data-expected-client-height="100"></div>
>+</div>
>+
>+<h3>Maximum and minimim inline sizes in table cells with vertical-lr</h3>
>+<div>
>+  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
>+  <div class="table">
>+    <div class="tablecell" id="table1_cell" data-expected-client-width="100" data-expected-client-height="50"></div>
>+  </div>
>+
>+  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
>+  <div class="table">
>+    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
>+  </div>
>+
>+  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
>+  <div class="table">
>+    <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
>+  </div>
>+</div>
>+
>+<script>
>+checkLayout(".block", false);
>+checkLayout(".override", false);
>+checkLayout(".tablecell", false);
>+done();
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..3ec169924afb7bc6e3d26b6b8b4faa61077982ec
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size.html
>@@ -0,0 +1,119 @@
>+<!doctype html>
>+<meta charset="utf-8">
>+<title>CSS Logical Properties: {max-,min-}inline-size</title>
>+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
>+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
>+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="/resources/check-layout-th.js"></script>
>+
>+<style>
>+.block {
>+  border: 1px solid #000;
>+}
>+#block1 {
>+  inline-size: 40px;
>+  min-inline-size: 50px;
>+  max-inline-size: 100px;
>+}
>+#block2 {
>+  inline-size: 100px;
>+  min-inline-size: 50px;
>+  max-inline-size: 100px;
>+}
>+#block3 {
>+  inline-size: 120px;
>+  min-inline-size: 50px;
>+  max-inline-size: 100px;
>+}
>+
>+.override {
>+  border: 1px solid #000;
>+}
>+#override1 {
>+  inline-size: 100px;
>+  width: 50px;
>+}
>+#override2 {
>+  width: 50px;
>+  inline-size: 100px;
>+}
>+
>+.table {
>+  border: 1px solid #000;
>+  display: table;
>+}
>+.tablecell {
>+  display: table-cell;
>+}
>+#table1_cell {
>+  inline-size: 40px;
>+  min-inline-size: 50px;
>+  max-inline-size: 100px;
>+  block-size: 100px;
>+  background-color: red;
>+}
>+#table2_cell {
>+  inline-size: 100px;
>+  min-inline-size: 50px;
>+  max-inline-size: 100px;
>+  block-size: 100px;
>+  background-color: blue;
>+}
>+#table3_cell {
>+  inline-size: 120px;
>+  min-inline-size: 50px;
>+  max-inline-size: 100px;
>+  block-size: 100px;
>+  background-color: green;
>+}
>+</style>
>+
>+<div id="log"></div>
>+
>+<h3>Maximum and minimim inline sizes in blocks</h3>
>+<div>
>+  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
>+  <div class="block" id="block1" data-expected-client-width="50" data-expected-client-height="0"></div>
>+
>+  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
>+  <div class="block" id="block2" data-expected-client-width="100" data-expected-client-height="0"></div>
>+
>+  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
>+  <div class="block" id="block3" data-expected-client-width="100" data-expected-client-height="0"></div>
>+</div>
>+
>+<h3>Overridance of <code>width</code> and <code>inline-size</code></h3>
>+<div>
>+  <p>Check that <code>width</code> overrides <code>inline-size</code></p>
>+  <div class="override" id="override1" data-expected-client-width="50" data-expected-client-height="0"></div>
>+
>+  <p>Check that <code>inline-size</code> overrides <code>width</code></p>
>+  <div class="override" id="override2" data-expected-client-width="100" data-expected-client-height="0"></div>
>+</div>
>+
>+<h3>Maximum and minimim inline sizes in table cells</h3>
>+<div>
>+  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
>+  <div class="table">
>+    <div class="tablecell" id="table1_cell" data-expected-client-width="50" data-expected-client-height="100"></div>
>+  </div>
>+
>+  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
>+  <div class="table">
>+    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
>+  </div>
>+
>+  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
>+  <div class="table">
>+    <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
>+  </div>
>+</div>
>+
>+<script>
>+checkLayout(".block", false);
>+checkLayout(".override", false);
>+checkLayout(".tablecell", false);
>+done();
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-quirklength-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-quirklength-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..14617ee197408a074d0160969d8ee3835f7e09e7
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-quirklength-expected.txt
>@@ -0,0 +1,12 @@
>+
>+PASS Check that "block-size: 1" is not valid in quirks mode 
>+PASS Check that "min-block-size: 1" is not valid in quirks mode 
>+PASS Check that "max-block-size: 1" is not valid in quirks mode 
>+PASS Check that "inline-size: 1" is not valid in quirks mode 
>+PASS Check that "min-inline-size: 1" is not valid in quirks mode 
>+PASS Check that "max-inline-size: 1" is not valid in quirks mode 
>+PASS Check that "margin-block-start: 1" is not valid in quirks mode 
>+PASS Check that "margin-block-end: 1" is not valid in quirks mode 
>+PASS Check that "margin-inline-start: 1" is not valid in quirks mode 
>+PASS Check that "margin-inline-end: 1" is not valid in quirks mode 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-quirklength.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-quirklength.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..3e133db880cd32d963d701bb184d28faae959aa5
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-quirklength.html
>@@ -0,0 +1,36 @@
>+<meta charset="utf-8">
>+<title>CSS Logical Properties</title>
>+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
>+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
>+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-prop">
>+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+
>+<style> #dummy {} </style>
>+
>+<script>
>+function isValidDeclaration(cssText) {
>+  var cssRule = document.styleSheets[0].cssRules[0];
>+  cssRule.style = cssText;
>+  var valid = (cssRule.style.length > 0);
>+  cssRule.style = "";
>+  return valid;
>+}
>+var tests = [
>+  {cssText:"block-size: 1"},
>+  {cssText:"min-block-size: 1"},
>+  {cssText:"max-block-size: 1"},
>+  {cssText:"inline-size: 1"},
>+  {cssText:"min-inline-size: 1"},
>+  {cssText:"max-inline-size: 1"},
>+  {cssText:"margin-block-start: 1"},
>+  {cssText:"margin-block-end: 1"},
>+  {cssText:"margin-inline-start: 1"},
>+  {cssText:"margin-inline-end: 1"},
>+];
>+
>+tests.forEach(function(t) {
>+  test(() => assert_false(isValidDeclaration(t.cssText)), 'Check that "' + t.cssText + '" is not valid in quirks mode');
>+});
>+</script>
>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
>new file mode 100644
>index 0000000000000000000000000000000000000000..517076962a3175b62f156f28e56f127033cc7723
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/test-box-properties.js
>@@ -0,0 +1,295 @@
>+"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}`);
>+    }
>+  }
>+
>+  function testComputedValues(testName, rules, expectedValues) {
>+    sheet.textContent = rules;
>+    const cs = getComputedStyle(testElement);
>+    testCSSValues(testName, cs, expectedValues);
>+    sheet.textContent = "";
>+  }
>+
>+  function makeDeclaration(object = {}, replacement = "*") {
>+    let decl = "";
>+    for (const [property, value] of Object.entries(object)) {
>+      decl += `${property.replace("*", replacement)}: ${value}; `;
>+    }
>+    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);
>+      }
>+    }
>+    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);
>+    }
>+    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.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}'.`);
>+
>+
>+        // 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 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()) {
>+                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);
>+            }
>+          }
>+        }, `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}'.`);
>+      }
>+    }
>+  };
>+})(window);
>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
>new file mode 100644
>index 0000000000000000000000000000000000000000..55fec91a633d2cbf2c4302ea9779ef23584bd3b4
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/w3c-import.log
>@@ -0,0 +1,17 @@
>+The tests in this directory were imported from the W3C repository.
>+Do NOT modify these tests directly in WebKit.
>+Instead, create a pull request on the WPT github:
>+	https://github.com/web-platform-tests/wpt
>+
>+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
>+
>+Do NOT modify or remove this file.
>+
>+------------------------------------------------------------------------
>+Properties requiring vendor prefixes:
>+None
>+Property values requiring vendor prefixes:
>+None
>+------------------------------------------------------------------------
>+List of files:
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/resources/test-box-properties.js
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/w3c-import.log
>new file mode 100644
>index 0000000000000000000000000000000000000000..dfd5d848c6dcbd89001658d922b9aea09f13f90a
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/w3c-import.log
>@@ -0,0 +1,35 @@
>+The tests in this directory were imported from the W3C repository.
>+Do NOT modify these tests directly in WebKit.
>+Instead, create a pull request on the WPT github:
>+	https://github.com/web-platform-tests/wpt
>+
>+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
>+
>+Do NOT modify or remove this file.
>+
>+------------------------------------------------------------------------
>+Properties requiring vendor prefixes:
>+None
>+Property values requiring vendor prefixes:
>+None
>+------------------------------------------------------------------------
>+List of files:
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/META.yml
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-001.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-002.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-003.tentative.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/cascading-001-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/cascading-001.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-color.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-shorthands.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-style.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-border-width.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-inset.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-margin.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-padding.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logical-box-size.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size-vlr.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-block-size.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-inline-size.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-quirklength.html

Actions: View | Formatted Diff | Diff

Attachments on bug 188386: 346764 | 346765 | 346766 | 346767 | 346768 | 346773