RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 23:17:45 +00:00
Code Issues Activity Actions

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
3 changed files with 82 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

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();