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;
+}
