Bug 243865
| Summary: | text-decoration shorthand value is invalid with custom properties | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Christopher Kirk-Nielsen <chriskirknielsen+wkbugs> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | chriskirknielsen+wkbugs, ntim |
| Priority: | P2 | ||
| Version: | Safari 15 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| URL: | https://codepen.io/chriskirknielsen/pen/NWYLXpr?editors=1100 | ||
Christopher Kirk-Nielsen
**Overview:**
When using CSS custom properties in a text-decoration shorthand, the decoration is not rendered as the browser seems to not know what to do with the provided variable or variables, rendering the whole declaration invalid.
**Steps to Reproduce:**
1) Assign a color, style, or line type to a variable and use it in a shorthand `text-decoration` value.
Live example on CodePen: https://codepen.io/chriskirknielsen/pen/NWYLXpr?editors=1100
Code to reproduce:
```html
<p>Red dotted underline</p>
```
```css
p {
--color: red;
text-decoration: underline dotted var(--color);
}
```
**Actual Results:**
The text-decoration is not rendered.
**Expected Results:**
The text decoration should render below the text, dotted and in red.
**Build Date & Hardware:**
Using Safari Technology preview, Release 151 (Safari 16.0, WebKit 17615.1.1.2)
Running macOS Monterey 12.4 on MacBook Pro (16-inch, 2019)
**Additional Builds and Platforms:**
DOES OCCUR on Safari Version 15.5 (17613.2.7.1.8) on macOS
Doesn't occur on Chrome Version 104 on macOS
Doesn't occur on Firefox Version 103 on macOS
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Tim Nguyen (:ntim)
This isn't really due to custom properties, it's simply that we have an incomplete implementation of the CSS text-decoration property. It only supports text-decoration-line values.
Tim Nguyen (:ntim)
*** This bug has been marked as a duplicate of bug 230083 ***
Christopher Kirk-Nielsen
(In reply to Tim Nguyen (:ntim) from comment #1)
> This isn't really due to custom properties, it's simply that we have an
> incomplete implementation of the CSS text-decoration property. It only
> supports text-decoration-line values.
Understood, thanks for clarifying! The first test works so I assumed it was all custom property related!