Commit aa401dd0 authored by Christian Biesinger's avatar Christian Biesinger Committed by Commit Bot

[AspectRatio] Add test for computing inline size with constrained block size

This tests the behavior as specced in
https://github.com/w3c/csswg-drafts/issues/5257

R=ikilpatrick@chromium.org

Bug: 1045668
Change-Id: I75b945a008b9039b751fc7de54da86cbf399a7ee
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2274255
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@{#784523}
parent 8af479bc
...@@ -108,6 +108,7 @@ crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-004.tentative. ...@@ -108,6 +108,7 @@ crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-004.tentative.
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-005.tentative.html [ Failure ] crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-005.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-006.tentative.html [ Failure ] crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-006.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-007.tentative.html [ Failure ] crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-007.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-008.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/auto-margins-001.tentative.html [ Failure ] crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/auto-margins-001.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-001.tentative.html [ Failure ] crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-001.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-002.tentative.html [ Failure ] crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-002.tentative.html [ Failure ]
...@@ -128,6 +129,7 @@ crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-01 ...@@ -128,6 +129,7 @@ crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-01
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-017.tentative.html [ Failure ] crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-017.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-018.tentative.html [ Failure ] crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-018.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-019.tentative.html [ Failure ] crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-019.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-020.tentative.html [ Failure ]
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-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-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-003.tentative.html [ Failure ]
......
...@@ -244,10 +244,14 @@ crbug.com/1007134 external/wpt/intersection-observer/v2/delay-test.html [ Pass F ...@@ -244,10 +244,14 @@ 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/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 ] crbug.com/1007229 external/wpt/intersection-observer/same-origin-grand-child-iframe.sub.html [ Pass Failure ]
# not implemented yet
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/block-aspect-ratio-020.tentative.html [ Failure ]
# abspos is not implemented yet for aspect-ratio # abspos is not implemented yet for aspect-ratio
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-003.tentative.html [ Failure ] crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-003.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-005.tentative.html [ Failure ] crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-005.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-006.tentative.html [ Failure ] crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-006.tentative.html [ Failure ]
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-008.tentative.html [ Failure ]
# It is not clear if this test is correct. https://github.com/w3c/csswg-drafts/issues/5151 # It is not clear if this test is correct. https://github.com/w3c/csswg-drafts/issues/5151
crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-004.tentative.html [ Failure ] crbug.com/1045668 external/wpt/css/css-sizing/aspect-ratio/abspos-004.tentative.html [ Failure ]
......
<!DOCTYPE html>
<title>CSS aspect-ratio: abspos div inline size with max-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://github.com/w3c/csswg-drafts/issues/5257">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="A max-height constraint should be transferred through the aspect-ratio to apply to the inline size">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="position: relative; height: 100px; position: relative;">
<div style="position: absolute; aspect-ratio: 1/1; max-height: 100%; background: green; color: green;">
<!-- max-size 200px, min-size: 20px -->
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
</div>
</div>
<!DOCTYPE html>
<title>CSS aspect-ratio: abspos div inline size with max-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://github.com/w3c/csswg-drafts/issues/5257">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="A max-height constraint should be transferred through the aspect-ratio to apply to the inline size">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="height: 100px;">
<div style="aspect-ratio: 1/1; max-height: 100%; background: green;">
<!-- max-size 200px, min-size: 20px -->
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
<div style="width: 20px; height: 10px; vertical-align: bottom;"></div>
</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