Apply border-radius to img, canvas, iframe #17589
+68
−9
| @@ -830,18 +830,25 @@ fn convert_ellipse_size_keyword(keyword: ShapeExtent, | ||
| } | ||
| } | ||
|
|
||
| fn clip_for_border_radius(style: &ServoComputedValues, | ||
| clip: &Rect<Au>) -> ClippingRegion { | ||
| let border_radii = build_border_radius(clip, style.get_border()); | ||
| let mut adjusted_clip = ClippingRegion::max(); | ||
| if !border_radii.is_square() { | ||
| adjusted_clip.intersect_with_rounded_rect(clip, &border_radii); | ||
| } | ||
|
|
||
| adjusted_clip | ||
| } | ||
|
|
||
| impl FragmentDisplayListBuilding for Fragment { | ||
| fn build_display_list_for_background_if_applicable(&self, | ||
| state: &mut DisplayListBuildState, | ||
| style: &ServoComputedValues, | ||
| display_list_section: DisplayListSection, | ||
| absolute_bounds: &Rect<Au>) { | ||
| // Adjust the clipping region as necessary to account for `border-radius`. | ||
| let border_radii = build_border_radius(absolute_bounds, style.get_border()); | ||
| let mut clip = ClippingRegion::max(); | ||
| if !border_radii.is_square() { | ||
| clip.intersect_with_rounded_rect(absolute_bounds, &border_radii); | ||
| }; | ||
| let clip = clip_for_border_radius(style, absolute_bounds); | ||
|
|
||
| let background = style.get_background(); | ||
|
|
||
| // FIXME: This causes a lot of background colors to be displayed when they are clearly not | ||
| @@ -1834,6 +1841,8 @@ impl FragmentDisplayListBuilding for Fragment { | ||
| let stacking_relative_content_box = | ||
| self.stacking_relative_content_box(stacking_relative_border_box); | ||
|
|
||
| let clipping_region = clip_for_border_radius(&self.style, &stacking_relative_content_box); | ||
|
||
|
|
||
| match self.specific { | ||
| SpecificFragmentInfo::TruncatedFragment(box TruncatedFragmentInfo { | ||
| text_info: Some(ref text_fragment), | ||
| @@ -1892,7 +1901,7 @@ impl FragmentDisplayListBuilding for Fragment { | ||
| if !stacking_relative_content_box.is_empty() { | ||
| let base = state.create_base_display_item( | ||
| &stacking_relative_content_box, | ||
| &ClippingRegion::from_rect(clip), | ||
| &clipping_region, | ||
| self.node, | ||
| self.style.get_cursor(Cursor::Default), | ||
| DisplayListSection::Content); | ||
| @@ -1913,7 +1922,7 @@ impl FragmentDisplayListBuilding for Fragment { | ||
| if let Some(ref image) = image_fragment.image { | ||
| let base = state.create_base_display_item( | ||
| &stacking_relative_content_box, | ||
| &ClippingRegion::from_rect(clip), | ||
| &clipping_region, | ||
| self.node, | ||
| self.style.get_cursor(Cursor::Default), | ||
| DisplayListSection::Content); | ||
| @@ -1944,7 +1953,7 @@ impl FragmentDisplayListBuilding for Fragment { | ||
|
|
||
| let base = state.create_base_display_item( | ||
| &stacking_relative_content_box, | ||
| &ClippingRegion::from_rect(clip), | ||
| &clipping_region, | ||
| self.node, | ||
| self.style.get_cursor(Cursor::Default), | ||
| DisplayListSection::Content); | ||
| @@ -0,0 +1,13 @@ | ||
| <!doctype html> | ||
| <meta charset="utf-8"> | ||
| <title>Image with border-radius</title> | ||
| <link rel="match" href="reference/image-with-border-radius.ref.html"> | ||
| <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"> | ||
|
|
||
| <style> | ||
| #image { | ||
| border-radius: 15px; | ||
| } | ||
| </style> | ||
|
|
||
| <img src="support/60x60-green.png" id="image"/> |
| @@ -0,0 +1,12 @@ | ||
| <!doctype html> | ||
| <meta charset="utf-8"> | ||
|
|
||
| <style> | ||
| #green { | ||
| width: 60px; | ||
| height: 60px; | ||
| border-radius: 15px; | ||
| } | ||
| </style> | ||
|
|
||
| <div id="green"><div/> |
ProTip!
Use n and p to navigate between commits in a pull request.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Why
stacking_relative_border_box? I'd have expected this to useclip.Also, what about the other uses for the
cliprect? Should they account for border-radius too?