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.

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

Apply border-radius to img, canvas, iframe #17589

Closed
wants to merge 4 commits into from

Conversation

@streichgeorg
Copy link
Contributor

streichgeorg commented Jul 2, 2017

Added some code that adjusts the clipping region of img, canvas, iframe elements for the border-radius property.


  • ./mach build -d does not report any errors
  • ./mach test-tidy does not report any errors
  • These changes fix #17510 (github issue number if applicable).
  • There are tests for these changes OR
  • These changes do not require tests because _____

This change is Reviewable

@highfive
Copy link

highfive commented Jul 2, 2017

Heads up! This PR modifies the following files:

  • @emilio: components/layout/display_list_builder.rs
let mut adjusted_clip = ClippingRegion::max();
if !border_radii.is_square() {
adjusted_clip.intersect_with_rounded_rect(clip, &border_radii);
};

This comment has been minimized.

@emilio

emilio Jul 2, 2017

Member

nit: This semicolon is not needed, please remove it.

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

This comment has been minimized.

@emilio

emilio Jul 2, 2017

Member

Why stacking_relative_border_box? I'd have expected this to use clip.

Also, what about the other uses for the clip rect? Should they account for border-radius too?

This comment has been minimized.

@streichgeorg

streichgeorg Jul 2, 2017

Author Contributor

I tried clip and it doesn't work, but it works with stacking_relative_content_box so I just used that. I don't really have any oversight over this code so I don't know why that is.

@emilio
Copy link
Member

emilio commented Jul 2, 2017

Probably @glennw can review this faster than I, too :)

@stshine
Copy link
Contributor

stshine commented Jul 2, 2017

@bors-servo
Copy link
Contributor

bors-servo commented Jul 2, 2017

Trying commit ebb7c6d with merge 36fa2ee...

bors-servo added a commit that referenced this pull request Jul 2, 2017
Apply border-radius to img, canvas, iframe

<!-- Please describe your changes on the following line: -->
Added some code that adjusts the clipping region of ```img```, ```canvas```, ```iframe``` elements for the ```border-radius``` property.
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #17510 (github issue number if applicable).

<!-- Either: -->
- [X] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/17589)
<!-- Reviewable:end -->
@bors-servo
Copy link
Contributor

bors-servo commented Jul 2, 2017

💔 Test failed - mac-dev-unit

@highfive highfive removed the S-tests-failed label Jul 2, 2017
@streichgeorg
Copy link
Contributor Author

streichgeorg commented Jul 2, 2017

I won't be able to do any work next week, so if there are any changes required I'll do them on the next weekend.

@jdm
Copy link
Member

jdm commented Jul 2, 2017

You will need to run ./mach update-manifest to avoid the error that was reported.

@bors-servo
Copy link
Contributor

bors-servo commented Jul 13, 2017

The latest upstream changes (presumably #17694) made this pull request unmergeable. Please resolve the merge conflicts.

@jdm
Copy link
Member

jdm commented Jul 13, 2017

r? @glennw

@highfive highfive assigned glennw and unassigned nox Jul 13, 2017
@glennw
Copy link
Member

glennw commented Jul 13, 2017

This looks good to me, but I'd like @mrobinson to check over it too.

@jdm
Copy link
Member

jdm commented Jul 14, 2017

@highfive highfive assigned mrobinson and unassigned glennw Jul 14, 2017
@mrobinson
Copy link
Member

mrobinson commented Jul 14, 2017

Oof! I was working on this one in parallel (https://github.com/mrobinson/servo/tree/rounded-corners). The reason it isn't working for iframes is that I fixed this in WebRender and I was waiting for the WebRender update to post my PR. There's also an issue here with the size of the clip. We really want to use the inner region. I'm really sorry for not noticing this PR sooner.

@streichgeorg
Copy link
Contributor Author

streichgeorg commented Jul 16, 2017

Oh, I probably should have looked around a bit more before working on this. I guess this issue is a lot more complex than I thought it was, so I'll just close this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

9 participants
You can’t perform that action at this time.