Skip to content

GitLab

T
tangled
Commit 868fd8fc authored by Christian Biesinger's avatar Christian Biesinger Committed by Commit Bot
Browse files
Options

[AspectRatio] Make NGBlockNode's aspect ratio functions check aspect-ratio 

This makes FlexNG support the aspect-ratio property.

Bug: 1045668
Change-Id: I3cd7883846dd3d087850bccf5b5f1d3ce0c3d8c1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2144365
Auto-Submit: Christian Biesinger <cbiesinger@chromium.org>
Commit-Queue: Christian Biesinger <cbiesinger@chromium.org>
Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: default avatarDavid Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#758361}
parent 38d7b8fc
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 0 deletions
third_party/blink/renderer/core/layout/ng/ng_block_node.cc
View file @ 868fd8fc
......@@ -1205,6 +1205,8 @@ bool NGBlockNode::IsAtomicInlineLevel() const {
}
bool NGBlockNode::HasAspectRatio() const {
if (Style().AspectRatio().has_value())
return true;
LayoutBox* layout_object = GetLayoutBox();
if (!layout_object->IsImage() && !IsA<LayoutVideo>(layout_object) &&
!layout_object->IsCanvas() && !layout_object->IsSVGRoot()) {
......@@ -1217,6 +1219,15 @@ bool NGBlockNode::HasAspectRatio() const {
}
LogicalSize NGBlockNode::GetAspectRatio() const {
// The CSS parser will ensure that this will only be set if the feature
// is enabled.
const base::Optional<IntSize>& ratio = Style().AspectRatio();
if (ratio.has_value()) {
PhysicalSize physical_ratio(LayoutUnit(ratio->Width()),
LayoutUnit(ratio->Height()));
return physical_ratio.ConvertToLogical(Style().GetWritingMode());
}
base::Optional<LayoutUnit> computed_inline_size;
base::Optional<LayoutUnit> computed_block_size;
GetOverrideIntrinsicSize(&computed_inline_size, &computed_block_size);
......
third_party/blink/web_tests/FlagExpectations/disable-layout-ng
View file @ 868fd8fc
......@@ -97,6 +97,12 @@ crbug.com/1012289 external/wpt/css/css-pseudo/marker-unicode-bidi-normal.html [
crbug.com/591099 external/wpt/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-017.html [ Failure ]
### external/wpt/css/css-sizing/
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-001.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-002.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-003.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-004.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-005.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-006.tentative.html [ Failure ]
crbug.com/591099 external/wpt/css/css-sizing/clone-nowrap-intrinsic-size-bidi.html [ Failure ]
crbug.com/591099 external/wpt/css/css-sizing/intrinsic-percent-non-replaced-004.html [ Failure ]
crbug.com/591099 external/wpt/css/css-sizing/intrinsic-percent-non-replaced-005.html [ Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-001.tentative.html 0 → 100644
View file @ 868fd8fc
<!DOCTYPE html>
<title>CSS aspect-ratio: Row flexbox main size</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="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B">
<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 style="display: flex;">
<div style="background: green; height: 100px; aspect-ratio: 1/1; min-width: 0;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-002.tentative.html 0 → 100644
View file @ 868fd8fc
<!DOCTYPE html>
<title>CSS aspect-ratio: Row flexbox min-width</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="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
<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 style="display: flex;">
<!-- transferred size: 100px. content size suggestion: 200px.
min-width: min(100, 200). -->
<div style="background: green; height: 100px; aspect-ratio: 1/1; flex-basis: 0;">
<div style="width: 200px;"></div>
</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-003.tentative.html 0 → 100644
View file @ 868fd8fc
<!DOCTYPE html>
<title>CSS aspect-ratio: Column flexbox main size</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="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B">
<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 style="display: flex; flex-direction: column;">
<div style="background: green; width: 100px; aspect-ratio: 1/1; min-height: 0;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-004.tentative.html 0 → 100644
View file @ 868fd8fc
<!DOCTYPE html>
<title>CSS aspect-ratio: Column flexbox min-height</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="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
<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 style="display: flex; flex-direction: column;">
<!-- transferred size: 100px. content size suggestion: 200px.
min-height: min(100, 200). -->
<div style="background: green; width: 100px; aspect-ratio: 1/1; flex-basis: 0;">
<div style="height: 200px;"></div>
</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-005.tentative.html 0 → 100644
View file @ 868fd8fc
<!DOCTYPE html>
<title>CSS aspect-ratio: Non-square aspect ratio in Flexbox</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="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B">
<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 style="display: flex;">
<div style="background: green; height: 100px; aspect-ratio: 1/2; min-width: 0;"></div>
<div style="background: green; width: 50px; height: 100px;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-006.tentative.html 0 → 100644
View file @ 868fd8fc
<!DOCTYPE html>
<title>CSS aspect-ratio: Vertical writing mode in Flexbox</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="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B">
<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 style="display: flex;">
<div style="background: green; height: 100px; aspect-ratio: 1/2; min-width: 0; writing-mode: vertical-lr;"></div>
<div style="background: green; width: 50px; height: 100px;"></div>
</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