Bug 259428 - text-decoration does not support multiple values
Summary: text-decoration does not support multiple values
Status: RESOLVED DUPLICATE of bug 230083
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Other
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: https://codepen.io/bts1/pen/LYXrPQB
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-07-23 10:23 PDT by Brandon
Modified: 2023-07-23 10:45 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Brandon 2023-07-23 10:23:53 PDT
text-decoration is a short hand value that allows you to set <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> [0].

Currently Safari only supports setting one value.

See this example:

<p id="one"> Hello World </p>
<p id="two"> Hello World </p>
<p id="three"> Hello World </p>
<p id="four"> Hello World </p>

#one {
  text-decoration: underline;
}

#two {
  text-decoration: blue wavy underline;
}

#three {
  text-decoration: overline red;
}

#four {
  text-decoration-color: blue;
  text-decoration-style: wavy;
  text-decoration-line: underline;
}

This example works properly in Chrome and Firefox.

[0]: https://drafts.csswg.org/css-text-decor/#text-decoration-property
Comment 1 Radar WebKit Bug Importer 2023-07-23 10:25:05 PDT
<rdar://problem/112737854>
Comment 2 Brandon 2023-07-23 10:45:26 PDT
Dupe of https://bugs.webkit.org/show_bug.cgi?id=230083

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