Bug 1769623 [wpt PR 34079] - Fixed text-decoration-thickness rendering, a=testonly
authorTraian Captan <tcaptan@chromium.org>
Wed, 18 May 2022 03:36:02 +0000
changeset 618488 a3d53e87bfca93a67d0e3373a42c6060e1e07fdb
parent 618487 14982ab8e0b25d663bead4e381ebec4b125cd06a
child 618489 8585e73b7465d206abe25bf4e92c61284fd03978
push id163295
push userwptsync@mozilla.com
push dateSun, 22 May 2022 08:42:45 +0000
treeherderautoland@28d8297085fe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1769623, 34079, 1255280, 3639882, 1004432
milestone102.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1769623 [wpt PR 34079] - Fixed text-decoration-thickness rendering, a=testonly Automatic update from web-platform-tests Fixed text-decoration-thickness rendering CSS text-decoration-thickness renders 1px thinner compared to other browsers (Firefox, Safari), when the calculated thickness has a decimal part >= .5px, because the value gets floored by `GraphicsContext::DrawLineForText` via `RoundDownThickness`. The other engines seem to round to the nearest integer when text-decoration-thickness value is not auto. The proposed fix is to match the other engines by rounding the text-decoration-thickness value when it is not auto. The rounding is done in `ComputeDecorationThickness` to avoid also rounding when text-decoration-thickness value is set to auto. Tentative WPT tests are added to reflect the rounding behavior. Spec issue to change description: https://github.com/w3c/csswg-drafts/issues/7283 Change-Id: Ie26664884d2cc48d2b7ffd838a21d0b771303718 Bug: 1255280 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3639882 Commit-Queue: Traian Captan <tcaptan@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1004432} -- wpt-commits: af0788d1ae7f7223ead7d66fc795a1e736e5c125 wpt-pr: 34079
testing/web-platform/tests/css/css-text-decor/reference/text-decoration-thickness-fixed-ref.html
testing/web-platform/tests/css/css-text-decor/reference/text-decoration-thickness-length-rounding-min-val-ref.html
testing/web-platform/tests/css/css-text-decor/reference/text-decoration-thickness-length-rounding-ref.tentative.html
testing/web-platform/tests/css/css-text-decor/text-decoration-thickness-fixed.html
testing/web-platform/tests/css/css-text-decor/text-decoration-thickness-length-rounding-down.tentative.html
testing/web-platform/tests/css/css-text-decor/text-decoration-thickness-length-rounding-min-val.html
testing/web-platform/tests/css/css-text-decor/text-decoration-thickness-length-rounding-up.tentative.html
--- a/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-thickness-fixed-ref.html
+++ b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-thickness-fixed-ref.html
@@ -14,17 +14,17 @@ src: url(../resources/UnderlineTest-Thin
 
 @font-face {
 font-family: underline-thick;
 src: url(../resources/UnderlineTest-Thick.ttf);
 }
 
 .test {
 text-underline-position: from-font;
-font-size: 64px;
+font-size: 62px;
 line-height: 1.8;
 }
 
 .thin_underline {
 text-decoration: underline;
 font-family: underline-thin;
 text-decoration-thickness: from-font;
 }
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-thickness-length-rounding-min-val-ref.html
@@ -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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/reference/text-decoration-thickness-length-rounding-ref.tentative.html
@@ -0,0 +1,158 @@
+<!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>
--- a/testing/web-platform/tests/css/css-text-decor/text-decoration-thickness-fixed.html
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-thickness-fixed.html
@@ -10,42 +10,42 @@
 <style>
 @font-face {
 font-family: underline-variable;
 src: url(resources/UnderlineTest-VF.ttf);
 }
 
 .test {
 text-underline-position: from-font;
-font-size: 64px;
+font-size: 62px;
 line-height: 1.8;
 }
 
 .thin_underline {
 font-family: underline-variable;
 text-decoration: underline;
 text-decoration-thickness: 0.2px;
 }
 
 .thick_underline {
 font-family: underline-variable;
 text-decoration: underline;
-text-decoration-thickness: 6.3px;
+text-decoration-thickness: 6.2px;
 }
 
 .thin_underline_percent {
 font-family: underline-variable;
 text-decoration: underline;
 text-decoration-thickness: 0.3152%;
 }
 
 .thick_underline_percent {
 font-family: underline-variable;
 text-decoration: underline;
-text-decoration-thickness: 9.84375%;
+text-decoration-thickness: 10%;
 }
 </style>
 </head>
 <body>
     <p>Test passes if underlines are thin, thick, thin, thick in this order and match the reference rendering.</p>
     <div class="test"><span class="thin_underline">aagaa</span></div>
     <div class="test"><span class="thick_underline">aagaa</span></div>
     <div class="test"><span class="thin_underline_percent">aagaa</span></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-thickness-length-rounding-down.tentative.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+            CSS Text Decoration Test: text-decoration-thickness length rounding down
+        </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 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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-thickness-length-rounding-min-val.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="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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-thickness-length-rounding-up.tentative.html
@@ -0,0 +1,162 @@
+<!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 rounded up to 2px">
+
+        <style>
+            table {
+                border: 3px solid gray;
+                border-collapse: collapse;
+            }
+
+            th,
+            td{
+                border: 2px solid gray;
+                padding: 10px;
+                text-align: center;
+            }
+
+            .one_point7_px {
+                text-decoration-thickness: 1.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="one_point7_px solid underline">
+                        Thickness test.
+                    </td>
+                    <td class="one_point7_px double underline">
+                        Thickness test.
+                    </td>
+                    <td class="one_point7_px dotted underline">
+                        Thickness test.
+                    </td>
+                    <td class="one_point7_px dashed underline">
+                        Thickness test.
+                    </td>
+                    <td class="one_point7_px wavy underline">
+                        Thickness test.
+                    </td>
+                </tr>
+                <tr>
+                    <th>
+                        Line-through
+                    </th>
+                    <td class="one_point7_px solid line_through">
+                        Thickness test.
+                    </td>
+                    <td class="one_point7_px double line_through">
+                        Thickness test.
+                    </td>
+                    <td class="one_point7_px dotted line_through">
+                        Thickness test.
+                    </td>
+                    <td class="one_point7_px dashed line_through">
+                        Thickness test.
+                    </td>
+                    <td class="one_point7_px wavy line_through">
+                        Thickness test.
+                    </td>
+                </tr>
+                <tr>
+                    <th>
+                        Overline
+                    </th>
+                    <td class="one_point7_px solid overline">
+                        Thickness test.
+                    </td>
+                    <td class="one_point7_px double overline">
+                        Thickness test.
+                    </td>
+                    <td class="one_point7_px dotted overline">
+                        Thickness test.
+                    </td>
+                    <td class="one_point7_px dashed overline">
+                        Thickness test.
+                    </td>
+                    <td class="one_point7_px wavy overline">
+                        Thickness test.
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </body>
+</html>