Support for `text-stroke`

[davidsainez]

Hello, thanks for a great tool.

I wonder if the css property text-stroke is meant to be supported? Everything else works great, but text-stroke does not appear. Tested on both Chromium and Firefox (Linux Box). I'm using modern-screenshot version 4.4.9.

I would be happy to make a PR if pointed in the right direction. Cheers!

[qq15725]

Could you please provide me with the code of the problem? I don't seem to find the problem there

Playground link

[davidsainez]

Hello, I'm sorry for the huge delay.

But I finally got around to do some debugging and thought you might be interested. It turns out that the text-stroke copying is somehow dependent on color! This is probably why we were seeing different output. I hope this is useful. For now, a quick hack I'm using is to use #000001 as an approximation to black.

Example output

When using -webkit-text-stroke: 1px #000001; :

<div class="view_body" style="transition-property: none; -webkit-text-stroke: 1px rgb(0, 0, 1); -webkit-locale: &quot;en&quot;; width: 120.883px; transform-origin: 60.4414px 28px; text-shadow: rgb(0, 0, 0) 2px 2px 0px; text-emphasis-color: rgb(240, 117, 158); text-decoration: none solid rgb(240, 117, 158); perspective-origin: 60.4375px 28px; outline-color: rgb(240, 117, 158); min-width: auto; min-inline-size: auto; min-height: auto; min-block-size: auto; inline-size: 120.883px; height: 56px; font-size: 56px; font-family: __Luckiest_Guy_71c594, __Luckiest_Guy_Fallback_71c594; column-rule-color: rgb(240, 117, 158); color: rgb(240, 117, 158); caret-color: rgb(240, 117, 158); box-sizing: border-box; border-color: rgb(240, 117, 158); border-inline-color: rgb(240, 117, 158); border-block-color: rgb(240, 117, 158); block-size: 56px;"><div style="font-size: 56px; transition-property: none; -webkit-text-stroke: 1px rgb(0, 0, 1); -webkit-locale: &quot;en&quot;; width: 120.883px; transform-origin: 60.4414px 28px; text-shadow: rgb(0, 0, 0) 2px 2px 0px; text-emphasis-color: rgb(240, 117, 158); text-decoration: none solid rgb(240, 117, 158); perspective-origin: 60.4375px 28px; outline-color: rgb(240, 117, 158); inline-size: 120.883px; height: 56px; font-family: __Luckiest_Guy_71c594, __Luckiest_Guy_Fallback_71c594; column-rule-color: rgb(240, 117, 158); color: rgb(240, 117, 158); caret-color: rgb(240, 117, 158); box-sizing: border-box; border-color: rgb(240, 117, 158); border-inline-color: rgb(240, 117, 158); border-block-color: rgb(240, 117, 158); block-size: 56px;">xxx</div></div>

And when I use -webkit-text-stroke: 1px #000000;:

 <div class="view_body" style="transition-property: none; -webkit-text-stroke-width: 1px; -webkit-locale: &quot;en&quot;; width: 120.883px; transform-origin: 60.4414px 28px; text-shadow: rgb(0, 0, 0) 2px 2px 0px; text-emphasis-color: rgb(240, 117, 158); text-decoration: none solid rgb(240, 117, 158); perspective-origin: 60.4375px 28px; outline-color: rgb(240, 117, 158); min-width: auto; min-inline-size: auto; min-height: auto; min-block-size: auto; inline-size: 120.883px; height: 56px; font-size: 56px; font-family: __Luckiest_Guy_71c594, __Luckiest_Guy_Fallback_71c594; column-rule-color: rgb(240, 117, 158); color: rgb(240, 117, 158); caret-color: rgb(240, 117, 158); box-sizing: border-box; border-color: rgb(240, 117, 158); border-inline-color: rgb(240, 117, 158); border-block-color: rgb(240, 117, 158); block-size: 56px;"><div style="font-size: 56px; transition-property: none; -webkit-text-stroke-width: 1px; -webkit-locale: &quot;en&quot;; width: 120.883px; transform-origin: 60.4414px 28px; text-shadow: rgb(0, 0, 0) 2px 2px 0px; text-emphasis-color: rgb(240, 117, 158); text-decoration: none solid rgb(240, 117, 158); perspective-origin: 60.4375px 28px; outline-color: rgb(240, 117, 158); inline-size: 120.883px; height: 56px; font-family: __Luckiest_Guy_71c594, __Luckiest_Guy_Fallback_71c594; column-rule-color: rgb(240, 117, 158); color: rgb(240, 117, 158); caret-color: rgb(240, 117, 158); box-sizing: border-box; border-color: rgb(240, 117, 158); border-inline-color: rgb(240, 117, 158); border-block-color: rgb(240, 117, 158); block-size: 56px;">xxx</div></div>

[davidsainez]

Also, forgot to mention, it occurs if the color is set with -webkit-text-stroke: 1px black; and even when separating the property into -webkit-text-stroke-color and -webkit-text-stroke-width.

[davidsainez]

I've been poking around the code a bit, and I suspect that this bug occurs when filtering out the default styles. This would make sense because only the #000000 value (which I assume would be the default) gets dropped.

[qq15725]

Fixed in 4.4.17