Skip to content

GitLab

T
tangled
Commit 076d14c4 authored by Christian Biesinger's avatar Christian Biesinger Committed by Commit Bot
Browse files
Options

[AspectRatio] Make aspect-ratio work with replaced elements 

This is for legacy as well as NG.

Bug: 1083009
Change-Id: I8c11aca1d5dc03932d437f60c0d56960c28709eb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2208010
Commit-Queue: Christian Biesinger <cbiesinger@chromium.org>
Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Auto-Submit: Christian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#772451}
parent 2d134ca3
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 3 deletions
third_party/blink/renderer/core/layout/layout_embedded_object.cc
View file @ 076d14c4
......@@ -122,6 +122,13 @@ void LayoutEmbeddedObject::ComputeIntrinsicSizingInfo(
// doesn't know about them.
intrinsic_sizing_info.size.Scale(StyleRef().EffectiveZoom());
// Handle an overridden aspect ratio
if (const base::Optional<IntSize>& aspect_ratio =
StyleRef().AspectRatio()) {
intrinsic_sizing_info.aspect_ratio.SetWidth(aspect_ratio->Width());
intrinsic_sizing_info.aspect_ratio.SetHeight(aspect_ratio->Height());
}
if (!IsHorizontalWritingMode())
intrinsic_sizing_info.Transpose();
return;
......
third_party/blink/renderer/core/layout/layout_image.cc
View file @ 076d14c4
......@@ -363,6 +363,13 @@ void LayoutImage::ComputeIntrinsicSizingInfo(
if (StyleRef().GetObjectFit() != EObjectFit::kScaleDown)
intrinsic_sizing_info.size.Scale(ImageDevicePixelRatio());
// Handle an overridden aspect ratio
if (const base::Optional<IntSize>& aspect_ratio =
StyleRef().AspectRatio()) {
intrinsic_sizing_info.aspect_ratio.SetWidth(aspect_ratio->Width());
intrinsic_sizing_info.aspect_ratio.SetHeight(aspect_ratio->Height());
}
if (!IsHorizontalWritingMode())
intrinsic_sizing_info.Transpose();
return;
......
third_party/blink/renderer/core/layout/layout_replaced.cc
View file @ 076d14c4
......@@ -148,7 +148,7 @@ bool LayoutReplaced::NeedsPreferredWidthsRecalculation() const {
return HasRelativeLogicalHeight() && StyleRef().LogicalWidth().IsAuto();
}
static inline bool LayoutObjectHasAspectRatio(
static inline bool LayoutObjectHasIntrinsicAspectRatio(
const LayoutObject* layout_object) {
DCHECK(layout_object);
return layout_object->IsImage() || layout_object->IsCanvas() ||
......@@ -695,8 +695,14 @@ void LayoutReplaced::ComputeIntrinsicSizingInfo(
intrinsic_sizing_info.size = FloatSize(IntrinsicLogicalWidth().ToFloat(),
IntrinsicLogicalHeight().ToFloat());
if (const base::Optional<IntSize>& aspect_ratio = StyleRef().AspectRatio()) {
intrinsic_sizing_info.aspect_ratio.SetWidth(aspect_ratio->Width());
intrinsic_sizing_info.aspect_ratio.SetHeight(aspect_ratio->Height());
return;
}
// Figure out if we need to compute an intrinsic ratio.
if (!LayoutObjectHasAspectRatio(this))
if (!LayoutObjectHasIntrinsicAspectRatio(this))
return;
if (!intrinsic_sizing_info.size.IsEmpty())
......
third_party/blink/renderer/core/layout/svg/layout_svg_root.cc
View file @ 076d14c4
......@@ -80,7 +80,10 @@ void LayoutSVGRoot::UnscaledIntrinsicSizingInfo(
intrinsic_sizing_info.has_width = svg->HasIntrinsicWidth();
intrinsic_sizing_info.has_height = svg->HasIntrinsicHeight();
if (!intrinsic_sizing_info.size.IsEmpty()) {
if (const base::Optional<IntSize>& aspect_ratio = StyleRef().AspectRatio()) {
intrinsic_sizing_info.aspect_ratio.SetWidth(aspect_ratio->Width());
intrinsic_sizing_info.aspect_ratio.SetHeight(aspect_ratio->Height());
} else if (!intrinsic_sizing_info.size.IsEmpty()) {
intrinsic_sizing_info.aspect_ratio = intrinsic_sizing_info.size;
} else {
FloatSize view_box_size = svg->viewBox()->CurrentValue()->Value().Size();
......
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/replaced-element-001.tentative.html 0 → 100644
View file @ 076d14c4
<!DOCTYPE html>
<title>CSS aspect-ratio: img</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<img src="support/20x50-green.png" style="width: 100px; aspect-ratio: 1/1;">
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/replaced-element-002.tentative.html 0 → 100644
View file @ 076d14c4
<!DOCTYPE html>
<title>CSS aspect-ratio: iframe</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<iframe style="background: green; width: 100px; aspect-ratio: 1/1; border: 0px none;"></div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/replaced-element-003.tentative.html 0 → 100644
View file @ 076d14c4
<!DOCTYPE html>
<title>CSS aspect-ratio: video</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div>
<video src="support/2x2-green.ogv" style="background: green; width: 100px; aspect-ratio: 2/1; vertical-align: bottom;"></video>
</div>
<div style="width: 100px; height: 50px; background: green;"></div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/replaced-element-004.tentative.html 0 → 100644
View file @ 076d14c4
<!DOCTYPE html>
<title>CSS aspect-ratio: SVG img</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 1' style='background-color: green'%3E%3C/svg%3E" style="width: 100px; aspect-ratio: 1/1;">
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/replaced-element-005.tentative.html 0 → 100644
View file @ 076d14c4
<!DOCTYPE html>
<title>CSS aspect-ratio: object</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<object data="support/20x50-green.png" style="width: 100px; aspect-ratio: 1/1;">
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/replaced-element-006.tentative.html 0 → 100644
View file @ 076d14c4
<!DOCTYPE html>
<title>CSS aspect-ratio: SVG object</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<object type="image/svg+xml" data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 1' style='background-color: green'%3E%3C/svg%3E" style="width: 100px; aspect-ratio: 1/1;"></object>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/replaced-element-007.tentative.html 0 → 100644
View file @ 076d14c4
<!DOCTYPE html>
<title>CSS aspect-ratio: svg</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<svg viewBox="0 0 5 1" style="width: 100px; aspect-ratio: 1/1; background-color: green;"></svg>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/replaced-element-008.tentative.html 0 → 100644
View file @ 076d14c4
<!DOCTYPE html>
<title>CSS aspect-ratio: svg</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<!-- Uses an indefinite height -->
<svg viewBox="0 0 5 1" width="100px" height="100%" style="aspect-ratio: 1/1; background-color: green;"></svg>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/replaced-element-009.tentative.html 0 → 100644
View file @ 076d14c4
<!DOCTYPE html>
<title>CSS aspect-ratio: img (vertical writing mode)</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<img src="support/20x50-green.png" style="width: 100px; aspect-ratio: 1/1; writing-mode: vertical-rl;">
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/replaced-element-010.tentative.html 0 → 100644
View file @ 076d14c4
<!DOCTYPE html>
<title>CSS aspect-ratio: SVG img (vertical writing mode)</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' style='background-color: green'%3E%3C/svg%3E" style="width: 100px; aspect-ratio: 5/1; writing-mode: vertical-rl; vertical-align: top;">
<div style="background: green; height: 80px; width: 100px;"></div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/replaced-element-011.tentative.html 0 → 100644
View file @ 076d14c4
<!DOCTYPE html>
<title>CSS aspect-ratio: svg</title>
<link rel="author" title="Google LLC" href="https://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<svg viewBox="0 0 1 1" style="width: 100px; aspect-ratio: 5/1; background-color: green; writing-mode: vertical-rl; vertical-align: top;"></svg>
<div style="background: green; height: 80px; width: 100px;"></div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment