Skip to content
Permalink
Browse files
Support aspect-ratio on replaced elements
https://bugs.webkit.org/show_bug.cgi?id=219200

Patch by Rob Buis <rbuis@igalia.com> on 2020-12-10
Reviewed by Darin Adler.

Source/WebCore:

Take CSS aspect-ratio into account when calculating replaced element dimensions.

* rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::computeAspectRatioInformationForRenderBox const): override
the context renderer aspect ratio with the replaced element aspect ratio.
(WebCore::RenderReplaced::computeIntrinsicRatioInformation const): compute
intrinsicRatio using CSS aspect-ratio information if it is provided.
* rendering/svg/RenderSVGRoot.cpp:
(WebCore::RenderSVGRoot::computeIntrinsicRatioInformation const): compute
intrinsicRatio using CSS aspect-ratio for SVG root elements.

LayoutTests:

Enable some tests that pass now.

* TestExpectations:

Canonical link: https://commits.webkit.org/232285@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@270618 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
rwlbuis authored and webkit-commit-queue committed Dec 10, 2020
1 parent 3f35696 commit b3e1855b516437a48a49988e2b3c5570bb3e1161
Showing 5 changed files with 49 additions and 21 deletions.
@@ -1,3 +1,14 @@
2020-12-10 Rob Buis <rbuis@igalia.com>

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

Reviewed by Darin Adler.

Enable some tests that pass now.

* TestExpectations:

2020-12-09 Cathie Chen <cathiechen@igalia.com>

Support overscroll-behavior parsing
@@ -4455,7 +4455,6 @@ webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-019.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-021.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-022.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-023.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-024.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/intrinsic-size-001.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/intrinsic-size-002.html [ ImageOnlyFailure ]
@@ -4467,24 +4466,6 @@ webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/percentage-resolution-001.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/percentage-resolution-002.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/percentage-resolution-004.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-001.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-002.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-004.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-005.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-006.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-007.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-008.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-009.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-010.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-011.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-012.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-016.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-017.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-018.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-019.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-021.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-025.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/replaced-element-027.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002.html [ ImageOnlyFailure ]
webkit.org/b/214463 imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-003.html [ ImageOnlyFailure ]
@@ -1,3 +1,21 @@
2020-12-10 Rob Buis <rbuis@igalia.com>

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

Reviewed by Darin Adler.

Take CSS aspect-ratio into account when calculating replaced element dimensions.

* rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::computeAspectRatioInformationForRenderBox const): override
the context renderer aspect ratio with the replaced element aspect ratio.
(WebCore::RenderReplaced::computeIntrinsicRatioInformation const): compute
intrinsicRatio using CSS aspect-ratio information if it is provided.
* rendering/svg/RenderSVGRoot.cpp:
(WebCore::RenderSVGRoot::computeIntrinsicRatioInformation const): compute
intrinsicRatio using CSS aspect-ratio for SVG root elements.

2020-12-09 Sergio Villar Senin <svillar@igalia.com>

[css-flex] RenderFlexibleBox::computeMainSizeFromAspectRatioUsing() must obbey box-sizing
@@ -392,6 +392,9 @@ void RenderReplaced::computeAspectRatioInformationForRenderBox(RenderBox* conten
if (contentRenderer) {
contentRenderer->computeIntrinsicRatioInformation(intrinsicSize, intrinsicRatio);

if (style().aspectRatioType() == AspectRatioType::Ratio || (style().aspectRatioType() == AspectRatioType::AutoAndRatio && !intrinsicRatio))
intrinsicRatio = style().aspectRatioWidth() / style().aspectRatioHeight();

// Handle zoom & vertical writing modes here, as the embedded document doesn't know about them.
intrinsicSize.scale(style().effectiveZoom());

@@ -477,6 +480,11 @@ void RenderReplaced::computeIntrinsicRatioInformation(FloatSize& intrinsicSize,
ASSERT(!embeddedContentBox());
intrinsicSize = FloatSize(intrinsicLogicalWidth(), intrinsicLogicalHeight());

if (style().hasAspectRatio()) {
intrinsicRatio = style().logicalAspectRatio();
if (style().aspectRatioType() == AspectRatioType::Ratio)
return;
}
// Figure out if we need to compute an intrinsic ratio.
if (!hasAspectRatio())
return;
@@ -83,9 +83,14 @@ void RenderSVGRoot::computeIntrinsicRatioInformation(FloatSize& intrinsicSize, d
intrinsicSize.setWidth(floatValueForLength(svgSVGElement().intrinsicWidth(), 0));
intrinsicSize.setHeight(floatValueForLength(svgSVGElement().intrinsicHeight(), 0));

if (style().aspectRatioType() == AspectRatioType::Ratio) {
intrinsicRatio = style().logicalAspectRatio();
return;
}

Optional<double> intrinsicRatioValue;
if (!intrinsicSize.isEmpty())
intrinsicRatio = intrinsicSize.width() / static_cast<double>(intrinsicSize.height());
intrinsicRatioValue = intrinsicSize.width() / static_cast<double>(intrinsicSize.height());
else {
// - If either/both of the ‘width’ and ‘height’ of the rootmost ‘svg’ element are in percentage units (or omitted), the
// aspect ratio is calculated from the width and height values of the ‘viewBox’ specified for the current SVG document
@@ -94,9 +99,14 @@ void RenderSVGRoot::computeIntrinsicRatioInformation(FloatSize& intrinsicSize, d
FloatSize viewBoxSize = svgSVGElement().viewBox().size();
if (!viewBoxSize.isEmpty()) {
// The viewBox can only yield an intrinsic ratio, not an intrinsic size.
intrinsicRatio = viewBoxSize.width() / static_cast<double>(viewBoxSize.height());
intrinsicRatioValue = viewBoxSize.width() / static_cast<double>(viewBoxSize.height());
}
}

if (intrinsicRatioValue)
intrinsicRatio = *intrinsicRatioValue;
else if (style().aspectRatioType() == AspectRatioType::AutoAndRatio)
intrinsicRatio = style().logicalAspectRatio();
}

bool RenderSVGRoot::isEmbeddedThroughSVGImage() const

0 comments on commit b3e1855

Please sign in to comment.