diff --git a/Libraries/LibWeb/CSS/Properties.json b/Libraries/LibWeb/CSS/Properties.json index 6e145240247..f540c0f9352 100644 --- a/Libraries/LibWeb/CSS/Properties.json +++ b/Libraries/LibWeb/CSS/Properties.json @@ -503,6 +503,10 @@ "longhands": [ "border-block-start-color", "border-block-end-color" + ], + "max-values": 2, + "valid-types": [ + "color" ] }, "border-block-end": { @@ -571,6 +575,10 @@ "longhands": [ "border-block-start-style", "border-block-end-style" + ], + "max-values": 2, + "valid-types": [ + "line-style" ] }, "border-block-width": { @@ -579,6 +587,15 @@ "longhands": [ "border-block-start-width", "border-block-end-width" + ], + "max-values": 2, + "valid-types": [ + "length [0,∞]" + ], + "valid-identifiers": [ + "medium", + "thick", + "thin" ] }, "border-bottom": { @@ -767,6 +784,10 @@ "longhands": [ "border-inline-start-color", "border-inline-end-color" + ], + "max-values": 2, + "valid-types": [ + "color" ] }, "border-inline-end": { @@ -835,6 +856,10 @@ "longhands": [ "border-inline-start-style", "border-inline-end-style" + ], + "max-values": 2, + "valid-types": [ + "line-style" ] }, "border-inline-width": { @@ -843,6 +868,15 @@ "longhands": [ "border-inline-start-width", "border-inline-end-width" + ], + "max-values": 2, + "valid-types": [ + "length [0,∞]" + ], + "valid-identifiers": [ + "medium", + "thick", + "thin" ] }, "border-left": { diff --git a/Libraries/LibWeb/CSS/StyleComputer.cpp b/Libraries/LibWeb/CSS/StyleComputer.cpp index 948164b8486..2d86f7e9c4d 100644 --- a/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -693,16 +693,46 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i return; } + if (property_id == CSS::PropertyID::BorderBlockStyle) { + assign_start_and_end_values(PropertyID::BorderBlockStartStyle, PropertyID::BorderBlockEndStyle, value); + return; + } + + if (property_id == CSS::PropertyID::BorderInlineStyle) { + assign_start_and_end_values(PropertyID::BorderInlineStartStyle, PropertyID::BorderInlineEndStyle, value); + return; + } + if (property_id == CSS::PropertyID::BorderWidth) { assign_edge_values(PropertyID::BorderTopWidth, PropertyID::BorderRightWidth, PropertyID::BorderBottomWidth, PropertyID::BorderLeftWidth, value); return; } + if (property_id == CSS::PropertyID::BorderBlockWidth) { + assign_start_and_end_values(PropertyID::BorderBlockStartWidth, PropertyID::BorderBlockEndWidth, value); + return; + } + + if (property_id == CSS::PropertyID::BorderInlineWidth) { + assign_start_and_end_values(PropertyID::BorderInlineStartWidth, PropertyID::BorderInlineEndWidth, value); + return; + } + if (property_id == CSS::PropertyID::BorderColor) { assign_edge_values(PropertyID::BorderTopColor, PropertyID::BorderRightColor, PropertyID::BorderBottomColor, PropertyID::BorderLeftColor, value); return; } + if (property_id == CSS::PropertyID::BorderBlockColor) { + assign_start_and_end_values(PropertyID::BorderBlockStartColor, PropertyID::BorderBlockEndColor, value); + return; + } + + if (property_id == CSS::PropertyID::BorderInlineColor) { + assign_start_and_end_values(PropertyID::BorderInlineStartColor, PropertyID::BorderInlineEndColor, value); + return; + } + if (property_id == CSS::PropertyID::BackgroundPosition) { if (value.is_position()) { auto const& position = value.as_position(); diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-color-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-color-computed.txt index 52f61aedb57..e39dd91e570 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-color-computed.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-color-computed.txt @@ -2,13 +2,12 @@ Harness status: OK Found 8 tests -6 Pass -2 Fail +8 Pass Pass Property border-block-start-color value 'currentcolor' Pass Property border-block-start-color value 'rgb(2, 3, 4)' Pass Property border-block-end-color value 'rgb(34, 51, 68)' Pass Property border-block-end-color value 'transparent' -Fail Property border-block-color value 'rgb(34, 51, 68)' +Pass Property border-block-color value 'rgb(34, 51, 68)' Pass Property border-block-color value 'transparent rgb(2, 3, 4)' -Fail Property border-block-color value 'rgb(2, 3, 4) rgb(2, 3, 4)' +Pass Property border-block-color value 'rgb(2, 3, 4) rgb(2, 3, 4)' Pass Property border-block-color value 'currentcolor lime' \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-width-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-width-computed.txt index 3bcd165bea0..f790d8f9d5a 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-width-computed.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-width-computed.txt @@ -2,16 +2,15 @@ Harness status: OK Found 11 tests -6 Pass -5 Fail +11 Pass Pass Property border-block-start-width value 'calc(10px + 0.5em)' Pass Property border-block-start-width value 'calc(10px - 0.5em)' Pass Property border-block-start-width value 'thin' Pass Property border-block-start-width value 'medium' -Fail Property border-block-end-width value 'calc(10px + 0.5em)' +Pass Property border-block-end-width value 'calc(10px + 0.5em)' Pass Property border-block-end-width value 'calc(10px - 0.5em)' -Fail Property border-block-end-width value 'thick' -Fail Property border-block-width value '10px' -Fail Property border-block-width value '10px 20px' -Fail Property border-block-width value '10px 10px' +Pass Property border-block-end-width value 'thick' +Pass Property border-block-width value '10px' +Pass Property border-block-width value '10px 20px' +Pass Property border-block-width value '10px 10px' Pass width is zero if the border block style is none or hidden \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-color-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-color-computed.txt index 0e2e0a836da..a6dfd44341a 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-color-computed.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-color-computed.txt @@ -2,13 +2,12 @@ Harness status: OK Found 8 tests -6 Pass -2 Fail +8 Pass Pass Property border-inline-start-color value 'currentcolor' Pass Property border-inline-start-color value 'rgb(2, 3, 4)' Pass Property border-inline-end-color value 'rgb(34, 51, 68)' Pass Property border-inline-end-color value 'transparent' -Fail Property border-inline-color value 'rgb(34, 51, 68)' +Pass Property border-inline-color value 'rgb(34, 51, 68)' Pass Property border-inline-color value 'transparent rgb(2, 3, 4)' -Fail Property border-inline-color value 'rgb(2, 3, 4) rgb(2, 3, 4)' +Pass Property border-inline-color value 'rgb(2, 3, 4) rgb(2, 3, 4)' Pass Property border-inline-color value 'currentcolor lime' \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-width-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-width-computed.txt index 1a605c02367..28c95960aca 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-width-computed.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-width-computed.txt @@ -2,16 +2,15 @@ Harness status: OK Found 11 tests -6 Pass -5 Fail +11 Pass Pass Property border-inline-start-width value 'calc(10px + 0.5em)' Pass Property border-inline-start-width value 'calc(10px - 0.5em)' Pass Property border-inline-start-width value 'thin' Pass Property border-inline-start-width value 'medium' -Fail Property border-inline-end-width value 'calc(10px + 0.5em)' +Pass Property border-inline-end-width value 'calc(10px + 0.5em)' Pass Property border-inline-end-width value 'calc(10px - 0.5em)' -Fail Property border-inline-end-width value 'thick' -Fail Property border-inline-width value '10px' -Fail Property border-inline-width value '10px 20px' -Fail Property border-inline-width value '10px 10px' +Pass Property border-inline-end-width value 'thick' +Pass Property border-inline-width value '10px' +Pass Property border-inline-width value '10px 20px' +Pass Property border-inline-width value '10px 10px' Pass width is zero if the border block style is none or hidden \ No newline at end of file