-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[layout] Respect align-self/justify-self for abspos elements.
This fixes the bug that we weren't respecting align-self/justify-self for abspos elements with both insets set. Instead of just using the containing block "start" inset bias when both insets are set - look at the value of align-self/justify-self (see logic in GetAlignmentInsetBias). Tests are validating the following: - {align,justify}-self-*.html -> validates the correct position with different writing-mode combinations and *-self keywords. (Tests the complex logic in GetAlignmentInsetBias). - safe-{align,justify}-self-*.html -> validates the safe/unsafe behaviour with different writing-mode combinations, and "safe end". (Tests the clamping logic in ComputeInsets). - stretch-intrinsic-size-*.html -> validates the correct aspect-ratio handling for stretching one axes, and the size being reflexed in the opposite axis, with different writing-mode combinations. (Tests the logic in ComputeOof*Dimensions and the replaced logic in out_of_flow_layout_part.cc). - table-{align,justify}-self-stretch.html -> validates correct table stretching behaviour, and that tables still respect their implicit min-intrinsic size constraint. Placed behind blink flag: LayoutAlignForPositioned Bug: 226252 Change-Id: Ide7cc3cf0fa00d431c8ea1ca24192a5643f18310 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5086490 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1236432}
- Loading branch information
1 parent
7bec9b2
commit a1129b1
Showing
48 changed files
with
5,710 additions
and
0 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
<!DOCTYPE html> | ||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> | ||
<style> | ||
body { | ||
margin: 0; | ||
} | ||
|
||
.container { | ||
writing-mode: horizontal-tb; | ||
direction: ltr; | ||
display: inline-block; | ||
position: relative; | ||
margin: 20px; | ||
border: solid 4px; | ||
width: 40px; | ||
height: 40px; | ||
} | ||
|
||
.item { | ||
writing-mode: horizontal-tb; | ||
direction: ltr; | ||
position: absolute; | ||
background: green; | ||
inset: 0; | ||
} | ||
|
||
.item::before { | ||
width: 20px; | ||
height: 20px; | ||
content: ''; | ||
display: block; | ||
} | ||
|
||
.rtl { | ||
direction: rtl; | ||
} | ||
</style> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="/resources/check-layout-th.js"></script> | ||
|
||
<body onload="checkLayout('.item')"> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: self-start;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: self-end;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> | ||
</div> | ||
|
||
<!-- RTL --> | ||
<br> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: self-start;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: self-end;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> | ||
</div> | ||
|
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,110 @@ | ||
<!DOCTYPE html> | ||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> | ||
<style> | ||
body { | ||
margin: 0; | ||
} | ||
|
||
.container { | ||
writing-mode: horizontal-tb; | ||
direction: ltr; | ||
display: inline-block; | ||
position: relative; | ||
margin: 20px; | ||
border: solid 4px; | ||
width: 40px; | ||
height: 40px; | ||
} | ||
|
||
.item { | ||
writing-mode: vertical-lr; | ||
direction: ltr; | ||
position: absolute; | ||
background: green; | ||
inset: 0; | ||
} | ||
|
||
.item::before { | ||
width: 20px; | ||
height: 20px; | ||
content: ''; | ||
display: block; | ||
} | ||
|
||
.rtl { | ||
direction: rtl; | ||
} | ||
</style> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="/resources/check-layout-th.js"></script> | ||
|
||
<body onload="checkLayout('.item')"> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: self-start;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: self-end;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> | ||
</div> | ||
|
||
<!-- RTL --> | ||
<br> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: self-start;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: self-end;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> | ||
</div> | ||
|
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,110 @@ | ||
<!DOCTYPE html> | ||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> | ||
<style> | ||
body { | ||
margin: 0; | ||
} | ||
|
||
.container { | ||
writing-mode: horizontal-tb; | ||
direction: ltr; | ||
display: inline-block; | ||
position: relative; | ||
margin: 20px; | ||
border: solid 4px; | ||
width: 40px; | ||
height: 40px; | ||
} | ||
|
||
.item { | ||
writing-mode: vertical-rl; | ||
direction: ltr; | ||
position: absolute; | ||
background: green; | ||
inset: 0; | ||
} | ||
|
||
.item::before { | ||
width: 20px; | ||
height: 20px; | ||
content: ''; | ||
display: block; | ||
} | ||
|
||
.rtl { | ||
direction: rtl; | ||
} | ||
</style> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="/resources/check-layout-th.js"></script> | ||
|
||
<body onload="checkLayout('.item')"> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: self-start;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: self-end;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> | ||
</div> | ||
|
||
<!-- RTL --> | ||
<br> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: self-start;" data-expected-height="20" data-offset-y="20"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: self-end;" data-expected-height="20" data-offset-y="0"></div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="item rtl" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> | ||
</div> | ||
|
Oops, something went wrong.