<pre class='metadata'>

Title: CSS Box Sizing Module Level 4

Shortname: css-sizing

Level: 4

Status: ED

Work Status: Revising

Group: csswg

ED: https://drafts.csswg.org/css-sizing-4/

TR: https://www.w3.org/TR/css-sizing-4/

Issue Tracking: CSSWG GitHub https://github.com/w3c/csswg-drafts/issues

Previous Version: https://www.w3.org/TR/2021/WD-css-sizing-4-20210520/

Editor: Tab Atkins, Google, http://xanthir.com/contact/, w3cid 42199

Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400

Editor: Jen Simmons, Apple, http://jensimmons.com/, w3cid 52801

Abstract: This module extends the CSS sizing properties with keywords that represent content-based "intrinsic" sizes and context-based "extrinsic" sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. This is a delta spec over CSS Sizing Level 3.

Ignored Terms: block-level box

Test Suite: https://wpt.fyi/results/css/css-sizing

WPT Path Prefix: css/css-sizing/

WPT Display: closed

</pre>

<pre class='link-defaults'>

spec:css-align-3;

type:property; text:column-gap

type:value; text:stretch

spec:css-borders-4; type:property; text:border

spec:css-display-3; type:dfn; text:box

spec:css-logical-1; type:property; text:block-size

spec:css-values-5; type:function; text:calc-size()

spec:css2; type:property

text:min-width

text:min-height

text:max-width

text:max-height

spec:html; type:element;

text:meta

text:head

text:body

spec:css2; type:dfn; text:document language

</pre>

<!-- Notes on stuff to do... [copy/pasted from etherpad, probably out-of-date, evaluate later]

Swap definition of preferred size in for max-content.

Define current max-content as super-max-content.

Mark an issue about whether it's a necessary concept;

I'm unsure, but I think it will show up in orthogonal flow sizing.

-->

<h2 id="intro">

Introduction</h2>

ISSUE: This is a diff spec over <a href="https://www.w3.org/TR/css-sizing-3/">CSS Sizing Level 3</a>.

It is currently an Exploratory Working Draft:

if you are implementing anything, please use Level 3 as a reference.

We will merge the Level 3 text into this draft once it reaches CR.

<wpt title="General sizing tests">

dynamic-available-size-iframe.html

dynamic-change-inline-size-001.html

dynamic-change-inline-size-002.html

dynamic-change-inline-size-003.html

dynamic-change-inline-size-004.html

frameset-intrinsic-crash.html

inheritance-001.html

inheritance-002.html

min-width-max-width-precedence.html

min-width-max-width-precedence.html

replaced-max-size-saturation.html

responsive-iframe/responsive-iframe-no-match-element.html

textarea-large-padding-crash.html

</wpt>

<h3 id="placement">

Module interactions</h3>

<p>This module extends the 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', and 'column-width'

features defined in [[!CSS2]] chapter 10 and in [[!CSS3COL]]

<h3 id="values">

Value Definitions</h3>

This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]

using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].

Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].

Combination with other CSS modules may expand the definitions of these value types.

In addition to the property-specific values listed in their definitions,

all properties defined in this specification

also accept the <a>CSS-wide keywords</a> as their property value.

For readability they have not been repeated explicitly.

<!-- Big Text: terms

█████▌ █████▌ ████▌ █ █ ███▌

█▌ █▌ █▌ █▌ ██ ██ █▌ █▌

█▌ █▌ █▌ █▌ █▌█ █▐█ █▌

█▌ ████ ████▌ █▌ █ ▐█ ███▌

█▌ █▌ █▌▐█ █▌ ▐█ █▌

█▌ █▌ █▌ ▐█ █▌ ▐█ █▌ █▌

█▌ █████▌ █▌ █▌ █▌ ▐█ ███▌

-->

<h2 id="terms">

Terminology</h2>

Issue: [[css-sizing-3#terms]]

<!-- merge this with the final sizing-3 definition

<dt><dfn export>preferred aspect ratio</dfn>

<dd>

A [=box=] or [=replaced element=]’s preferred ratio of width to height.

This can be explicitly specified via the 'aspect-ratio' property,

or, for replaced elements, it can be an [=intrinsic aspect ratio=]

derived from the content.

The [=preferred aspect ratio=] of a box can be associated

with either its [=content box=] or [=border box=].

Not all boxes or replaced elements have a [=preferred aspect ratio=]

(and in fact, non-replaced elements typically do not).

-->

<!-- Big Text: propdefs

████▌ ████▌ ███▌ ████▌ ████▌ █████▌ █████▌ ███▌

█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌

█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌

████▌ ████▌ █▌ █▌ ████▌ █▌ █▌ ████ ████ ███▌

█▌ █▌▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌

█▌ █▌ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌

█▌ █▌ █▌ ███▌ █▌ ████▌ █████▌ █▌ ███▌

-->

<h2 id="specifying-sizes" oldids='size-keywords'>

Specifying Box Sizes</h2>

ISSUE: [[css-sizing-3#specifying-sizes]]

<h3 id="sizing-properties">

Sizing Properties</h3>

ISSUE(820): Add shorthands.

<h3 id="sizing-values" oldids='width-height-keywords'>

New Sizing Values: the ''stretch'', ''fit-content'', and ''contain'' keywords</h3>

<pre class="propdef partial">

Name: width, height, min-width, min-height, max-width, max-height

New Values: stretch | fit-content | contain

</pre>

<dl dfn-type=value dfn-for="width, height, inline-size, block-size, min-width, min-height, min-inline-size, min-block-size, max-width, max-height, max-inline-size, max-block-size">

<dt><dfn>stretch</dfn>

<dd>

Applies [=stretch-fit sizing=],

attempting to match the size of the box’s [=margin box=] to the size of its [=containing block=].

See [[#stretch-fit-sizing]].

<wpt>

stretch/block-height-001.html

stretch/flex-line-001.html

stretch/flex-line-002.html

stretch/flex-line-003.html

stretch/flex-line-004.html

stretch/flex-line-005.html

stretch/min-width-1.html

stretch/parsing.html

stretch/positioned-non-replaced-1.html

stretch/positioned-replaced-1.html

stretch/positioned-replaced-2.html

stretch/positioned-replaced-3.html

stretch/stretch-block-size-001.html

stretch/stretch-block-size-002.html

stretch/stretch-block-size-003.html

stretch/stretch-inline-size-001.html

stretch/stretch-inline-size-002.html

stretch/stretch-inline-size-003.html

stretch/stretch-max-block-size-001.html

stretch/stretch-max-inline-size-001.html

stretch/stretch-min-block-size-001.html

stretch/stretch-min-inline-size-001.html

stretch/stretch-quirk-001.html

</wpt>

<dt><dfn>fit-content</dfn>

<dd>

Essentially ''fit-content(stretch)''

i.e. min(''width/max-content'', max(''width/min-content'', ''width/stretch'')).

<wpt>

fit-content-block-size-abspos.html

fit-content-block-size-fixedpos.html

fit-content-contribution-001.html

fit-content-min-inline-size.html

fit-content-percentage-padding.html

float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-001.html

float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-002.html

float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-003.html

float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-004.html

</wpt>

<dt><dfn>contain</dfn>

<dd>

If the box has a [=preferred aspect ratio=],

applies [=contain-fit sizing=],

attempting to fit into the box’s constraints

while maintaining its [=preferred aspect ratio=] insofar as possible.

See [[#contain-fit-sizing]].

If the box has no [=preferred aspect ratio=],

applies [=stretch-fit sizing=].

</dl>

Note: These new values add to the set of values

that the definition of <<calc-size()>>

refers to as "allowed in the context".

<!-- Big Text: aspect-r

███▌ ███▌ ████▌ █████▌ ███▌ █████▌ ████▌

▐█ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌

█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌

█▌ █▌ ███▌ ████▌ ████ █▌ █▌ ████▌ ████▌

█████▌ █▌ █▌ █▌ █▌ █▌ █▌▐█

█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█

█▌ █▌ ███▌ █▌ █████▌ ███▌ █▌ █▌ █▌

-->

<h2 id="ratios">

Aspect Ratios</h2>

Images often have a [=natural aspect ratio=],

which the CSS layout algorithms attempt to preserve

as they resize the element.

The 'aspect-ratio' property allows specifying this behavior

for non-replaced elements,

and for altering the effective aspect ratio of replaced elements.

ISSUE: We are still working through the details of this section.

If there is any behavior specified here

that would cause [=replaced elements=] with a [=preferred aspect ratio=]

to behave differently than they would

under the requirements of the

<a href="https://www.w3.org/TR/CSS2/visudet.html">CSS2</a>,

<a href="https://www.w3.org/TR/css-flexbox-1/">Flex Layout</a>,

and <a href="https://www.w3.org/TR/css-grid-1/">Grid Layout</a>

specs combined (without this specification in effect),

<strong>this is an error and should be <a href="https://github.com/w3c/csswg-drafts/issues">reported</a> to the CSSWG</strong>.

<h3 id="aspect-ratio">

Preferred Aspect Ratios: the 'aspect-ratio' property</h3>

<pre class="propdef">

Name: aspect-ratio

Value: auto || <<ratio>>

Initial: auto

Inherited: no

Applies to: all elements except <a>inline boxes</a> and internal ruby or table boxes

Computed value: specified keyword or a pair of numbers

Animation type: by computed value

</pre>

<wpt>

animation/aspect-ratio-interpolation.html

aspect-ratio/abspos-001.html

aspect-ratio/abspos-002.html

aspect-ratio/abspos-003.html

aspect-ratio/abspos-004.html

aspect-ratio/abspos-005.html

aspect-ratio/abspos-006.html

aspect-ratio/abspos-007.html

aspect-ratio/abspos-008.html

aspect-ratio/abspos-009.html

aspect-ratio/abspos-010.html

aspect-ratio/abspos-011.html

aspect-ratio/abspos-012.html

aspect-ratio/abspos-013.html

aspect-ratio/abspos-014.html

aspect-ratio/abspos-015.html

aspect-ratio/abspos-016.html

aspect-ratio/abspos-017.html

aspect-ratio/abspos-018.html

aspect-ratio/abspos-019.html

aspect-ratio/abspos-020.html

aspect-ratio/abspos-021.html

aspect-ratio/auto-margins-001.html

aspect-ratio/block-aspect-ratio-001.html

aspect-ratio/block-aspect-ratio-002.html

aspect-ratio/block-aspect-ratio-003.html

aspect-ratio/block-aspect-ratio-004.html

aspect-ratio/block-aspect-ratio-005.html

aspect-ratio/block-aspect-ratio-006.html

aspect-ratio/block-aspect-ratio-007.html

aspect-ratio/block-aspect-ratio-008.html

aspect-ratio/block-aspect-ratio-009.html

aspect-ratio/block-aspect-ratio-010.html

aspect-ratio/block-aspect-ratio-011.html

aspect-ratio/block-aspect-ratio-012.html

aspect-ratio/block-aspect-ratio-013.html

aspect-ratio/block-aspect-ratio-014.html

aspect-ratio/block-aspect-ratio-015.html

aspect-ratio/block-aspect-ratio-016.html

aspect-ratio/block-aspect-ratio-017.html

aspect-ratio/block-aspect-ratio-018.html

aspect-ratio/block-aspect-ratio-019.html

aspect-ratio/block-aspect-ratio-020.html

aspect-ratio/block-aspect-ratio-021.html

aspect-ratio/block-aspect-ratio-022.html

aspect-ratio/block-aspect-ratio-023.html

aspect-ratio/block-aspect-ratio-024.html

aspect-ratio/block-aspect-ratio-025.html

aspect-ratio/block-aspect-ratio-026.html

aspect-ratio/block-aspect-ratio-027.html

aspect-ratio/block-aspect-ratio-028.html

aspect-ratio/block-aspect-ratio-029-crash.html

aspect-ratio/block-aspect-ratio-030.html

aspect-ratio/block-aspect-ratio-031.html

aspect-ratio/block-aspect-ratio-032.html

aspect-ratio/block-aspect-ratio-033.html

aspect-ratio/block-aspect-ratio-034.html

aspect-ratio/block-aspect-ratio-035.html

aspect-ratio/block-aspect-ratio-036.html

aspect-ratio/block-aspect-ratio-037.html

aspect-ratio/block-aspect-ratio-051-crash.html

aspect-ratio/block-aspect-ratio-052.html

aspect-ratio/block-aspect-ratio-053.html

aspect-ratio/block-aspect-ratio-054.html

aspect-ratio/block-aspect-ratio-055.html

aspect-ratio/block-aspect-ratio-056.html

aspect-ratio/block-aspect-ratio-058.html

aspect-ratio/block-aspect-ratio-with-margin-collapsing-001.html

aspect-ratio/block-aspect-ratio-with-margin-collapsing-002.html

aspect-ratio/box-sizing-dimensions.html

aspect-ratio/box-sizing-squashed.html

aspect-ratio/flex-aspect-ratio-001.html

aspect-ratio/flex-aspect-ratio-003.html

aspect-ratio/flex-aspect-ratio-005.html

aspect-ratio/flex-aspect-ratio-006.html

aspect-ratio/flex-aspect-ratio-007.html

aspect-ratio/flex-aspect-ratio-008.html

aspect-ratio/flex-aspect-ratio-009.html

aspect-ratio/flex-aspect-ratio-010.html

aspect-ratio/flex-aspect-ratio-011.html

aspect-ratio/flex-aspect-ratio-012.html

aspect-ratio/flex-aspect-ratio-013.html

aspect-ratio/flex-aspect-ratio-014.html

aspect-ratio/flex-aspect-ratio-015.html

aspect-ratio/flex-aspect-ratio-016.html

aspect-ratio/flex-aspect-ratio-017.html

aspect-ratio/flex-aspect-ratio-018.html

aspect-ratio/flex-aspect-ratio-019.html

aspect-ratio/flex-aspect-ratio-020.html

aspect-ratio/flex-aspect-ratio-021.html

aspect-ratio/flex-aspect-ratio-022.html

aspect-ratio/flex-aspect-ratio-023.html

aspect-ratio/flex-aspect-ratio-024.html

aspect-ratio/flex-aspect-ratio-027.html

aspect-ratio/flex-aspect-ratio-028.html

aspect-ratio/flex-aspect-ratio-029.html

aspect-ratio/flex-aspect-ratio-030.html

aspect-ratio/flex-aspect-ratio-032.html

aspect-ratio/flex-aspect-ratio-033.html

aspect-ratio/flex-aspect-ratio-034.html

aspect-ratio/flex-aspect-ratio-035.html

aspect-ratio/flex-aspect-ratio-036.html

aspect-ratio/flex-aspect-ratio-037.html

aspect-ratio/flex-aspect-ratio-038.html

aspect-ratio/flex-aspect-ratio-045.html

aspect-ratio/flex-aspect-ratio-046.html

aspect-ratio/flex-aspect-ratio-047.html

aspect-ratio/flex-aspect-ratio-048.html

aspect-ratio/flex-aspect-ratio-049.html

aspect-ratio/flex-aspect-ratio-050.html

aspect-ratio/flex-aspect-ratio-051.html

aspect-ratio/flex-aspect-ratio-052.html

aspect-ratio/flex-aspect-ratio-053.html

aspect-ratio/flex-aspect-ratio-054.html

aspect-ratio/flex-aspect-ratio-055.html

aspect-ratio/floats-aspect-ratio-001.html

aspect-ratio/fractional-aspect-ratio.html

aspect-ratio/grid-aspect-ratio-001.html

aspect-ratio/grid-aspect-ratio-002.html

aspect-ratio/grid-aspect-ratio-003.html

aspect-ratio/grid-aspect-ratio-004.html

aspect-ratio/grid-aspect-ratio-005.html

aspect-ratio/grid-aspect-ratio-006.html

aspect-ratio/grid-aspect-ratio-007.html

aspect-ratio/grid-aspect-ratio-008.html

aspect-ratio/grid-aspect-ratio-009.html

aspect-ratio/grid-aspect-ratio-010.html

aspect-ratio/grid-aspect-ratio-011.html

aspect-ratio/grid-aspect-ratio-012.html

aspect-ratio/grid-aspect-ratio-014.html

aspect-ratio/grid-aspect-ratio-015.html

aspect-ratio/grid-aspect-ratio-016.html

aspect-ratio/grid-aspect-ratio-017.html

aspect-ratio/grid-aspect-ratio-018.html

aspect-ratio/grid-aspect-ratio-019.html

aspect-ratio/grid-aspect-ratio-020.html

aspect-ratio/grid-aspect-ratio-021.html

aspect-ratio/grid-aspect-ratio-022.html

aspect-ratio/grid-aspect-ratio-023.html

aspect-ratio/grid-aspect-ratio-024.html

aspect-ratio/grid-aspect-ratio-025.html

aspect-ratio/grid-aspect-ratio-026.html

aspect-ratio/grid-aspect-ratio-027.html

aspect-ratio/grid-aspect-ratio-028.html

aspect-ratio/grid-aspect-ratio-029.html

aspect-ratio/grid-aspect-ratio-030.html

aspect-ratio/grid-aspect-ratio-031.html

aspect-ratio/grid-aspect-ratio-032.html

aspect-ratio/grid-aspect-ratio-033.html

aspect-ratio/grid-aspect-ratio-034.html

aspect-ratio/grid-aspect-ratio-035.html

aspect-ratio/grid-aspect-ratio-036.html

aspect-ratio/grid-aspect-ratio-037.html

aspect-ratio/grid-aspect-ratio-038.html

aspect-ratio/grid-aspect-ratio-040.html

aspect-ratio/grid-aspect-ratio-041.html

aspect-ratio/inheritance.html

aspect-ratio/intrinsic-size-001.html

aspect-ratio/intrinsic-size-002.html

aspect-ratio/intrinsic-size-003.html

aspect-ratio/intrinsic-size-004.html

aspect-ratio/intrinsic-size-005.html

aspect-ratio/intrinsic-size-006.html

aspect-ratio/intrinsic-size-007.html

aspect-ratio/intrinsic-size-008.html

aspect-ratio/intrinsic-size-009.html

aspect-ratio/intrinsic-size-011.html

aspect-ratio/intrinsic-size-012.html

aspect-ratio/intrinsic-size-013.html

aspect-ratio/intrinsic-size-014.html

aspect-ratio/intrinsic-size-015.html

aspect-ratio/intrinsic-size-016.html

aspect-ratio/intrinsic-size-017.html

aspect-ratio/intrinsic-size-018.html

aspect-ratio/intrinsic-size-019.html

aspect-ratio/intrinsic-size-020.html

aspect-ratio/intrinsic-size-021.html

aspect-ratio/intrinsic-size-022.html

aspect-ratio/intrinsic-size-023.html

aspect-ratio/intrinsic-size-024.html

aspect-ratio/intrinsic-size-025.html

aspect-ratio/large-aspect-ratio-crash.html

aspect-ratio/parsing/aspect-ratio-computed.html

aspect-ratio/parsing/aspect-ratio-invalid.html

aspect-ratio/parsing/aspect-ratio-valid.html

aspect-ratio/percentage-resolution-001.html

aspect-ratio/percentage-resolution-002.html

aspect-ratio/percentage-resolution-003.html

aspect-ratio/percentage-resolution-004.html

aspect-ratio/percentage-resolution-005.html

aspect-ratio/quirks-mode-001.html

aspect-ratio/quirks-mode-002.html

aspect-ratio/quirks-mode-003.html

aspect-ratio/replaced-element-001.html

aspect-ratio/replaced-element-002.html

aspect-ratio/replaced-element-003.html

aspect-ratio/replaced-element-004.html

aspect-ratio/replaced-element-005.html

aspect-ratio/replaced-element-006.html

aspect-ratio/replaced-element-007.html

aspect-ratio/replaced-element-008.html

aspect-ratio/replaced-element-009.html

aspect-ratio/replaced-element-010.html

aspect-ratio/replaced-element-011.html

aspect-ratio/replaced-element-012.html

aspect-ratio/replaced-element-013.html

aspect-ratio/replaced-element-014.html

aspect-ratio/replaced-element-015.html

aspect-ratio/replaced-element-016.html

aspect-ratio/replaced-element-017.html

aspect-ratio/replaced-element-018.html

aspect-ratio/replaced-element-019.html

aspect-ratio/replaced-element-020.html

aspect-ratio/replaced-element-021.html

aspect-ratio/replaced-element-022.html

aspect-ratio/replaced-element-023.html

aspect-ratio/replaced-element-024.html

aspect-ratio/replaced-element-025.html

aspect-ratio/replaced-element-026.html

aspect-ratio/replaced-element-027.html

aspect-ratio/replaced-element-028.html

aspect-ratio/replaced-element-029.html

aspect-ratio/replaced-element-030.html

aspect-ratio/replaced-element-031.html

aspect-ratio/replaced-element-034.html

aspect-ratio/replaced-element-035.html

aspect-ratio/replaced-element-036.html

aspect-ratio/replaced-element-037.html

aspect-ratio/replaced-element-042.html

aspect-ratio/replaced-element-045.html

aspect-ratio/replaced-element-046.html

aspect-ratio/replaced-element-049.html

aspect-ratio/replaced-element-dynamic-aspect-ratio.html

aspect-ratio/select-element-001.html

aspect-ratio/sign-function-aspect-ratio.html

aspect-ratio/small-aspect-ratio-crash.html

aspect-ratio/table-element-001.html

aspect-ratio/zero-or-infinity-001.html

aspect-ratio/zero-or-infinity-002.html

aspect-ratio/zero-or-infinity-003.html

aspect-ratio/zero-or-infinity-004.html

aspect-ratio/zero-or-infinity-005.html

aspect-ratio/zero-or-infinity-006.html

aspect-ratio/zero-or-infinity-007.html

aspect-ratio/zero-or-infinity-008.html

aspect-ratio/zero-or-infinity-009.html

aspect-ratio/zero-or-infinity-010.html

</wpt>

This property sets a <dfn export>preferred aspect ratio</dfn> for the box,

which will be used in the calculation of ''height/auto'' sizes

and some other layout functions.

<dl dfn-for="aspect-ratio" dfn-type="value">

<dt><dfn>auto</dfn>

<dd>

<a>Replaced elements</a> with a <a>natural aspect ratio</a>

use that aspect ratio;

otherwise the box has no <a>preferred aspect ratio</a>.

Size calculations involving the aspect ratio

work with the <a>content box</a> dimensions always.

<dt><dfn><<ratio>></dfn>

<dd>

The box’s <a>preferred aspect ratio</a> is the specified ratio

of ''<var>width</var> / <var>height</var>''.

Size calculations involving the aspect ratio

work with the dimensions of the box specified by 'box-sizing'.

If the <<ratio>> is [=degenerate ratio|degenerate=],

the property instead behaves as ''aspect-ratio/auto''.

<dt><dfn>auto && <<ratio>></dfn>

<dd>

If both ''aspect-ratio/auto'' and a <<ratio>> are specified together,

the [=preferred aspect ratio=] is the specified ratio

of ''<var>width</var> / <var>height</var>''

unless it is a [=replaced element=] with a [=natural aspect ratio=],

in which case that aspect ratio is used instead.

In all cases, size calculations involving the aspect ratio

work with the [=content box=] dimensions always.

If the <<ratio>> is [=degenerate ratio|degenerate=],

the property instead behaves as ''aspect-ratio/auto''.

<wpt>

aspect-ratio/block-aspect-ratio-050.html

</wpt>

</dl>

Note: Having a [=preferred aspect ratio=] does not make a box into a [=replaced element=];

layout rules specific to [=replaced elements=]

do not generally apply to [=non-replaced=] boxes with a [=preferred aspect ratio=].

For example, a [=non-replaced=] [=absolutely-positioned=] box

treats ''justify-self: normal'' as ''justify-self/stretch'', not as ''justify-self/start''

([[CSS-ALIGN-3#justify-abspos]]),

even if it has a [=preferred aspect ratio=]

ISSUE: CSS2.1 does not cleanly differentiate between

replaced elements vs. elements with an aspect ratio;

need to figure out specific cases that are unclear and define them,

either in the appropriate Level 3 spec or here.

<div class="example">

This example sets each item in the grid to render as a square,

determining the number of items and their widths by the available space.

<xmp highlight="html">

<ul>

<li>…

<li>…

<li>…

<li>…

</ul>

</xmp>

<pre highlight="css">

ul {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));

}

li {

aspect-ratio: 1/1;

overflow: auto;

}

</pre>

</div>

<div class="example">

This example uses the <{iframe}> element’s

<code>width</code> and <code>height</code> attributes

to set the 'aspect-ratio' property,

giving the iframe an aspect ratio to use for sizing

so that it behaves exactly like an image with that aspect ratio.

<!-- https://twitter.com/ausi/status/1053013616239288320 -->

<pre highlight="html">

&lt;iframe

src="https://www.youtube.com/embed/0Gr1XSyxZy0"

width=560

height=315>

</pre>

<pre highlight="css">

@supports (aspect-ratio: attr(width number) / 1) {

iframe {

aspect-ratio: attr(width number) / attr(height number);

width: 100%;

height: auto;

}

}

</pre>

</div>

If a replaced element's only [=natural dimension=]

is a [=natural width=] or a [=natural height=],

giving it a [=preferred aspect ratio=]

also gives it an [=natural dimensions|natural=] height or width,

whichever was missing,

by transferring the existing size

through the [=preferred aspect ratio=].

<h3 id="aspect-ratio-automatic">

Effects of Preferred Aspect Ratio on Automatic Sizes</h3>

When a box has a [=preferred aspect ratio=],

its <a>automatic sizes</a>

are calculated the same as for

a [=replaced element=] with a [=natural aspect ratio=]

and no [=natural size=] in that axis,

see e.g. <a href="https://www.w3.org/TR/CSS2/visudet.html">CSS2 &sect;&#x202F;10</a>

and <a href="https://www.w3.org/TR/css-flexbox-1/#algo-main-item">CSS Flexible Box Model Level 1 &sect;&#x202F;9.2</a>.

The axis in which the <a>preferred size</a> calculation

depends on this aspect ratio

is called the <dfn export>ratio-dependent axis</dfn>,

and the resulting size is <a>definite</a>

if its input sizes are also <a>definite</a>.

The opposite axis (on which the [=ratio-dependent axis=] size depends)

is the <dfn export>ratio-determining axis</dfn>.

Note: A [=preferred aspect ratio=]

only ever has an effect if at least one of the box's sizes

is [=automatic size|automatic=].

If neither 'width' nor 'height' is an [=automatic size=],

it can have no effect on its [=preferred sizes=].

Issue: When we move all the sizing information here,

rather than crowbar-ing our way into 2.1,

then the core principle here is just:

the resolved [=preferred size=] in the ratio-determining axis

(before applying min/max)

gets transferred thru the ratio.

Min/max constraints get transferred afterwards,

and then applied to each axis independently without regards to aspect-ratio.

<wpt>

aspect-ratio/flex-aspect-ratio-031.html

aspect-ratio/grid-aspect-ratio-align-items-center.html

</wpt>

<h4 id="aspect-ratio-margin-collapse">

Margin-collapsing</h4>

For the purpose of margin collapsing ([[css2/box#collapsing-margins]]),

if the [=block axis=] is the [=ratio-dependent axis=],

it is not considered to have a [=computed value|computed=] 'block-size' of ''height/auto''.

<h3 id="aspect-ratio-minimum">

Automatic Content-based Minimum Sizes</h3>

In order to avoid unintentional overflow,

the <a>automatic minimum size</a> in the <a>ratio-dependent axis</a>

of a box with a <a>preferred aspect ratio</a>

that is neither a <a>replaced element</a> nor a <a>scroll container</a>

is its <a>min-content size</a>

capped by its <a>maximum size</a>.

<div class="example">

In the following example,

the box is as wide as the container (as usual),

and its height is as tall as needed to contain its content

but at least as tall as it is wide.

<pre highlight=css>

div {

aspect-ratio: 1/1;

/* 'width' and 'height' both default to 'auto' */

}

</pre>

<pre class="figure">

+----------+ +----------+ +----------+

| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |

| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |

| ~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |

| | | ~~~ | | ~~~~~~~~ |

+----------+ +----------+ | ~~~~~~~~ |

| ~~~~~~ |

+----------+

</pre>

When ''overflow: auto'' is specified, however,

even the box with excess content maintains the 1:1 aspect ratio

(and handles overflow by becoming scrollable instead, as usual).

<pre highlight=css>

div {

overflow: auto;

aspect-ratio: 1/1;

}

</pre>

<pre class="figure">

+----------+ +----------+ +----------+

| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~^|

| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |

| ~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |

| | | ~~~ | | ~~~~~~~~v|

+----------+ +----------+ +----------+

</pre>

Overriding the 'min-height' property also maintains the 1:1 aspect ratio,

but will result in content overflowing the box

if it is not otherwise handled.

<pre highlight=css>

div {

aspect-ratio: 1/1;

min-height: 0;

}

</pre>

<pre class="figure">

+----------+ +----------+ +----------+

| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |

| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |

| ~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |

| | | ~~~ | | ~~~~~~~~ |

+----------+ +----------+ +-~~~~~~~~-+

&nbsp; ~~~~~~ &nbsp;

</pre>

</div>

<div class="example">

This automatic minimum operates in both axes.

Consider this example:

<pre highlight=html>

&lt;div style="height: 100px; aspect-ratio: 1/1;">

&lt;span style="display: inline-block; width: 50px;">&lt;/span>

&lt;span style="display: inline-block; width: 150px;">&lt;/span>

&lt;/div>

</pre>

The 'width' of the container, being ''width/auto'',

resolves through the aspect ratio to 100px.

However, its 'min-width', being ''min-width/auto'',

resolves to 150px.

The resulting width of the container is thus 150px.

To ignore the contents when sizing the container,

''min-width: 0'' can be specified.

</div>

<wpt>

aspect-ratio/block-aspect-ratio-038.html

aspect-ratio/block-aspect-ratio-039.html

aspect-ratio/fieldset-element-001.html

aspect-ratio/fieldset-element-002.html

aspect-ratio/flex-aspect-ratio-002.html

aspect-ratio/flex-aspect-ratio-004.html

aspect-ratio/flex-aspect-ratio-025.html

aspect-ratio/flex-aspect-ratio-026.html

aspect-ratio/flex-aspect-ratio-040.html

aspect-ratio/flex-aspect-ratio-041.html

aspect-ratio/flex-aspect-ratio-042.html

aspect-ratio/flex-aspect-ratio-043.html

aspect-ratio/flex-aspect-ratio-044.html

aspect-ratio/grid-aspect-ratio-039.html

aspect-ratio/grid-aspect-ratio-042.html

aspect-ratio/intrinsic-size-010.html

</wpt>

<h3 id="aspect-ratio-size-transfers">

Min/Max Size Transfers</h3>

Sizing constraints in either axis

(the <var>origin</var> axis)

are transferred through the [=preferred aspect ratio=]

and applied to any [=indefinite=]

[=minimum size|minimum=], [=maximum size|maximum=], or [=preferred size|preferred=] size

in the other axis (the <var>destination</var> axis)

as follows:

* First, any [=definite=] [=minimum size=] is converted and transferred

from the <var>origin</var> to <var>destination</var> axis.

This transferred minimum is capped

by any [=definite=] [=preferred size|preferred=] or [=maximum size=]

in the <var>destination</var> axis.

* Then, any [=definite=] [=maximum size=] is converted and transferred

from the <var>origin</var> to <var>destination</var>.

This transferred maximum is floored

by any [=definite=] [=preferred size|preferred=] or [=minimum size=]

in the <var>destination</var> axis

as well as by the transferred minimum, if any.

Note: Thus, any definite sizes are completely unaffected by a transferred constraint;

and a transferred minimum will never cause an element to exceed a definite preferred/maximum size,

nor will a transferred maximum cause an element to violate its preferred/minimum size.

Note: The basic principle is that sizing constraints

transfer through the aspect-ratio to the other side

to preserve the aspect ratio to the extent that they can

without violating any sizes specified explicitly on that affected axis.

(This is the principle that drove the contents of

the <a href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths">constraint table in CSS2 Section 10.4</a>.)

<div class="example">

In the following example:

<pre highlight=html>

&lt;div id=container style="height: 100px; float: left;">

&lt;div id=item style="height: 100%; aspect-ratio: 1/1;">content&lt;/div>

&lt;/div>

</pre>

Since the height of the <code>#item</code> is a percentage that resolves against a definite container,

the width of the item resolves to 100px for both its intrinsic size contributions as well as for final layout,

so the container also sizes to a width of 100px.

<pre highlight=html>

&lt;div id=container style="height: auto; float: left;">

&lt;div id=item style="height: 100%; aspect-ratio: 1/1;">content&lt;/div>

&lt;/div>

</pre>

In this next example,

the percentage height of the item cannot be resolved and [=behaves as auto=]

(see [[css2/visudet#the-height-property]]).

Since both axes now have an [=automatic size=],

the height becomes the [=ratio-dependent axis=].

Calculating the [=intrinsic size contributions=] of the box

produces a width derived from its content,

and a height calculated from that width and the aspect ratio,

yielding a square box (and a container) sized

to the width of the word “content”.

</div>

<wpt>

aspect-ratio/replaced-element-032.html

aspect-ratio/replaced-element-033.html

aspect-ratio/block-aspect-ratio-040.html

aspect-ratio/block-aspect-ratio-041.html

aspect-ratio/block-aspect-ratio-042.html

aspect-ratio/block-aspect-ratio-043.html

aspect-ratio/block-aspect-ratio-044.html

aspect-ratio/block-aspect-ratio-045.html

aspect-ratio/block-aspect-ratio-046.html

aspect-ratio/block-aspect-ratio-047.html

aspect-ratio/block-aspect-ratio-048.html

aspect-ratio/block-aspect-ratio-049.html

aspect-ratio/flex-aspect-ratio-039.html

aspect-ratio/replaced-element-039.html

aspect-ratio/replaced-element-040.html

aspect-ratio/replaced-element-041.html

aspect-ratio/replaced-element-043.html

aspect-ratio/replaced-element-044.html

image-max-width-and-height-behaves-as-auto.html

min-max-content-orthogonal-flow-crash-001.html

</wpt>

ISSUE(6071): This section might not be written correctly.

<!-- Big Text: intrinsic

████ █ █▌ █████▌ ████▌ ████ █ █▌ ███▌ ████ ███▌

▐▌ █▌ █▌ █▌ █▌ █▌ ▐▌ █▌ █▌ █▌ █▌ ▐▌ █▌ █▌

▐▌ ██▌ █▌ █▌ █▌ █▌ ▐▌ ██▌ █▌ █▌ ▐▌ █▌

▐▌ █▌▐█ █▌ █▌ ████▌ ▐▌ █▌▐█ █▌ ███▌ ▐▌ █▌

▐▌ █▌ ██▌ █▌ █▌▐█ ▐▌ █▌ ██▌ █▌ ▐▌ █▌

▐▌ █▌ █▌ █▌ █▌ ▐█ ▐▌ █▌ █▌ █▌ █▌ ▐▌ █▌ █▌

████ █▌ ▐▌ █▌ █▌ █▌ ████ █▌ ▐▌ ███▌ ████ ███▌

-->

<h2 id='intrinsic'>

Intrinsic Size Determination</h2>

<h3 id="intrinsic-sizes">

Intrinsic Sizes</h3>

ISSUE: [[css-sizing-3#intrinsic-sizes]]

<h3 id='intrinsic-size-override'>

Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties</h3>

<pre class=propdef>

Name: contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size

Value: auto? [ none | <<length [0,∞]>> ]

Initial: none

Inherited: no

Logical property group: contain-intrinsic-size

Applies to: elements with [=size containment=]

Computed value: as specified, with <<length>> values computed

Percentages: n/a

Animation type: by computed value type

</pre>

<wpt>

contain-intrinsic-size/auto-014.html

contain-intrinsic-size/auto-015.html

contain-intrinsic-size/auto-016.html

contain-intrinsic-size/auto-017.html

contain-intrinsic-size/auto-018.html

contain-intrinsic-size/contain-intrinsic-size-001.html

contain-intrinsic-size/contain-intrinsic-size-002.html

contain-intrinsic-size/contain-intrinsic-size-003.html

contain-intrinsic-size/contain-intrinsic-size-004.html

contain-intrinsic-size/contain-intrinsic-size-005.html

contain-intrinsic-size/contain-intrinsic-size-006.html

contain-intrinsic-size/contain-intrinsic-size-007.html

contain-intrinsic-size/contain-intrinsic-size-008.html

contain-intrinsic-size/contain-intrinsic-size-009.html

contain-intrinsic-size/contain-intrinsic-size-010.html

contain-intrinsic-size/contain-intrinsic-size-011.html

contain-intrinsic-size/contain-intrinsic-size-012.html

contain-intrinsic-size/contain-intrinsic-size-013.html

contain-intrinsic-size/contain-intrinsic-size-014.html

contain-intrinsic-size/contain-intrinsic-size-015.html

contain-intrinsic-size/contain-intrinsic-size-016.html

contain-intrinsic-size/contain-intrinsic-size-017.html

contain-intrinsic-size/contain-intrinsic-size-018.html

contain-intrinsic-size/contain-intrinsic-size-019.html

contain-intrinsic-size/contain-intrinsic-size-020.html

contain-intrinsic-size/contain-intrinsic-size-021.html

contain-intrinsic-size/contain-intrinsic-size-022.html

contain-intrinsic-size/contain-intrinsic-size-023.html

contain-intrinsic-size/contain-intrinsic-size-024.html

contain-intrinsic-size/contain-intrinsic-size-025.html

contain-intrinsic-size/contain-intrinsic-size-026.html

contain-intrinsic-size/contain-intrinsic-size-027.html

contain-intrinsic-size/contain-intrinsic-size-028.html

contain-intrinsic-size/contain-intrinsic-size-029.html

contain-intrinsic-size/contain-intrinsic-size-030.html

contain-intrinsic-size/contain-intrinsic-size-031.html

contain-intrinsic-size/contain-intrinsic-size-032.html

contain-intrinsic-size/contain-intrinsic-size-logical-001.html

contain-intrinsic-size/contain-intrinsic-size-logical-002.html

contain-intrinsic-size/contain-intrinsic-size-logical-003.html

contain-intrinsic-size/forget-on-disconnect-in-iframe.html

contain-intrinsic-size/parsing/contain-intrinsic-size-computed.html

contain-intrinsic-size/parsing/contain-intrinsic-size-invalid.html

contain-intrinsic-size/parsing/contain-intrinsic-size-valid.html

</wpt>

These properties allow elements with [=size containment=] to specify

an <dfn export>explicit intrinsic inner size</dfn>,

causing the box to size as if its [=in-flow=] content

totals to a width and height

matching the specified [=explicit intrinsic inner size=]

(rather than sizing as if it were empty).

Note: This is not always equivalent

to laying out as if the element had one child of the specified [=explicit intrinsic inner size=].

For example, a [=grid container=] with one child of the specified size

would still size according to the specified grid,

usually ending up with a larger content size than specified.

<wpt>

contain-intrinsic-size/contain-intrinsic-size-033.html

</wpt>

<dl dfn-type=value dfn-for="contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size, contain-intrinsic-size">

: <dfn>none</dfn> | <dfn><<length>></dfn>

::

If no other 'contain-intrinsic-size' value

(such as ''contain-intrinsic-size/auto'')

is providing an [=explicit intrinsic inner size=],

the corresponding axis either doesn't have an [=explicit intrinsic inner size=]

(if ''contain-intrinsic-size/none'' is specified)

or has an [=explicit intrinsic inner size=] of the specified <<length>>.

: <dfn>auto</dfn>

:: If ''contain-intrinsic-size/auto'' is specified

and the element has a [=last remembered size=]

and is currently [=skipping its contents=],

its [=explicit intrinsic inner size=] in the corresponding axis

is the [=last remembered size=] in that axis.

Note: This occurs, for example,

when an element with ''content-visibility: auto''

is off-screen.

<wpt pathprefix="css/css-contain/">

content-visibility/content-visibility-058.html

</wpt>

</dl>

If an element has an [=explicit intrinsic inner size=] in an axis,

then after laying out the element as normal for [=size containment=],

the size of the contents in that axis are instead treated as being the [=explicit intrinsic inner size=]

instead of what was calculated in layout,