Changeset 273193 in webkit


Ignore:
Timestamp:
Feb 19, 2021 10:34:04 PM (3 years ago)
Author:
commit-queue@webkit.org
Message:

Support aspect-ratio on flexbox items
​https://bugs.webkit.org/show_bug.cgi?id=219679

Patch by Rob Buis <​rbuis@igalia.com> on 2021-02-19
Reviewed by Sergio Villar Senin.

Source/WebCore:

Support aspect-ratio on flexbox items by not only
considering implicit aspect-ratio in items (for example
images) but also through explicit aspect-ratio property
usage.

  • rendering/RenderBox.cpp:

(WebCore::RenderBox::cacheIntrinsicContentLogicalHeightForFlexItem const):
(WebCore::RenderBox::computeLogicalHeight const):
Do not pass indefinite intrinsic height.
(WebCore::RenderBox::shouldComputeLogicalWidthFromAspectRatio const):
If override height is set then we can compute logical width from it.

  • rendering/RenderFlexibleBox.cpp:

(WebCore::childHasAspectRatio):
(WebCore::RenderFlexibleBox::computeMainAxisExtentForChild):
(WebCore::RenderFlexibleBox::useChildAspectRatio const):
(WebCore::RenderFlexibleBox::computeMainSizeFromAspectRatioUsing const):
(WebCore::RenderFlexibleBox::childCrossSizeShouldUseContainerCrossSize const):
(WebCore::RenderFlexibleBox::needToStretchChildLogicalHeight const):

LayoutTests:

Unskip tests that pass now.

Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r273182 r273193  
     12021-02-19  Rob Buis  <rbuis@igalia.com>
     2
     3        Support aspect-ratio on flexbox items
     4        https://bugs.webkit.org/show_bug.cgi?id=219679
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        Unskip tests that pass now.
     9
     10        * TestExpectations:
     11
    1122021-02-19  Robert Jenner  <jenner@apple.com>
    213

  • trunk/LayoutTests/TestExpectations

    r273072 r273193  
    45524552webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-024.html [ ImageOnlyFailure ]
    45534553webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-028.html [ ImageOnlyFailure ]
    4554 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-001.html [ ImageOnlyFailure ]
    4555 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-002.html [ ImageOnlyFailure ]
    4556 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-004.html [ ImageOnlyFailure ]
    4557 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-005.html [ ImageOnlyFailure ]
    4558 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-008.html [ ImageOnlyFailure ]
    45594554webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-009.html [ ImageOnlyFailure ]
    4560 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-011.html [ ImageOnlyFailure ]
    4561 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-012.html [ ImageOnlyFailure ]
    4562 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-014.html [ ImageOnlyFailure ]
    4563 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-015.html [ ImageOnlyFailure ]
    4564 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-016.html [ ImageOnlyFailure ]
    4565 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-017.html [ ImageOnlyFailure ]
    4566 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-018.html [ ImageOnlyFailure ]
    4567 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-019.html [ ImageOnlyFailure ]
     4555# flex-basis:content
    45684556webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-021.html [ ImageOnlyFailure ]
    45694557webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-022.html [ ImageOnlyFailure ]

  • trunk/Source/WebCore/ChangeLog

    r273192 r273193  
     12021-02-19  Rob Buis  <rbuis@igalia.com>
     2
     3        Support aspect-ratio on flexbox items
     4        https://bugs.webkit.org/show_bug.cgi?id=219679
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        Support aspect-ratio on flexbox items by not only
     9        considering implicit aspect-ratio in items (for example
     10        images) but also through explicit aspect-ratio property
     11        usage.
     12
     13        * rendering/RenderBox.cpp:
     14        (WebCore::RenderBox::cacheIntrinsicContentLogicalHeightForFlexItem const):
     15        (WebCore::RenderBox::computeLogicalHeight const):
     16        Do not pass indefinite intrinsic height.
     17        (WebCore::RenderBox::shouldComputeLogicalWidthFromAspectRatio const):
     18        If override height is set then we can compute logical width from it.
     19        * rendering/RenderFlexibleBox.cpp:
     20        (WebCore::childHasAspectRatio):
     21        (WebCore::RenderFlexibleBox::computeMainAxisExtentForChild):
     22        (WebCore::RenderFlexibleBox::useChildAspectRatio const):
     23        (WebCore::RenderFlexibleBox::computeMainSizeFromAspectRatioUsing const):
     24        (WebCore::RenderFlexibleBox::childCrossSizeShouldUseContainerCrossSize const):
     25        (WebCore::RenderFlexibleBox::needToStretchChildLogicalHeight const):
     26
    1272021-02-19  Devin Rousso  <drousso@apple.com>
    228

  • trunk/Source/WebCore/rendering/RenderBox.cpp

    r273073 r273193  
    28632863    // by any layout system using overrides like grid or flex. However this causes a never ending sequence of calls
    28642864    // between layoutBlock() <-> relayoutToAvoidWidows().
    2865     if (isFloatingOrOutOfFlowPositioned() || !parent() || !parent()->isFlexibleBox() || hasOverridingLogicalHeight())
     2865    if (isFloatingOrOutOfFlowPositioned() || !parent() || !parent()->isFlexibleBox() || hasOverridingLogicalHeight() || shouldComputeLogicalHeightFromAspectRatio())
    28662866        return;
    28672867    downcast<RenderFlexibleBox>(parent())->setCachedChildIntrinsicContentLogicalHeight(*this, height);
    … …  
    29442944        LayoutUnit heightResult;
    29452945        if (checkMinMaxHeight) {
    2946             LayoutUnit intrinsicHeight = computedValues.m_extent - borderAndPaddingLogicalHeight();
     2946            // Callers passing LayoutUnit::max() for logicalHeight means an indefinite height, so
     2947            // translate this to a nullopt intrinsic height for further logical height computations.
     2948            Optional<LayoutUnit> intrinsicHeight;
     2949            if (computedValues.m_extent != LayoutUnit::max())
     2950                intrinsicHeight = computedValues.m_extent - borderAndPaddingLogicalHeight();
    29472951            if (shouldComputeLogicalHeightFromAspectRatio())
    29482952                heightResult = blockSizeFromAspectRatio(horizontalBorderAndPaddingExtent(), verticalBorderAndPaddingExtent(), LayoutUnit(style().logicalAspectRatio()), style().boxSizingForAspectRatio(), logicalWidth());
    … …  
    51045108        return style().logicalHeight().isPercentOrCalculated() && (isOutOfFlowPositioned() || percentageLogicalHeightIsResolvable());
    51055109    };
    5106     if (!shouldComputeLogicalWidthFromAspectRatioAndInsets() && !style().logicalHeight().isFixed() && !isResolvablePercentageHeight())
     5110    if (!hasOverridingLogicalHeight() && !shouldComputeLogicalWidthFromAspectRatioAndInsets() && !style().logicalHeight().isFixed() && !isResolvablePercentageHeight())
    51075111        return false;
    51085112

  • trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

    r273072 r273193  
    545545}
    546546
     547static bool childHasAspectRatio(const RenderBox& child)
     548{
     549    return child.hasAspectRatio() || child.style().hasAspectRatio();
     550}
     551
    547552Optional<LayoutUnit> RenderFlexibleBox::computeMainAxisExtentForChild(const RenderBox& child, SizeType sizeType, const Length& size)
    548553{
    … …  
    571576    // that here. (Compare code in LayoutBlock::computePreferredLogicalWidths)
    572577    LayoutUnit borderAndPadding = child.borderAndPaddingLogicalWidth();
    573     if (child.style().logicalWidth().isAuto() && !child.hasAspectRatio()) {
     578    if (child.style().logicalWidth().isAuto() && !childHasAspectRatio(child)) {
    574579        if (size.isMinContent())
    575580            return child.minPreferredLogicalWidth() - borderAndPadding;
    … …  
    741746bool RenderFlexibleBox::useChildAspectRatio(const RenderBox& child) const
    742747{
    743     if (!child.hasAspectRatio())
     748    if (!childHasAspectRatio(child))
    744749        return false;
    745     if (!child.intrinsicSize().height()) {
     750    if (!child.intrinsicSize().height() && !child.style().hasAspectRatio()) {
    746751        // We can't compute a ratio in this case.
    747752        return false;
    … …  
    753758LayoutUnit RenderFlexibleBox::computeMainSizeFromAspectRatioUsing(const RenderBox& child, Length crossSizeLength) const
    754759{
    755     ASSERT(child.hasAspectRatio());
    756     ASSERT(child.intrinsicSize().height());
     760    ASSERT(childHasAspectRatio(child));
    757761
    758762    auto adjustForBoxSizing = [this] (const RenderBox& box, Length length) -> LayoutUnit {
    … …  
    784788
    785789    const LayoutSize& childIntrinsicSize = child.intrinsicSize();
    786     double ratio = childIntrinsicSize.width().toFloat() / childIntrinsicSize.height().toFloat();
     790    double ratio;
     791    if (child.style().aspectRatioType() == AspectRatioType::Ratio || (child.style().aspectRatioType() == AspectRatioType::AutoAndRatio && childIntrinsicSize.isEmpty()))
     792        ratio = child.style().aspectRatioWidth() / child.style().aspectRatioHeight();
     793    else {
     794        ASSERT(childIntrinsicSize.height());
     795        ratio = childIntrinsicSize.width().toFloat() / childIntrinsicSize.height().toFloat();
     796    }
    787797    if (isHorizontalFlow())
    788798        return LayoutUnit(crossSize.value() * ratio);
    … …  
    826836bool RenderFlexibleBox::childCrossSizeShouldUseContainerCrossSize(const RenderBox& child) const
    827837{
    828     if (!child.hasAspectRatio() || !child.intrinsicSize().height())
     838    if (!childHasAspectRatio(child) || !child.intrinsicSize().height())
    829839        return false;
    830840
    … …  
    15921602
    15931603    // Aspect ratio is properly handled by RenderReplaced during layout.
    1594     if (child.isRenderReplaced() && child.hasAspectRatio())
     1604    if (child.isRenderReplaced() && childHasAspectRatio(child))
    15951605        return false;
    15961606
Note: See TracChangeset for help on using the changeset viewer.