1400779 - currentColor as border-color may leave visual artifacts around the border

Status: NEW

(Core :: Web Painting, defect, P3)

Description

[David [:Ceremony]]

Attachment: currentColor.html

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20170914024831

Steps to reproduce:

Take any DOM element and apply the following styling (see currentColor.html):
background: black;
border: 5px solid currentColor;
color: white;
width: 100px;
height: 100px;
border-radius: 100%;


Actual results:

Around the white border, some of the black background will shine through.


Expected results:

The element should be visually identical to an element with the border-color explicitly set to white, without any of the background-color around the border.

Comment 1

[David [:Ceremony]]

Attachment: Screenshot of currentColor.html

Comment 2

[Tooru Fujisawa [:arai]]

happens only with border with radius (maybe we're using different bezier control points for background and border in some case...?)
moving to Core :: Layout for now (might be underlying graphics part tho)

Comment 3

[Tooru Fujisawa [:arai]]

apparently it's from bug 1266621,

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=ac1c4519a19a49e45857d4355bea46b4e1a5fe04&tochange=022b1fcfe8337d5bccf0e341626ab0a4cb32533e

but I'm not sure whether that actually regressed or it discovered pre-existing issue, since it just modifies only the color, not the area.

xidorn, do you have any ideas?

Comment 4

[Xidorn Quan [:xidorn] UTC+11]

So this is a pre-existing issue. Before we implement the new currentcolor support, there is another keyword for the currentcolor behavior these days, which is -moz-use-text-color. (Supporting of this was dropped at the same time in bug 1266621.)

If you change the style of #bad to
#bad {
  border-color: currentColor;
  border-color: -moz-use-text-color;
  color: white;
}

this issue can be seen from earlier version, back to at least Firefox 5. So this is an old painting issue revealed by a style system change.

Looking at the code, I think the difference here is because of the check in IsOpaqueBorderEdge function [1] which returns false when foreground color involves, and consequently we use different code path to clip the content.

Similar issue can be seen on the #good if you change the style slightly to something like
#good {
  border-color: white;
  border-left-color: rgba(255,255,255,.95);
}
which kinda confirms my theory (related IsOpaqueBorderEdge) above.


[1] https://searchfox.org/mozilla-central/rev/1c13d5cf85f904afb8976c02a80daa252b893fca/layout/painting/nsCSSRendering.cpp#2053-2057