[css3-ui] Outline interoperability

This includes Issue 51 (https://wiki.csswg.org/spec/css3-ui#issue51), but is significantly broader.

How and where the outline is defined in very loose terms, and implementations vary widely, leading to numerous interoperability issues.

Question 1: Do we want to work on reducing the amount of differences, or are we happy giving leeway for different quality of implementations / room for innovation?

Question 2: If we want to solve this, do we want to solve this in level 3?

My take on this is that we should work on reducing differences because interoperability is good for authors, and because excessive differences in behaviour make it hard to spec extensions like outline-offset or outline-radius. However, we should solve this in level 4, because this is a large effort, and trying to address it in level 3 would delay it by quite a bit (significant spec work, larger test suite, many changes in several implementations).

Just to illustrate the point, here are some examples. I am sure there are more, but that's a already a bunch.

Does the outline include overflowing children of the outlined element?
- Firefox: yes, with a larger rectangle
- Safari/Chrome: no
- IE: sometimes, with a non rectangular shape
- Presto: yes, with a non rectangular shape
http://jsbin.com/jujuno/1/watch (IE: no)
http://jsbin.com/jefah/1/watch (IE: no)
http://jsbin.com/yovome/1/watch (IE: no)
http://jsbin.com/honato/1/watch (IE: no)
http://jsbin.com/hiwuna/1/watch (IE: yes)

Does outline-offset on an outlined element put an offset around the outlined element only, or around its overflowing children as well:
- Firefox: both
- Presto: outlined element only
- IE: N/A, outline offset not supported
- Safari/Chrome: N/A, overflowing children are not taken into account)
http://jsbin.com/qonazu/1/watch

Does outline-offset on an child of an outlined element influence the outline
- Firefox/Safari/Chrome: no
- Presto: yes
- IE: N/A, outline offset not supported
http://jsbin.com/gudola/1/watch

Is the outline of a transformed element transformed?
- Firefox/Safari/Chrome/IE: yes
- Presto: no
http://jsbin.com/zuwuj/1/watch

How does the outline of a fragmented inline element look:
- Firefox: one rectangular outline per fragment
- IE/Safari/Chrome/Presto: One non-rectangular shape for the whole element
http://jsbin.com/sulobe/1/watch

If an outlined element is behind another element, is the outline itself behind as well:
- Firefox/Chrome/Safari/IE: Yes if the elements are in different stacking contexts
- Presto: No regardless of stacking contexts
http://jsbin.com/wejiri/1/watch (*: No)
http://jsbin.com/ketoko/1/watch (*: Yes, Presto: No)

If an outlined element is behind another element in terms of z-index, but in front in terms fo 3d transforms, is the outline behind or in front
- Firefox/Chrome/IE: behind if transform-style:flat, in front if transform-style:preserve-3d
- Safari: in front regardless of transform-style
- Presto: N/A, 3d transforms not supported
http://jsbin.com/qivovi/1/watch (*: behind, Safari: in front)
http://jsbin.com/vakur/1/watch (*: in front)

Received on Tuesday, 9 December 2014 13:46:43 UTC