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

Jeff Johnson
Reported 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>
Attachments
HTML reproduction case (430 bytes, text/html)
2020-10-05 13:10 PDT, Jeff Johnson
no flags
Safari screenshot (28.36 KB, image/png)
2020-10-05 13:11 PDT, Jeff Johnson
no flags
Firefox screenshot (19.46 KB, image/png)
2020-10-05 13:11 PDT, Jeff Johnson
no flags
Chrome screenshot (21.96 KB, image/png)
2020-10-05 13:11 PDT, Jeff Johnson
no flags
Jeff Johnson
Comment 1 2020-10-05 13:11:01 PDT
Created attachment 410542 [details] Safari screenshot
Jeff Johnson
Comment 2 2020-10-05 13:11:30 PDT
Created attachment 410543 [details] Firefox screenshot
Jeff Johnson
Comment 3 2020-10-05 13:11:51 PDT
Created attachment 410544 [details] Chrome screenshot
Jeff Johnson
Comment 4 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.
Jeff Johnson
Comment 5 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 ***
Note You need to log in before you can comment on or make changes to this bug.