[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: David Grogan <dgrogan@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#784323}

[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: David Grogan <dgrogan@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#784323}
8f3fc083 · Ian Kilpatrick · Commit Bot · b694ffed · 8f3fc083 · 8f3fc083
Commit 8f3fc083 authored Jul 01, 2020 by Ian Kilpatrick Committed by Commit Bot Jul 01, 2020
2 changed files
--- a/third_party/blink/renderer/core/layout/ng/ng_length_utils.cc
+++ b/third_party/blink/renderer/core/layout/ng/ng_length_utils.cc
@@ -1127,10 +1127,13 @@ LogicalSize CalculateChildAvailableSize(
    const NGBlockNode& node,
    const LogicalSize border_box_size,
    const NGBoxStrut& border_scrollbar_padding) {
+  LogicalSize child_available_size =
+      ShrinkLogicalSize(border_box_size, border_scrollbar_padding);
+
  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 {

--- a/third_party/blink/web_tests/external/wpt/css/css-flexbox/align-items-009.html
+++ b/third_party/blink/web_tests/external/wpt/css/css-flexbox/align-items-009.html
+<!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>