Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[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 <ikilpatrick@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/main@{#1054237}
- Loading branch information
Showing
15 changed files
with
569 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
90 changes: 90 additions & 0 deletions
90
...nk/web_tests/external/wpt/css/css-flexbox/alignment/flex-align-baseline-overflow-001.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
<!DOCTYPE html> | ||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660"> | ||
<style> | ||
.target { | ||
display: flex; | ||
position: relative; | ||
line-height: 0; | ||
font-size: 20px; | ||
inline-size: 300px; | ||
margin-block: 10px; | ||
padding: 10px; | ||
border: solid 3px; | ||
} | ||
|
||
.inner { | ||
overflow: hidden; | ||
inline-size: 100px; | ||
block-size: 80px; | ||
margin: 10px; | ||
border: solid 5px; | ||
padding: 10px; | ||
font-size: 30px; | ||
} | ||
|
||
span { | ||
display: inline-block; | ||
width: 1em; | ||
height: 1em; | ||
outline: solid cyan 3px; | ||
outline-offset: -3px; | ||
} | ||
</style> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="/resources/check-layout-th.js"></script> | ||
<body onload="checkLayout('.target > *')"> | ||
|
||
<div class="target" style="align-items: first baseline;"> | ||
<div data-offset-y="45"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-y="20"> | ||
<div> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: last baseline;"> | ||
<div data-offset-y="55"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-y="20"> | ||
<div> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: first baseline;"> | ||
<div data-offset-y="10"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-y="30"> | ||
<div style="margin-block-start: -200px;"> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: last baseline;"> | ||
<div data-offset-y="10"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-y="50"> | ||
<div style="margin-block-start: -200px;"> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: first baseline;"> | ||
<div data-offset-y="110"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-y="20"> | ||
<div style="margin-block-start: 200px;"> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: last baseline;"> | ||
<div data-offset-y="90"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-y="20"> | ||
<div style="margin-block-start: 200px;"> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> |
91 changes: 91 additions & 0 deletions
91
...nk/web_tests/external/wpt/css/css-flexbox/alignment/flex-align-baseline-overflow-002.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,91 @@ | ||
<!DOCTYPE html> | ||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660"> | ||
<style> | ||
.target { | ||
display: flex; | ||
position: relative; | ||
line-height: 0; | ||
font-size: 20px; | ||
inline-size: 300px; | ||
margin-block: 10px; | ||
padding: 10px; | ||
border: solid 3px; | ||
writing-mode: vertical-rl; | ||
} | ||
|
||
.inner { | ||
overflow: hidden; | ||
inline-size: 100px; | ||
block-size: 80px; | ||
margin: 10px; | ||
border: solid 5px; | ||
padding: 10px; | ||
font-size: 30px; | ||
} | ||
|
||
span { | ||
display: inline-block; | ||
width: 1em; | ||
height: 1em; | ||
outline: solid cyan 3px; | ||
outline-offset: -3px; | ||
} | ||
</style> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="/resources/check-layout-th.js"></script> | ||
<body onload="checkLayout('.target > *')"> | ||
|
||
<div class="target" style="align-items: first baseline;"> | ||
<div data-offset-x="70"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-x="20"> | ||
<div> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: last baseline;"> | ||
<div data-offset-x="60"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-x="20"> | ||
<div> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: first baseline;"> | ||
<div data-offset-x="100"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-x="20"> | ||
<div style="margin-block-start: -200px;"> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: last baseline;"> | ||
<div data-offset-x="120"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-x="20"> | ||
<div style="margin-block-start: -200px;"> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: first baseline;"> | ||
<div data-offset-x="10"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-x="40"> | ||
<div style="margin-block-start: 200px;"> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: last baseline;"> | ||
<div data-offset-x="10"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-x="20"> | ||
<div style="margin-block-start: 200px;"> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> |
91 changes: 91 additions & 0 deletions
91
...nk/web_tests/external/wpt/css/css-flexbox/alignment/flex-align-baseline-overflow-003.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,91 @@ | ||
<!DOCTYPE html> | ||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660"> | ||
<style> | ||
.target { | ||
display: flex; | ||
position: relative; | ||
line-height: 0; | ||
font-size: 20px; | ||
inline-size: 300px; | ||
margin-block: 10px; | ||
padding: 10px; | ||
border: solid 3px; | ||
writing-mode: vertical-lr; | ||
} | ||
|
||
.inner { | ||
overflow: hidden; | ||
inline-size: 100px; | ||
block-size: 80px; | ||
margin: 10px; | ||
border: solid 5px; | ||
padding: 10px; | ||
font-size: 30px; | ||
} | ||
|
||
span { | ||
display: inline-block; | ||
width: 1em; | ||
height: 1em; | ||
outline: solid cyan 3px; | ||
outline-offset: -3px; | ||
} | ||
</style> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="/resources/check-layout-th.js"></script> | ||
<body onload="checkLayout('.target > *')"> | ||
|
||
<div class="target" style="align-items: first baseline;"> | ||
<div data-offset-x="40"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-x="20"> | ||
<div> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: last baseline;"> | ||
<div data-offset-x="50"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-x="20"> | ||
<div> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: first baseline;"> | ||
<div data-offset-x="10"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-x="20"> | ||
<div style="margin-block-start: -200px;"> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: last baseline;"> | ||
<div data-offset-x="10"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-x="40"> | ||
<div style="margin-block-start: -200px;"> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: first baseline;"> | ||
<div data-offset-x="120"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-x="20"> | ||
<div style="margin-block-start: 200px;"> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="target" style="align-items: last baseline;"> | ||
<div data-offset-x="100"><span></span><br><span></span></div> | ||
<div class="inner" data-offset-x="20"> | ||
<div style="margin-block-start: 200px;"> | ||
<span></span><br><span></span> | ||
</div> | ||
</div> | ||
</div> |
Oops, something went wrong.