fergalmoran/ladybird
1
0
Fork 0
mirror of https://github.com/fergalmoran/ladybird.git synced 2025-12-22 09:19:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb/Painting: Paint triangle waves using Skia

Browse Source 
This has been left unimplemented since we switched to the Skia renderer.
Now `text-decoration-style: wavy` actually paints a wavy line. :^)

We had a text-decoration test, but it only checked `solid` lines, so
I've replaced it with a modified version of the old test page from
Serenity, without the blink option, and with some thickness parameters.

I did experiment with using a `SkPath1DPathEffect` to make it repeat the
pattern for us, but I couldn't make it look good at all.
This commit is contained in:
Sam Atkins
2025-02-27 19:23:27 +00:00
parent 08246bfa8c
commit d8a73a8165
3 changed files with 81 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Tests/LibWeb/Screenshot/images/text-decorations.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 15 KiB

40
Tests/LibWeb/Screenshot/input/text-decorations.html
View File

@@ -3,37 +3,19 @@
<head>
<link rel="match" href="../expected/text-decorations-ref.html" />
<style>
.underline {
text-decoration: underline;
text-decoration-thickness: 2px;
}
.overline {
text-decoration: overline;
text-decoration-thickness: 2px;
}
.line-through {
text-decoration: line-through;
text-decoration-thickness: 2px;
}
.underline-overline {
text-decoration: underline overline;
text-decoration-thickness: 2px;
}
.underline-line-through {
text-decoration: underline line-through;
text-decoration-thickness: 2px;
}
.overline { text-decoration: wavy blue overline 2px; }
.underline { text-decoration: red underline double; }
.strikethrough { text-decoration: line-through dotted green 5px; }
.current-color { color: #8B4513; text-decoration: underline; }
.overboard { text-decoration: double overline underline line-through magenta; }
</style>
</head>
<body>
<p class="underline">Hello</p>
<p class="overline">Hello</p>
<p class="line-through">Hello</p>
<p class="underline-overline">Hello</p>
<p class="underline-line-through">Hello</p>
<p class="overline">Overline</p>
<p class="underline">Underline</p>
<p class="strikethrough">Wombling</p>
<p class="blink">FREE!</p>
<p class="current-color">This underline should match the text color</p>
<p class="overboard">This should have an underline, overline and line-through, all in glorious magenta.</p>
</body>
</html>