243865 2022-08-11 19:08:17 -0700 text-decoration shorthand value is invalid with custom properties 2022-08-13 15:32:31 -0700 1 1 1 Unclassified WebKit CSS Safari 15 Unspecified Unspecified RESOLVED DUPLICATE 230083 https://codepen.io/chriskirknielsen/pen/NWYLXpr?editors=1100 P2 Normal --- 1 chriskirknielsen+wkbugs webkit-unassigned chriskirknielsen+wkbugs ntim oldest_to_newest 1890786 0 chriskirknielsen+wkbugs 2022-08-11 19:08:17 -0700 **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 1891052 1 ntim 2022-08-12 18:02:09 -0700 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. 1891053 2 ntim 2022-08-12 18:02:40 -0700 *** This bug has been marked as a duplicate of bug 230083 *** 1891177 3 chriskirknielsen+wkbugs 2022-08-13 15:32:31 -0700 (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!