<!DOCTYPE html>
<html>
<head>
<title>
CSS Text Decoration Test: text-decoration-thickness length rounding down
</title>
<link rel="author" title="Traian Captan" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
<link rel="match" href="reference/text-decoration-thickness-length-rounding-ref.tentative.html">
<meta name="assert" content="text-decoration-thickness length is rounded down to 2px">
<style>
table {
border: 3px solid gray;
border-collapse: collapse;
}
th,
td{
border: 2px solid gray;
padding: 10px;
text-align: center;
}
.two_point3_px {
text-decoration-thickness: 2.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 to 2px
</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="two_point3_px solid underline">
Thickness test.
</td>
<td class="two_point3_px double underline">
Thickness test.
</td>
<td class="two_point3_px dotted underline">
Thickness test.
</td>
<td class="two_point3_px dashed underline">
Thickness test.
</td>
<td class="two_point3_px wavy underline">
Thickness test.
</td>
</tr>
<tr>
<th>
Line-through
</th>
<td class="two_point3_px solid line_through">
Thickness test.
</td>
<td class="two_point3_px double line_through">
Thickness test.
</td>
<td class="two_point3_px dotted line_through">
Thickness test.
</td>
<td class="two_point3_px dashed line_through">
Thickness test.
</td>
<td class="two_point3_px wavy line_through">
Thickness test.
</td>
</tr>
<tr>
<th>
Overline
</th>
<td class="two_point3_px solid overline">
Thickness test.
</td>
<td class="two_point3_px double overline">
Thickness test.
</td>
<td class="two_point3_px dotted overline">
Thickness test.
</td>
<td class="two_point3_px dashed overline">
Thickness test.
</td>
<td class="two_point3_px wavy overline">
Thickness test.
</td>
</tr>
</tbody>
</table>
</body>
</html>
Codebase Browser
chromium