Skip to content

Commit 85ad6f8

Browse files
kbhomesmoz-wptsync-bot
kbhomes
authored and
moz-wptsync-bot
committed
Fix font baseline selection for text-box-edge: text.
Differential Revision: https://phabricator.services.mozilla.com/D312408 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=2055372 gecko-commit: b284ec0aa8aac087b7f726be8d9ecd8190eda625 gecko-commit-git: 4534c066356fbef51581441cd7fa12c872263971 gecko-reviewers: layout-reviewers, emilio
1 parent 27d2ee7 commit 85ad6f8

4 files changed

Lines changed: 158 additions & 0 deletions

File tree

‎css/css-inline/text-box-trim/text-box-trim-end-003-ref.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<title>Test `text-box: trim-start text` selects correct text-over baseline</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge">
4+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
5+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#typedef-text-edge">
6+
<meta charset="utf-8">
7+
<style>
8+
@font-face {
9+
/**
10+
* CSSTest font has non-zero internal leading (max ascent + max descent is
11+
* greater than the em-size). Trimming to the `text` edge should only trim
12+
* external leading (from the line-height) and not a font's internal leading.
13+
*
14+
* https://drafts.csswg.org/css-inline-3/#typedef-text-edge
15+
*/
16+
font-family: CSSTest;
17+
src: url(/fonts/CSSTest/csstest-basic-regular.ttf);
18+
}
19+
.spacer {
20+
background: lightgray;
21+
block-size: 100px;
22+
}
23+
.target {
24+
font: 100px/1 CSSTest;
25+
margin-block-start: 0.5em;
26+
}
27+
canvas {
28+
background: green;
29+
vertical-align: text-bottom;
30+
}
31+
.inner {
32+
background: orange;
33+
}
34+
</style>
35+
<div class="spacer"></div>
36+
<div class="target">
37+
<span class="inner">Test</span><canvas width="50" height="50"></canvas>
38+
</div>
39+
<div class="spacer"></div>

‎css/css-inline/text-box-trim/text-box-trim-end-003.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<title>Test `text-box: trim-end text` selects correct text-under baseline</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge">
4+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
5+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#typedef-text-edge">
6+
<link rel="match" href="text-box-trim-end-003-ref.html">
7+
<meta charset="utf-8">
8+
<style>
9+
@font-face {
10+
/**
11+
* CSSTest font has non-zero internal leading (max ascent + max descent is
12+
* greater than the em-size). Trimming to the `text` edge should only trim
13+
* external leading (from the line-height) and not a font's internal leading.
14+
*
15+
* https://drafts.csswg.org/css-inline-3/#typedef-text-edge
16+
*/
17+
font-family: CSSTest;
18+
src: url(/fonts/CSSTest/csstest-basic-regular.ttf);
19+
}
20+
.spacer {
21+
background: lightgray;
22+
block-size: 100px;
23+
}
24+
.target {
25+
font: 100px/2 CSSTest;
26+
text-box: trim-end text;
27+
}
28+
canvas {
29+
background: green;
30+
vertical-align: text-bottom;
31+
}
32+
.inner {
33+
background: orange;
34+
}
35+
</style>
36+
<div class="spacer"></div>
37+
<div class="target">
38+
<span class="inner">Test</span><canvas width="50" height="50"></canvas>
39+
</div>
40+
<div class="spacer"></div>

‎css/css-inline/text-box-trim/text-box-trim-start-002-ref.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<title>Test `text-box: trim-start text` selects correct text-over baseline</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge">
4+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
5+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#typedef-text-edge">
6+
<meta charset="utf-8">
7+
<style>
8+
@font-face {
9+
/**
10+
* CSSTest font has non-zero internal leading (max ascent + max descent is
11+
* greater than the em-size). Trimming to the `text` edge should only trim
12+
* external leading (from the line-height) and not a font's internal leading.
13+
*
14+
* https://drafts.csswg.org/css-inline-3/#typedef-text-edge
15+
*/
16+
font-family: CSSTest;
17+
src: url(/fonts/CSSTest/csstest-basic-regular.ttf);
18+
}
19+
.spacer {
20+
background: lightgray;
21+
block-size: 100px;
22+
}
23+
.target {
24+
font: 100px/1 CSSTest;
25+
margin-block-end: 0.5em;
26+
}
27+
canvas {
28+
background: green;
29+
vertical-align: text-top;
30+
}
31+
.inner {
32+
background: orange;
33+
}
34+
</style>
35+
<div class="spacer"></div>
36+
<div class="target">
37+
<canvas class="text-top" width="50" height="50"></canvas><span class="inner">Test</span>
38+
</div>
39+
<div class="spacer"></div>

‎css/css-inline/text-box-trim/text-box-trim-start-002.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<title>Test `text-box: trim-start text` selects correct text-over baseline</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge">
4+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
5+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#typedef-text-edge">
6+
<link rel="match" href="text-box-trim-start-002-ref.html">
7+
<meta charset="utf-8">
8+
<style>
9+
@font-face {
10+
/**
11+
* CSSTest font has non-zero internal leading (max ascent + max descent is
12+
* greater than the em-size). Trimming to the `text` edge should only trim
13+
* external leading (from the line-height) and not a font's internal leading.
14+
*
15+
* https://drafts.csswg.org/css-inline-3/#typedef-text-edge
16+
*/
17+
font-family: CSSTest;
18+
src: url(/fonts/CSSTest/csstest-basic-regular.ttf);
19+
}
20+
.spacer {
21+
background: lightgray;
22+
block-size: 100px;
23+
}
24+
.target {
25+
font: 100px/2 CSSTest;
26+
text-box: trim-start text;
27+
}
28+
canvas {
29+
background: green;
30+
vertical-align: text-top;
31+
}
32+
.inner {
33+
background: orange;
34+
}
35+
</style>
36+
<div class="spacer"></div>
37+
<div class="target">
38+
<canvas width="50" height="50"></canvas><span class="inner">Test</span>
39+
</div>
40+
<div class="spacer"></div>

0 commit comments

Comments
 (0)