Skip to content

Commit 8084258

Browse files
kbhomesmoz-wptsync-bot
kbhomes
authored and
moz-wptsync-bot
committed
Exclude border/padding when applying text-box-trim to inline boxes.
Differential Revision: https://phabricator.services.mozilla.com/D319661 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=2064596 gecko-commit: 8ab970302b57f2a50803457d241d6077f972fe90 gecko-commit-git: bec057ba804ef1beeb181accc925097cbb8a1360 gecko-reviewers: layout-reviewers, dshin
1 parent 7fe4e30 commit 8084258

6 files changed

Lines changed: 291 additions & 0 deletions

‎css/css-inline/text-box-trim/text-box-trim-inline-box-004-ref.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<title>Test of text-box-trim (trim-start) on inline boxes with border and padding</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+
<script src="support/variant-class.js"></script>
6+
<meta charset="utf-8">
7+
<meta name="variant" content="?class=auto">
8+
<meta name="variant" content="?class=text">
9+
<meta name="variant" content="?class=cap">
10+
<meta name="variant" content="?class=ex">
11+
<meta name="variant" content="?class=vrl,auto">
12+
<meta name="variant" content="?class=vrl,text">
13+
<meta name="variant" content="?class=vrl,cap">
14+
<meta name="variant" content="?class=vrl,ex">
15+
<meta name="variant" content="?class=vlr,auto">
16+
<meta name="variant" content="?class=vlr,text">
17+
<meta name="variant" content="?class=vlr,alphabetic">
18+
<link rel="stylesheet" href="/fonts/baseline-diagnostic/baseline-diagnostic-font.css">
19+
<style>
20+
.spacer {
21+
block-size: 100px;
22+
background: lightgray;
23+
}
24+
25+
.container {
26+
font: 100px/1 BaselineDiagnosticAlphabeticZero;
27+
position: relative;
28+
z-index: 0;
29+
}
30+
31+
.target {
32+
position: relative;
33+
}
34+
35+
.target::before {
36+
content: '';
37+
position: absolute;
38+
inset: 0;
39+
z-index: -1;
40+
background: green;
41+
margin-block: -40px;
42+
border-block: 20px solid orange;
43+
}
44+
45+
:root:not(.vrl, .vlr) .target::before { top: var(--block-start-inset, 0); }
46+
:root.vrl .target::before { right: var(--block-start-inset, 0); }
47+
:root.vlr .target::before { left: var(--block-start-inset, 0); }
48+
:root.vrl { writing-mode: vertical-rl; }
49+
:root.vlr { writing-mode: vertical-lr; }
50+
51+
.cap .target::before { --block-start-inset: calc(var(--baseline-diagnostic-alphabetic-zero-cap-height) * 1em); }
52+
.ex .target::before { --block-start-inset: calc(var(--baseline-diagnostic-alphabetic-zero-x-height) * 1em); }
53+
.vlr.alphabetic .target { --block-start-inset: calc((1 - var(--baseline-diagnostic-alphabetic-zero-alphabetic)) * 1em); }
54+
55+
</style>
56+
<div class="spacer"></div>
57+
<div class="container">
58+
<span class="target">█BxIF</span>
59+
</div>
60+
<div class="spacer"></div>

‎css/css-inline/text-box-trim/text-box-trim-inline-box-004.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<title>Test of text-box-trim (trim-start) on inline boxes with border and padding</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="match" href="text-box-trim-inline-box-004-ref.html">
6+
<script src="support/variant-class.js"></script>
7+
<meta charset="utf-8">
8+
<meta name="variant" content="?class=auto">
9+
<meta name="variant" content="?class=text">
10+
<meta name="variant" content="?class=cap">
11+
<meta name="variant" content="?class=ex">
12+
<meta name="variant" content="?class=vrl,auto">
13+
<meta name="variant" content="?class=vrl,text">
14+
<meta name="variant" content="?class=vrl,cap">
15+
<meta name="variant" content="?class=vrl,ex">
16+
<meta name="variant" content="?class=vlr,auto">
17+
<meta name="variant" content="?class=vlr,text">
18+
<meta name="variant" content="?class=vlr,alphabetic">
19+
<link rel="stylesheet" href="/fonts/baseline-diagnostic/baseline-diagnostic-font.css">
20+
<style>
21+
.spacer {
22+
block-size: 100px;
23+
background: lightgray;
24+
}
25+
26+
.container {
27+
font: 100px/1 BaselineDiagnosticAlphabeticZero;
28+
}
29+
30+
.target {
31+
padding-block: 20px;
32+
border-block: 20px solid orange;
33+
background: green;
34+
text-box-trim: trim-start;
35+
}
36+
37+
.vrl { writing-mode: vertical-rl; }
38+
.vlr { writing-mode: vertical-lr; }
39+
.auto .target { text-box-edge: auto; }
40+
.text .target { text-box-edge: text; }
41+
.cap .target { text-box-edge: cap text; }
42+
.ex .target { text-box-edge: ex text; }
43+
.vlr.alphabetic
44+
.target { text-box-edge: text alphabetic; }
45+
</style>
46+
<div class="spacer"></div>
47+
<div class="container">
48+
<span class="target">█BxIF</span>
49+
</div>
50+
<div class="spacer"></div>

‎css/css-inline/text-box-trim/text-box-trim-inline-box-005-ref.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<title>Test of text-box-trim (trim-end) on inline boxes with border and padding</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+
<script src="support/variant-class.js"></script>
6+
<meta charset="utf-8">
7+
<meta name="variant" content="?class=auto">
8+
<meta name="variant" content="?class=text">
9+
<meta name="variant" content="?class=alphabetic">
10+
<meta name="variant" content="?class=vrl,auto">
11+
<meta name="variant" content="?class=vrl,text">
12+
<meta name="variant" content="?class=vrl,alphabetic">
13+
<meta name="variant" content="?class=vlr,auto">
14+
<meta name="variant" content="?class=vlr,text">
15+
<meta name="variant" content="?class=vlr,cap">
16+
<meta name="variant" content="?class=vlr,ex">
17+
<link rel="stylesheet" href="/fonts/baseline-diagnostic/baseline-diagnostic-font.css">
18+
<style>
19+
.spacer {
20+
block-size: 100px;
21+
background: lightgray;
22+
}
23+
24+
.container {
25+
font: 100px/1 BaselineDiagnosticAlphabeticZero;
26+
position: relative;
27+
z-index: 0;
28+
}
29+
30+
.target {
31+
position: relative;
32+
}
33+
34+
.target::before {
35+
content: '';
36+
position: absolute;
37+
inset: 0;
38+
z-index: -1;
39+
background: green;
40+
margin-block: -40px;
41+
border-block: 20px solid orange;
42+
}
43+
44+
:root:not(.vrl, .vlr) .target::before { bottom: var(--block-end-inset, 0); }
45+
:root.vrl .target::before { left: var(--block-end-inset, 0); }
46+
:root.vlr .target::before { right: var(--block-end-inset, 0); }
47+
:root.vrl { writing-mode: vertical-rl; }
48+
:root.vlr { writing-mode: vertical-lr; }
49+
50+
.alphabetic .target::before { --block-end-inset: calc((1 - var(--baseline-diagnostic-alphabetic-zero-alphabetic)) * 1em); }
51+
.cap .target::before { --block-end-inset: calc(var(--baseline-diagnostic-alphabetic-zero-cap-height) * 1em); }
52+
.ex .target::before { --block-end-inset: calc(var(--baseline-diagnostic-alphabetic-zero-x-height) * 1em); }
53+
54+
</style>
55+
<div class="spacer"></div>
56+
<div class="container">
57+
<span class="target">█BxIF</span>
58+
</div>
59+
<div class="spacer"></div>

‎css/css-inline/text-box-trim/text-box-trim-inline-box-005.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<title>Test of text-box-trim (trim-end) on inline boxes with border and padding</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="match" href="text-box-trim-inline-box-005-ref.html">
6+
<script src="support/variant-class.js"></script>
7+
<meta charset="utf-8">
8+
<meta name="variant" content="?class=auto">
9+
<meta name="variant" content="?class=text">
10+
<meta name="variant" content="?class=alphabetic">
11+
<meta name="variant" content="?class=vrl,auto">
12+
<meta name="variant" content="?class=vrl,text">
13+
<meta name="variant" content="?class=vrl,alphabetic">
14+
<meta name="variant" content="?class=vlr,auto">
15+
<meta name="variant" content="?class=vlr,text">
16+
<meta name="variant" content="?class=vlr,cap">
17+
<meta name="variant" content="?class=vlr,ex">
18+
<link rel="stylesheet" href="/fonts/baseline-diagnostic/baseline-diagnostic-font.css">
19+
<style>
20+
.spacer {
21+
block-size: 100px;
22+
background: lightgray;
23+
}
24+
25+
.container {
26+
font: 100px/1 BaselineDiagnosticAlphabeticZero;
27+
}
28+
29+
.target {
30+
padding-block: 20px;
31+
border-block: 20px solid orange;
32+
background: green;
33+
text-box-trim: trim-end;
34+
}
35+
36+
.vrl { writing-mode: vertical-rl; }
37+
.vlr { writing-mode: vertical-lr; }
38+
.auto .target { text-box-edge: auto; }
39+
.text .target { text-box-edge: text; }
40+
.alphabetic .target { text-box-edge: text alphabetic; }
41+
.cap .target { text-box-edge: cap text; }
42+
.ex .target { text-box-edge: ex text; }
43+
</style>
44+
<div class="spacer"></div>
45+
<div class="container">
46+
<span class="target">█BxIF</span>
47+
</div>
48+
<div class="spacer"></div>

‎css/css-inline/text-box-trim/text-box-trim-inline-box-006-ref.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<title>Test of text-box-trim on fragmented inline boxes with border and padding</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+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="/fonts/baseline-diagnostic/baseline-diagnostic-font.css">
7+
<style>
8+
.spacer {
9+
block-size: 100px;
10+
background: lightgray;
11+
}
12+
13+
.container {
14+
font: 100px/1.5 BaselineDiagnosticAlphabeticZero;
15+
position: relative;
16+
z-index: 0;
17+
}
18+
19+
.target {
20+
position: relative;
21+
}
22+
23+
.target::before {
24+
content: '';
25+
position: absolute;
26+
top: calc(var(--baseline-diagnostic-alphabetic-zero-cap-height) * 1em);
27+
right: 0;
28+
bottom: calc((1 - var(--baseline-diagnostic-alphabetic-zero-alphabetic)) * 1em);
29+
left: 0;
30+
z-index: -1;
31+
background: green;
32+
margin-block: -40px;
33+
border-block: 20px solid orange;
34+
}
35+
</style>
36+
<div class="spacer"></div>
37+
<div class="container">
38+
<span class="target">█BxIF</span>
39+
<br>
40+
<span class="target">█BxIF</span>
41+
<br>
42+
<span class="target">█BxIF</span>
43+
</div>
44+
<div class="spacer"></div>

‎css/css-inline/text-box-trim/text-box-trim-inline-box-006.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<title>Test of text-box-trim on fragmented inline boxes with border and padding</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="match" href="text-box-trim-inline-box-006-ref.html">
6+
<meta charset="utf-8">
7+
<link rel="stylesheet" href="/fonts/baseline-diagnostic/baseline-diagnostic-font.css">
8+
<style>
9+
.spacer {
10+
block-size: 100px;
11+
background: lightgray;
12+
}
13+
14+
.container {
15+
font: 100px/1.5 BaselineDiagnosticAlphabeticZero;
16+
width: 5em;
17+
}
18+
19+
.target {
20+
padding-block: 20px;
21+
border-block: 20px solid orange;
22+
background: green;
23+
text-box: trim-both cap alphabetic;
24+
}
25+
</style>
26+
<div class="spacer"></div>
27+
<div class="container">
28+
<span class="target">█BxIF █BxIF █BxIF</span>
29+
</div>
30+
<div class="spacer"></div>

0 commit comments

Comments
 (0)