Skip to content

Commit f857cad

Browse files
dholbertmoz-wptsync-bot
dholbert
authored and
moz-wptsync-bot
committed
Properly handle case where inline axis is bottom-to-top when drawing fragmented borders.
This is in our code that decides which border sides to skip, for fragmented borders. We start with a logical side (e.g. IEnd to skip painting the inline-end border for a fragmented span), and we convert that to a physical side that our painting code can use. Before this patch, our code simplistically assumed that the inline-start is always the top for a vertical writing-mode, and inline-end is always the bottom; but that's not true, because sideways-lr has the inline-end side at the top (and so do the other writing modes, if we apply `direction: rtl` to explicitly flip their inline axis). This patch makes us use `IsInlineReversed` (which specifically tells us whether the inline axis runs counter to the physical axis) when deciding whether the vertical inline-{start,end} sides are the bottom or the top. Differential Revision: https://phabricator.services.mozilla.com/D312394 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=2054354 gecko-commit: 08da267d7b15e95a7434aa33753183712018c057 gecko-commit-git: 06b6d4fe57bd161314fc512f0c7add9e035872ad gecko-reviewers: layout-reviewers, TYLin
1 parent 8b12d3c commit f857cad

2 files changed

Lines changed: 167 additions & 0 deletions

File tree

‎css/css-writing-modes/border-slice-001-ref.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Reference
4+
</title>
5+
<meta charset="utf-8">
6+
<meta name="flags" content="ahem">
7+
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
8+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
9+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
10+
<style>
11+
:root { font: 20px/2 Ahem; }
12+
.wrapper {
13+
border: 1px solid gray;
14+
display: inline-block;
15+
}
16+
span {
17+
border: 5px solid fuchsia;
18+
}
19+
.vlr > .wrapper {
20+
writing-mode: vertical-lr;
21+
}
22+
.vrl > .wrapper {
23+
writing-mode: vertical-rl;
24+
}
25+
.slr > .wrapper {
26+
writing-mode: sideways-lr;
27+
}
28+
.srl > .wrapper {
29+
writing-mode: sideways-rl;
30+
}
31+
.rtl {
32+
direction: rtl;
33+
}
34+
.group { margin-bottom: 10px; }
35+
.slice-top { border-top-style: none; }
36+
.slice-right { border-right-style: none; }
37+
.slice-bottom { border-bottom-style: none; }
38+
.slice-left { border-left-style: none; }
39+
</style>
40+
<div class="group">
41+
<div class="wrapper">
42+
<span class="slice-right">A</span><br>
43+
<span class="slice-left">B</span>
44+
</div>
45+
<div class="wrapper">
46+
<span class="slice-left">A</span><br>
47+
<span class="slice-right">B</span>
48+
</div>
49+
</div>
50+
<div class="group vlr">
51+
<div class="wrapper">
52+
<span class="slice-bottom">A</span><br>
53+
<span class="slice-top">B</span>
54+
</div>
55+
<div class="wrapper">
56+
<span class="slice-top">A</span><br>
57+
<span class="slice-bottom">B</span>
58+
</div>
59+
</div>
60+
<div class="group vrl">
61+
<div class="wrapper">
62+
<span class="slice-bottom">A</span><br>
63+
<span class="slice-top">B</span>
64+
</div>
65+
<div class="wrapper">
66+
<span class="slice-top">A</span><br>
67+
<span class="slice-bottom">B</span>
68+
</div>
69+
</div>
70+
<div class="group slr">
71+
<div class="wrapper">
72+
<span class="slice-top">A</span><br>
73+
<span class="slice-bottom">B</span>
74+
</div>
75+
<div class="wrapper">
76+
<span class="slice-bottom">A</span><br>
77+
<span class="slice-top">B</span>
78+
</div>
79+
</div>
80+
<div class="group srl">
81+
<div class="wrapper">
82+
<span class="slice-bottom">A</span><br>
83+
<span class="slice-top">B</span>
84+
</div>
85+
<div class="wrapper">
86+
<span class="slice-top">A</span><br>
87+
<span class="slice-bottom">B</span>
88+
</div>
89+
</div>

‎css/css-writing-modes/border-slice-001.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Test: fragmented span's border should be sliced at correct logical edges
4+
</title>
5+
<meta charset="utf-8">
6+
<meta name="flags" content="ahem">
7+
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
8+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
9+
<link rel="help" href="https://drafts.csswg.org/css-break-4/#valdef-box-decoration-break-slice">
10+
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#bidi-box-model">
11+
<link rel="match" href="border-slice-001-ref.html">
12+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
13+
<style>
14+
:root { font: 20px/2 Ahem; }
15+
.wrapper {
16+
border: 1px solid gray;
17+
display: inline-block;
18+
}
19+
span {
20+
border: 5px solid fuchsia;
21+
}
22+
.vlr > .wrapper {
23+
writing-mode: vertical-lr;
24+
}
25+
.vrl > .wrapper {
26+
writing-mode: vertical-rl;
27+
}
28+
.slr > .wrapper {
29+
writing-mode: sideways-lr;
30+
}
31+
.srl > .wrapper {
32+
writing-mode: sideways-rl;
33+
}
34+
.rtl {
35+
direction: rtl;
36+
}
37+
.group { margin-bottom: 10px; }
38+
</style>
39+
<div class="group">
40+
<div class="wrapper">
41+
<span>A<br>B</span>
42+
</div>
43+
<div class="wrapper rtl">
44+
<span>A<br>B</span>
45+
</div>
46+
</div>
47+
<div class="group vlr">
48+
<div class="wrapper">
49+
<span>A<br>B</span>
50+
</div>
51+
<div class="wrapper rtl">
52+
<span>A<br>B</span>
53+
</div>
54+
</div>
55+
<div class="group vrl">
56+
<div class="wrapper">
57+
<span>A<br>B</span>
58+
</div>
59+
<div class="wrapper rtl">
60+
<span>A<br>B</span>
61+
</div>
62+
</div>
63+
<div class="group slr">
64+
<div class="wrapper">
65+
<span>A<br>B</span>
66+
</div>
67+
<div class="wrapper rtl">
68+
<span>A<br>B</span>
69+
</div>
70+
</div>
71+
<div class="group srl">
72+
<div class="wrapper">
73+
<span>A<br>B</span>
74+
</div>
75+
<div class="wrapper rtl">
76+
<span>A<br>B</span>
77+
</div>
78+
</div>

0 commit comments

Comments
 (0)