From a1f4bbf4c6e1a9a861a145a34cd097ea260b5a49 Mon Sep 17 00:00:00 2001
From: Koji Ishii <kojii@chromium.org>
Date: Tue, 1 Oct 2024 15:20:32 -0700
Subject: [PATCH] [initial-letter] Fix positioning for raised/sunken initial
 letters

When the the `initial-letter` property[1] has its `size`
larger than `sink`, the top of the initial letter glyph
overhangs the top of the first line.

Before this patch, the block-direction position of such
initial letters were computed based on the actual size of the
fragment. This patch changes it to the specified `size`,
making it consistent across different font metrics.

Note, the change to the positioning made two tests to hit
existing issues in exclusion space in vertical flow. They are
tracked at crbug.com/370423031.

[1] https://drafts.csswg.org/css-inline-3/#sizing-drop-initials

Bug: 370217727, 370423031
Change-Id: I24b8de13d1a76a27c30850297ca380f98f5021b8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5896658
Commit-Queue: Kent Tamura <tkent@chromium.org>
Auto-Submit: Koji Ishii <kojii@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1362700}
---
 .../Initial-letter-breaking-vlr-ref.html      |  2 +-
 .../Initial-letter-breaking-vrl-ref.html      |  2 +-
 ...letter-block-position-margins-vlr-ref.html |  2 +-
 ...letter-block-position-margins-vrl-ref.html |  2 +-
 ...er-block-position-raise-over-ruby-ref.html |  2 +-
 ...ock-position-raise-over-ruby-tall-ref.html |  2 +-
 ...r-block-position-raise-under-ruby-ref.html |  2 +-
 ...ck-position-raise-under-ruby-tall-ref.html |  2 +-
 .../initial-letter-drop-initial-vlr-ref.html  |  2 +-
 .../initial-letter-drop-initial-vrl-ref.html  |  2 +-
 .../initial-letter-float-001-vlr-ref.html     |  2 +-
 .../initial-letter-raise-initial-ref.html     | 25 +++++--
 .../initial-letter-raise-initial-rtl-ref.html |  2 +-
 .../initial-letter-raise-initial-vlr-ref.html | 11 ++-
 .../initial-letter-raise-initial-vrl-ref.html |  8 +-
 .../initial-letter-raise-initial.html         |  8 +-
 ...l-letter-raised-sunken-caps-raise-ref.html |  2 +-
 ...-letter-raised-sunken-caps-sunken-ref.html |  2 +-
 .../initial-letter-sunk-initial-ref.html      | 17 ++++-
 .../initial-letter-sunk-initial-rtl-ref.html  |  2 +-
 .../initial-letter-sunk-initial-vlr-ref.html  |  8 +-
 .../initial-letter-sunk-initial-vrl-ref.html  |  8 +-
 .../initial-letter-sunk-initial.html          |  6 +-
 .../resources/initial-letter-variants.js      | 75 +++++++++++++++++++
 24 files changed, 150 insertions(+), 46 deletions(-)
 create mode 100644 css/css-inline/initial-letter/resources/initial-letter-variants.js

diff --git a/css/css-inline/initial-letter/Initial-letter-breaking-vlr-ref.html b/css/css-inline/initial-letter/Initial-letter-breaking-vlr-ref.html
index d43b2e39bfaca8..2c047b0b4aaff8 100644
--- a/css/css-inline/initial-letter/Initial-letter-breaking-vlr-ref.html
+++ b/css/css-inline/initial-letter/Initial-letter-breaking-vlr-ref.html
@@ -35,7 +35,7 @@
         background: lime;
         float: left;
         height: 80px;
-        margin-left: 8px;
+        margin-left: -4px;
         width: 80px;
     }
 </style>
diff --git a/css/css-inline/initial-letter/Initial-letter-breaking-vrl-ref.html b/css/css-inline/initial-letter/Initial-letter-breaking-vrl-ref.html
index 0fe5e74a082b11..ce2b41135ea88c 100644
--- a/css/css-inline/initial-letter/Initial-letter-breaking-vrl-ref.html
+++ b/css/css-inline/initial-letter/Initial-letter-breaking-vrl-ref.html
@@ -35,7 +35,7 @@
         background: lime;
         float: left;
         height: 80px;
-        margin-right: 8px;
+        margin-right: -4px;
         width: 80px;
     }
 </style>
diff --git a/css/css-inline/initial-letter/initial-letter-block-position-margins-vlr-ref.html b/css/css-inline/initial-letter/initial-letter-block-position-margins-vlr-ref.html
index 6bbc5c3b7a620f..677e2a40db68ff 100644
--- a/css/css-inline/initial-letter/initial-letter-block-position-margins-vlr-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-block-position-margins-vlr-ref.html
@@ -21,7 +21,7 @@
         float: left;
         height: 80px;
         margin-bottom: 30px;
-        margin-left: 23px;
+        margin-left: 11px;
         margin-right: 45px;
         margin-top: 10px;
         width: 80px;
diff --git a/css/css-inline/initial-letter/initial-letter-block-position-margins-vrl-ref.html b/css/css-inline/initial-letter/initial-letter-block-position-margins-vrl-ref.html
index d608d256c96903..532f3a7d837639 100644
--- a/css/css-inline/initial-letter/initial-letter-block-position-margins-vrl-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-block-position-margins-vrl-ref.html
@@ -22,7 +22,7 @@
         height: 80px;
         margin-bottom: 30px;
         margin-left: 15px;
-        margin-right: 53px;
+        margin-right: 41px;
         margin-top: 10px;
         width: 80px;
     }
diff --git a/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-ref.html b/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-ref.html
index 43222b43dac567..23401fd646bba6 100644
--- a/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-ref.html
@@ -31,7 +31,7 @@
 </head>
 <body>
 <div class="sample">
-<div class="fake-initial-letter"></div><br><br><br>
+<div class="fake-initial-letter"></div><br><br>
 <div class="surrounding">bc <ruby>xyz<rt>XYZ</rt></ruby></div>
 def<br>ghi<br>jkl<br>mno<br>
 </div>
diff --git a/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-tall-ref.html b/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-tall-ref.html
index f1086074c2a665..9511f3e6f2d180 100644
--- a/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-tall-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-tall-ref.html
@@ -21,7 +21,7 @@
         background: lime;
         float: left;
         height: 80px;
-        margin-top: 8px;
+        margin-top: 32px;
         width: 80px;
     }
 
diff --git a/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-ref.html b/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-ref.html
index 9adde375569332..87bc6d0ff41281 100644
--- a/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-ref.html
@@ -32,7 +32,7 @@
 </head>
 <body>
 <div class="sample">
-<div class="fake-initial-letter"></div><br><br><br>
+<div class="fake-initial-letter"></div><br><br>
 <div class="surrounding">bc <ruby>xyz<rt>XYZ</rt></ruby></div>
 def<br>ghi<br>jkl<br>mno<br>
 </div>
diff --git a/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-tall-ref.html b/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-tall-ref.html
index 7e334e55dbf062..e818de68cd8d1b 100644
--- a/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-tall-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-tall-ref.html
@@ -25,7 +25,7 @@
         width: 80px;
     }
 
-    .surrounding { display:inline-block; margin-top: 72px; margin-bottom: -2px; }
+    .surrounding { display:inline-block; margin-top: 48px; margin-bottom: -2px; }
 </style>
 </head>
 <body>
diff --git a/css/css-inline/initial-letter/initial-letter-drop-initial-vlr-ref.html b/css/css-inline/initial-letter/initial-letter-drop-initial-vlr-ref.html
index f28d1eed83013f..5447e2f099a9ac 100644
--- a/css/css-inline/initial-letter/initial-letter-drop-initial-vlr-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-drop-initial-vlr-ref.html
@@ -20,7 +20,7 @@
         background: lime;
         float: left;
         height: 80px;
-        margin-left: 8px;
+        margin-left: -4px;
         width: 80px;
     }
 </style>
diff --git a/css/css-inline/initial-letter/initial-letter-drop-initial-vrl-ref.html b/css/css-inline/initial-letter/initial-letter-drop-initial-vrl-ref.html
index 4ec34f4c0bb491..e1e04ccffe2980 100644
--- a/css/css-inline/initial-letter/initial-letter-drop-initial-vrl-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-drop-initial-vrl-ref.html
@@ -20,7 +20,7 @@
         background: lime;
         float: left;
         height: 80px;
-        margin-right: 8px;
+        margin-right: -4px;
         width: 80px;
     }
 </style>
diff --git a/css/css-inline/initial-letter/initial-letter-float-001-vlr-ref.html b/css/css-inline/initial-letter/initial-letter-float-001-vlr-ref.html
index 3982a3669cd394..b4567d288129e0 100644
--- a/css/css-inline/initial-letter/initial-letter-float-001-vlr-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-float-001-vlr-ref.html
@@ -28,7 +28,7 @@
         background: lime;
         float: left;
         height: 80px;
-        margin-left: 8px;
+        margin-left: -4px;
         width: 80px;
     }
 </style>
diff --git a/css/css-inline/initial-letter/initial-letter-raise-initial-ref.html b/css/css-inline/initial-letter/initial-letter-raise-initial-ref.html
index f59625a4a9de3e..29594f45f9595d 100644
--- a/css/css-inline/initial-letter/initial-letter-raise-initial-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-raise-initial-ref.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html>
-<head>
+<meta charset="utf-8">
 <title>Tests initial letter raise initial</title>
 <link rel="author" title="Google LLC" href="https://www.google.com/">
 <link rel="help" href="https://drafts.csswg.org/css-inline/#raise-initial">
 <meta name="flags" content="ahem">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
+<script src="resources/initial-letter-variants.js"></script>
 <style>
     .sample {
         border: solid 1px green;
@@ -18,16 +18,27 @@
     .fake-initial-letter {
         background: lime;
         float: left;
-        height: 80px;
+        --cap: 0.8;
+        --size: calc((24px * 2 + 20px * var(--cap)) / var(--cap));
+        height: var(--size);
+        width: var(--size);
         margin-top: 2px;
-        width: 80px;
+    }
+
+    .no-ascent .fake-initial-letter {
+        height: calc(var(--size) * (1 - var(--cap)));
+        margin-top: calc(var(--size) * var(--cap) + 2px);
+    }
+    .no-descent .fake-initial-letter {
+        height: calc(var(--size) * var(--cap));
     }
 </style>
 </head>
 <body>
 <div class="sample">
-<div class="fake-initial-letter"></div><br><br><br>
+<div class="fake-initial-letter"></div><br><br>
 bc<br>def<br>ghi<br>jkl<br>mno<br>
 </div>
-</body>
-</html>
+<script>
+setupInitialLetterTestVariants();
+</script>
diff --git a/css/css-inline/initial-letter/initial-letter-raise-initial-rtl-ref.html b/css/css-inline/initial-letter/initial-letter-raise-initial-rtl-ref.html
index 9dce9e6e14c714..e5dd8f96b5cf40 100644
--- a/css/css-inline/initial-letter/initial-letter-raise-initial-rtl-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-raise-initial-rtl-ref.html
@@ -27,7 +27,7 @@
 </head>
 <body>
 <div class="sample">
-<div class="fake-initial-letter"></div><br><br><br>
+<div class="fake-initial-letter"></div><br><br>
 bc<br>def<br>ghi<br>jkl<br>mno<br>
 </div>
 </body>
diff --git a/css/css-inline/initial-letter/initial-letter-raise-initial-vlr-ref.html b/css/css-inline/initial-letter/initial-letter-raise-initial-vlr-ref.html
index 58e5c333e11040..72d2dd05a3edbf 100644
--- a/css/css-inline/initial-letter/initial-letter-raise-initial-vlr-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-raise-initial-vlr-ref.html
@@ -20,7 +20,7 @@
         background: lime;
         display: inline-block;
         height: 80px;
-        margin-left: 8px;
+        margin-left: -4px;
         margin-right: 8px;
         width: 80px;
     }
@@ -29,14 +29,19 @@
         display: inline-block;
         vertical-align: top;
         margin-top: -20px;
+        margin-right: -12px;
+    }
+
+    .remainder2 {
+        margin-left: 12px;
     }
 </style>
 </head>
 <body>
 <div class="sample">
 <div class="fake-initial-letter"></div>
-<div class="remainder">bc</div><br>
-def<br>ghi<br>jkl<br>mno<br>
+<div class="remainder">bc<br>def</div>
+<div class="remainder2">ghi<br>jkl<br>mno</div>
 </div>
 </body>
 </html>
diff --git a/css/css-inline/initial-letter/initial-letter-raise-initial-vrl-ref.html b/css/css-inline/initial-letter/initial-letter-raise-initial-vrl-ref.html
index 5fa68450681e0d..38be19283b2ba0 100644
--- a/css/css-inline/initial-letter/initial-letter-raise-initial-vrl-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-raise-initial-vrl-ref.html
@@ -20,8 +20,8 @@
         background: lime;
         display: inline-block;
         height: 80px;
-        margin-left: 8px;
-        margin-right: 8px;
+        margin-left: 20px;
+        margin-right: -4px;
         width: 80px;
     }
 
@@ -35,8 +35,8 @@
 <body>
 <div class="sample">
 <div class="fake-initial-letter"></div>
-<div class="remainder">bc</div><br>
-def<br>ghi<br>jkl<br>mno<br>
+<div class="remainder">bc<br>def</div><br>
+ghi<br>jkl<br>mno<br>
 </div>
 </body>
 </html>
diff --git a/css/css-inline/initial-letter/initial-letter-raise-initial.html b/css/css-inline/initial-letter/initial-letter-raise-initial.html
index 4b8e81453b74bb..ec2ec6bdc07983 100644
--- a/css/css-inline/initial-letter/initial-letter-raise-initial.html
+++ b/css/css-inline/initial-letter/initial-letter-raise-initial.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
-<html>
-<head>
 <title>Tests initial letter raise initial</title>
 <link rel="author" title="Google LLC" href="https://www.google.com/">
 <link rel="help" href="https://drafts.csswg.org/css-inline/#raise-initial">
 <meta name="flags" content="ahem">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
 <link rel="match" href="initial-letter-raise-initial-ref.html">
+<script src="resources/initial-letter-variants.js"></script>
+<meta name="variant" content="?class=">
+<meta name="variant" content="?class=no-ascent">
+<meta name="variant" content="?class=no-descent">
 <style>
     .sample {
         border: solid 1px green;
@@ -28,5 +30,3 @@
 <div class="sample initial-letter">
 Abc<br>def<br>ghi<br>jkl<br>mno<br>
 </div>
-</body>
-</html>
diff --git a/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-raise-ref.html b/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-raise-ref.html
index 7285ed8a82289f..0a134fcfe9eef6 100644
--- a/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-raise-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-raise-ref.html
@@ -27,7 +27,7 @@
 <body>
 <div>This line before initial letter.</div>
 <div class="sample">
-<div class="fake-initial-letter"></div><br><br><br>
+<div class="fake-initial-letter"></div><br><br>
 bc<br>def<br>ghi<br>jkl<br>mno<br>
 </div>
 </body>
diff --git a/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-sunken-ref.html b/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-sunken-ref.html
index a68a760ac62a2c..41031ff8782cf6 100644
--- a/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-sunken-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-sunken-ref.html
@@ -27,7 +27,7 @@
 <body>
 <div>This line before initial letter.</div>
 <div class="sample">
-<div class="fake-initial-letter"></div><br><br>
+<div class="fake-initial-letter"></div><br>
 bc<br>def<br>ghi<br>jkl<br>mno<br>
 </div>
 </body>
diff --git a/css/css-inline/initial-letter/initial-letter-sunk-initial-ref.html b/css/css-inline/initial-letter/initial-letter-sunk-initial-ref.html
index 9b036a2be38ef3..0b569177a87642 100644
--- a/css/css-inline/initial-letter/initial-letter-sunk-initial-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-sunk-initial-ref.html
@@ -6,6 +6,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-inline/#sunk-initial">
 <meta name="flags" content="ahem">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
+<script src="resources/initial-letter-variants.js"></script>
 <style>
     .sample {
         border: solid 1px green;
@@ -18,15 +19,25 @@
     .fake-initial-letter {
         background: lime;
         float: left;
-        height: 80px;
+        --cap: 0.8;
+        --size: calc((24px * 2 + 20px * var(--cap)) / var(--cap));
+        height: var(--size);
+        width: var(--size);
         margin-top: 2px;
-        width: 80px;
+    }
+
+    .no-ascent .fake-initial-letter {
+        height: calc(var(--size) * (1 - var(--cap)));
+        margin-top: calc(var(--size) * var(--cap) + 2px);
+    }
+    .no-descent .fake-initial-letter {
+        height: calc(var(--size) * var(--cap));
     }
 </style>
 </head>
 <body>
 <div class="sample">
-<div class="fake-initial-letter"></div><br><br>
+<div class="fake-initial-letter"></div><br>
 bc<br>def<br>ghi<br>jkl<br>mno<br>
 </div>
 </body>
diff --git a/css/css-inline/initial-letter/initial-letter-sunk-initial-rtl-ref.html b/css/css-inline/initial-letter/initial-letter-sunk-initial-rtl-ref.html
index 3318c7e8bdd2dc..cb26ab05f1e016 100644
--- a/css/css-inline/initial-letter/initial-letter-sunk-initial-rtl-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-sunk-initial-rtl-ref.html
@@ -27,7 +27,7 @@
 </head>
 <body>
 <div class="sample">
-<div class="fake-initial-letter"></div><br><br>
+<div class="fake-initial-letter"></div><br>
 bc<br>def<br>ghi<br>jkl<br>mno<br>
 </div>
 </body>
diff --git a/css/css-inline/initial-letter/initial-letter-sunk-initial-vlr-ref.html b/css/css-inline/initial-letter/initial-letter-sunk-initial-vlr-ref.html
index c3ccef28140cf5..ebdb5a15694c24 100644
--- a/css/css-inline/initial-letter/initial-letter-sunk-initial-vlr-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-sunk-initial-vlr-ref.html
@@ -20,14 +20,14 @@
         background: lime;
         display: inline-block;
         height: 80px;
-        margin-left: 8px;
+        margin-left: -4px;
         margin-right: 8px;
         width: 80px;
     }
 
     .remainder {
         display: inline-block;
-        margin-left: 48px;
+        margin-left: 24px;
         margin-top: -20px;
         vertical-align: bottom;
     }
@@ -40,8 +40,8 @@
 <body>
 <div class="sample">
 <div class="fake-initial-letter"></div>
-<div class="remainder">bc<br>def<br></div><br>
-<div class="remainder2">ghi<br>jkl<br>mno<br></div>
+<div class="remainder">bc<br>def<br>ghi<br></div><br>
+<div class="remainder2">jkl<br>mno<br></div>
 </div>
 </body>
 </html>
diff --git a/css/css-inline/initial-letter/initial-letter-sunk-initial-vrl-ref.html b/css/css-inline/initial-letter/initial-letter-sunk-initial-vrl-ref.html
index a7db8b9ea095d0..18735029d0c281 100644
--- a/css/css-inline/initial-letter/initial-letter-sunk-initial-vrl-ref.html
+++ b/css/css-inline/initial-letter/initial-letter-sunk-initial-vrl-ref.html
@@ -21,13 +21,13 @@
         display: inline-block;
         height: 80px;
         margin-left: 8px;
-        margin-right: 8px;
+        margin-right: -4px;
         width: 80px;
     }
 
     .remainder {
         display: inline-block;
-        margin-right: 48px;
+        margin-right: 24px;
         margin-top: -20px;
         vertical-align: top;
     }
@@ -40,8 +40,8 @@
 <body>
 <div class="sample">
 <div class="fake-initial-letter"></div>
-<div class="remainder">bc<br>def</div><br>
-<div class="remainder2">ghi<br>jkl<br>mno<br></div>
+<div class="remainder">bc<br>def<br>ghi</div><br>
+<div class="remainder2">jkl<br>mno<br></div>
 </div>
 </body>
 </html>
diff --git a/css/css-inline/initial-letter/initial-letter-sunk-initial.html b/css/css-inline/initial-letter/initial-letter-sunk-initial.html
index 701469ca90b9e6..3c00662d73cba1 100644
--- a/css/css-inline/initial-letter/initial-letter-sunk-initial.html
+++ b/css/css-inline/initial-letter/initial-letter-sunk-initial.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
-<html>
-<head>
 <title>Tests initial letter sunken initial</title>
 <link rel="author" title="Google LLC" href="https://www.google.com/">
 <link rel="help" href="https://drafts.csswg.org/css-inline/#sunk-initial">
 <meta name="flags" content="ahem">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
 <link rel="match" href="initial-letter-sunk-initial-ref.html">
+<script src="resources/initial-letter-variants.js"></script>
+<meta name="variant" content="?class=">
+<meta name="variant" content="?class=no-ascent">
+<meta name="variant" content="?class=no-descent">
 <style>
     .sample {
         border: solid 1px green;
diff --git a/css/css-inline/initial-letter/resources/initial-letter-variants.js b/css/css-inline/initial-letter/resources/initial-letter-variants.js
new file mode 100644
index 00000000000000..a3eceae8a92f5c
--- /dev/null
+++ b/css/css-inline/initial-letter/resources/initial-letter-variants.js
@@ -0,0 +1,75 @@
+window.addEventListener('load', setupInitialLetterTestVariants);
+
+function setupInitialLetterTestVariants() {
+  const search = window.location.search;
+  if (!search) {
+    return;
+  }
+  const params = new URLSearchParams(search);
+  const classes = params.getAll('class')
+                  .flatMap(value => value.split(','))
+                  .filter(value => value);
+  let text = params.getAll('text').join('');
+  if (!text) {
+    if (classes.indexOf('no-descent') >= 0) {
+      text = '\xC9\xC9M\xC9';
+    } else if (classes.indexOf('no-ascent') >= 0) {
+      text = 'ppMp';
+    }
+  }
+
+  for (const element of document.getElementsByClassName('sample')) {
+    element.classList.add(...classes);
+    if (text) {
+      replaceTextStart(element, text);
+    }
+  }
+}
+
+// Replace the start of the text content of the node.
+// Returns the number of characters replaced.
+//
+// For example,
+// `replaceTextStart(element, 'XY')` to the content:
+// ```
+// <div>ABC</div>
+// ```
+// produces:
+// ```
+// <div>XYC</div>
+// ```
+//
+// It has a limited support for separated text nodes and collapsible spaces.
+function replaceTextStart(node, text) {
+  if (node.nodeType == Node.TEXT_NODE) {
+    const content = node.nodeValue;
+    const trimmed_content = content.trimStart();
+    if (!trimmed_content) {
+      return 0;
+    }
+    const leading_spaces_len = content.length - trimmed_content.length;
+    const len = Math.min(text.length, trimmed_content.length);
+    node.nodeValue = content.substring(0, leading_spaces_len) +
+                     text.substring(0, len) +
+                     trimmed_content.substring(len);
+    return len;
+  }
+
+  if (node.nodeType == Node.ELEMENT_NODE && node.className.indexOf('fake') >= 0) {
+    // If this is a fake initial letter, pretend that one character is replaced.
+    return 1;
+  }
+
+  let total_replaced = 0;
+  for (const child of node.childNodes) {
+    const replaced = replaceTextStart(child, text);
+    if (replaced) {
+      total_replaced += replaced;
+      text = text.substring(replaced);
+      if (!text) {
+        return total_replaced;
+      }
+    }
+  }
+  return total_replaced;
+}