Attachment 455195 Details for Bug 236199 – Patch

[patch] Patch

bug-236199-20220320154740.patch (text/plain), 27.55 KB, created by Oriol Brufau on 2022-03-20 07:47:42 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Oriol Brufau

Created: 2022-03-20 07:47:42 PDT

Size: 27.55 KB

patch

obsolete

>Subversion Revision: 291540
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index fe4ab0d668acf573987aae420c171f467bb63843..805ef1c9bfc4007eea306d76f8eda3e44b268938 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,43 @@
>+2022-03-20  Oriol Brufau  <obrufau@igalia.com>
>+
>+        Fix CSS cascade regarding logical properties
>+        https://bugs.webkit.org/show_bug.cgi?id=236199
>+
>+        Reviewed by Darin Adler.
>+
>+        The CSS cascade was trying to resolve logical properties into physical
>+        ones too early. This failed if we still didn't know the direction or
>+        writing-mode, e.g. because they were set to a variable or to a CSS-wide
>+        keyword.
>+
>+        This patch keeps logical properties as-is during the cascade. They are
>+        only resolved when finally applied. Also, both logical properties and
>+        their physical equivalents are now set to apply in parse order, since
>+        'height: 0px; block-size: 1px' and 'block-size: 1px; height: 0px' can be
>+        different, the order matters.
>+
>+        Tests: imported/w3c/web-platform-tests/css/css-logical/animation-004.html
>+               imported/w3c/web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode.html
>+
>+        * css/CSSComputedStyleDeclaration.cpp:
>+        (WebCore::ComputedStyleExtractor::valueForPropertyInStyle):
>+        * css/CSSProperties.json:
>+        * css/parser/CSSParser.cpp:
>+        (WebCore::CSSParser::parseValueWithVariableReferences):
>+        * style/PropertyCascade.cpp:
>+        (WebCore::Style::shouldApplyPropertyInParseOrder):
>+        (WebCore::Style::PropertyCascade::PropertyCascade):
>+        (WebCore::Style::PropertyCascade::set):
>+        (WebCore::Style::PropertyCascade::setDeferred):
>+        (WebCore::Style::PropertyCascade::resolveDirectionAndWritingMode const): Deleted.
>+        (WebCore::Style::PropertyCascade::direction const): Deleted.
>+        * style/PropertyCascade.h:
>+        (WebCore::Style::PropertyCascade::areDeferredInOrder const):
>+        * style/StyleBuilder.cpp:
>+        (WebCore::Style::Builder::Builder):
>+        (WebCore::Style::Builder::applyProperty):
>+        (WebCore::Style::directionFromStyle): Deleted.
>+
> 2022-03-19  Chris Dumez  <cdumez@apple.com>
> 
>         Optimize EventTarget::visitJSEventListeners()
>diff --git a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
>index 0b57a1f26d0a5eb2cb5ab3e90f2c69b9b8a5b39b..494e8b6ab404825990b14ee25c589674bbfed83c 100644
>--- a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
>+++ b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
>@@ -4034,6 +4034,10 @@ RefPtr<CSSValue> ComputedStyleExtractor::valueForPropertyInStyle(const RenderSty
>         }
>         case CSSPropertyBorderBlockColor:
>             return getCSSPropertyValuesFor2SidesShorthand(borderBlockColorShorthand());
>+        case CSSPropertyBorderBlockEnd:
>+            return getCSSPropertyValuesForShorthandProperties(borderBlockEndShorthand());
>+        case CSSPropertyBorderBlockStart:
>+            return getCSSPropertyValuesForShorthandProperties(borderBlockStartShorthand());
>         case CSSPropertyBorderBlockStyle:
>             return getCSSPropertyValuesFor2SidesShorthand(borderBlockStyleShorthand());
>         case CSSPropertyBorderBlockWidth:
>@@ -4054,6 +4058,10 @@ RefPtr<CSSValue> ComputedStyleExtractor::valueForPropertyInStyle(const RenderSty
>         }
>         case CSSPropertyBorderInlineColor:
>             return getCSSPropertyValuesFor2SidesShorthand(borderInlineColorShorthand());
>+        case CSSPropertyBorderInlineEnd:
>+            return getCSSPropertyValuesForShorthandProperties(borderInlineEndShorthand());
>+        case CSSPropertyBorderInlineStart:
>+            return getCSSPropertyValuesForShorthandProperties(borderInlineStartShorthand());
>         case CSSPropertyBorderInlineStyle:
>             return getCSSPropertyValuesFor2SidesShorthand(borderInlineStyleShorthand());
>         case CSSPropertyBorderInlineWidth:
>@@ -4205,21 +4213,17 @@ RefPtr<CSSValue> ComputedStyleExtractor::valueForPropertyInStyle(const RenderSty
>             break;
> 
>         /* Directional properties are resolved by resolveDirectionAwareProperty() before the switch. */
>-        case CSSPropertyBorderBlockEnd:
>         case CSSPropertyBorderBlockEndColor:
>         case CSSPropertyBorderBlockEndStyle:
>         case CSSPropertyBorderBlockEndWidth:
>-        case CSSPropertyBorderBlockStart:
>         case CSSPropertyBorderBlockStartColor:
>         case CSSPropertyBorderBlockStartStyle:
>         case CSSPropertyBorderBlockStartWidth:
>-        case CSSPropertyBorderEndEndRadius:        
>-        case CSSPropertyBorderEndStartRadius:        
>-        case CSSPropertyBorderInlineEnd:
>+        case CSSPropertyBorderEndEndRadius:
>+        case CSSPropertyBorderEndStartRadius:
>         case CSSPropertyBorderInlineEndColor:
>         case CSSPropertyBorderInlineEndStyle:
>         case CSSPropertyBorderInlineEndWidth:
>-        case CSSPropertyBorderInlineStart:
>         case CSSPropertyBorderInlineStartColor:
>         case CSSPropertyBorderInlineStartStyle:
>         case CSSPropertyBorderInlineStartWidth:
>diff --git a/Source/WebCore/css/CSSProperties.json b/Source/WebCore/css/CSSProperties.json
>index 7969e2be118d9e5468f636399a1295f0163c67bf..bf06d24da8ab10ff676cad766f29107965f15227 100644
>--- a/Source/WebCore/css/CSSProperties.json
>+++ b/Source/WebCore/css/CSSProperties.json
>@@ -1342,11 +1342,7 @@
>                     "border-block-end-width",
>                     "border-block-end-style",
>                     "border-block-end-color"
>-                ],
>-                "logical-property-group": {
>-                    "name": "border",
>-                    "resolver": "block-end"
>-                }
>+                ]
>             },
>             "specification": {
>                 "category": "css-logical-props",
>@@ -1423,11 +1419,7 @@
>                     "border-block-start-width",
>                     "border-block-start-style",
>                     "border-block-start-color"
>-                ],
>-                "logical-property-group": {
>-                    "name": "border",
>-                    "resolver": "block-start"
>-                }
>+                ]
>             },
>             "specification": {
>                 "category": "css-logical-props",
>@@ -1525,11 +1517,7 @@
>                     "border-bottom-width",
>                     "border-bottom-style",
>                     "border-bottom-color"
>-                ],
>-                "logical-property-group": {
>-                    "name": "border",
>-                    "resolver": "bottom"
>-                }
>+                ]
>             },
>             "specification": {
>                 "category": "css-backgrounds",
>@@ -1770,11 +1758,7 @@
>                     "border-inline-end-width",
>                     "border-inline-end-style",
>                     "border-inline-end-color"
>-                ],
>-                "logical-property-group": {
>-                    "name": "border",
>-                    "resolver": "inline-end"
>-                }
>+                ]
>             },
>             "specification": {
>                 "category": "css-logical-props",
>@@ -1851,11 +1835,7 @@
>                     "border-inline-start-width",
>                     "border-inline-start-style",
>                     "border-inline-start-color"
>-                ],
>-                "logical-property-group": {
>-                    "name": "border",
>-                    "resolver": "inline-start"
>-                }
>+                ]
>             },
>             "specification": {
>                 "category": "css-logical-props",
>@@ -1953,11 +1933,7 @@
>                     "border-left-width",
>                     "border-left-style",
>                     "border-left-color"
>-                ],
>-                "logical-property-group": {
>-                    "name": "border",
>-                    "resolver": "left"
>-                }
>+                ]
>             },
>             "specification": {
>                 "category": "css-backgrounds",
>@@ -2038,11 +2014,7 @@
>                     "border-right-width",
>                     "border-right-style",
>                     "border-right-color"
>-                ],
>-                "logical-property-group": {
>-                    "name": "border",
>-                    "resolver": "right"
>-                }
>+                ]
>             },
>             "specification": {
>                 "category": "css-backgrounds",
>@@ -2162,11 +2134,7 @@
>                     "border-top-width",
>                     "border-top-style",
>                     "border-top-color"
>-                ],
>-                "logical-property-group": {
>-                    "name": "border",
>-                    "resolver": "top"
>-                }
>+                ]
>             },
>             "specification": {
>                 "category": "css-backgrounds",
>diff --git a/Source/WebCore/css/parser/CSSParser.cpp b/Source/WebCore/css/parser/CSSParser.cpp
>index 70e921de7cdba4b783dd21ed300482e4165118d4..9ddec1476b97b37917089900c322f3fc7b4a3f83 100644
>--- a/Source/WebCore/css/parser/CSSParser.cpp
>+++ b/Source/WebCore/css/parser/CSSParser.cpp
>@@ -213,10 +213,7 @@ RefPtr<CSSValue> CSSParser::parseValueWithVariableReferences(CSSPropertyID propI
>             return nullptr;
> 
>         for (auto& property : parsedProperties) {
>-            CSSPropertyID currentId = property.id();
>-            if (CSSProperty::isDirectionAwareProperty(currentId))
>-                currentId = CSSProperty::resolveDirectionAwareProperty(currentId, direction, writingMode);
>-            if (currentId == propID)
>+            if (property.id() == propID)
>                 return property.value();
>         }
> 
>diff --git a/Source/WebCore/style/PropertyCascade.cpp b/Source/WebCore/style/PropertyCascade.cpp
>index f3f4df6f0a621ae81315d2a555a3a7a13a22cbc1..8593f709dc9313a8b37033550f3b58937992a291 100644
>--- a/Source/WebCore/style/PropertyCascade.cpp
>+++ b/Source/WebCore/style/PropertyCascade.cpp
>@@ -68,15 +68,14 @@ static inline bool shouldApplyPropertyInParseOrder(CSSPropertyID propertyID)
>     case CSSPropertyTextDecoration:
>         return true;
>     default:
>-        return false;
>+        return CSSProperty::isInLogicalPropertyGroup(propertyID);
>     }
> }
> 
>-PropertyCascade::PropertyCascade(const MatchResult& matchResult, CascadeLevel maximumCascadeLevel, IncludedProperties includedProperties, Direction direction)
>+PropertyCascade::PropertyCascade(const MatchResult& matchResult, CascadeLevel maximumCascadeLevel, IncludedProperties includedProperties)
>     : m_matchResult(matchResult)
>     , m_includedProperties(includedProperties)
>     , m_maximumCascadeLevel(maximumCascadeLevel)
>-    , m_direction(direction)
> {
>     buildCascade();
> }
>@@ -86,8 +85,6 @@ PropertyCascade::PropertyCascade(const PropertyCascade& parent, CascadeLevel max
>     , m_includedProperties(parent.m_includedProperties)
>     , m_maximumCascadeLevel(maximumCascadeLevel)
>     , m_maximumCascadeLayerPriorityForRollback(maximumCascadeLayerPriorityForRollback)
>-    , m_direction(parent.direction())
>-    , m_directionIsUnresolved(false)
> {
>     buildCascade();
> }
>@@ -132,11 +129,7 @@ void PropertyCascade::setPropertyInternal(Property& property, CSSPropertyID id,
> 
> void PropertyCascade::set(CSSPropertyID id, CSSValue& cssValue, const MatchedProperties& matchedProperties, CascadeLevel cascadeLevel)
> {
>-    if (CSSProperty::isDirectionAwareProperty(id)) {
>-        auto direction = this->direction();
>-        id = CSSProperty::resolveDirectionAwareProperty(id, direction.textDirection, direction.writingMode);
>-    }
>-
>+    ASSERT(!CSSProperty::isDirectionAwareProperty(id));
>     ASSERT(!shouldApplyPropertyInParseOrder(id));
> 
>     auto& property = m_properties[id];
>@@ -167,7 +160,6 @@ void PropertyCascade::set(CSSPropertyID id, CSSValue& cssValue, const MatchedPro
> 
> void PropertyCascade::setDeferred(CSSPropertyID id, CSSValue& cssValue, const MatchedProperties& matchedProperties, CascadeLevel cascadeLevel)
> {
>-    ASSERT(!CSSProperty::isDirectionAwareProperty(id));
>     ASSERT(shouldApplyPropertyInParseOrder(id));
> 
>     Property property;
>@@ -304,50 +296,5 @@ void PropertyCascade::addImportantMatches(CascadeLevel cascadeLevel)
>         addMatch(matchedDeclarations[match.index], cascadeLevel, true);
> }
> 
>-PropertyCascade::Direction PropertyCascade::resolveDirectionAndWritingMode(Direction inheritedDirection) const
>-{
>-    Direction result = inheritedDirection;
>-
>-    bool hadImportantWritingMode = false;
>-    bool hadImportantDirection = false;
>-
>-    for (auto cascadeLevel : { CascadeLevel::UserAgent, CascadeLevel::User, CascadeLevel::Author }) {
>-        for (const auto& matchedProperties : declarationsForCascadeLevel(m_matchResult, cascadeLevel)) {
>-            for (unsigned i = 0, count = matchedProperties.properties->propertyCount(); i < count; ++i) {
>-                auto property = matchedProperties.properties->propertyAt(i);
>-                if (!property.value()->isPrimitiveValue() || property.value()->isCSSWideKeyword())
>-                    continue;
>-                switch (property.id()) {
>-                case CSSPropertyWritingMode:
>-                    if (!hadImportantWritingMode || property.isImportant()) {
>-                        result.writingMode = downcast<CSSPrimitiveValue>(*property.value());
>-                        hadImportantWritingMode = property.isImportant();
>-                    }
>-                    break;
>-                case CSSPropertyDirection:
>-                    if (!hadImportantDirection || property.isImportant()) {
>-                        result.textDirection = downcast<CSSPrimitiveValue>(*property.value());
>-                        hadImportantDirection = property.isImportant();
>-                    }
>-                    break;
>-                default:
>-                    break;
>-                }
>-            }
>-        }
>-    }
>-
>-    return result;
>-}
>-
>-PropertyCascade::Direction PropertyCascade::direction() const
>-{
>-    if (m_directionIsUnresolved) {
>-        m_direction = resolveDirectionAndWritingMode(m_direction);
>-        m_directionIsUnresolved = false;
>-    }
>-    return m_direction;
>-}
>-
> }
> }
>diff --git a/Source/WebCore/style/PropertyCascade.h b/Source/WebCore/style/PropertyCascade.h
>index 3ee6df33d5395de5f5b94a43f61034780207eefc..60d8ac506448186eced75dad8b686972d4513d9a 100644
>--- a/Source/WebCore/style/PropertyCascade.h
>+++ b/Source/WebCore/style/PropertyCascade.h
>@@ -40,12 +40,7 @@ class PropertyCascade {
> public:
>     enum IncludedProperties { All, InheritedOnly };
> 
>-    struct Direction {
>-        TextDirection textDirection;
>-        WritingMode writingMode;
>-    };
>-
>-    PropertyCascade(const MatchResult&, CascadeLevel, IncludedProperties, Direction);
>+    PropertyCascade(const MatchResult&, CascadeLevel, IncludedProperties);
>     PropertyCascade(const PropertyCascade&, CascadeLevel, std::optional<CascadeLayerPriority> maximumCascadeLayerPriorityForRollback = { });
> 
>     ~PropertyCascade();
>@@ -63,6 +58,7 @@ public:
>     const Property& property(CSSPropertyID) const;
> 
>     bool hasDeferredProperty(CSSPropertyID) const;
>+    bool areDeferredInOrder(CSSPropertyID, CSSPropertyID) const;
>     const Property& deferredProperty(CSSPropertyID) const;
> 
>     bool hasCustomProperty(const String&) const;
>@@ -71,8 +67,6 @@ public:
>     const Vector<Property, 8>& deferredProperties() const { return m_deferredProperties; }
>     const HashMap<AtomString, Property>& customProperties() const { return m_customProperties; }
> 
>-    Direction direction() const;
>-
> private:
>     void buildCascade();
>     bool addNormalMatches(CascadeLevel);
>@@ -83,14 +77,10 @@ private:
>     void setDeferred(CSSPropertyID, CSSValue&, const MatchedProperties&, CascadeLevel);
>     static void setPropertyInternal(Property&, CSSPropertyID, CSSValue&, const MatchedProperties&, CascadeLevel);
> 
>-    Direction resolveDirectionAndWritingMode(Direction inheritedDirection) const;
>-
>     const MatchResult& m_matchResult;
>     const IncludedProperties m_includedProperties;
>     const CascadeLevel m_maximumCascadeLevel;
>     const std::optional<CascadeLayerPriority> m_maximumCascadeLayerPriorityForRollback;
>-    mutable Direction m_direction;
>-    mutable bool m_directionIsUnresolved { true };
> 
>     Property m_properties[numCSSProperties + 2];
>     std::bitset<numCSSProperties + 2> m_propertyIsPresent;
>@@ -117,6 +107,13 @@ inline bool PropertyCascade::hasDeferredProperty(CSSPropertyID id) const
>     return m_deferredPropertiesIndices.contains(id);
> }
> 
>+inline bool PropertyCascade::areDeferredInOrder(CSSPropertyID id1, CSSPropertyID id2) const
>+{
>+    ASSERT(hasDeferredProperty(id1));
>+    ASSERT(hasDeferredProperty(id2));
>+    return m_deferredPropertiesIndices.get(id1) < m_deferredPropertiesIndices.get(id2);
>+}
>+
> inline const PropertyCascade::Property& PropertyCascade::deferredProperty(CSSPropertyID id) const
> {
>     ASSERT(hasDeferredProperty(id));
>diff --git a/Source/WebCore/style/StyleBuilder.cpp b/Source/WebCore/style/StyleBuilder.cpp
>index 543dc02d1361a8a5a19cffc200fe11a7b8cde8bd..e2fd1459c733679a4c21a9b8fc3cec90a59f3ae8 100644
>--- a/Source/WebCore/style/StyleBuilder.cpp
>+++ b/Source/WebCore/style/StyleBuilder.cpp
>@@ -48,11 +48,6 @@ namespace Style {
> 
> static const CSSPropertyID firstLowPriorityProperty = static_cast<CSSPropertyID>(lastHighPriorityProperty + 1);
> 
>-inline PropertyCascade::Direction directionFromStyle(const RenderStyle& style)
>-{
>-    return { style.direction(), style.writingMode() };
>-}
>-
> inline bool isValidVisitedLinkProperty(CSSPropertyID id)
> {
>     switch (id) {
>@@ -81,7 +76,7 @@ inline bool isValidVisitedLinkProperty(CSSPropertyID id)
> }
> 
> Builder::Builder(RenderStyle& style, BuilderContext&& context, const MatchResult& matchResult, CascadeLevel cascadeLevel, PropertyCascade::IncludedProperties includedProperties)
>-    : m_cascade(matchResult, cascadeLevel, includedProperties, directionFromStyle(style))
>+    : m_cascade(matchResult, cascadeLevel, includedProperties)
>     , m_state(*this, style, WTFMove(context))
> {
> }
>@@ -273,8 +268,8 @@ void Builder::applyProperty(CSSPropertyID id, CSSValue& value, SelectorChecker::
>     auto valueToApply = resolveValue(id, value);
> 
>     if (CSSProperty::isDirectionAwareProperty(id)) {
>-        auto direction = m_cascade.direction();
>-        CSSPropertyID newId = CSSProperty::resolveDirectionAwareProperty(id, direction.textDirection, direction.writingMode);
>+        auto& style = m_state.style();
>+        CSSPropertyID newId = CSSProperty::resolveDirectionAwareProperty(id, style.direction(), style.writingMode());
>         ASSERT(newId != id);
>         return applyProperty(newId, valueToApply.get(), linkMatchMask);
>     }
>@@ -320,6 +315,19 @@ void Builder::applyProperty(CSSPropertyID id, CSSValue& value, SelectorChecker::
>                 auto& property = rollbackCascade->property(id);
>                 applyRollbackCascadeProperty(property, linkMatchMask);
>                 return;
>+            } else if (CSSProperty::isInLogicalPropertyGroup(id)) {
>+                ASSERT(!CSSProperty::isDirectionAwareProperty(id));
>+                auto& style = m_state.style();
>+                auto logicalId = CSSProperty::unresolvePhysicalProperty(id, style.direction(), style.writingMode());
>+                bool hasPhysical = rollbackCascade->hasDeferredProperty(id);
>+                bool hasLogical = rollbackCascade->hasDeferredProperty(logicalId);
>+                if (hasPhysical || hasLogical) {
>+                    if (hasLogical && (!hasPhysical || rollbackCascade->areDeferredInOrder(id, logicalId)))
>+                        id = logicalId;
>+                    auto& property = rollbackCascade->deferredProperty(id);
>+                    applyRollbackCascadeProperty(property, linkMatchMask);
>+                    return;
>+                }
>             } else if (rollbackCascade->hasDeferredProperty(id)) {
>                 auto& property = rollbackCascade->deferredProperty(id);
>                 applyRollbackCascadeProperty(property, linkMatchMask);
>diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
>index 7617f7e566bb1a03767457f5dcef045f5beb8e59..8efc3a73756458436ed076eb123eafd805a840d9 100644
>--- a/LayoutTests/imported/w3c/ChangeLog
>+++ b/LayoutTests/imported/w3c/ChangeLog
>@@ -1,3 +1,17 @@
>+2022-03-20  Oriol Brufau  <obrufau@igalia.com>
>+
>+        Fix CSS cascade regarding logical properties
>+        https://bugs.webkit.org/show_bug.cgi?id=236199
>+
>+        Reviewed by Darin Adler.
>+
>+        Expect animation-004.html to pass.
>+        Add new test logicalprops-with-deferred-writing-mode.html
>+
>+        * web-platform-tests/css/css-logical/animation-004-expected.txt:
>+        * web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode-expected.txt: Added.
>+        * web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode.html: Added.
>+
> 2022-03-19  Oriol Brufau  <obrufau@igalia.com>
> 
>         [cssom] Implement border-image serialization
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-004-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-004-expected.txt
>index b28fb3097efeb42720d68ffca5ee776e7bc61e6e..0c76b52f319966ba170255e813480297d64dc009 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-004-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/animation-004-expected.txt
>@@ -11,7 +11,7 @@ PASS Transitions update when the writing-mode is changed
> PASS Filling transitions update when the writing-mode is changed
> PASS The number of interpolating properties can be increased when the writing-mode is changed
> PASS The number of interpolating properties can be decreased when the writing-mode is changed
>-FAIL Transitions update when the writing-mode is changed through a CSS variable assert_equals: expected "50px" but got "0px"
>+PASS Transitions update when the writing-mode is changed through a CSS variable
> PASS Transitions update when the direction is changed
> PASS Transitions from logical to physical update when the direction is changed
> PASS Transitions from physical to logical update when the direction is changed
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..88ba2794b9970d0836f7718a4cf8109f4cff825e
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode-expected.txt
>@@ -0,0 +1,8 @@
>+
>+PASS Writing mode with variable
>+PASS Writing mode with nested variables
>+PASS Writing mode with 'inherit'
>+PASS Writing mode with 'initial'
>+PASS Writing mode with 'revert'
>+PASS Writing mode with 'revert-layer'
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..a213d375bdf95d669b14f19f50d414cb6ca7439a
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode.html
>@@ -0,0 +1,175 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>Logical properties with deferred <code>writing-mode</code></title>
>+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
>+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#box">
>+<link rel="help" href="https://drafts.csswg.org/css-variables-1/">
>+<link rel="help" href="https://drafts.csswg.org/css-values-4/#common-keywords">
>+<meta name="assert" content="Checks that logical properties are resolved correctly when the writing mode isn't known until computed-value time.">
>+<style>
>+#parent {
>+  writing-mode: vertical-lr;
>+}
>+
>+@layer {
>+  .revert-layer {
>+    writing-mode: vertical-rl;
>+  }
>+}
>+@layer {
>+  .revert-layer {
>+    writing-mode: horizontal-tb;
>+    writing-mode: revert-layer;
>+  }
>+}
>+</style>
>+<div id="parent">
>+  <div id="target"></div>
>+</div>
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script>
>+const target = document.getElementById("target");
>+const computedStyle = getComputedStyle(target);
>+
>+function check(expected) {
>+  for (let [prop, value] of Object.entries(expected)) {
>+    assert_equals(computedStyle.getPropertyValue(prop), value, prop);
>+  }
>+}
>+
>+test(function() {
>+  target.style.cssText = `
>+    --wm: vertical-rl;
>+    writing-mode: var(--wm);
>+    margin-block-start: 1px;
>+    margin-block-end: 2px;
>+    margin-inline-start: 3px;
>+    margin-inline-end: 4px;
>+  `;
>+  check({
>+    // Logicals
>+    "margin-block-start": "1px",
>+    "margin-block-end": "2px",
>+    "margin-inline-start": "3px",
>+    "margin-inline-end": "4px",
>+    // Physicals
>+    "margin-right": "1px",
>+    "margin-left": "2px",
>+    "margin-top": "3px",
>+    "margin-bottom": "4px",
>+  });
>+}, "Writing mode with variable");
>+
>+test(function() {
>+  target.style.cssText = `
>+    --wm1: vertical-rl;
>+    --wm2: var(--wm1);
>+    writing-mode: var(--wm2);
>+    margin-block-start: 1px;
>+    margin-block-end: 2px;
>+    margin-inline-start: 3px;
>+    margin-inline-end: 4px;
>+  `;
>+  check({
>+    // Logicals
>+    "margin-block-start": "1px",
>+    "margin-block-end": "2px",
>+    "margin-inline-start": "3px",
>+    "margin-inline-end": "4px",
>+    // Physicals
>+    "margin-right": "1px",
>+    "margin-left": "2px",
>+    "margin-top": "3px",
>+    "margin-bottom": "4px",
>+  });
>+}, "Writing mode with nested variables");
>+
>+test(function() {
>+  target.style.cssText = `
>+    writing-mode: inherit;
>+    margin-block-start: 1px;
>+    margin-block-end: 2px;
>+    margin-inline-start: 3px;
>+    margin-inline-end: 4px;
>+  `;
>+  check({
>+    // Logicals
>+    "margin-block-start": "1px",
>+    "margin-block-end": "2px",
>+    "margin-inline-start": "3px",
>+    "margin-inline-end": "4px",
>+    // Physicals
>+    "margin-left": "1px",
>+    "margin-right": "2px",
>+    "margin-top": "3px",
>+    "margin-bottom": "4px",
>+  });
>+}, "Writing mode with 'inherit'");
>+
>+test(function() {
>+  target.style.cssText = `
>+    writing-mode: initial;
>+    margin-block-start: 1px;
>+    margin-block-end: 2px;
>+    margin-inline-start: 3px;
>+    margin-inline-end: 4px;
>+  `;
>+  check({
>+    // Logicals
>+    "margin-block-start": "1px",
>+    "margin-block-end": "2px",
>+    "margin-inline-start": "3px",
>+    "margin-inline-end": "4px",
>+    // Physicals
>+    "margin-top": "1px",
>+    "margin-bottom": "2px",
>+    "margin-left": "3px",
>+    "margin-right": "4px",
>+  });
>+}, "Writing mode with 'initial'");
>+
>+test(function() {
>+  target.style.cssText = `
>+    writing-mode: revert;
>+    margin-block-start: 1px;
>+    margin-block-end: 2px;
>+    margin-inline-start: 3px;
>+    margin-inline-end: 4px;
>+  `;
>+  check({
>+    // Logicals
>+    "margin-block-start": "1px",
>+    "margin-block-end": "2px",
>+    "margin-inline-start": "3px",
>+    "margin-inline-end": "4px",
>+    // Physicals
>+    "margin-left": "1px",
>+    "margin-right": "2px",
>+    "margin-top": "3px",
>+    "margin-bottom": "4px",
>+  });
>+}, "Writing mode with 'revert'");
>+
>+test(function() {
>+  target.className = "revert-layer";
>+  target.style.cssText = `
>+    margin-block-start: 1px;
>+    margin-block-end: 2px;
>+    margin-inline-start: 3px;
>+    margin-inline-end: 4px;
>+  `;
>+  check({
>+    // Logicals
>+    "margin-block-start": "1px",
>+    "margin-block-end": "2px",
>+    "margin-inline-start": "3px",
>+    "margin-inline-end": "4px",
>+    // Physicals
>+    "margin-right": "1px",
>+    "margin-left": "2px",
>+    "margin-top": "3px",
>+    "margin-bottom": "4px",
>+  });
>+}, "Writing mode with 'revert-layer'");
>+</script>

Actions: View | Formatted Diff | Diff

Attachments on bug 236199: 451039 | 451117 | 451169 | 454860 | 454861 | 454863 | 455057 | 455060 | 455061 | 455195 | 458293 | 458413 | 458444 | 458454