From b472ec5c6dcc3cc19b8aeb1208a1137ed3c02ddb Mon Sep 17 00:00:00 2001
From: Koji Ishii <kojii@chromium.org>
Date: Wed, 12 Nov 2025 18:49:02 +0900
Subject: [PATCH] [css-sizing-4] Add responsively-sized iframes

Based on the resolutions at:
https://github.com/w3c/csswg-drafts/issues/1771#issuecomment-989034819
---
 css-sizing-4/Overview.bs | 61 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/css-sizing-4/Overview.bs b/css-sizing-4/Overview.bs
index d7135b202c3..b07de4a958b 100644
--- a/css-sizing-4/Overview.bs
+++ b/css-sizing-4/Overview.bs
@@ -530,7 +530,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? [ none | <<length [0,∞]>> ]
+	Value: auto? [ none | <<length [0,∞]>> ] | from-element
 	Initial: none
 	Inherited: no
 	Logical property group: contain-intrinsic-size
@@ -573,6 +573,11 @@ 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>
+		:: This value enables the <a>responsively-sized iframes</a>.
+
+			Note: The name needs further discussion.
 	</dl>
 
 	If an element has an [=explicit intrinsic inner size=] in an axis,
@@ -656,6 +661,60 @@ Last Remembered Size</h4>
 		even across changes such as going to/from ''display: none''.
 	</div>
 
+<h4 id='responsive-iframes' dfn lt="responsively-sized iframes" export>
+Responsively-sized iframes</h4>
+
+  Iframes participate in the layout of the parent document,
+	via the style and layout of their owning <code>&lt;iframe></code> element.
+	However, unlike other HTML elements such as <code>&lt;div></code>,
+	iframe elements do not have the ability to support responsive layout,
+	i.e. size themselves automatically
+	to contain the [=natural size=] dimensions of the contents of the iframe.
+	Instead, browsers automatically add scrollbars to iframes as necessary,
+	so that users can access the content.
+
+	Responsive iframes adds responsive layout to iframes,
+	similar to embedded SVG documents
+	in <code>&lt;object></code> and <code>&lt;embed></code> elements.
+
+	To preserve privacy and security guarantees of cross-origin content,
+	both the embedding and embedded document must opt in.
+	The embedding document opts in by applying the ''from-element'' value to
+	the ''contain-intrinsic-block-size'' property on the &lt;iframe> element.
+	The embedded document opts in by adding the
+	&lt;meta name="responsive-embedded-sizing"> tag.
+
+	When the meta tag is present at the time of
+	the <code>DOMContentLoaded</code> and <code>load</code> events,
+	the embedding document is notified
+	with the new [=natural height=] of the embedded document.
+	If the ''contain-intrinsic-block-size''
+	on the box for the &lt;iframe> element is set to ''from-element'',
+	it takes this height as the [=explicit intrinsic inner size=] of the box.
+	Subsequent changes to content, styling or layout of the embedded document
+	do not affect the &lt;iframe> sizing.
+
+	<div class='example'>
+		When the embedded document has the following HTML:
+	  <pre highlight=html>
+		&lt;meta name="responsive-embedded-sizing">
+		&lt;div style="height: 500px">&lt;/div>
+		</pre>
+		and the embedding document has the following CSS:
+	  <pre highlight=css>
+		iframe {
+			contain-intrinsic-block-size: from-element;
+		}
+		</pre>
+		The height of the <code>&lt;iframe></code> will be 500px.
+	</div>
+
+	In addition,
+	the embedded document can call <code>window.requestResize()</code>
+	to notify its new [=natural height=] to the embedding document.
+	If the meta tag is not present at the time of the call,
+	it throws a NotAllowedError DOMException instead.
+
 <h4 id='cis-scrollbars'>
 Interaction With ''overflow: auto''</h4>