Border-radius doesn't clip within a border-radius-clipped element.

[Gozala]

In browser.html if you hover the title it gets a grey background behind it, which supposed to have rounded corners, but they aren't rounder in servo. I have created following test case to reproduce this issue easily:

https://jsbin.com/zuqete/edit?html,css,output

I see following result when using webrender, it seems that borders are in fact rounded but background isn't clipped properly.

I also traced issue to specific css rule causing this bug, which is:

* {
  border-width: 0;
}

[paulrouget]

Border-radius doesn't clip within a border-radius-clipped element. Minimal test case:

<style>

.a {
  width: 200px;
  height: 200px;

  overflow: hidden;
  border-radius: 1px;
}

.b {
  border: 2px solid blue;
  background: red;
  width: 50px;
  height: 50px;

  border-radius: 25px;
  overflow: hidden;
}

</style>

<div class="a">
  <div class="b"></div>
</div>

[splav]

May I try this?

[jdm]

@splav Please do! Ask questions about anything that's unclear!

[splav]

It looks like a TODO by gw ( @glennw ?) , not a general bug (https://github.com/servo/webrender/blob/master/src/batch.rs#L225) . May be there are any thoughts on how to implement it?

    // TODO(gw): Support nested complex clip regions!
    pub complex_clip: Option<ComplexClipRegion>,

For now, I'll continue trying to implement it.

[splav]

I don't have an ultimate solution yet, but for this case (and I think most of the cases) a fast path can be implemented - one clipping region is completely inside the other. So we can test if all the clipping regions are essentially equivalent to the most inner one and proceed with the internal one. I've a WIP implementation of the logic.

How to implement general case efficiently still remains unclear to me. Will be glad to hear any thoughts. Especially if this fast path is worth implementing and possible ways of general fallback implementation.

[kilobtye]

I think #11562 has the same cause.

[paulrouget]

Works now.