Skip to content

Commit

Permalink
Let table-cell vertical alignment push block-frag'd OOFs correctly.
Browse files Browse the repository at this point in the history 
We were updating the static position instead of the offset of the actual
containing blocks.

(cherry picked from commit b50b5de)

Bug: 1395836
Change-Id: Ia9f6039caf142188d7fd62fc23b1185b272a0bde
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4189113
Reviewed-by: Alison Maher <almaher@microsoft.com>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Original-Commit-Position: refs/heads/main@{#1096421}
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4198256
Bot-Commit: Rubber Stamper <rubber-stamper@appspot.gserviceaccount.com>
Auto-Submit: Morten Stenshorne <mstensho@chromium.org>
Commit-Queue: Rubber Stamper <rubber-stamper@appspot.gserviceaccount.com>
Cr-Commit-Position: refs/branch-heads/5481@{#697}
Cr-Branched-From: 130f3e4-refs/heads/main@{#1084008}
  • Loading branch information
@mstensho
mstensho authored and Chromium LUCI CQ committed Jan 27, 2023
1 parent 18b83f6 commit 241fffc
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 2 deletions.
10 changes: 8 additions & 2 deletions third_party/blink/renderer/core/layout/ng/ng_box_fragment_builder.cc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,8 +373,14 @@ void NGBoxFragmentBuilder::MoveChildrenInBlockDirection(LayoutUnit delta) {

for (auto& candidate : oof_positioned_candidates_)
candidate.static_position.offset.block_offset += delta;
for (auto& descendant : oof_positioned_fragmentainer_descendants_)
descendant.static_position.offset.block_offset += delta;
for (auto& descendant : oof_positioned_fragmentainer_descendants_) {
// If we have already returned past (above) the containing block of the OOF
// (but not all the way the outermost fragmentainer), the containing block
// is affected by this shift that we just decided to make. This shift wasn't
// known at the time of normal propagation. So shift accordingly now.
descendant.containing_block.IncreaseBlockOffset(delta);
descendant.fixedpos_containing_block.IncreaseBlockOffset(delta);
}

if (NGFragmentItemsBuilder* items_builder = ItemsBuilder())
items_builder->MoveChildrenInBlockDirection(delta);
Expand Down
20 changes: 20 additions & 0 deletions ...arty/blink/web_tests/external/wpt/css/css-break/table/oof-in-cell-with-alignment-001.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1395836">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:2; column-fill:auto; height:200px;">
<div style="display:table;">
<div style="display:table-cell; vertical-align:bottom;">
<div style="position:relative; width:50px; height:50px; background:red;">
<div style="position:absolute; top:0; left:0; width:50px; height:50px; background:green;"></div>
</div>
</div>
<div style="display:table-cell;">
<div style="height:100px;">
<div style="width:100px; height:50px; margin-left:-50px; background:green;"></div>
<div style="width:50px; height:50px; background:green;"></div>
</div>
</div>
</div>
</div>
22 changes: 22 additions & 0 deletions ...arty/blink/web_tests/external/wpt/css/css-break/table/oof-in-cell-with-alignment-002.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1395836">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:2; column-fill:auto; height:200px;">
<div style="display:table;">
<div style="display:table-cell; vertical-align:bottom;">
<div style="will-change:transform; width:50px; height:50px; background:red;">
<div style="position:absolute;">
<div style="position:fixed; top:0; left:0; width:50px; height:50px; background:green;"></div>
</div>
</div>
</div>
<div style="display:table-cell;">
<div style="height:100px;">
<div style="width:100px; height:50px; margin-left:-50px; background:green;"></div>
<div style="width:50px; height:50px; background:green;"></div>
</div>
</div>
</div>
</div>
20 changes: 20 additions & 0 deletions ...arty/blink/web_tests/external/wpt/css/css-break/table/oof-in-cell-with-alignment-003.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1395836">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:2; column-fill:auto; height:200px;">
<div style="display:table;">
<div style="display:table-cell; vertical-align:bottom;">
<div style="position:relative; width:50px; height:50px; background:red;">
<div style="position:absolute; width:50px; height:50px; background:green;"></div>
</div>
</div>
<div style="display:table-cell;">
<div style="height:100px;">
<div style="width:100px; height:50px; margin-left:-50px; background:green;"></div>
<div style="width:50px; height:50px; background:green;"></div>
</div>
</div>
</div>
</div>
22 changes: 22 additions & 0 deletions ...arty/blink/web_tests/external/wpt/css/css-break/table/oof-in-cell-with-alignment-004.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1395836">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="display:table; width:100%;">
<div style="display:table-row;">
<div style="display:table-cell; height:150px;"></div>
</div>
<div style="display:table-row;">
<div style="display:table-cell; vertical-align:bottom;">
<div style="position:relative; width:50px; height:10px;">
<div style="position:absolute; bottom:0; width:50px; height:200px; background:green;"></div>
</div>
</div>
<div style="display:table-cell;">
<div style="height:50px;"></div>
</div>
</div>
</div>
</div>

0 comments on commit 241fffc

Please sign in to comment.