Bug 217330

Summary: Overriding CSS property resets related properties specified by shorthand
Product: WebKit Reporter: Jeff Johnson <opendarwin>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal    
Priority: P2    
Version: Safari 14   
Hardware: Mac   
OS: macOS 10.14   
Attachments:
Description Flags
HTML reproduction case
none
Safari screenshot
none
Firefox screenshot
none
Chrome screenshot none

Description Jeff Johnson 2020-10-05 13:10:15 PDT 
Created attachment 410541 [details]
HTML reproduction case

Overview:
If a CSS property is specified via shorthand (text-decoration: underline dashed red;), and you override that property (text-decoration-style: wavy !important;), then the other properties specified by the shorthand (text-decoration-color, text-decoration-line) are incorrectly reset to their initial values.


Steps to Reproduce:
1. Open the attached sample HTML file in Safari 14.

Expected Results:
Both anchors have red underline.

Actual Results:
Only the 2nd anchor has red underline.


Build:
Safari Version 14.0 (14610.1.28.1.9) on macOS Version 10.14.6 (18G6032)

Additional Information:
This bug does not occur in Firefox or Google Chrome.

Sample HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>CSS bug</title>
	<style>a { text-decoration-style: wavy !important; }</style>
</head>
<body>
<p><a href="https://webkit.org/" style="text-decoration: underline dashed red;">Click Me</a></p>
<p><a href="https://webkit.org/" style="text-decoration-line: underline; text-decoration-style: dashed; text-decoration-color: red;">Click Me</a></p>
</body>
</html>
Comment 1 Jeff Johnson 2020-10-05 13:11:01 PDT 
Created attachment 410542 [details]
Safari screenshot
Comment 2 Jeff Johnson 2020-10-05 13:11:30 PDT 
Created attachment 410543 [details]
Firefox screenshot
Comment 3 Jeff Johnson 2020-10-05 13:11:51 PDT 
Created attachment 410544 [details]
Chrome screenshot
Comment 4 Jeff Johnson 2020-10-05 14:50:11 PDT 
It actually works correctly in Safari 14 if I add the "-webkit-" prefix to all of the text-decoration properties. I discovered this by testing with Safari 11 on High Sierra, which didn't support the unprefixed properties but did support the prefixed properties.
Comment 5 Jeff Johnson 2020-10-05 15:35:43 PDT 
The issue here appears to be that Safari doesn't yet support the text-decoration shorthand.

*** This bug has been marked as a duplicate of bug 58491 ***