Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-29 16:19:14 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Support wavy and double for text-decoration-line (#37079)

Browse source 
- Add support for `text-decoration-line: double`: Line drawing is done
similar to how it works in Firefox and Chromium. A gap of half of line
thickness is added between each line.
- Fix support for `text-decoration-line: wavy`: Wavy lines rectangles
were not calcualted properly, which meant they were rendered as solid
lines. Now the amplitude of the wave is 1.5 times line thickness.

Testing: A manual test is updated `tests/html/text_deco_simple.html`
to cover more cases. In general, rendering of text-decorations is
difficult
to test via reftesting.
Fixes #17887.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
This commit is contained in:
Martin Robinson 2025-05-22 19:42:50 +02:00 • committed by GitHub
parent 0ea40d6365
commit 7f0cebd442
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 84 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

53
tests/html/text_deco_simple.html
View file

@ -1,17 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p style="text-decoration:none;"> none </p>
<p style="text-decoration:underline;"> text underline </p>
<p style="text-decoration:overline;"> text underline </p>
<p style="text-decoration:line-through;"> text underline </p>
<p>
<p style="font-size:40px; text-decoration:underline; font-family:Verdana;"> text underline pqrstg </p>
<p style="text-decoration:overline;"> text overline xxxxxxxxXXXXXXX</p>
<p style="font-size:50px; text-decoration:line-through;"> text line-through xxxxxxxxXXXXX</p>
<p style="text-decoration:blink;"> text blink </p>
<style>
p {
font-family: "Times New Roman";
background: lightgrey;
padding: 5px;
margin: 5px;
}
</style>
<p style="text-decoration: none blue;">text-decoration: </p>
<p style="text-decoration: underline blue;">text-decoration: </p>
<p style="text-decoration: overline blue;">text-decoration: </p>
<p style="text-decoration: line-through blue;">text-decoration: </p>
<p style="text-decoration: underline double blue;">text-decoration: </p>
<p style="text-decoration: overline double blue;">text-decoration: </p>
<p style="text-decoration: line-through double blue;">text-decoration: </p>
<p style="text-decoration: underline wavy blue;">text-decoration: </p>
<p style="text-decoration: overline wavy blue;">text-decoration: </p>
<p style="text-decoration: line-through wavy blue;">text-decoration: </p>
<p style="text-decoration: underline dashed blue;">text-decoration: </p>
<p style="text-decoration: overline dashed blue;">text-decoration: </p>
<p style="text-decoration: line-through dashed blue;">text-decoration: </p>
<p style="text-decoration: underline dotted blue;">text-decoration: </p>
<p style="text-decoration: overline dotted blue;">text-decoration: </p>
<p style="text-decoration: line-through dotted blue;">text-decoration: </p>
<script>
for (paragraph of document.querySelectorAll("p")) {
paragraph.innerText += " " +
getComputedStyle(paragraph).textDecorationLine + " " +
getComputedStyle(paragraph).textDecorationStyle;
}
</script>
</body>
</html>