mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-22 09:18:55 +00:00
LibWeb: Always round text-decoration-thickness value up to 1px
This commit is contained in:
Tim Ledbetter
Jelle Raaijmakers
parent
405c5ffa60
commit
4559d5f6f6
Notes:
github-actions[bot]
2025-09-10 13:38:27 +00:00
Author: https://github.com/tcl3
Commit: 4559d5f6f6
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6147
Reviewed-by: https://github.com/gmta ✅
3 changed files with 322 additions and 1 deletions
|
|
@ -1589,7 +1589,8 @@ void PaintableWithLines::resolve_paint_properties()
|
|||
return max(glyph_height.scaled(0.1), 1);
|
||||
},
|
||||
[&](CSS::LengthPercentage const& length_percentage) {
|
||||
return length_percentage.resolved(text_node, CSS::Length(1, CSS::Length::Type::Em).to_px(text_node)).to_px(*fragment.m_layout_node);
|
||||
auto resolved_length = length_percentage.resolved(text_node, CSS::Length(1, CSS::Length::Type::Em).to_px(text_node)).to_px(*fragment.m_layout_node);
|
||||
return max(resolved_length, 1);
|
||||
});
|
||||
}();
|
||||
fragment.set_text_decoration_thickness(css_line_thickness);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Text Decoration Test: text-decoration-thickness length min rounding
|
||||
</title>
|
||||
|
||||
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
|
||||
|
||||
<style>
|
||||
table {
|
||||
border: 3px solid gray;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td{
|
||||
border: 2px solid gray;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.one_px {
|
||||
text-decoration-thickness: 1px;
|
||||
}
|
||||
|
||||
.solid {
|
||||
text-decoration-style: solid;
|
||||
}
|
||||
|
||||
.double {
|
||||
text-decoration-style: double;
|
||||
}
|
||||
|
||||
.dotted {
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
|
||||
.dashed {
|
||||
text-decoration-style: dashed;
|
||||
}
|
||||
|
||||
.wavy {
|
||||
text-decoration-style: wavy;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.line_through {
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
|
||||
.overline {
|
||||
text-decoration-line: overline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
Test passes if text-decoration-thickness length is rounded up to 1px
|
||||
</h1>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">
|
||||
Line Type
|
||||
</th>
|
||||
<th colspan="5">
|
||||
Line Style
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Solid
|
||||
</th>
|
||||
<th>
|
||||
Double
|
||||
</th>
|
||||
<th>
|
||||
Dotted
|
||||
</th>
|
||||
<th>
|
||||
Dashed
|
||||
</th>
|
||||
<th>
|
||||
Wavy
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
Underline
|
||||
</th>
|
||||
<td class="one_px solid underline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="one_px double underline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="one_px dotted underline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="one_px dashed underline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="one_px wavy underline">
|
||||
Thickness test.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Line-through
|
||||
</th>
|
||||
<td class="one_px solid line_through">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="one_px double line_through">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="one_px dotted line_through">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="one_px dashed line_through">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="one_px wavy line_through">
|
||||
Thickness test.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Overline
|
||||
</th>
|
||||
<td class="one_px solid overline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="one_px double overline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="one_px dotted overline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="one_px dashed overline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="one_px wavy overline">
|
||||
Thickness test.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Text Decoration Test: text-decoration-thickness length min rounding
|
||||
</title>
|
||||
|
||||
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-text-decor/reference/text-decoration-thickness-length-rounding-min-val-ref.html">
|
||||
|
||||
<meta name="assert" content="text-decoration-thickness length is rounded up to 1px">
|
||||
|
||||
<style>
|
||||
table {
|
||||
border: 3px solid gray;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td{
|
||||
border: 2px solid gray;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.point3_px {
|
||||
text-decoration-thickness: 0.3px;
|
||||
}
|
||||
|
||||
.solid {
|
||||
text-decoration-style: solid;
|
||||
}
|
||||
|
||||
.double {
|
||||
text-decoration-style: double;
|
||||
}
|
||||
|
||||
.dotted {
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
|
||||
.dashed {
|
||||
text-decoration-style: dashed;
|
||||
}
|
||||
|
||||
.wavy {
|
||||
text-decoration-style: wavy;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.line_through {
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
|
||||
.overline {
|
||||
text-decoration-line: overline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
Test passes if text-decoration-thickness length is rounded up to 1px
|
||||
</h1>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">
|
||||
Line Type
|
||||
</th>
|
||||
<th colspan="5">
|
||||
Line Style
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Solid
|
||||
</th>
|
||||
<th>
|
||||
Double
|
||||
</th>
|
||||
<th>
|
||||
Dotted
|
||||
</th>
|
||||
<th>
|
||||
Dashed
|
||||
</th>
|
||||
<th>
|
||||
Wavy
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
Underline
|
||||
</th>
|
||||
<td class="point3_px solid underline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="point3_px double underline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="point3_px dotted underline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="point3_px dashed underline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="point3_px wavy underline">
|
||||
Thickness test.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Line-through
|
||||
</th>
|
||||
<td class="point3_px solid line_through">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="point3_px double line_through">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="point3_px dotted line_through">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="point3_px dashed line_through">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="point3_px wavy line_through">
|
||||
Thickness test.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Overline
|
||||
</th>
|
||||
<td class="point3_px solid overline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="point3_px double overline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="point3_px dotted overline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="point3_px dashed overline">
|
||||
Thickness test.
|
||||
</td>
|
||||
<td class="point3_px wavy overline">
|
||||
Thickness test.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue