Skip to content

Commit a7ca49d

Browse files
bfgeekchromium-wpt-export-bot
bfgeek
authored and
chromium-wpt-export-bot
committed
[last-baseline] Clamp first/last baselines to border-box...
... if in a scroll container. See: w3c/csswg-drafts#7660 Effectively if we are in a scroll container (overflow:hidden or overflow:scroll) clamp the baselines to the border-box edges. Bug: 885175 Change-Id: I9c53e736fa156c5239384a5d11154a27643a6ac8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3925659 Commit-Queue: Ian Kilpatrick <[email protected]> Reviewed-by: David Grogan <[email protected]> Cr-Commit-Position: refs/heads/main@{#1054237}
1 parent 39cab52 commit a7ca49d

6 files changed

+547
-0
lines changed

‎css/css-flexbox/alignment/flex-align-baseline-overflow-001.html

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
3+
<style>
4+
.target {
5+
display: flex;
6+
position: relative;
7+
line-height: 0;
8+
font-size: 20px;
9+
inline-size: 300px;
10+
margin-block: 10px;
11+
padding: 10px;
12+
border: solid 3px;
13+
}
14+
15+
.inner {
16+
overflow: hidden;
17+
inline-size: 100px;
18+
block-size: 80px;
19+
margin: 10px;
20+
border: solid 5px;
21+
padding: 10px;
22+
font-size: 30px;
23+
}
24+
25+
span {
26+
display: inline-block;
27+
width: 1em;
28+
height: 1em;
29+
outline: solid cyan 3px;
30+
outline-offset: -3px;
31+
}
32+
</style>
33+
<script src="/resources/testharness.js"></script>
34+
<script src="/resources/testharnessreport.js"></script>
35+
<script src="/resources/check-layout-th.js"></script>
36+
<body onload="checkLayout('.target > *')">
37+
38+
<div class="target" style="align-items: first baseline;">
39+
<div data-offset-y="45"><span></span><br><span></span></div>
40+
<div class="inner" data-offset-y="20">
41+
<div>
42+
<span></span><br><span></span>
43+
</div>
44+
</div>
45+
</div>
46+
47+
<div class="target" style="align-items: last baseline;">
48+
<div data-offset-y="55"><span></span><br><span></span></div>
49+
<div class="inner" data-offset-y="20">
50+
<div>
51+
<span></span><br><span></span>
52+
</div>
53+
</div>
54+
</div>
55+
56+
<div class="target" style="align-items: first baseline;">
57+
<div data-offset-y="10"><span></span><br><span></span></div>
58+
<div class="inner" data-offset-y="30">
59+
<div style="margin-block-start: -200px;">
60+
<span></span><br><span></span>
61+
</div>
62+
</div>
63+
</div>
64+
65+
<div class="target" style="align-items: last baseline;">
66+
<div data-offset-y="10"><span></span><br><span></span></div>
67+
<div class="inner" data-offset-y="50">
68+
<div style="margin-block-start: -200px;">
69+
<span></span><br><span></span>
70+
</div>
71+
</div>
72+
</div>
73+
74+
<div class="target" style="align-items: first baseline;">
75+
<div data-offset-y="110"><span></span><br><span></span></div>
76+
<div class="inner" data-offset-y="20">
77+
<div style="margin-block-start: 200px;">
78+
<span></span><br><span></span>
79+
</div>
80+
</div>
81+
</div>
82+
83+
<div class="target" style="align-items: last baseline;">
84+
<div data-offset-y="90"><span></span><br><span></span></div>
85+
<div class="inner" data-offset-y="20">
86+
<div style="margin-block-start: 200px;">
87+
<span></span><br><span></span>
88+
</div>
89+
</div>
90+
</div>

‎css/css-flexbox/alignment/flex-align-baseline-overflow-002.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
3+
<style>
4+
.target {
5+
display: flex;
6+
position: relative;
7+
line-height: 0;
8+
font-size: 20px;
9+
inline-size: 300px;
10+
margin-block: 10px;
11+
padding: 10px;
12+
border: solid 3px;
13+
writing-mode: vertical-rl;
14+
}
15+
16+
.inner {
17+
overflow: hidden;
18+
inline-size: 100px;
19+
block-size: 80px;
20+
margin: 10px;
21+
border: solid 5px;
22+
padding: 10px;
23+
font-size: 30px;
24+
}
25+
26+
span {
27+
display: inline-block;
28+
width: 1em;
29+
height: 1em;
30+
outline: solid cyan 3px;
31+
outline-offset: -3px;
32+
}
33+
</style>
34+
<script src="/resources/testharness.js"></script>
35+
<script src="/resources/testharnessreport.js"></script>
36+
<script src="/resources/check-layout-th.js"></script>
37+
<body onload="checkLayout('.target > *')">
38+
39+
<div class="target" style="align-items: first baseline;">
40+
<div data-offset-x="70"><span></span><br><span></span></div>
41+
<div class="inner" data-offset-x="20">
42+
<div>
43+
<span></span><br><span></span>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<div class="target" style="align-items: last baseline;">
49+
<div data-offset-x="60"><span></span><br><span></span></div>
50+
<div class="inner" data-offset-x="20">
51+
<div>
52+
<span></span><br><span></span>
53+
</div>
54+
</div>
55+
</div>
56+
57+
<div class="target" style="align-items: first baseline;">
58+
<div data-offset-x="100"><span></span><br><span></span></div>
59+
<div class="inner" data-offset-x="20">
60+
<div style="margin-block-start: -200px;">
61+
<span></span><br><span></span>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<div class="target" style="align-items: last baseline;">
67+
<div data-offset-x="120"><span></span><br><span></span></div>
68+
<div class="inner" data-offset-x="20">
69+
<div style="margin-block-start: -200px;">
70+
<span></span><br><span></span>
71+
</div>
72+
</div>
73+
</div>
74+
75+
<div class="target" style="align-items: first baseline;">
76+
<div data-offset-x="10"><span></span><br><span></span></div>
77+
<div class="inner" data-offset-x="40">
78+
<div style="margin-block-start: 200px;">
79+
<span></span><br><span></span>
80+
</div>
81+
</div>
82+
</div>
83+
84+
<div class="target" style="align-items: last baseline;">
85+
<div data-offset-x="10"><span></span><br><span></span></div>
86+
<div class="inner" data-offset-x="20">
87+
<div style="margin-block-start: 200px;">
88+
<span></span><br><span></span>
89+
</div>
90+
</div>
91+
</div>

‎css/css-flexbox/alignment/flex-align-baseline-overflow-003.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
3+
<style>
4+
.target {
5+
display: flex;
6+
position: relative;
7+
line-height: 0;
8+
font-size: 20px;
9+
inline-size: 300px;
10+
margin-block: 10px;
11+
padding: 10px;
12+
border: solid 3px;
13+
writing-mode: vertical-lr;
14+
}
15+
16+
.inner {
17+
overflow: hidden;
18+
inline-size: 100px;
19+
block-size: 80px;
20+
margin: 10px;
21+
border: solid 5px;
22+
padding: 10px;
23+
font-size: 30px;
24+
}
25+
26+
span {
27+
display: inline-block;
28+
width: 1em;
29+
height: 1em;
30+
outline: solid cyan 3px;
31+
outline-offset: -3px;
32+
}
33+
</style>
34+
<script src="/resources/testharness.js"></script>
35+
<script src="/resources/testharnessreport.js"></script>
36+
<script src="/resources/check-layout-th.js"></script>
37+
<body onload="checkLayout('.target > *')">
38+
39+
<div class="target" style="align-items: first baseline;">
40+
<div data-offset-x="40"><span></span><br><span></span></div>
41+
<div class="inner" data-offset-x="20">
42+
<div>
43+
<span></span><br><span></span>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<div class="target" style="align-items: last baseline;">
49+
<div data-offset-x="50"><span></span><br><span></span></div>
50+
<div class="inner" data-offset-x="20">
51+
<div>
52+
<span></span><br><span></span>
53+
</div>
54+
</div>
55+
</div>
56+
57+
<div class="target" style="align-items: first baseline;">
58+
<div data-offset-x="10"><span></span><br><span></span></div>
59+
<div class="inner" data-offset-x="20">
60+
<div style="margin-block-start: -200px;">
61+
<span></span><br><span></span>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<div class="target" style="align-items: last baseline;">
67+
<div data-offset-x="10"><span></span><br><span></span></div>
68+
<div class="inner" data-offset-x="40">
69+
<div style="margin-block-start: -200px;">
70+
<span></span><br><span></span>
71+
</div>
72+
</div>
73+
</div>
74+
75+
<div class="target" style="align-items: first baseline;">
76+
<div data-offset-x="120"><span></span><br><span></span></div>
77+
<div class="inner" data-offset-x="20">
78+
<div style="margin-block-start: 200px;">
79+
<span></span><br><span></span>
80+
</div>
81+
</div>
82+
</div>
83+
84+
<div class="target" style="align-items: last baseline;">
85+
<div data-offset-x="100"><span></span><br><span></span></div>
86+
<div class="inner" data-offset-x="20">
87+
<div style="margin-block-start: 200px;">
88+
<span></span><br><span></span>
89+
</div>
90+
</div>
91+
</div>

‎css/css-grid/alignment/grid-align-baseline-overflow-001.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
3+
<style>
4+
.target {
5+
display: grid;
6+
grid-auto-flow: column;
7+
position: relative;
8+
line-height: 0;
9+
font-size: 20px;
10+
inline-size: 300px;
11+
margin-block: 10px;
12+
padding: 10px;
13+
border: solid 3px;
14+
}
15+
16+
.inner {
17+
overflow: hidden;
18+
inline-size: 100px;
19+
block-size: 80px;
20+
margin: 10px;
21+
border: solid 5px;
22+
padding: 10px;
23+
font-size: 30px;
24+
}
25+
26+
span {
27+
display: inline-block;
28+
width: 1em;
29+
height: 1em;
30+
outline: solid cyan 3px;
31+
outline-offset: -3px;
32+
}
33+
</style>
34+
<script src="/resources/testharness.js"></script>
35+
<script src="/resources/testharnessreport.js"></script>
36+
<script src="/resources/check-layout-th.js"></script>
37+
<body onload="checkLayout('.target > *')">
38+
39+
<div class="target" style="align-items: first baseline;">
40+
<div data-offset-y="45"><span></span><br><span></span></div>
41+
<div class="inner" data-offset-y="20">
42+
<div>
43+
<span></span><br><span></span>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<div class="target" style="align-items: last baseline;">
49+
<div data-offset-y="55"><span></span><br><span></span></div>
50+
<div class="inner" data-offset-y="20">
51+
<div>
52+
<span></span><br><span></span>
53+
</div>
54+
</div>
55+
</div>
56+
57+
<div class="target" style="align-items: first baseline;">
58+
<div data-offset-y="10"><span></span><br><span></span></div>
59+
<div class="inner" data-offset-y="30">
60+
<div style="margin-block-start: -200px;">
61+
<span></span><br><span></span>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<div class="target" style="align-items: last baseline;">
67+
<div data-offset-y="10"><span></span><br><span></span></div>
68+
<div class="inner" data-offset-y="50">
69+
<div style="margin-block-start: -200px;">
70+
<span></span><br><span></span>
71+
</div>
72+
</div>
73+
</div>
74+
75+
<div class="target" style="align-items: first baseline;">
76+
<div data-offset-y="110"><span></span><br><span></span></div>
77+
<div class="inner" data-offset-y="20">
78+
<div style="margin-block-start: 200px;">
79+
<span></span><br><span></span>
80+
</div>
81+
</div>
82+
</div>
83+
84+
<div class="target" style="align-items: last baseline;">
85+
<div data-offset-y="90"><span></span><br><span></span></div>
86+
<div class="inner" data-offset-y="20">
87+
<div style="margin-block-start: 200px;">
88+
<span></span><br><span></span>
89+
</div>
90+
</div>
91+
</div>

0 commit comments

Comments
 (0)