Skip to content
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Define frame-sizing and add meta tag immutability
  • Loading branch information
kojiishi committed Mar 23, 2026
commit 58986edfe34420682861199e1f10ef06e60ebedf
64 changes: 35 additions & 29 deletions css-sizing-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -891,7 +891,7 @@ 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 | from-element ]? [ none | <<length [0,∞]>> ]
Value: auto? [ none | <<length [0,∞]>> ]
Initial: none
Inherited: no
Logical property group: contain-intrinsic-size
Expand Down Expand Up @@ -989,22 +989,6 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties</h3>
<wpt pathprefix="css/css-contain/">
content-visibility/content-visibility-058.html
</wpt>

: <dfn>from-element</dfn>
:: If ''contain-intrinsic-size/from-element'' is specified
and the element is a [=replaced element=]
with an [=internal layout intrinsic size=],
its [=explicit intrinsic inner size=] in the corresponding axis
is that size.

Note: Whether a [=replaced element=]
has an [=internal layout intrinsic size=]
is defined by the [=document language=].
In HTML, only <{iframe}>s do so.

Issue: Should this apply even when ''contain:layout'' isn't specified?

Issue: The name needs further discussion.
</dl>

If an element has an [=explicit intrinsic inner size=] in an axis,
Expand Down Expand Up @@ -1032,7 +1016,7 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties</h3>

<pre class="propdef shorthand">
Name: contain-intrinsic-size
Value: [ [ auto | from-element ]? [ none | <<length [0,∞]>> ] ]{1,2}
Value: [ auto? [ none | <<length [0,∞]>> ] ]{1,2}
</pre>

<wpt>
Expand Down Expand Up @@ -1198,7 +1182,17 @@ Interaction With ''overflow: auto''</h4>
-->

<h3 id='responsive-iframes' dfn lt="responsively-sized iframe" export>
Responsively-sized iframes</h3>
Responsively-sized iframes: the 'frame-sizing' property</h3>

<pre class="propdef">
Name: frame-sizing
Value: auto | content-width | content-height | content-block-size | content-inline-size
Initial: auto
Applies to: <{iframe}> elements
Inherited: no
Computed value: specified keyword
Animation type: discrete
</pre>

Some [=replaced elements=] can contain "normal" flowed content,
such as HTML <{iframe}>s.
Expand All @@ -1208,7 +1202,7 @@ Responsively-sized iframes</h3>
to the outside page,
instead just using a static, predetermined intrinsic size,
and making their contents scrollable.
The ''contain-intrinsic-size/from-element'' value of 'contain-intrinsic-size'
The 'frame-sizing' property
allows these elements to opt into exposing their actual content size,
known as their <dfn export>internal layout intrinsic size</dfn>.

Expand All @@ -1218,17 +1212,27 @@ Responsively-sized iframes</h3>
In HTML, only <{iframe}> elements can have an [=internal layout intrinsic size=],
and further,
only when the contained document has also opted in
via a <code>&lt;meta name=responsize-embedded-sizing></code> element.
via a <code>&lt;meta name=responsive-embedded-sizing></code> element.

The first instance of this meta tag added by the parser can make it opt in.
If the parser encounters multiple such tags, only the first one is used.
If the parser closes the <code>&lt;head&gt;</code> without seeing the tag,
it is frozen as not-set.

An <{iframe}> initially doesn't have an [=internal layout intrinsic size=].
When an <{iframe}>'s internal document is loaded,
if the required <{meta}> element is present
at the time of the <code>DOMContentLoaded</code> and <code>load</code> events,
the <{iframe}>'s [=internal layout intrinsic size=]'s height
is set to the [=natural height=] of the embedded document.
if the required <{meta}> element is present,
the <{iframe}>'s [=internal layout intrinsic size=]'s height or width
is set to the [=natural size=] of the embedded document as specified by 'frame-sizing'.
Resizing occurs at the <code>DOMContentLoaded</code> and <code>load</code> events.
Subsequent changes to content, styling or layout of the embedded document
do not affect the [=internal layout intrinsic size=].

When laying out the <{iframe}>'s internal document,
its initial containing block size is locked to
the size at the time of its first layout,
to mitigate the risks of layout loops and information leaks.

<div class='example'>
When the embedded document has the following HTML:

Expand All @@ -1241,19 +1245,21 @@ Responsively-sized iframes</h3>

<pre highlight=css>
iframe {
contain-intrinsic-block-size: from-element 150px;
frame-sizing: content-height;
}
</pre>

The height of the <{iframe}> will initially be ''150px'',
The height of the <{iframe}> will initially be the default iframe height (typically ''150px''),
but will be updated to ''500px'' once the iframe's document loads.
</div>

Issue: Should this apply even when ''contain:size'' isn't specified?
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is no longer relevant, now that frame-sizing is what's controlling the behavior.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed, thanks!


In addition,
the internal document can call {{window/requestResize()|window.requestResize()}};
if the document still has the required <{meta}> element,
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to go against the philosophy of freezing the meta value, and I guess would require us to track exactly which meta element was the one that set the value. Seems confusing - is there a need to keep this behavior?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, thanks. Can you take a look at updated text and see if it's good for readers?

its [=internal layout intrinsic size=]'s height
is updated to its new current [=natural height=].
its [=internal layout intrinsic size=]
is updated to its new current [=natural size=].

Note: If the required <{meta}> element is not present,
the call throws a {{NotAllowedError}} {{DOMException}} instead.
Expand Down