Commit 5ff55fe7 authored by Christian Biesinger's avatar Christian Biesinger Committed by Commit Bot

[AspectRatio] Add tests for cross size in flexbox

This exposed a bug where we don't correctly compute the cross
size in a column flexbox with aspect-ratio.

R=ikilpatrick@chromium.org

Bug: 1045668,1117279
Change-Id: Ic823ed349e2caf061834e116d5958832745cd63a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2358827
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Auto-Submit: Christian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#799377}
parent 1fe4c789
......@@ -291,6 +291,10 @@ crbug.com/1007134 external/wpt/intersection-observer/v2/delay-test.html [ Pass F
crbug.com/1004547 external/wpt/intersection-observer/cross-origin-iframe.sub.html [ Pass Failure ]
crbug.com/1007229 external/wpt/intersection-observer/same-origin-grand-child-iframe.sub.html [ Pass Failure ]
# Not supported yet
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-013.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/flex-aspect-ratio-014.tentative.html [ Failure ]
crbug.com/936084 external/wpt/css/css-sizing/max-content-input-001.html [ Failure ]
# Incorrect blending with foreignObject and svg descendants.
......
<!DOCTYPE html>
<title>CSS aspect-ratio: Row flexbox cross 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; width: 100px;">
<div style="background: green; width: 50px; aspect-ratio: 1/1; min-width: 0; flex: 1;"></div>
</div>
<!DOCTYPE html>
<title>CSS aspect-ratio: Row flexbox cross 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; width: 100px;">
<div style="background: green; aspect-ratio: 1/1; min-width: 0; flex: 1 1 50px;"></div>
</div>
<!DOCTYPE html>
<title>CSS aspect-ratio: Row flexbox cross 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: inline-flex; flex-direction: column; height: 100px;">
<div style="background: green; aspect-ratio: 1/1; min-height: 0; height: 50px; flex: 1;"></div>
</div>
<!DOCTYPE html>
<title>CSS aspect-ratio: Row flexbox cross 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: inline-flex; flex-direction: column; height: 100px;">
<div style="background: green; aspect-ratio: 1/1; min-height: 0; flex: 1 1 50px;"></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