Skip to content

GitLab

T
tangled
Commit 2becd034 authored by Christian Biesinger's avatar Christian Biesinger Committed by Chromium LUCI CQ
Browse files
Options

[AspectRatio] Don't stretch grid items if they have an aspect ratio 

If they have an aspect ratio, they should not be considered to have an
auto size.

This also adds Boris Chiou's tests from:
https://bugzilla.mozilla.org/show_bug.cgi?id=1646098
(I've added a couple additional tests)

R=ikilpatrick@chromium.org, rego@chromium.org

Bug: 1105581
Change-Id: I4a8a57a85b6e7f75471c2602c5d7a16d95be19d7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2526928
Commit-Queue: Christian Biesinger <cbiesinger@chromium.org>
Auto-Submit: Christian Biesinger <cbiesinger@chromium.org>
Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#835395}
parent abd82e14
Show whitespace changes
Inline Side-by-side
Showing with 444 additions and 10 deletions
third_party/blink/renderer/core/layout/layout_grid.cc
View file @ 2becd034
......@@ -1650,6 +1650,50 @@ void LayoutGrid::ApplyStretchAlignmentToChildIfNeeded(LayoutBox& child) {
}
}
bool LayoutGrid::HasAutoSizeInColumnAxis(const LayoutBox& child) const {
NOT_DESTROYED();
if (!child.StyleRef().AspectRatio().IsAuto()) {
if (IsHorizontalWritingMode() == child.IsHorizontalWritingMode()) {
// If the used inline size is non-auto, we do have a non auto block size
// (column axis size) because of the aspect ratio.
if (!child.StyleRef().LogicalWidth().IsAuto())
return false;
} else {
const Length& logical_height = child.StyleRef().LogicalHeight();
if (logical_height.IsFixed() ||
(logical_height.IsPercentOrCalc() &&
child.ComputePercentageLogicalHeight(Length::Percent(0)) !=
kIndefiniteSize)) {
return false;
}
}
}
return IsHorizontalWritingMode() ? child.StyleRef().Height().IsAuto()
: child.StyleRef().Width().IsAuto();
}
bool LayoutGrid::HasAutoSizeInRowAxis(const LayoutBox& child) const {
NOT_DESTROYED();
if (!child.StyleRef().AspectRatio().IsAuto()) {
if (IsHorizontalWritingMode() == child.IsHorizontalWritingMode()) {
// If the used block size is non-auto, we do have a non auto inline size
// (row axis size) because of the aspect ratio.
const Length& logical_height = child.StyleRef().LogicalHeight();
if (logical_height.IsFixed() ||
(logical_height.IsPercentOrCalc() &&
child.ComputePercentageLogicalHeight(Length::Percent(0)) !=
kIndefiniteSize)) {
return false;
}
} else {
if (!child.StyleRef().LogicalWidth().IsAuto())
return false;
}
}
return IsHorizontalWritingMode() ? child.StyleRef().Width().IsAuto()
: child.StyleRef().Height().IsAuto();
}
// TODO(lajava): This logic is shared by LayoutFlexibleBox, so it should be
// moved to LayoutBox.
bool LayoutGrid::HasAutoMarginsInColumnAxis(const LayoutBox& child) const {
......
third_party/blink/renderer/core/layout/layout_grid.h
View file @ 2becd034
......@@ -270,16 +270,8 @@ class LayoutGrid final : public LayoutBlock {
StyleSelfAlignmentData DefaultAlignment(GridAxis, const ComputedStyle&) const;
bool DefaultAlignmentIsStretchOrNormal(GridAxis, const ComputedStyle&) const;
void ApplyStretchAlignmentToChildIfNeeded(LayoutBox&);
bool HasAutoSizeInColumnAxis(const LayoutBox& child) const {
NOT_DESTROYED();
return IsHorizontalWritingMode() ? child.StyleRef().Height().IsAuto()
: child.StyleRef().Width().IsAuto();
}
bool HasAutoSizeInRowAxis(const LayoutBox& child) const {
NOT_DESTROYED();
return IsHorizontalWritingMode() ? child.StyleRef().Width().IsAuto()
: child.StyleRef().Height().IsAuto();
}
bool HasAutoSizeInColumnAxis(const LayoutBox& child) const;
bool HasAutoSizeInRowAxis(const LayoutBox& child) const;
bool AllowedToStretchChildAlongColumnAxis(const LayoutBox& child) const {
NOT_DESTROYED();
return AlignSelfForChild(child).GetPosition() == ItemPosition::kStretch &&
......
third_party/blink/web_tests/external/wpt/css/css-grid/grid-items/replaced-element-001.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: inline)</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid;">
<svg style="background: green; height: 100px;" viewBox="0 0 1 1"></svg>
</div>
third_party/blink/web_tests/external/wpt/css/css-grid/grid-items/replaced-element-002.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: block)</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid;">
<svg style="background: green; width: 100px;" viewBox="0 0 1 1"></svg>
</div>
third_party/blink/web_tests/external/wpt/css/css-grid/grid-items/replaced-element-007.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid; grid-template-rows: 200px;">
<svg style="background: green; height: 100px;" viewBox="0 0 1 1"></svg>
</div>
third_party/blink/web_tests/external/wpt/css/css-grid/grid-items/replaced-element-010.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid; grid-template-columns: 200px;">
<svg style="background: green; height: 100px;" viewBox="0 0 1 1"></svg>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-001.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: inline)</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid;">
<div style="background: green; height: 100px; aspect-ratio: 1/1;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-002.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: block)</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid;">
<div style="background: green; width: 100px; aspect-ratio: 1/1;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-003.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: inline, on replaced elements)</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid;">
<img src="support/20x50-green.png" style="height: 100px; aspect-ratio: 1/1;">
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-004.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: block, on replaced elements)</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid;">
<img src="support/20x50-green.png" style="width: 100px; aspect-ratio: 1/1;">
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-005.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: inline, on replaced elements) with auto && ratio</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid; grid-template-columns: repeat(2, min-content);">
<img src="support/20x50-green.png" style="height: 100px; aspect-ratio: auto 1/1;">
<div style="background: green; width: 60px; height: 100px;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-006.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: block, on replaced elements) with auto && ratio</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid; grid-template-columns: repeat(2, min-content);">
<img src="support/20x50-green.png" style="width: 40px; aspect-ratio: auto 1/1;">
<div style="background: green; width: 60px; height: 100px;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-007.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid; grid-template-rows: 200px;">
<div style="background: green; width: 100px; aspect-ratio: 1/1;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-008.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid container (ratio-dependent: inline)</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid; height: 100px; aspect-ratio: 1/1;">
<div style="background: green;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-009.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid container (ratio-dependent: block)</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid; width: 100px; aspect-ratio: 1/1;">
<div style="background: green;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-010.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid; grid-template-columns: 200px;">
<div style="background: green; height: 100px; aspect-ratio: 1/1;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-011.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid; grid-template-columns: 200px;">
<div style="background: green; height: 100px; aspect-ratio: 1/1; writing-mode: vertical-lr;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-012.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid; grid-template-columns: 200px; grid-template-rows: 200px;">
<div style="background: green; height: 50%; aspect-ratio: 1/1; writing-mode: vertical-lr;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-013.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: items stretched in both axes should ignore aspect ratio</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 100px;">
<div style="background: green; aspect-ratio: 1/1; justify-self: stretch; align-self: stretch;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-sizing/aspect-ratio/grid-aspect-ratio-014.html 0 → 100644
View file @ 2becd034
<!DOCTYPE html>
<title>CSS aspect-ratio: items stretched in one axis should respect aspect ratio with stretched size</title>
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 100px;">
<div style="background: green; aspect-ratio: 1/1; justify-self: stretch;"></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