[css-backgrounds] Interoperability issues in border-image

The border-image is a short-hand property that allows to create elements with an image as
its border instead of the predefined border styles and one of the
first spec versions dates way back to 2005
(http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-image).

It has been supported as a prefixed property (i.e. -webkit-) by WebKit
since Safari 3.0 and its initial support landed about 10 years ago
(http://trac.webkit.org/changeset/10357), followed next by Firefox 3.5
(prefixed in 2009 and non-prefix in 2012) and IE 11 in 2013
(http://caniuse.com/#feat=border-image).

As expected, the spec has evolved along the time and in 2012
(http://www.w3.org/TR/2012/CR-css3-background-20120417/#border-images)
some changes were made that would be incompatible withe previous
versions of the spec (http://dbaron.org/log/20120612-border-image).

That being said, both WebKit and Blink share a quirk that was brought
to discussion recently (https://lists.w3.org/Archives/Public/www-style/2015Nov/0260.html),
where an element with no border-style defined will have a border-image
rendered.

>From the aforementioned discussion, that is against the spec
(http://www.w3.org/TR/css3-background/#border-style), quoting:
"None: No border. Color and width are ignored (i.e., the border has width 0)".

And yet from the same mail thread: "The fact that these properties set the style of the border is normative".

A test case for the quirk can be found at (correct result should be a green rectangle):
http://codepen.io/Savago/pen/yYrgyK

This quirk is hurting interoperability between web browsers specially
in mobile (where the dominant mobile OSes have as default a WebKit or
Blink based browser).

It currently affects Gecko in Android/FFOS (https://bugzilla.mozilla.org/show_bug.cgi?id=995140#c18)
as also MS Edge. In the later case, Edge was forced to implement the quirk which is a
regression from IE (https://github.com/whatwg/compat/issues/17) to be
able to correctly display gmail and gcalendar mobile versions.

I've uploaded a patch to fix both WebKit and Blink, links below:
https://bugs.webkit.org/show_bug.cgi?id=99922
https://codereview.chromium.org/1457323004/

After speaking with the envolved parties (Mozilla, Microsoft, Apple,
Google), it seems to be common interest in fixing this issue, which is why
I'm posting this message to help coordinate the work towards this
goal.

The preliminary numbers for Google Canary for
BorderImageWithBorderStyleNone are 0.15% of pages (i.e. 1 in 700
pages). The impact on websites should be minimal (i.e. the fix is a one-liner
border-style: solid) and any content that already correctly renders in
FF or IE should *not* be affected by this change in WebKit/Blink.

Looking forward to hear thoughts on the subject.


Best regards


Adenilson Cavalcanti
BSc. MSc.
WebKit/Blink/Servo committer