Status: PASS | Duration: 16ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi
/css/css-text-decor/text-decoration-thickness-length-rounding-002.html
<!DOCTYPE html> <html> <head> <title> CSS Text Decoration Test: text-decoration-thickness length rounding up </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="reference/text-decoration-thickness-length-rounding-ref.tentative.html"> <meta name="assert" content="text-decoration-thickness length is floored to 2px"> <!-- NOTE: This test assumes DPI of 1 --> <style> table { border: 3px solid gray; border-collapse: collapse; } th, td{ border: 2px solid gray; padding: 10px; text-align: center; } .two_point7_px { text-decoration-thickness: 2.7px; } .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_point7_px solid underline"> Thickness test. </td> <td class="two_point7_px double underline"> Thickness test. </td> <td class="two_point7_px dotted underline"> Thickness test. </td> <td class="two_point7_px dashed underline"> Thickness test. </td> <td class="two_point7_px wavy underline"> Thickness test. </td> </tr> <tr> <th> Line-through </th> <td class="two_point7_px solid line_through"> Thickness test. </td> <td class="two_point7_px double line_through"> Thickness test. </td> <td class="two_point7_px dotted line_through"> Thickness test. </td> <td class="two_point7_px dashed line_through"> Thickness test. </td> <td class="two_point7_px wavy line_through"> Thickness test. </td> </tr> <tr> <th> Overline </th> <td class="two_point7_px solid overline"> Thickness test. </td> <td class="two_point7_px double overline"> Thickness test. </td> <td class="two_point7_px dotted overline"> Thickness test. </td> <td class="two_point7_px dashed overline"> Thickness test. </td> <td class="two_point7_px wavy overline"> Thickness test. </td> </tr> </tbody> </table> </body> </html>
/css/css-text-decor/reference/text-decoration-thickness-length-rounding-ref.tentative.html
<!DOCTYPE html> <html> <head> <title> CSS Text Decoration Test: text-decoration-thickness length 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; } .two_px { text-decoration-thickness: 2px; } .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_px solid underline"> Thickness test. </td> <td class="two_px double underline"> Thickness test. </td> <td class="two_px dotted underline"> Thickness test. </td> <td class="two_px dashed underline"> Thickness test. </td> <td class="two_px wavy underline"> Thickness test. </td> </tr> <tr> <th> Line-through </th> <td class="two_px solid line_through"> Thickness test. </td> <td class="two_px double line_through"> Thickness test. </td> <td class="two_px dotted line_through"> Thickness test. </td> <td class="two_px dashed line_through"> Thickness test. </td> <td class="two_px wavy line_through"> Thickness test. </td> </tr> <tr> <th> Overline </th> <td class="two_px solid overline"> Thickness test. </td> <td class="two_px double overline"> Thickness test. </td> <td class="two_px dotted overline"> Thickness test. </td> <td class="two_px dashed overline"> Thickness test. </td> <td class="two_px wavy overline"> Thickness test. </td> </tr> </tbody> </table> </body> </html>