Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement correct corner clipping for background color #19675

Merged
merged 1 commit into from Jan 3, 2018
Merged

Implement correct corner clipping for background color #19675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
40 changes: 25 additions & 15 deletions components/layout/display_list_builder.rs
View file
Open in desktop
Expand Up @@ -681,7 +681,7 @@ fn build_border_radius(abs_bounds: &Rect<Au>,
fn build_border_radius_for_inner_rect(outer_rect: &Rect<Au>,
style: &ComputedValues)
-> BorderRadii<Au> {
let mut radii = build_border_radius(&outer_rect, style.get_border());
let radii = build_border_radius(&outer_rect, style.get_border());
if radii.is_square() {
return radii;
}
Expand All @@ -690,18 +690,7 @@ fn build_border_radius_for_inner_rect(outer_rect: &Rect<Au>,
// border width), we need to adjust to border radius so that we are smaller
// rectangle with the same border curve.
let border_widths = style.logical_border_width().to_physical(style.writing_mode);
radii.top_left.width = cmp::max(Au(0), radii.top_left.width - border_widths.left);
radii.bottom_left.width = cmp::max(Au(0), radii.bottom_left.width - border_widths.left);

radii.top_right.width = cmp::max(Au(0), radii.top_right.width - border_widths.right);
radii.bottom_right.width = cmp::max(Au(0), radii.bottom_right.width - border_widths.right);

radii.top_left.height = cmp::max(Au(0), radii.top_left.height - border_widths.top);
radii.top_right.height = cmp::max(Au(0), radii.top_right.height - border_widths.top);

radii.bottom_left.height = cmp::max(Au(0), radii.bottom_left.height - border_widths.bottom);
radii.bottom_right.height = cmp::max(Au(0), radii.bottom_right.height - border_widths.bottom);
radii
calculate_inner_border_radii(radii, border_widths)
}

fn build_inner_border_box_for_border_rect(border_box: &Rect<Au>,
Expand Down Expand Up @@ -1041,6 +1030,24 @@ fn calculate_inner_bounds(mut bounds: Rect<Au>, offsets: SideOffsets2D<Au>) -> R
bounds
}

fn calculate_inner_border_radii(
mut radii: BorderRadii<Au>,
offsets: SideOffsets2D<Au>
) -> BorderRadii<Au> {
radii.top_left.width = cmp::max(Au(0), radii.top_left.width - offsets.left);
radii.bottom_left.width = cmp::max(Au(0), radii.bottom_left.width - offsets.left);

radii.top_right.width = cmp::max(Au(0), radii.top_right.width - offsets.right);
radii.bottom_right.width = cmp::max(Au(0), radii.bottom_right.width - offsets.right);

radii.top_left.height = cmp::max(Au(0), radii.top_left.height - offsets.top);
radii.top_right.height = cmp::max(Au(0), radii.top_right.height - offsets.top);

radii.bottom_left.height = cmp::max(Au(0), radii.bottom_left.height - offsets.bottom);
radii.bottom_right.height = cmp::max(Au(0), radii.bottom_right.height - offsets.bottom);
radii
}


/// For a given area and an image compute how big the
/// image should be displayed on the background.
Expand Down Expand Up @@ -1272,20 +1279,23 @@ impl FragmentDisplayListBuilding for Fragment {
let color_clip = get_cyclic(&background.background_clip.0,
background.background_image.0.len() - 1);

// Adjust the clipping region as necessary to account for `border-radius`.
let mut border_radii = build_border_radius(absolute_bounds, style.get_border());

match *color_clip {
BackgroundClip::BorderBox => {}
BackgroundClip::PaddingBox => {
let border = style.logical_border_width().to_physical(style.writing_mode);
bounds = calculate_inner_bounds(bounds, border);
border_radii = calculate_inner_border_radii(border_radii, border);
}
BackgroundClip::ContentBox => {
let border_padding = self.border_padding.to_physical(style.writing_mode);
bounds = calculate_inner_bounds(bounds, border_padding);
border_radii = calculate_inner_border_radii(border_radii, border_padding);
}
}

// Adjust the clipping region as necessary to account for `border-radius`.
let border_radii = build_border_radius(absolute_bounds, style.get_border());
let clip = if !border_radii.is_square() {
LocalClip::RoundedRect(bounds.to_rectf(), ComplexClipRegion::new(
bounds.to_rectf(),
Expand Down
25 changes: 25 additions & 0 deletions tests/wpt/metadata/MANIFEST.json
View file
Open in desktop
Expand Up @@ -96489,6 +96489,18 @@
{}
]
],
"css/css-backgrounds/background-clip/clip-rounded-corner.html": [
[
"/css/css-backgrounds/background-clip/clip-rounded-corner.html",
[
[
"/css/css-backgrounds/background-clip/clip-rounded-corner-ref.html",
"=="
]
],
{}
]
],
"css/css-backgrounds/background-clip_padding-box.html": [
[
"/css/css-backgrounds/background-clip_padding-box.html",
Expand Down Expand Up @@ -228178,6 +228190,11 @@
{}
]
],
"css/css-backgrounds/background-clip/clip-rounded-corner-ref.html": [
[
{}
]
],
"css/css-backgrounds/background-clip/list.txt": [
[
{}
Expand Down Expand Up @@ -463840,6 +463857,14 @@
"0ab3cfb39cd0348b7e28ed7b1405f0c3490808a7",
"visual"
],
"css/css-backgrounds/background-clip/clip-rounded-corner-ref.html": [
"d58d1e2f9fed2d5331db9aaeaeb50e4b3f26a1e6",
"support"
],
"css/css-backgrounds/background-clip/clip-rounded-corner.html": [
"ea68b7be35cb2637bad30119a2d1ee9734dc63ff",
"reftest"
],
"css/css-backgrounds/background-clip/list.txt": [
"51b104b69911943bc5469c093046d5c0eb45334a",
"support"
Expand Down
26 changes: 26 additions & 0 deletions ...s/wpt/web-platform-tests/css/css-backgrounds/background-clip/clip-rounded-corner-ref.html
View file
Open in desktop
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Filled Background with Rounded Corner</title>
<style>
#a {
width: 100px;
height: 80px;
border: 20px blue solid;
border-top-right-radius: 20px;
background-color: green;
background-clip: border-box;
}
#shield {
position: absolute;
width: 30px;
height: 30px;
left: 120px;
top: 5px;
background-color: black;
}
</style>
<body>
<div id="a"></div>
<!-- Hide the curved outside border to deal with imprecise rendering. -->
<div id="shield"></div>
</body>
28 changes: 28 additions & 0 deletions tests/wpt/web-platform-tests/css/css-backgrounds/background-clip/clip-rounded-corner.html
View file
Open in desktop
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Filled Background with Rounded Corner</title>
<link rel="match" href="clip-rounded-corner-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping">
<style>
#b {
width: 100px;
height: 80px;
border: 20px blue solid;
border-top-right-radius: 20px;
background-color: green;
background-clip: content-box;
}
#shield {
position: absolute;
width: 30px;
height: 30px;
left: 120px;
top: 5px;
background-color: black;
}
</style>
<body>
<div id="b"></div>
<!-- Hide the curved outside border to deal with imprecise rendering. -->
<div id="shield"></div>
</body>