[css3-ui] rounded corner outlines

As recorded here http://lists.w3.org/Archives/Public/www-style/2014Oct/0260.html the WG resolved to make outlines' corners rounded to match border-radius.

I agree that generally, when border corners are rounded, the typically desirable behaviour would be for the outline to be rounded as well. However:

1) The discussion before the resolution raises a few questions that were not answered before the resolution was taken. (what if authors want to cuve the outline without curved borders? what if you want to match platform convensions, what if you want to cuve the corners of a non rectangular outline?)

2) We have interop (since forever) about not doing it, which means potential compat problems if we change, and blocking spec progression on TR until several browsers change their behavior.

3) We have not defined what it actually means. While it is simple in the case of a non fragmented block level element with no overflowing children, which is not transformed, and where outline-offset is 0 and [insert more conditions to make the box as vanilla as possible], if we step outside of this case, we don't even know how outline works, making it pretty tricky to define how rounded corners would work. Examples of browsers doing different things, for which rounding corners is not obvious.

https://www.dropbox.com/s/4ly5ss4deh0dy8j/Screenshot%202014-12-09%2018.53.05.png?dl=0
https://www.dropbox.com/s/chsop6gvlcf1knt/Screenshot%202014-12-09%2018.56.21.png?dl=0
https://www.dropbox.com/s/1khocafcjx0nfx0/Screenshot%202014-12-09%2018.54.46.png?dl=0

I see a few possible way forward:

A) Do nothing, it is already implicitely allowed

B) Put an explicit "may" clarifying that curving outlines is ok, don't explain how it works other than in a hand-wavy way, don't test anything.

C) State, that browsers must curve the outline when the border is curved, don't state how, only test a very simple case such as "div { width:100px; height: 100px; border: 1px solid green; border-radius:5px; outline: 1px solid green;}" worry later  both about interop for other cases and switches to address the variations raised in (1)

D) define a full model for how this works, possibly with adjustable nobs to address the variations raised in (1) and the potential web-compat issues

I don't think doing D in level 3 is appropriate while we are trying to finish the spec. I do have some ideas on how to go about it, but I think this belongs in level 4. There's too much spec work, testing work, and implementation work for this level.

C requires less spec work, and less testing, but still requires all implementations to change, which would still slow down the spec. As for putting it in level 4, I don't know if introducing one more way for browser to behave differently about outline is a good thing, although it might provide some inputs for doing D later.

I would be tempted to go with B in level 3, to at least be explicit that trying is ok, and in level 4, gradually try to go at D.

 - Florian

Received on Tuesday, 9 December 2014 18:28:35 UTC