Testcase:

data:text/html,<u style="font:bold 50px sans-serif; color:cyan;
    -webkit-text-stroke-color:red; -webkit-text-stroke-width:1px;">What color is my underline?

This displays "What color is my underline?" in cyan text with a 1px outline (stroke), and an underline.

But what color is the underline?

The value of text-decoration-color should be currentColor (initial value), as nothing else has been specified. This should resolve to cyan (the value of the color property).

So I'd expect a cyan underline, and indeed this is what I see in Firefox.

However, both Safari and Chrome render a red underline.

Is this simply a browser bug, or is it expected/desired behavior? And if so, where is it (or should it be) specified? I can't seem to find anything in the spec for either the text-decoration-color or -webkit-text-stroke-color property, nor for the currentcolor value that would account for this.

If we can agree on the correct behavior here, I'm happy to file bugs against one or more engines as necessary, but first I wanted to confirm what's expected.

A couple of further notes:

• this unexpected (to me, at least) result does not occur if -webkit-text-stroke-width is set to zero; but it does happen with minuscule values (even things like -webkit-text-stroke-width: 1e-20px) where no stroke is actually visible;
• this result is not reflected in window.getComputedValue, which returns the RGB value for cyan even though the underline is being rendered as red.

This also implies that with the testcase above, executing

elem = document.getElementsByTagName("u")[0];
elem.style.textDecorationColor = window.getComputedStyle(elem).textDecorationColor

has the (surprising) effect of changing the underline color from red to cyan.