What is the correct browser behaviour when you have CSS shorthands in combination with individual shorthand constituents?

Consider the following code.

a {
  text-decoration-color: red;
}

.oops{
  text-decoration: underline;
}

code {
  border: 1px solid rgb(0 0 0 / 0.2);
  padding-inline: 0.5em;
}

<p>This <a href='#'>link</a> is underlined in red with <code>text-decoration-color: red</code>.</p>

<p>This <a href='#' class="oops">link</a> also has <code>text-decoration-color: red</code> applied, but is not underlined in red in Chrome or Firefox as it has <code>text-decoration: underline</code> applied, which is a short hand for <ul>
  <li>text-decoration-color</li>
  <li>text-decoration-line</li>
  <li>text-decoration-style</li>
  <li>text-decoration-thickness</li>
</ul></p>

If you view this in Chrome or Firefox, the 2nd link is not underlined in red, as text-decoration-color is overridden by the text-decoration-shorthand (even though color is not specified as part of it). In Safari, it is underlined in red, as text-decoration-color overrides the shorthand.

The discrepancy can be easily resolved by changing text-decoration: underline to text-decoration-line: underline, but I am wondering... which is the correct behaviour here according to the spec?

It's as I suspected, but confirmed in the question comments ( by @TemaniAfif, and linked by @C3Roe)

Omitting properties: A value which is not specified is set to its initial value. That means that it overrides previously set values.

Source

By using text-decoration (the shorthand), you're effectively setting each of the constituent properties to initial.

See the example below:

• .second and .third have the same effect
• .fourth has the desired effect (from your example) in that it doesn't override the previously set values

a {
  text-decoration-color: red;

}

.second {
  text-decoration: underline;
}

.third {
  text-decoration-color: initial;
  text-decoration-line: underline;
  text-decoration-style: initial;
  text-decoration-thickness: initial;
}

.fourth {
  text-decoration-line: underline;
}

<a href='#'>First</a>
</br>
<a href='#' class="second">Second</a>
</br>
<a href='#' class="third">Third</a>
</br>
<a href='#' class="fourth">Fourth</a>

As for Safari...
From what I've seen in the Safari Elements panel, it appears that when using the shorthand for a property text-decoration, Safari will attempt to split that property into it's constituent properties.