forked from mirrors/gecko-dev
1b0238866a
Automatic update from web-platform-tests [wpt] Add tests for aspect-ratio + intrinsic-size calculation. As above. This adds a series of tests for when we have an element with an aspect-ratio (via. the aspect-ratio property, or by being a replaced element of some form. These tests either test stretching in the block-axis (via. "align-self: stretch" for example) or by explicity setting the height as "height: 100%;". When an element has a block-constraint like this, it should try and resolve it if possible, then transfer this size in into the inline direction for the min/max content size. See: https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes "Note: When the box has a preferred aspect ratio, size constraints in the opposite dimension will transfer through and can affect the auto size in the considered one. See CSS2§10." For example: <div style="display: flex; width: min-content; height: 100px;"> <div style="aspect-ratio: 1/1;"></div> </div> Here the flexbox ends up being 100x100 as the element with the aspect-ratio transfers its stretched height (100px) to its width. Change-Id: I378bb60581b86b397f92eefce5084244bf0b73a8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2774294 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/master@{#864832} -- wpt-commits: fc109c534f9825c5b02816e37bcab1805c7e576c wpt-pr: 28144
8 lines
518 B
HTML
8 lines
518 B
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
|
|
<meta name="assert" content="A replaced element resolves its percentage against the definite row.">
|
|
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
|
<p>Test passes if there is a filled green square.</p>
|
|
<div style="display: inline-grid; grid-template-rows: 50px 50px; background: green;">
|
|
<canvas width=10 height=10 style="height: 100%; grid-row-start: 1; grid-row-end: 3;"></canvas>
|
|
</div>
|