[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}
web-platform-tests · Oct 1, 2024 · a1f4bbf · a1f4bbf
1 parent 86fb9e8
commit a1f4bbf
Show file tree

Hide file tree

Showing 24 changed files with 150 additions and 46 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;