LibWeb: Add more legacy -webkit- aliases

Author: https://github.com/vpzomtrrfrt Commit: https://github.com/LadybirdBrowser/ladybird/commit/5c315b532e Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/501 Reviewed-by: https://github.com/AtkinsSJ ✅
2024-07-11 21:22:14 -06:00 · 2024-07-11 21:22:14 -06:00 · 5c315b532e · 2024-07-16 23:17:55 +09:00
commit 5c315b532e
parent 247a07b606
6 changed files with 238 additions and 1 deletions
--- a/Tests/LibWeb/Ref/reference/webkit-box-shadow.html
+++ b/Tests/LibWeb/Ref/reference/webkit-box-shadow.html
@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 50px; height: 50px; box-shadow: 10px 5px 5px red"></div>
--- a/Tests/LibWeb/Ref/webkit-box-shadow.html
+++ b/Tests/LibWeb/Ref/webkit-box-shadow.html
@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<link rel="match" href="reference/webkit-box-shadow.html" />
+<div style="width: 50px; height: 50px; -webkit-box-shadow: 10px 5px 5px red"></div>
--- a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
+++ b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
@ -1,5 +1,38 @@
+-webkit-align-content: normal
+-webkit-align-items: normal
+-webkit-align-self: auto
+-webkit-animation-delay: 0s
+-webkit-animation-direction: normal
+-webkit-animation-duration: auto
+-webkit-animation-fill-mode: none
+-webkit-animation-iteration-count: 1
+-webkit-animation-name: none
+-webkit-animation-play-state: running
+-webkit-animation-timing-function: ease
 -webkit-appearance: auto
+-webkit-background-clip: border-box
+-webkit-background-origin: padding-box
+-webkit-border-bottom-left-radius: 0px
+-webkit-border-bottom-right-radius: 0px
+-webkit-border-top-left-radius: 0px
+-webkit-border-top-right-radius: 0px
+-webkit-box-shadow: none
+-webkit-box-sizing: content-box
+-webkit-flex-basis: auto
+-webkit-flex-direction: row
+-webkit-flex-grow: 0
+-webkit-flex-shrink: 1
+-webkit-flex-wrap: nowrap
+-webkit-justify-content: normal
+-webkit-mask: none
+-webkit-order: 0
 -webkit-text-fill-color: rgb(0, 0, 0)
+-webkit-transform: none
+-webkit-transform-origin: 50% 50%
+-webkit-transition-delay: 0s
+-webkit-transition-duration: 0s
+-webkit-transition-property: all
+-webkit-transition-timing-function: ease
 accent-color: auto
 align-content: normal
 align-items: normal
@ -86,7 +119,7 @@ grid-row-start: auto
 grid-template-areas: 
 grid-template-columns: 
 grid-template-rows: 
-height: 1496px
+height: 2057px
 image-rendering: auto
 inline-size: auto
 inset-block-end: auto
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@ -6689,6 +6689,8 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(Property
    case PropertyID::BackgroundClip:
    case PropertyID::BackgroundImage:
    case PropertyID::BackgroundOrigin:
+    case PropertyID::WebkitBackgroundClip:
+    case PropertyID::WebkitBackgroundOrigin:
        if (auto parsed_value = parse_simple_comma_separated_value_list(property_id, tokens))
            return parsed_value.release_nonnull();
        return ParseError::SyntaxError;
@ -6721,14 +6723,20 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(Property
    case PropertyID::BorderTopRightRadius:
    case PropertyID::BorderBottomRightRadius:
    case PropertyID::BorderBottomLeftRadius:
+    case PropertyID::WebkitBorderTopLeftRadius:
+    case PropertyID::WebkitBorderTopRightRadius:
+    case PropertyID::WebkitBorderBottomRightRadius:
+    case PropertyID::WebkitBorderBottomLeftRadius:
        if (auto parsed_value = parse_border_radius_value(tokens); parsed_value && !tokens.has_next_token())
            return parsed_value.release_nonnull();
        return ParseError::SyntaxError;
    case PropertyID::BorderRadius:
+    case PropertyID::WebkitBorderRadius:
        if (auto parsed_value = parse_border_radius_shorthand_value(tokens); parsed_value && !tokens.has_next_token())
            return parsed_value.release_nonnull();
        return ParseError::SyntaxError;
    case PropertyID::BoxShadow:
+    case PropertyID::WebkitBoxShadow:
        if (auto parsed_value = parse_shadow_value(tokens, AllowInsetKeyword::Yes); parsed_value && !tokens.has_next_token())
            return parsed_value.release_nonnull();
        return ParseError::SyntaxError;
@ -6741,10 +6749,12 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(Property
            return parsed_value.release_nonnull();
        return ParseError::SyntaxError;
    case PropertyID::Flex:
+    case PropertyID::WebkitFlex:
        if (auto parsed_value = parse_flex_value(tokens); parsed_value && !tokens.has_next_token())
            return parsed_value.release_nonnull();
        return ParseError::SyntaxError;
    case PropertyID::FlexFlow:
+    case PropertyID::WebkitFlexFlow:
        if (auto parsed_value = parse_flex_flow_value(tokens); parsed_value && !tokens.has_next_token())
            return parsed_value.release_nonnull();
        return ParseError::SyntaxError;
@ -6861,14 +6871,17 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(Property
            return parsed_value.release_nonnull();
        return ParseError::SyntaxError;
    case PropertyID::Transform:
+    case PropertyID::WebkitTransform:
        if (auto parsed_value = parse_transform_value(tokens); parsed_value && !tokens.has_next_token())
            return parsed_value.release_nonnull();
        return ParseError::SyntaxError;
    case PropertyID::TransformOrigin:
+    case PropertyID::WebkitTransformOrigin:
        if (auto parsed_value = parse_transform_origin_value(tokens); parsed_value && !tokens.has_next_token())
            return parsed_value.release_nonnull();
        return ParseError::SyntaxError;
    case PropertyID::Transition:
+    case PropertyID::WebkitTransition:
        if (auto parsed_value = parse_transition_value(tokens); parsed_value && !tokens.has_next_token())
            return parsed_value.release_nonnull();
        return ParseError::SyntaxError;
--- a/Userland/Libraries/LibWeb/CSS/Properties.json
+++ b/Userland/Libraries/LibWeb/CSS/Properties.json
@ -1,16 +1,130 @@
 {
+  "-webkit-align-content": {
+    "logical-alias-for": ["align-content"]
+  },
+  "-webkit-align-items": {
+    "logical-alias-for": ["align-items"]
+  },
+  "-webkit-align-self": {
+    "logical-alias-for": ["align-self"]
+  },
+  "-webkit-animation": {
+    "logical-alias-for": ["animation"]
+  },
+  "-webkit-animation-delay": {
+    "logical-alias-for": ["animation-delay"]
+  },
+  "-webkit-animation-direction": {
+    "logical-alias-for": ["animation-direction"]
+  },
+  "-webkit-animation-duration": {
+    "logical-alias-for": ["animation-duration"]
+  },
+  "-webkit-animation-fill-mode": {
+    "logical-alias-for": ["animation-fill-mode"]
+  },
+  "-webkit-animation-iteration-count": {
+    "logical-alias-for": ["animation-iteration-count"]
+  },
+  "-webkit-animation-name": {
+    "logical-alias-for": ["animation-name"]
+  },
+  "-webkit-animation-play-state": {
+    "logical-alias-for": ["animation-play-state"]
+  },
+  "-webkit-animation-timing-function": {
+    "logical-alias-for": ["animation-timing-function"]
+  },
  "-webkit-appearance": {
    "logical-alias-for": [
      "appearance"
    ],
    "max-values": 1
  },
+  "-webkit-background-clip": {
+    "logical-alias-for": ["background-clip"]
+  },
+  "-webkit-background-origin": {
+    "logical-alias-for": ["background-origin"]
+  },
+  "-webkit-border-bottom-left-radius": {
+    "logical-alias-for": ["border-bottom-left-radius"]
+  },
+  "-webkit-border-bottom-right-radius": {
+    "logical-alias-for": ["border-bottom-right-radius"]
+  },
+  "-webkit-border-radius": {
+    "logical-alias-for": ["border-radius"]
+  },
+  "-webkit-border-top-left-radius": {
+    "logical-alias-for": ["border-top-left-radius"]
+  },
+  "-webkit-border-top-right-radius": {
+    "logical-alias-for": ["border-top-right-radius"]
+  },
+  "-webkit-box-shadow": {
+    "logical-alias-for": ["box-shadow"]
+  },
+  "-webkit-box-sizing": {
+    "logical-alias-for": ["box-sizing"]
+  },
+  "-webkit-flex": {
+    "logical-alias-for": ["flex"]
+  },
+  "-webkit-flex-basis": {
+    "logical-alias-for": ["flex-basis"]
+  },
+  "-webkit-flex-direction": {
+    "logical-alias-for": ["flex-direction"]
+  },
+  "-webkit-flex-flow": {
+    "logical-alias-for": ["flex-flow"]
+  },
+  "-webkit-flex-grow": {
+    "logical-alias-for": ["flex-grow"]
+  },
+  "-webkit-flex-shrink": {
+    "logical-alias-for": ["flex-shrink"]
+  },
+  "-webkit-flex-wrap": {
+    "logical-alias-for": ["flex-wrap"]
+  },
+  "-webkit-justify-content": {
+    "logical-alias-for": ["justify-content"]
+  },
+  "-webkit-mask": {
+    "logical-alias-for": ["mask"]
+  },
+  "-webkit-order": {
+    "logical-alias-for": ["order"]
+  },
  "-webkit-text-fill-color": {
    "animation-type": "by-computed-value",
    "inherited": true,
    "initial": "currentColor",
    "valid-types": ["color"]
  },
+  "-webkit-transform": {
+    "logical-alias-for": ["transform"]
+  },
+  "-webkit-transform-origin": {
+    "logical-alias-for": ["transform-origin"]
+  },
+  "-webkit-transition": {
+    "logical-alias-for": ["transition"]
+  },
+  "-webkit-transition-delay": {
+    "logical-alias-for": ["transition-delay"]
+  },
+  "-webkit-transition-duration": {
+    "logical-alias-for": ["transition-duration"]
+  },
+  "-webkit-transition-property": {
+    "logical-alias-for": ["transition-property"]
+  },
+  "-webkit-transition-timing-function": {
+    "logical-alias-for": ["transition-timing-function"]
+  },
  "accent-color": {
    "animation-type": "by-computed-value",
    "inherited": true,
--- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
@ -436,8 +436,80 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
            return PropertyID::Left;
        case PropertyID::InsetInlineEnd:
            return PropertyID::Right;
+        case PropertyID::WebkitAlignContent:
+            return PropertyID::AlignContent;
+        case PropertyID::WebkitAlignItems:
+            return PropertyID::AlignItems;
+        case PropertyID::WebkitAlignSelf:
+            return PropertyID::AlignSelf;
+        case PropertyID::WebkitAnimation:
+            return PropertyID::Animation;
+        case PropertyID::WebkitAnimationDelay:
+            return PropertyID::AnimationDelay;
+        case PropertyID::WebkitAnimationDirection:
+            return PropertyID::AnimationDirection;
+        case PropertyID::WebkitAnimationDuration:
+            return PropertyID::AnimationDuration;
+        case PropertyID::WebkitAnimationFillMode:
+            return PropertyID::AnimationFillMode;
+        case PropertyID::WebkitAnimationIterationCount:
+            return PropertyID::AnimationIterationCount;
+        case PropertyID::WebkitAnimationName:
+            return PropertyID::AnimationName;
+        case PropertyID::WebkitAnimationPlayState:
+            return PropertyID::AnimationPlayState;
+        case PropertyID::WebkitAnimationTimingFunction:
+            return PropertyID::AnimationTimingFunction;
        case PropertyID::WebkitAppearance:
            return PropertyID::Appearance;
+        case PropertyID::WebkitBackgroundClip:
+            return PropertyID::BackgroundClip;
+        case PropertyID::WebkitBackgroundOrigin:
+            return PropertyID::BackgroundOrigin;
+        case PropertyID::WebkitBorderBottomLeftRadius:
+            return PropertyID::BorderBottomLeftRadius;
+        case PropertyID::WebkitBorderBottomRightRadius:
+            return PropertyID::BorderBottomRightRadius;
+        case PropertyID::WebkitBorderRadius:
+            return PropertyID::BorderRadius;
+        case PropertyID::WebkitBorderTopLeftRadius:
+            return PropertyID::BorderTopLeftRadius;
+        case PropertyID::WebkitBorderTopRightRadius:
+            return PropertyID::BorderTopRightRadius;
+        case PropertyID::WebkitBoxShadow:
+            return PropertyID::BoxShadow;
+        case PropertyID::WebkitBoxSizing:
+            return PropertyID::BoxSizing;
+        case PropertyID::WebkitFlex:
+            return PropertyID::Flex;
+        case PropertyID::WebkitFlexBasis:
+            return PropertyID::FlexBasis;
+        case PropertyID::WebkitFlexDirection:
+            return PropertyID::FlexDirection;
+        case PropertyID::WebkitFlexFlow:
+            return PropertyID::FlexFlow;
+        case PropertyID::WebkitFlexWrap:
+            return PropertyID::FlexWrap;
+        case PropertyID::WebkitJustifyContent:
+            return PropertyID::JustifyContent;
+        case PropertyID::WebkitMask:
+            return PropertyID::Mask;
+        case PropertyID::WebkitOrder:
+            return PropertyID::Order;
+        case PropertyID::WebkitTransform:
+            return PropertyID::Transform;
+        case PropertyID::WebkitTransformOrigin:
+            return PropertyID::TransformOrigin;
+        case PropertyID::WebkitTransition:
+            return PropertyID::Transition;
+        case PropertyID::WebkitTransitionDelay:
+            return PropertyID::TransitionDelay;
+        case PropertyID::WebkitTransitionDuration:
+            return PropertyID::TransitionDuration;
+        case PropertyID::WebkitTransitionProperty:
+            return PropertyID::TransitionProperty;
+        case PropertyID::WebkitTransitionTimingFunction:
+            return PropertyID::TransitionTimingFunction;
        default:
            return {};
        }