Skip to content

GitLab

T
tangled
Commit 8f3fc083 authored by Ian Kilpatrick's avatar Ian Kilpatrick Committed by Commit Bot
Browse files
Options

[LayoutNG] Fix anonymous-block child-available-size. 

The logic introduced for CalculateChildAvailableSize was designed to
have the correct value for an element with:
"<div style="position: relative; left: 50%; top: 50%;></div>"

E.g. the percentage based left/top would resolve against the available
size. However this broke text alignment within anonymous-blocks which
require the child-available-size to be based on the actual inline-size.

This patch uses the actual inline-size in the inline direction, but
keeps the logic for block direction.

This will mean that for postiion:relative calculations we'll use
the Percentage inline-size, and Available block-size for resolving
percentages.

Bug: 1100203
Change-Id: I83c5281c5de9f9fd40f1bfed54e627dff5bb0600
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2274359Reviewed-by: default avatarDavid Grogan <dgrogan@chromium.org>
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#784323}
parent b694ffed
Show whitespace changes
Inline Side-by-side
Showing with 26 additions and 2 deletions
third_party/blink/renderer/core/layout/ng/ng_length_utils.cc
View file @ 8f3fc083
...@@ -1127,10 +1127,13 @@ LogicalSize CalculateChildAvailableSize( ...@@ -1127,10 +1127,13 @@ LogicalSize CalculateChildAvailableSize(
const NGBlockNode& node, const NGBlockNode& node,
const LogicalSize border_box_size, const LogicalSize border_box_size,
const NGBoxStrut& border_scrollbar_padding) { const NGBoxStrut& border_scrollbar_padding) {
LogicalSize child_available_size =
ShrinkLogicalSize(border_box_size, border_scrollbar_padding);
if (space.IsAnonymous() || node.IsAnonymousBlock()) if (space.IsAnonymous() || node.IsAnonymousBlock())
return space.AvailableSize(); child_available_size.block_size = space.AvailableSize().block_size;
return ShrinkLogicalSize(border_box_size, border_scrollbar_padding); return child_available_size;
} }
namespace { namespace {
......
third_party/blink/web_tests/external/wpt/css/css-flexbox/align-items-009.html 0 → 100644
View file @ 8f3fc083
<!DOCTYPE html>
<link rel="help" href="https://crbug.com/1100203">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
#target {
font: 100px/1 'Ahem';
color: green;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 200px;
position: relative;
left: -50px;
}
</style>
<p>Test passes if there is a filled green square.</p>
<div id="target">X</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment