Attachment 479814 Details for Bug 257992 – testcase

testcase

testcase.html (text/html), 4.22 KB, created by Karl Dubost on 2026-05-25 09:01:36 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Karl Dubost

Created: 2026-05-25 09:01:36 PDT

Size: 4.22 KB

patch

obsolete

><!DOCTYPE html>
><html lang="en">
><head>
><meta charset="utf-8">
><title>text-decoration-thickness propagation to inner span (bug 257992)</title>
><style>
>  body { font-family: -apple-system, system-ui, sans-serif; max-width: 900px; margin: 2em auto; padding: 0 1em; color: #222; line-height: 1.5; }
>  h1 { font-size: 1.3em; }
>  h2 { font-size: 1.1em; margin-top: 1.6em; }
>  p, li { font-size: 14px; }
>  code { background: #eee; padding: 1px 4px; border-radius: 3px; font-family: ui-monospace, "SF Mono", monospace; font-size: 0.95em; }
>  hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0 1em; }
>
>  /* The decorating box: line-through originates HERE.
>     Per CSS Text Decoration 4 Â§2.2, this thickness applies to all
>     decorations from this element, even if descendant boxes specify a
>     different value. */
>  .container {
>    font: 92px Arial, sans-serif;
>    -webkit-text-decoration: dotted blue line-through;
>    text-decoration: dotted blue line-through;
>    text-decoration-thickness: 30px;
>  }
>  /* Highlight the inner span purely so the failing region is obvious; this
>     declaration does NOT touch text-decoration-thickness. */
>  span#observed { background: rgba(255, 230, 0, .35); }
>
>  .verdict { font: 13px ui-monospace, "SF Mono", monospace; padding: .6em 1em; border-radius: 4px; margin: 1em 0; }
>  .verdict.note { background: #f5f5f5; border-left: 3px solid #888; }
></style>
></head>
><body>
>
><h1>text-decoration-thickness propagation to inner span</h1>
>
><p>
>  Per <a href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-thickness-property">CSS Text Decoration Module Level 4 Â§2.2</a>:
></p>
><blockquote>
>  <em>"sets the stroke thickness of underlines, overlines, and line-throughs
>  specified on the element with text-decoration-line, and affects all decorations
>  originating from this element <strong>even if descendant boxes specify a different
>  thickness</strong>."</em>
></blockquote>
><p>
>  The property is correctly <strong>non-inherited</strong>. The value on the element
>  that carries <code>text-decoration-line</code> (the "decorating box") is what
>  governs how that element's decoration is drawn â <em>regardless</em> of any
>  descendant's own value.
></p>
>
><p>
>  In the live block below, the parent <code>&lt;div&gt;</code> sets
>  <code>text-decoration-thickness: 30px</code>. The dotted blue line-through originates from the
>  <code>&lt;div&gt;</code>, so the thickness must be 30px throughout â including
>  the segment that crosses the highlighted inner <code>&lt;span&gt;</code>.
></p>
>
><div class="container">foo<span id="observed">bar</span>baz</div>
>
><h2>Visual check</h2>
><ul>
>  <li><strong>Expected:</strong> uniform dot diameter and period across <code>foo</code>, <code>bar</code>, and <code>baz</code>.</li>
>  <li><strong>WebKit (current):</strong> the segment under the highlighted <code>&lt;span&gt;</code> is visibly thinner (~4â6px) than over <code>foo</code> and <code>baz</code> (30px). The dotted period changes at the boundary.</li>
>  <li><strong>Firefox 152 / Chrome 150:</strong> uniform 30px across the whole line.</li>
></ul>
>
><h2>Computed-value sanity check</h2>
><p>
>  This is <em>not</em> the failing assertion â it documents that the computed value
>  is the spec-correct one. The bug is only that the painter uses this
>  descendant-side value to draw the ancestor's decoration.
></p>
>
><div id="computed-verdict" class="verdict note">â¦runningâ¦</div>
>
><script>
>  (function () {
>    var span = document.getElementById('observed');
>    var computed = getComputedStyle(span).textDecorationThickness;
>    var box = document.getElementById('computed-verdict');
>    box.className = 'verdict note';
>    box.textContent =
>      'getComputedStyle(span).textDecorationThickness = "' + computed + '". ' +
>      'Per spec (Inherited: no, initial: auto), this is correct â the bug is ' +
>      'visual only: the painter uses this value where it should use the <div>\'s 30px.';
>  })();
></script>
>
><h2>How to verify the bug visually</h2>
><ol>
>  <li>Open this page in MiniBrowser / Safari and zoom in (â+) on the line-through.</li>
>  <li>Compare the dot diameter under the highlighted span to the dots over <code>foo</code> and <code>baz</code>.</li>
>  <li>Open the same page in Firefox or Chrome â the dots are uniform.</li>
></ol>
>
></body>
></html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-decoration-thickness propagation to inner span (bug 257992)</title>
<style>
  body { font-family: -apple-system, system-ui, sans-serif; max-width: 900px; margin: 2em auto; padding: 0 1em; color: #222; line-height: 1.5; }
  h1 { font-size: 1.3em; }
  h2 { font-size: 1.1em; margin-top: 1.6em; }
  p, li { font-size: 14px; }
  code { background: #eee; padding: 1px 4px; border-radius: 3px; font-family: ui-monospace, "SF Mono", monospace; font-size: 0.95em; }
  hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0 1em; }

  /* The decorating box: line-through originates HERE.
     Per CSS Text Decoration 4 Â§2.2, this thickness applies to all
     decorations from this element, even if descendant boxes specify a
     different value. */
  .container {
    font: 92px Arial, sans-serif;
    -webkit-text-decoration: dotted blue line-through;
    text-decoration: dotted blue line-through;
    text-decoration-thickness: 30px;
  }
  /* Highlight the inner span purely so the failing region is obvious; this
     declaration does NOT touch text-decoration-thickness. */
  span#observed { background: rgba(255, 230, 0, .35); }

  .verdict { font: 13px ui-monospace, "SF Mono", monospace; padding: .6em 1em; border-radius: 4px; margin: 1em 0; }
  .verdict.note { background: #f5f5f5; border-left: 3px solid #888; }
</style>
</head>
<body>

<h1>text-decoration-thickness propagation to inner span</h1>

<p>
  Per <a href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-thickness-property">CSS Text Decoration Module Level 4 Â§2.2</a>:
</p>
<blockquote>
  <em>"sets the stroke thickness of underlines, overlines, and line-throughs
  specified on the element with text-decoration-line, and affects all decorations
  originating from this element <strong>even if descendant boxes specify a different
  thickness</strong>."</em>
</blockquote>
<p>
  The property is correctly <strong>non-inherited</strong>. The value on the element
  that carries <code>text-decoration-line</code> (the "decorating box") is what
  governs how that element's decoration is drawn â <em>regardless</em> of any
  descendant's own value.
</p>

<p>
  In the live block below, the parent <code>&lt;div&gt;</code> sets
  <code>text-decoration-thickness: 30px</code>. The dotted blue line-through originates from the
  <code>&lt;div&gt;</code>, so the thickness must be 30px throughout â including
  the segment that crosses the highlighted inner <code>&lt;span&gt;</code>.
</p>

<div class="container">foo<span id="observed">bar</span>baz</div>

<h2>Visual check</h2>
<ul>
  <li><strong>Expected:</strong> uniform dot diameter and period across <code>foo</code>, <code>bar</code>, and <code>baz</code>.</li>
  <li><strong>WebKit (current):</strong> the segment under the highlighted <code>&lt;span&gt;</code> is visibly thinner (~4â6px) than over <code>foo</code> and <code>baz</code> (30px). The dotted period changes at the boundary.</li>
  <li><strong>Firefox 152 / Chrome 150:</strong> uniform 30px across the whole line.</li>
</ul>

<h2>Computed-value sanity check</h2>
<p>
  This is <em>not</em> the failing assertion â it documents that the computed value
  is the spec-correct one. The bug is only that the painter uses this
  descendant-side value to draw the ancestor's decoration.
</p>

<div id="computed-verdict" class="verdict note">â¦runningâ¦</div>

<script>
  (function () {
    var span = document.getElementById('observed');
    var computed = getComputedStyle(span).textDecorationThickness;
    var box = document.getElementById('computed-verdict');
    box.className = 'verdict note';
    box.textContent =
      'getComputedStyle(span).textDecorationThickness = "' + computed + '". ' +
      'Per spec (Inherited: no, initial: auto), this is correct â the bug is ' +
      'visual only: the painter uses this value where it should use the <div>\'s 30px.';
  })();
</script>

<h2>How to verify the bug visually</h2>
<ol>
  <li>Open this page in MiniBrowser / Safari and zoom in (â+) on the line-through.</li>
  <li>Compare the dot diameter under the highlighted span to the dots over <code>foo</code> and <code>baz</code>.</li>
  <li>Open the same page in Firefox or Chrome â the dots are uniform.</li>
</ol>

</body>
</html>

Actions: View

Attachments on bug 257992: 473189 | 479812 | 479813 | 479814 | 479815 | 479964 | 479973