[css-flexbox] Use correct aspect ratio for min-size: auto

third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp

 /*
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 607 matching lines @@
 LayoutUnit LayoutFlexibleBox::crossAxisScrollbarExtentForChild(const LayoutBox& child) const
 {
     return isHorizontalFlow() ? child.horizontalScrollbarHeight() : child.verticalScrollbarWidth();
 }
 
 LayoutPoint LayoutFlexibleBox::flowAwareLocationForChild(const LayoutBox& child) const
 {
     return isHorizontalFlow() ? child.location() : child.location().transposedPoint();
 }
 
+bool LayoutFlexibleBox::useChildAspectRatio(const LayoutBox& child) const
+{
+    if (!child.isImage() && !child.isCanvas() && !child.isVideo())
+        return false;
+    if (child.intrinsicSize().height() == 0) {
+        // We can't compute a ratio in this case.
+        return false;
+    }
+    Length crossSize;
+    if (isHorizontalFlow())
+        crossSize = child.styleRef().height();

[leviw_travelin_and_unemployed, 2016/01/27 04:53:56]

Do we have tests for both these codepaths?

[cbiesinger, 2016/01/27 21:42:56]

Complicated question...

Short answer, yes, flex-minimum-{width,height}-flex-items-008.xht test the two
cases (here and below).

Long answer, we already passed the width version because of how we compute the
min-content logical width vs the height. The width takes the aspect ratio into
account, the height doesn't.

Your question made me realize that we have a bug in the contentSize calculation.
I've updated the code to fix that bug, and marked some tests as failing, and
added a test for that.

[leviw_travelin_and_unemployed, 2016/01/27 23:18:45]

Word :)

+    else
+        crossSize = child.styleRef().width();
+    return crossAxisLengthIsDefinite(child, crossSize);
+}
+
+LayoutUnit LayoutFlexibleBox::computeMainSizeFromAspectRatio(const LayoutBox& child, LayoutUnit crossSize) const
+{
+    ASSERT(useChildAspectRatio(child));
+    const LayoutSize& childIntrinsicSize = child.intrinsicSize();
+    double ratio = childIntrinsicSize.width().toFloat() / childIntrinsicSize.height().toFloat();
+    if (isHorizontalFlow())

[leviw_travelin_and_unemployed, 2016/01/27 04:53:56]

Ditto.

+        return crossSize * ratio;
+    return crossSize / ratio;
+}
+
 void LayoutFlexibleBox::setFlowAwareLocationForChild(LayoutBox& child, const LayoutPoint& location)
 {
     if (isHorizontalFlow())
         child.setLocationAndUpdateOverflowControlsIfNeeded(location);
     else
         child.setLocationAndUpdateOverflowControlsIfNeeded(location.transposedPoint());
 }
 
 LayoutUnit LayoutFlexibleBox::mainAxisBorderAndPaddingExtentForChild(const LayoutBox& child) const
 {
     return isHorizontalFlow() ? child.borderAndPaddingWidth() : child.borderAndPaddingHeight();
 }
 
 bool LayoutFlexibleBox::mainAxisLengthIsDefinite(const LayoutBox& child, const Length& flexBasis) const
 {
     if (flexBasis.isAuto())
         return false;
     if (flexBasis.hasPercent()) {
         return isColumnFlow() ?
             child.computePercentageLogicalHeight(flexBasis) != -1 :
             hasDefiniteLogicalWidth();
     }
     return true;
 }
 
+bool LayoutFlexibleBox::crossAxisLengthIsDefinite(const LayoutBox& child, const Length& length) const

[leviw_travelin_and_unemployed, 2016/01/27 04:53:56]

Damn, it's back :(

[cbiesinger, 2016/01/27 21:42:56]

Hm? What do you mean?

[leviw_travelin_and_unemployed, 2016/01/27 23:18:45]

Is this not a method that existed previously?

[cbiesinger, 2016/01/27 23:25:25]

I don't *believe* so but I'm actually not sure...

+{
+    if (length.isAuto())
+        return false;
+    if (length.hasPercent()) {
+        return hasOrthogonalFlow(child) ?
+            hasDefiniteLogicalWidth() :
+            child.computePercentageLogicalHeight(length) != -1;
+
+    }
+    return true;
+}
+
 bool LayoutFlexibleBox::childFlexBaseSizeRequiresLayout(const LayoutBox& child) const
 {
     return !mainAxisLengthIsDefinite(child, flexBasisForChild(child)) && (
         hasOrthogonalFlow(child) || crossAxisOverflowForChild(child) == OAUTO);
 }
 
 LayoutUnit LayoutFlexibleBox::computeInnerFlexBaseSizeForChild(LayoutBox& child, ChildLayoutType childLayoutType)
 {
     child.clearOverrideSize();
 
@@ skipping 253 matching lines @@
         // css-flexbox section 4.5
         LayoutUnit contentSize = computeMainAxisExtentForChild(child, MinSize, Length(MinContent));
         ASSERT(contentSize >= 0);
         if (maxExtent != -1 && contentSize > maxExtent)
             contentSize = maxExtent;
 
         Length mainSize = isHorizontalFlow() ? child.styleRef().width() : child.styleRef().height();
         if (mainAxisLengthIsDefinite(child, mainSize)) {
             LayoutUnit resolvedMainSize = computeMainAxisExtentForChild(child, MainOrPreferredSize, mainSize);
             ASSERT(resolvedMainSize >= 0);
+            // TODO(cbiesinger): For items with an aspect ratio, clamp this size through the converted cross-size min/max size. crbug.com/249112
             LayoutUnit specifiedSize = maxExtent != -1 ? std::min(resolvedMainSize, maxExtent) : resolvedMainSize;
 
             minExtent = std::min(specifiedSize, contentSize);
+        } else if (useChildAspectRatio(child)) {
+            Length crossSizeLength = isHorizontalFlow() ? child.styleRef().height() : child.styleRef().width();
+            LayoutUnit crossSize;
+            if (crossSizeLength.isFixed()) {
+                crossSize = crossSizeLength.value();
+            } else {
+                ASSERT(crossSizeLength.hasPercent());
+                crossSize = hasOrthogonalFlow(child) ?
+                    adjustBorderBoxLogicalWidthForBoxSizing(valueForLength(crossSizeLength, contentWidth())) :
+                    child.computePercentageLogicalHeight(crossSizeLength);
+            }
+            LayoutUnit transferredSize = computeMainSizeFromAspectRatio(child, crossSize);
+            minExtent = std::min(transferredSize, contentSize);
         } else {
             minExtent = contentSize;
         }
-        // TODO(cbiesinger): Implement aspect ratio handling (here, transferred size) - crbug.com/249112
     }
     ASSERT(minExtent >= 0);
     return std::max(childSize, minExtent);
 }
 
 bool LayoutFlexibleBox::computeNextFlexLine(OrderedFlexItemList& orderedChildren, LayoutUnit& sumFlexBaseSize, double& totalFlexGrow, double& totalFlexShrink, double& totalWeightedFlexShrink, LayoutUnit& sumHypotheticalMainSize, bool relayoutChildren)
 {
     orderedChildren.clear();
     sumFlexBaseSize = 0;
     totalFlexGrow = totalFlexShrink = totalWeightedFlexShrink = 0;
@@ skipping 224 matching lines @@
     // So the child will automatically stretch if our cross axis is the child's inline axis. That's the case if:
     // - We are horizontal and the child is in vertical writing mode
     // - We are vertical and the child is in horizontal writing mode
     // Otherwise, we need to stretch if the cross axis size is auto.
     if (alignmentForChild(child) != ItemPositionStretch)
         return false;
 
     if (isHorizontalFlow() != child.styleRef().isHorizontalWritingMode())
         return false;
 
+    // TODO(cbiesinger): what about indefinite percentage heights?
     return isHorizontalFlow() ? child.styleRef().height().isAuto() : child.styleRef().width().isAuto();
 }
 
 bool LayoutFlexibleBox::childHasIntrinsicMainAxisSize(const LayoutBox& child) const
 {
     bool result = false;
     if (isHorizontalFlow() != child.styleRef().isHorizontalWritingMode()) {
         Length childFlexBasis = flexBasisForChild(child);
         Length childMinSize = isHorizontalFlow() ? child.style()->minWidth() : child.style()->minHeight();
         Length childMaxSize = isHorizontalFlow() ? child.style()->maxWidth() : child.style()->maxHeight();
         if (childFlexBasis.isIntrinsic() || childMinSize.isIntrinsicOrAuto() || childMaxSize.isIntrinsic())
             result = true;
     }
     return result;
 }
 
 EOverflow LayoutFlexibleBox::mainAxisOverflowForChild(const LayoutBox& child) const
 {
     if (isHorizontalFlow())
         return child.styleRef().overflowX();
     return child.styleRef().overflowY();
 }
 
 EOverflow LayoutFlexibleBox::crossAxisOverflowForChild(const LayoutBox& child) const
 {
     if (isHorizontalFlow())
         return child.styleRef().overflowY();
     return child.styleRef().overflowX();
 }
+
 void LayoutFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList& children, const Vector<LayoutUnit, 16>& childSizes, LayoutUnit availableFreeSpace, bool relayoutChildren, SubtreeLayoutScope& layoutScope, Vector<LineContext>& lineContexts)
 {
     ASSERT(childSizes.size() == children.size());
 
     size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);
     LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace);
     LayoutUnit mainAxisOffset = flowAwareBorderStart() + flowAwarePaddingStart();
     mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, style()->justifyContentPosition(), style()->justifyContentDistribution(), numberOfChildrenForJustifyContent);
     if (style()->flexDirection() == FlowRowReverse)
         mainAxisOffset += isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();
@@ skipping 326 matching lines @@
             ASSERT(child);
             LayoutUnit lineCrossAxisExtent = lineContexts[lineNumber].crossAxisExtent;
             LayoutUnit originalOffset = lineContexts[lineNumber].crossAxisOffset - crossAxisStartEdge;
             LayoutUnit newOffset = contentExtent - originalOffset - lineCrossAxisExtent;
             adjustAlignmentForChild(*child, newOffset - originalOffset);
         }
     }
 }
 
 } // namespace blink