text-decoration-thickness-length-rounding-001.html (4970B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 CSS Text Decoration Test: text-decoration-thickness length rounding down 6 </title> 7 8 <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> 9 <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property"> 10 <link rel="match" href="reference/text-decoration-thickness-length-rounding-ref.tentative.html"> 11 12 <meta name="assert" content="text-decoration-thickness length is rounded down to 2px"> 13 <!-- NOTE: This test assumes DPI of 1 --> 14 15 <style> 16 table { 17 border: 3px solid gray; 18 border-collapse: collapse; 19 } 20 21 th, 22 td{ 23 border: 2px solid gray; 24 padding: 10px; 25 text-align: center; 26 } 27 28 .two_point3_px { 29 text-decoration-thickness: 2.3px; 30 } 31 32 .solid { 33 text-decoration-style: solid; 34 } 35 36 .double { 37 text-decoration-style: double; 38 } 39 40 .dotted { 41 text-decoration-style: dotted; 42 } 43 44 .dashed { 45 text-decoration-style: dashed; 46 } 47 48 .wavy { 49 text-decoration-style: wavy; 50 } 51 52 .underline { 53 text-decoration-line: underline; 54 } 55 56 .line_through { 57 text-decoration-line: line-through; 58 } 59 60 .overline { 61 text-decoration-line: overline; 62 } 63 </style> 64 </head> 65 66 <body> 67 <h1> 68 Test passes if text-decoration-thickness length is rounded to 2px 69 </h1> 70 71 <table> 72 <thead> 73 <tr> 74 <th rowspan="2"> 75 Line Type 76 </th> 77 <th colspan="5"> 78 Line Style 79 </th> 80 </tr> 81 <tr> 82 <th> 83 Solid 84 </th> 85 <th> 86 Double 87 </th> 88 <th> 89 Dotted 90 </th> 91 <th> 92 Dashed 93 </th> 94 <th> 95 Wavy 96 </th> 97 </tr> 98 </thead> 99 <tbody> 100 <tr> 101 <th> 102 Underline 103 </th> 104 <td class="two_point3_px solid underline"> 105 Thickness test. 106 </td> 107 <td class="two_point3_px double underline"> 108 Thickness test. 109 </td> 110 <td class="two_point3_px dotted underline"> 111 Thickness test. 112 </td> 113 <td class="two_point3_px dashed underline"> 114 Thickness test. 115 </td> 116 <td class="two_point3_px wavy underline"> 117 Thickness test. 118 </td> 119 </tr> 120 <tr> 121 <th> 122 Line-through 123 </th> 124 <td class="two_point3_px solid line_through"> 125 Thickness test. 126 </td> 127 <td class="two_point3_px double line_through"> 128 Thickness test. 129 </td> 130 <td class="two_point3_px dotted line_through"> 131 Thickness test. 132 </td> 133 <td class="two_point3_px dashed line_through"> 134 Thickness test. 135 </td> 136 <td class="two_point3_px wavy line_through"> 137 Thickness test. 138 </td> 139 </tr> 140 <tr> 141 <th> 142 Overline 143 </th> 144 <td class="two_point3_px solid overline"> 145 Thickness test. 146 </td> 147 <td class="two_point3_px double overline"> 148 Thickness test. 149 </td> 150 <td class="two_point3_px dotted overline"> 151 Thickness test. 152 </td> 153 <td class="two_point3_px dashed overline"> 154 Thickness test. 155 </td> 156 <td class="two_point3_px wavy overline"> 157 Thickness test. 158 </td> 159 </tr> 160 </tbody> 161 </table> 162 </body> 163 </html>