Changeset 270551 in webkit


Ignore:
Timestamp:
Dec 8, 2020 12:29:55 PM (20 months ago)
Author:
commit-queue@webkit.org
Message:

Support aspect-ratio on non-replaced elements
​https://bugs.webkit.org/show_bug.cgi?id=218794

Patch by Rob Buis <​rbuis@igalia.com> on 2020-12-08
Reviewed by Simon Fraser.

LayoutTests/imported/w3c:

Adapt test expectation.

  • web-platform-tests/css/css-sizing/aspect-ratio/quirks-mode-002-expected.txt:

Source/WebCore:

Compute logical width/height for non-replaced elements
taking aspect ratio into account. This is very basic
support and does not consider things like transferred min/max
block size.

  • rendering/RenderBox.cpp:

(WebCore::inlineSizeFromAspectRatio): Helper to compute inline size given box-sizing mode, margins/borders,
block size and logical aspect ratio.
(WebCore::RenderBox::computeLogicalWidthInFragment const):
(WebCore::blockSizeFromAspectRatio): Helper to compute block size given box-sizing mode, margins/borders,
inline size and logical aspect ratio.
(WebCore::RenderBox::computeLogicalHeight const):
(WebCore::RenderBox::shouldComputeLogicalHeightFromAspectRatio const):

  • rendering/RenderBox.h:
  • rendering/style/RenderStyle.h:

(WebCore::RenderStyle::logicalAspectRatio const): Return aspect ratio taking direction into account.
(WebCore::RenderStyle::hasAspectRatio const): Return true if aspect-ratio property has <ratio> set.

LayoutTests:

Unskip some tests that pass now.

Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r270550 r270551  
     12020-12-08  Rob Buis  <rbuis@igalia.com>
     2
     3        Support aspect-ratio on non-replaced elements
     4        https://bugs.webkit.org/show_bug.cgi?id=218794
     5
     6        Reviewed by Simon Fraser.
     7
     8        Unskip some tests that pass now.
     9
     10        * TestExpectations:
     11
    1122020-12-08  Yusuke Suzuki  <ysuzuki@apple.com>
    213

  • trunk/LayoutTests/TestExpectations

    r270324 r270551  
    32443244webkit.org/b/203514 imported/w3c/web-platform-tests/css/css-sizing/range-percent-intrinsic-size-2a.html [ ImageOnlyFailure ]
    32453245webkit.org/b/203515 imported/w3c/web-platform-tests/css/css-sizing/slice-intrinsic-size.html [ ImageOnlyFailure ]
    3246 webkit.org/b/203516 imported/w3c/web-platform-tests/css/css-sizing/whitespace-and-break.html [ ImageOnlyFailure ]
    32473246webkit.org/b/203583 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio-affects-container-width-when-height-changes.html [ Pass Failure ]
    32483247
    … …  
    44314430webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-011.html [ ImageOnlyFailure ]
    44324431webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-014.html [ ImageOnlyFailure ]
    4433 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/auto-margins-001.html [ ImageOnlyFailure ]
    4434 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-001.html [ ImageOnlyFailure ]
    4435 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-002.html [ ImageOnlyFailure ]
    4436 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-003.html [ ImageOnlyFailure ]
    4437 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-004.html [ ImageOnlyFailure ]
    4438 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-005.html [ ImageOnlyFailure ]
    4439 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-006.html [ ImageOnlyFailure ]
    4440 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-007.html [ ImageOnlyFailure ]
    4441 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-008.html [ ImageOnlyFailure ]
    4442 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-010.html [ ImageOnlyFailure ]
    4443 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-011.html [ ImageOnlyFailure ]
    4444 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-012.html [ ImageOnlyFailure ]
    4445 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-013.html [ ImageOnlyFailure ]
     4432webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-009.html [ ImageOnlyFailure ]
     4433webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-014.html [ ImageOnlyFailure ]
    44464434webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-015.html [ ImageOnlyFailure ]
    4447 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-016.html [ ImageOnlyFailure ]
    4448 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-018.html [ ImageOnlyFailure ]
    4449 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-019.html [ ImageOnlyFailure ]
     4435webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-017.html [ ImageOnlyFailure ]
    44504436webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-020.html [ ImageOnlyFailure ]
    44514437webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-021.html [ ImageOnlyFailure ]
    … …  
    44564442webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-027.html [ ImageOnlyFailure ]
    44574443webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-028.html [ ImageOnlyFailure ]
    4458 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-with-margin-collapsing-001.html [ ImageOnlyFailure ]
    4459 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-with-margin-collapsing-002.html [ ImageOnlyFailure ]
    44604444webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-001.html [ ImageOnlyFailure ]
    44614445webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-002.html [ ImageOnlyFailure ]
    4462 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-003.html [ ImageOnlyFailure ]
    44634446webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-004.html [ ImageOnlyFailure ]
    44644447webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-005.html [ ImageOnlyFailure ]
    4465 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-006.html [ ImageOnlyFailure ]
    4466 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-007.html [ ImageOnlyFailure ]
    4467 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-008.html [ ImageOnlyFailure ]
    44684448webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-009.html [ ImageOnlyFailure ]
    44694449webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-011.html [ ImageOnlyFailure ]
    … …  
    44764456webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-018.html [ ImageOnlyFailure ]
    44774457webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-019.html [ ImageOnlyFailure ]
    4478 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-020.html [ ImageOnlyFailure ]
    44794458webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-021.html [ ImageOnlyFailure ]
    44804459webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-022.html [ ImageOnlyFailure ]
    … …  
    44834462webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/intrinsic-size-001.html [ ImageOnlyFailure ]
    44844463webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/intrinsic-size-002.html [ ImageOnlyFailure ]
    4485 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/intrinsic-size-003.html [ ImageOnlyFailure ]
    44864464webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/intrinsic-size-004.html [ ImageOnlyFailure ]
    44874465webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/intrinsic-size-005.html [ ImageOnlyFailure ]
    … …  
    44914469webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/percentage-resolution-001.html [ ImageOnlyFailure ]
    44924470webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/percentage-resolution-002.html [ ImageOnlyFailure ]
    4493 webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/percentage-resolution-003.html [ ImageOnlyFailure ]
    44944471webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/percentage-resolution-004.html [ ImageOnlyFailure ]
    44954472webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-001.html [ ImageOnlyFailure ]

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r270486 r270551  
     12020-12-08  Rob Buis  <rbuis@igalia.com>
     2
     3        Support aspect-ratio on non-replaced elements
     4        https://bugs.webkit.org/show_bug.cgi?id=218794
     5
     6        Reviewed by Simon Fraser.
     7
     8        Adapt test expectation.
     9
     10        * web-platform-tests/css/css-sizing/aspect-ratio/quirks-mode-002-expected.txt:
     11
    1122020-12-06  Youenn Fablet  <youenn@apple.com>
    213

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/quirks-mode-002-expected.txt

    r269241 r270551  
    11
    2 FAIL body height equals width assert_equals: expected 784 but got 584
     2PASS body height equals width
    33

  • trunk/Source/WebCore/ChangeLog

    r270544 r270551  
     12020-12-08  Rob Buis  <rbuis@igalia.com>
     2
     3        Support aspect-ratio on non-replaced elements
     4        https://bugs.webkit.org/show_bug.cgi?id=218794
     5
     6        Reviewed by Simon Fraser.
     7
     8        Compute logical width/height for non-replaced elements
     9        taking aspect ratio into account. This is very basic
     10        support and does not consider things like transferred min/max
     11        block size.
     12
     13        * rendering/RenderBox.cpp:
     14        (WebCore::inlineSizeFromAspectRatio): Helper to compute inline size given box-sizing mode, margins/borders,
     15        block size and logical aspect ratio.
     16        (WebCore::RenderBox::computeLogicalWidthInFragment const):
     17        (WebCore::blockSizeFromAspectRatio): Helper to compute block size given box-sizing mode, margins/borders,
     18        inline size and logical aspect ratio.
     19        (WebCore::RenderBox::computeLogicalHeight const):
     20        (WebCore::RenderBox::shouldComputeLogicalHeightFromAspectRatio const):
     21        * rendering/RenderBox.h:
     22        * rendering/style/RenderStyle.h:
     23        (WebCore::RenderStyle::logicalAspectRatio const): Return aspect ratio taking direction into account.
     24        (WebCore::RenderStyle::hasAspectRatio const): Return true if aspect-ratio property has <ratio> set.
     25
    1262020-12-08  Antti Koivisto  <antti@apple.com>
    227

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

    r270220 r270551  
    24202420}
    24212421
     2422static LayoutUnit inlineSizeFromAspectRatio(LayoutUnit borderPaddingInlineSum, LayoutUnit borderPaddingBlockSum, double aspectRatio, BoxSizing boxSizing, LayoutUnit blockSize)
     2423{
     2424    if (boxSizing == BoxSizing::BorderBox)
     2425        return blockSize * LayoutUnit(aspectRatio);
     2426
     2427    return ((blockSize - borderPaddingBlockSum) * LayoutUnit(aspectRatio)) + borderPaddingInlineSum;
     2428}
     2429
    24222430void RenderBox::computeLogicalWidthInFragment(LogicalExtentComputedValues& computedValues, RenderFragmentContainer* fragment) const
    24232431{
    … …  
    24762484        containerWidthInInlineDirection = perpendicularContainingBlockLogicalHeight();
    24772485
     2486    Optional<LayoutUnit> logicalHeight;
     2487    if (style().hasAspectRatio() && style().logicalWidth().isAuto() && (style().logicalHeight().isFixed() || style().logicalHeight().isPercentOrCalculated()))
     2488        logicalHeight = computeLogicalHeightUsing(MainOrPreferredSize, style().logicalHeight(), { });
     2489
    24782490    // Width calculations
    2479     if (treatAsReplaced) {
     2491    if (logicalHeight) {
     2492        LayoutUnit logicalWidth = inlineSizeFromAspectRatio(horizontalBorderAndPaddingExtent(), verticalBorderAndPaddingExtent(), style().logicalAspectRatio(), style().boxSizing(), *logicalHeight);
     2493        computedValues.m_extent = constrainLogicalWidthInFragmentByMinMax(logicalWidth, containerWidthInInlineDirection, cb, fragment);
     2494    } else if (treatAsReplaced) {
    24802495        computedValues.m_extent = logicalWidthLength.value() + borderAndPaddingLogicalWidth();
    24812496    } else {
    … …  
    28032818}
    28042819
     2820static LayoutUnit blockSizeFromAspectRatio(LayoutUnit borderPaddingInlineSum, LayoutUnit borderPaddingBlockSum, double aspectRatio, BoxSizing boxSizing, LayoutUnit inlineSize)
     2821{
     2822    if (boxSizing == BoxSizing::BorderBox)
     2823        return inlineSize / LayoutUnit(aspectRatio);
     2824
     2825    return ((inlineSize - borderPaddingInlineSum) / LayoutUnit(aspectRatio)) + borderPaddingBlockSum;
     2826}
     2827
    28052828RenderBox::LogicalExtentComputedValues RenderBox::computeLogicalHeight(LayoutUnit logicalHeight, LayoutUnit logicalTop) const
    28062829{
    … …  
    28702893        if (checkMinMaxHeight) {
    28712894            LayoutUnit intrinsicHeight = computedValues.m_extent - borderAndPaddingLogicalHeight();
    2872             heightResult = computeLogicalHeightUsing(MainOrPreferredSize, style().logicalHeight(), intrinsicHeight).valueOr(computedValues.m_extent);
     2895            if (shouldComputeLogicalHeightFromAspectRatio())
     2896                heightResult = blockSizeFromAspectRatio(horizontalBorderAndPaddingExtent(), verticalBorderAndPaddingExtent(), style().logicalAspectRatio(), style().boxSizing(), logicalWidth());
     2897            else
     2898                heightResult = computeLogicalHeightUsing(MainOrPreferredSize, style().logicalHeight(), intrinsicHeight).valueOr(computedValues.m_extent);
    28732899            heightResult = constrainLogicalHeightByMinMax(heightResult, intrinsicHeight);
    28742900        } else {
    … …  
    49504976}
    49514977
     4978bool RenderBox::shouldComputeLogicalHeightFromAspectRatio() const
     4979{
     4980    if (!style().hasAspectRatio())
     4981        return false;
     4982
     4983    auto h = style().logicalHeight();
     4984    return h.isAuto() || (!isOutOfFlowPositioned() && h.isPercentOrCalculated() && percentageLogicalHeightIsResolvable());
     4985}
     4986
    49524987bool RenderBox::hasRelativeDimensions() const
    49534988{

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

    r270220 r270551  
    742742    void applyTopLeftLocationOffsetWithFlipping(LayoutPoint&) const;
    743743
     744    bool shouldComputeLogicalHeightFromAspectRatio() const;
     745
    744746private:
    745747    // The width/height of the contents + borders + padding.  The x/y location is relative to our container (which is not always our parent).

  • trunk/Source/WebCore/rendering/style/RenderStyle.h

    r270023 r270551  
    504504    double aspectRatioWidth() const { return m_rareNonInheritedData->aspectRatioWidth; }
    505505    double aspectRatioHeight() const { return m_rareNonInheritedData->aspectRatioHeight; }
     506    double logicalAspectRatio() const
     507    {
     508        ASSERT(aspectRatioType() != AspectRatioType::Auto);
     509        if (isHorizontalWritingMode())
     510            return aspectRatioWidth() / aspectRatioHeight();
     511        return aspectRatioHeight() / aspectRatioWidth();
     512    }
     513    bool hasAspectRatio() const { return aspectRatioType() == AspectRatioType::Ratio || aspectRatioType() == AspectRatioType::AutoAndRatio; }
    506514    BoxAlignment boxAlign() const { return static_cast<BoxAlignment>(m_rareNonInheritedData->deprecatedFlexibleBox->align); }
    507515    BoxDirection boxDirection() const { return static_cast<BoxDirection>(m_inheritedFlags.boxDirection); }
Note: See TracChangeset for help on using the changeset viewer.