Bug 217330 - Overriding CSS property resets related properties specified by shorthand
Summary: Overriding CSS property resets related properties specified by shorthand
Status: RESOLVED DUPLICATE of bug 58491
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 14
Hardware: Mac macOS 10.14
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2020-10-05 13:10 PDT by Jeff Johnson
Modified: 2020-10-05 15:35 PDT (History)
0 users

See Also:

Attachments
HTML reproduction case (430 bytes, text/html)
2020-10-05 13:10 PDT, Jeff Johnson 		no flags Details
Safari screenshot (28.36 KB, image/png)
2020-10-05 13:11 PDT, Jeff Johnson 		no flags Details
Firefox screenshot (19.46 KB, image/png)
2020-10-05 13:11 PDT, Jeff Johnson 		no flags Details
Chrome screenshot (21.96 KB, image/png)
2020-10-05 13:11 PDT, Jeff Johnson 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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 ***