mirror of
https://github.com/servo/servo.git
synced 2025-06-06 00:25:37 +00:00
7f0cebd442
- 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>
46 lines
1.5 KiB
HTML
46 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<body>
|
|
|
|
<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>
|