LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-21 10:19:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Support -webkit-linear-gradient() correctly

Browse Source 
The -webkit version of linear-gradient does not include the `to`
before a <side or corner>. The angles of the <side or corner>
for the webkit version are also opposite that of the standard one.

So for the standard: linear-gradient(to left, red, blue)
The webkit version is: -webkit-linear-gradient(right, red, blue)

Adding the `to` in the -webkit version is invalid, omitting it in
the standard one is also invalid.
This commit is contained in:
MacDue 2022-08-07 12:36:04 +01:00 committed by Andreas Kling
parent 834d936bbc
commit ca2e345cdc
Notes: sideshowbarker 2024-07-17 08:35:21 +09:00 
Author: https://github.com/MacDue
Commit: https://github.com/SerenityOS/serenity/commit/ca2e345cdc
Pull-request: https://github.com/SerenityOS/serenity/pull/14795
3 changed files with 82 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
View File

@ -2360,11 +2360,17 @@ Optional<AK::URL> Parser::parse_url_function(ComponentValue const& component_val
RefPtr<StyleValue> Parser::parse_linear_gradient_function(ComponentValue const& component_value)
{
using GradientType = LinearGradientStyleValue::GradientType;
if (!component_value.is_function())
return {};
auto function_name = component_value.function().name();
if (!function_name.is_one_of_ignoring_case("linear-gradient"sv, "-webkit-linear-gradient"sv))
GradientType gradient_type { GradientType::Standard };
if (function_name.equals_ignoring_case("-webkit-linear-gradient"sv))
gradient_type = GradientType::WebKit;
else if (!function_name.equals_ignoring_case("linear-gradient"sv))
return {};
// linear-gradient() = linear-gradient([ <angle> | to <side-or-corner> ]?, <color-stop-list>)
@ -2376,7 +2382,29 @@ RefPtr<StyleValue> Parser::parse_linear_gradient_function(ComponentValue const&
return {};
bool has_direction_param = true;
LinearGradientStyleValue::GradientDirection gradient_direction = SideOrCorner::Bottom;
LinearGradientStyleValue::GradientDirection gradient_direction = gradient_type == GradientType::Standard
? SideOrCorner::Bottom
: SideOrCorner::Top;
auto to_side = [](StringView value) -> Optional<SideOrCorner> {
if (value.equals_ignoring_case("top"sv))
return SideOrCorner::Top;
if (value.equals_ignoring_case("bottom"sv))
return SideOrCorner::Bottom;
if (value.equals_ignoring_case("left"sv))
return SideOrCorner::Left;
if (value.equals_ignoring_case("right"sv))
return SideOrCorner::Right;
return {};
};
auto is_to_side_or_corner = [&](auto const& token) {
if (!token.is(Token::Type::Ident))
return false;
if (gradient_type == GradientType::WebKit)
return to_side(token.token().ident()).has_value();
return token.token().ident().equals_ignoring_case("to"sv);
};
auto& first_param = tokens.peek_token();
if (first_param.is(Token::Type::Dimension)) {
@ -2390,31 +2418,24 @@ RefPtr<StyleValue> Parser::parse_linear_gradient_function(ComponentValue const&
return {};
gradient_direction = Angle { angle_value, angle_type.release_value() };
} else if (first_param.is(Token::Type::Ident) && first_param.token().ident().equals_ignoring_case("to"sv)) {
} else if (is_to_side_or_corner(first_param)) {
// <side-or-corner> = [left | right] || [top | bottom]
tokens.next_token();
tokens.skip_whitespace();
auto to_side = [](StringView value) -> Optional<SideOrCorner> {
if (value.equals_ignoring_case("top"sv))
return SideOrCorner::Top;
if (value.equals_ignoring_case("bottom"sv))
return SideOrCorner::Bottom;
if (value.equals_ignoring_case("left"sv))
return SideOrCorner::Left;
if (value.equals_ignoring_case("right"sv))
return SideOrCorner::Right;
return {};
};
// Note: -webkit-linear-gradient does not include to the "to" prefix on the side or corner
if (gradient_type == GradientType::Standard) {
tokens.next_token();
tokens.skip_whitespace();
if (!tokens.has_next_token())
return {};
if (!tokens.has_next_token())
return {};
}
// [left | right] || [top | bottom]
auto& second_param = tokens.next_token();
if (!second_param.is(Token::Type::Ident))
auto& first_side = tokens.next_token();
if (!first_side.is(Token::Type::Ident))
return {};
auto side_a = to_side(second_param.token().ident());
auto side_a = to_side(first_side.token().ident());
tokens.skip_whitespace();
Optional<SideOrCorner> side_b;
if (tokens.has_next_token() && tokens.peek_token().is(Token::Type::Ident))
@ -2536,7 +2557,7 @@ RefPtr<StyleValue> Parser::parse_linear_gradient_function(ComponentValue const&
color_stops.append(list_element);
}
return LinearGradientStyleValue::create(gradient_direction, move(color_stops));
return LinearGradientStyleValue::create(gradient_direction, move(color_stops), gradient_type);
}
RefPtr<CSSRule> Parser::convert_to_rule(NonnullRefPtr<Rule> rule)

50
Userland/Libraries/LibWeb/CSS/StyleValue.cpp
View File

@ -1431,10 +1431,12 @@ String LinearGradientStyleValue::to_string() const
}
};
if (m_gradient_type == GradientType::WebKit)
builder.append("-webkit-"sv);
builder.append("linear-gradient("sv);
m_direction.visit(
[&](SideOrCorner side_or_corner) {
builder.appendff("to {}, "sv, side_or_corner_to_string(side_or_corner));
builder.appendff("{}{}, "sv, m_gradient_type == GradientType::Standard ? "to "sv : ""sv, side_or_corner_to_string(side_or_corner));
},
[&](Angle const& angle) {
builder.appendff("{}, "sv, angle.to_string());
@ -1506,26 +1508,32 @@ float LinearGradientStyleValue::angle_degrees(Gfx::FloatRect const& gradient_rec
};
return m_direction.visit(
[&](SideOrCorner side_or_corner) {
switch (side_or_corner) {
case SideOrCorner::Top:
return 0.0f;
case SideOrCorner::Bottom:
return 180.0f;
case SideOrCorner::Left:
return 270.0f;
case SideOrCorner::Right:
return 90.0f;
case SideOrCorner::TopRight:
return corner_angle_degrees();
case SideOrCorner::BottomLeft:
return corner_angle_degrees() + 180.0f;
case SideOrCorner::TopLeft:
return -corner_angle_degrees();
case SideOrCorner::BottomRight:
return -(corner_angle_degrees() + 180.0f);
default:
VERIFY_NOT_REACHED();
}
auto angle = [&] {
switch (side_or_corner) {
case SideOrCorner::Top:
return 0.0f;
case SideOrCorner::Bottom:
return 180.0f;
case SideOrCorner::Left:
return 270.0f;
case SideOrCorner::Right:
return 90.0f;
case SideOrCorner::TopRight:
return corner_angle_degrees();
case SideOrCorner::BottomLeft:
return corner_angle_degrees() + 180.0f;
case SideOrCorner::TopLeft:
return -corner_angle_degrees();
case SideOrCorner::BottomRight:
return -(corner_angle_degrees() + 180.0f);
default:
VERIFY_NOT_REACHED();
}
}();
// Note: For unknowable reasons the angles are opposite on the -webkit- version
if (m_gradient_type == GradientType::WebKit)
return angle + 180.0f;
return angle;
},
[&](Angle const& angle) {
return angle.to_degrees();

13
Userland/Libraries/LibWeb/CSS/StyleValue.h
View File

@ -933,10 +933,15 @@ class LinearGradientStyleValue final : public StyleValue {
public:
using GradientDirection = Variant<Angle, SideOrCorner>;
static NonnullRefPtr<LinearGradientStyleValue> create(GradientDirection direction, Vector<ColorStopListElement> color_stop_list)
enum class GradientType {
Standard,
WebKit
};
static NonnullRefPtr<LinearGradientStyleValue> create(GradientDirection direction, Vector<ColorStopListElement> color_stop_list, GradientType type)
{
VERIFY(color_stop_list.size() >= 2);
return adopt_ref(*new LinearGradientStyleValue(direction, move(color_stop_list)));
return adopt_ref(*new LinearGradientStyleValue(direction, move(color_stop_list), type));
}
virtual String to_string() const override;
@ -951,15 +956,17 @@ public:
float angle_degrees(Gfx::FloatRect const& gradient_rect) const;
private:
LinearGradientStyleValue(GradientDirection direction, Vector<ColorStopListElement> color_stop_list)
LinearGradientStyleValue(GradientDirection direction, Vector<ColorStopListElement> color_stop_list, GradientType type)
: StyleValue(Type::LinearGradient)
, m_direction(direction)
, m_color_stop_list(move(color_stop_list))
, m_gradient_type(type)
{
}
GradientDirection m_direction;
Vector<ColorStopListElement> m_color_stop_list;
GradientType m_gradient_type;
};
class InheritStyleValue final : public StyleValue {