Re: [csswg-drafts] [css-text-decor] What happens to the wavy & double lines when `text-decoration-thickness` is applied? (#4134)

To answer your question, in Firefox the space between the two lines is equal to half the line thickness. (It defaults to 1 if half of the line thickness is less than 1). 

You can also compare how the different browsers render styled decoration lines by using large font-sizes. I've written up a basic example on CodePen [here](https://codepen.io/charliemarlow/pen/bXNyRR) and took some screenshots on Chrome, Safari, and Firefox Nightly to illustrate.
![chromeThickness](https://user-images.githubusercontent.com/19673283/61564121-8b10e780-aa2a-11e9-8641-5004e36c4bde.png)
![safariThickness](https://user-images.githubusercontent.com/19673283/61564125-8f3d0500-aa2a-11e9-8618-53bf78ebc9d1.png)
![nightlyThickness](https://user-images.githubusercontent.com/19673283/61564129-919f5f00-aa2a-11e9-87ff-3b998afe5e1b.png)

You can see that Firefox has a very different wavy underline as compared to Chrome and Safari, while Safari and Firefox have a more similar double text-decoration than Chrome which doesn't have much space between the two lines.

There's a high-level overview of how Gecko draws the wavy underline in a comment here: https://searchfox.org/mozilla-central/source/layout/painting/nsCSSRendering.cpp#3869

Chrome's implementation using Bezier curves is described here: https://chromium.googlesource.com/chromium/src/+/c0fd99aa9f08fd23c5cf35e4f29b2e650fcace92/third_party/WebKit/Source/core/paint/InlineTextBoxPainter.cpp#237

-- 
GitHub Notification of comment by charliemarlow
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4134#issuecomment-513381503 using your GitHub account

Received on Friday, 19 July 2019 21:18:50 UTC