Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 04:30:10 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Correctly calculate the angle for gradients with corners

Browse source 
The previous code assumed that the diagonals of the elements were
perpendicular, which only happens with squares.

tests: layout: Test linear gradient corners
This commit is contained in:
Emilio Cobos Álvarez 2016-05-28 18:06:59 +02:00
parent 5668a55ef4
commit 37d1c749aa
No known key found for this signature in database
GPG key ID: 056B727BB9C1027C
4 changed files with 114 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

59
components/layout/display_list_builder.rs
View file

@ -592,36 +592,42 @@ impl FragmentDisplayListBuilding for Fragment {
let mut clip = clip.clone();
clip.intersect_rect(absolute_bounds);
// This is the distance between the center and the ending point; i.e. half of the distance
// between the starting point and the ending point.
let delta = match gradient.angle_or_corner {
AngleOrCorner::Angle(angle) => {
// Get correct gradient line length, based on:
// https://drafts.csswg.org/css-images-3/#linear-gradients
let dir = Point2D::new(angle.radians().sin(), -angle.radians().cos());
let line_length = (dir.x * absolute_bounds.size.width.to_f32_px()).abs() +
(dir.y * absolute_bounds.size.height.to_f32_px()).abs();
let inv_dir_length = 1.0 / (dir.x * dir.x + dir.y * dir.y).sqrt();
Point2D::new(Au::from_f32_px(dir.x * inv_dir_length * line_length / 2.0),
Au::from_f32_px(dir.y * inv_dir_length * line_length / 2.0))
}
let angle = match gradient.angle_or_corner {
AngleOrCorner::Angle(angle) => angle.radians(),
AngleOrCorner::Corner(horizontal, vertical) => {
let x_factor = match horizontal {
HorizontalDirection::Left => -1,
HorizontalDirection::Right => 1,
};
let y_factor = match vertical {
VerticalDirection::Top => -1,
VerticalDirection::Bottom => 1,
};
Point2D::new(absolute_bounds.size.width * x_factor / 2,
absolute_bounds.size.height * y_factor / 2)
// This the angle for one of the diagonals of the box. Our angle
// will either be this one, this one + PI, or one of the other
// two perpendicular angles.
let atan = (absolute_bounds.size.height.to_f32_px() /
absolute_bounds.size.width.to_f32_px()).atan();
match (horizontal, vertical) {
(HorizontalDirection::Right, VerticalDirection::Bottom)
=> f32::consts::PI - atan,
(HorizontalDirection::Left, VerticalDirection::Bottom)
=> f32::consts::PI + atan,
(HorizontalDirection::Right, VerticalDirection::Top)
=> atan,
(HorizontalDirection::Left, VerticalDirection::Top)
=> -atan,
}
}
};
// Get correct gradient line length, based on:
// https://drafts.csswg.org/css-images-3/#linear-gradients
let dir = Point2D::new(angle.sin(), -angle.cos());
let line_length = (dir.x * absolute_bounds.size.width.to_f32_px()).abs() +
(dir.y * absolute_bounds.size.height.to_f32_px()).abs();
let inv_dir_length = 1.0 / (dir.x * dir.x + dir.y * dir.y).sqrt();
// This is the vector between the center and the ending point; i.e. half
// of the distance between the starting point and the ending point.
let delta = Point2D::new(Au::from_f32_px(dir.x * inv_dir_length * line_length / 2.0),
Au::from_f32_px(dir.y * inv_dir_length * line_length / 2.0));
// This is the length of the gradient line.
let length = Au::from_f32_px(
(delta.x.to_f32_px() * 2.0).hypot(delta.y.to_f32_px() * 2.0));
@ -629,7 +635,8 @@ impl FragmentDisplayListBuilding for Fragment {
// Determine the position of each stop per CSS-IMAGES § 3.4.
//
// FIXME(#3908, pcwalton): Make sure later stops can't be behind earlier stops.
let (mut stops, mut stop_run) = (Vec::new(), None);
let mut stops = Vec::with_capacity(gradient.stops.len());
let mut stop_run = None;
for (i, stop) in gradient.stops.iter().enumerate() {
let offset = match stop.position {
None => {