availableLogicalHeightUsing needs to take flexbox stretched heights into account

This function is used to calculate percentage positions for relative- positioned boxes in LayoutBoxModelObject::relativePositionOffset and thus needs to check childLogicalHeightForPercentageResolution. BUG=646397 R=eae@chromium.org,dgrogan@chromium.org Review-Url: https://codereview.chromium.org/2349803002 Cr-Commit-Position: refs/heads/master@{#419271}

availableLogicalHeightUsing needs to take flexbox stretched heights into account
This function is used to calculate percentage positions for relative- positioned boxes in LayoutBoxModelObject::relativePositionOffset and thus needs to check childLogicalHeightForPercentageResolution. BUG=646397 R=eae@chromium.org,dgrogan@chromium.org Review-Url: https://codereview.chromium.org/2349803002 Cr-Commit-Position: refs/heads/master@{#419271}
95c34ae1 · cbiesinger · Commit bot · 4aa87e1c · 95c34ae1 · 95c34ae1
Commit 95c34ae1 authored Sep 16, 2016 by cbiesinger Committed by Commit bot Sep 16, 2016
2 changed files
--- a/third_party/WebKit/LayoutTests/css3/flexbox/relpos-with-percentage-top.html
+++ b/third_party/WebKit/LayoutTests/css3/flexbox/relpos-with-percentage-top.html
+<!DOCTYPE html>
+<style>
+html, body {
+  margin: 0;
+}
+
+.border {
+  border:1px solid #000;
+}
+.width-50 {
+  width: 50%;
+}
+.flex {
+  display: flex;
+  flex-flow: row wrap;
+}
+.tall {
+  height: 300px;
+}
+.top-50 {
+  position: relative;
+  top: 50%;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.border')">
+<div class="border">
+  <div class="flex">
+    <div class="width-50">
+      <label class="top-50" data-offset-y="151">This should be in the center of the container</label>
+    </div>
+    <div class="width-50">
+      <div class="tall">
+        This is tall
+      </div>
+    </div>
+  </div>
+</div>
--- a/third_party/WebKit/Source/core/layout/LayoutBox.cpp
+++ b/third_party/WebKit/Source/core/layout/LayoutBox.cpp
@@ -3081,6 +3081,13 @@ LayoutUnit LayoutBox::availableLogicalHeightUsing(const Length& h, AvailableLogi
        return logicalHeight() - borderAndPaddingLogicalHeight();
    }

+    if (isFlexItem()) {
+        LayoutFlexibleBox& flexBox = toLayoutFlexibleBox(*parent());
+        LayoutUnit stretchedHeight = flexBox.childLogicalHeightForPercentageResolution(*this);
+        if (stretchedHeight != LayoutUnit(-1))
+            return stretchedHeight;
+    }
+
    if (h.isPercentOrCalc() && isOutOfFlowPositioned()) {
        // FIXME: This is wrong if the containingBlock has a perpendicular writing mode.
        LayoutUnit availableHeight = containingBlockLogicalHeightForPositioned(containingBlock());