From 033a922400df960323c2cf98a99947c5621a273c Mon Sep 17 00:00:00 2001 From: Koji Ishii Date: Wed, 12 Nov 2025 18:49:02 +0900 Subject: [PATCH 1/3] [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 | 68 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 66 insertions(+), 2 deletions(-) diff --git a/css-sizing-4/Overview.bs b/css-sizing-4/Overview.bs index d7135b202c33..8cd2892c09c6 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 
 	Name: contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size
-	Value: auto? [ none | <> ]
+	Value: auto? [ none | <> ] | from-element <>?
 	Initial: none
 	Inherited: no
 	Logical property group: contain-intrinsic-size
@@ -573,6 +573,16 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties
 			
 			content-visibility/content-visibility-058.html
 			
+
+		: from-element
+		:: ''from-element'' enables the responsively-sized iframes.
+			It applies only to <iframe> elements,
+			and applies regardless of the values of the ''contain'' property.
+
+			The optional length specifies the [=explicit intrinsic inner size=]
+			until the embedded document notifies the first [=natural size=],
+
+			Note: The name needs further discussion.
 	
 
 	If an element has an [=explicit intrinsic inner size=] in an axis,
@@ -600,7 +610,7 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties
 
 	
 	Name: contain-intrinsic-size
-	Value: [ auto? [ none | <> ] ]{1,2}
+	Value: [ auto? [ none | <> ] | from-element <>? ]{1,2}
 	

 
 	'contain-intrinsic-size' is a shorthand property
@@ -656,6 +666,60 @@ Last Remembered Size
 		even across changes such as going to/from ''display: none''.
 	
 
+

+Responsively-sized iframes

+
+  Iframes participate in the layout of the parent document,
+	via the style and layout of their owning <iframe> element.
+	However, unlike other HTML elements such as <div>,
+	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 <object> and <embed> 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 <iframe> element.
+	The embedded document opts in by adding the
+	<meta name="responsive-embedded-sizing"> tag.
+
+	When the meta tag is present at the time of
+	the DOMContentLoaded and load 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 <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 <iframe> sizing.
+
+	

+		When the embedded document has the following HTML:
+	  
+		<meta name="responsive-embedded-sizing">
+		<div style="height: 500px"></div>
+		

+		and the embedding document has the following CSS:
+	  
+		iframe {
+			contain-intrinsic-block-size: from-element;
+		}
+		

+		The height of the <iframe> will be 500px.
+	

+
+	In addition,
+	the embedded document can call window.requestResize()
+	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.
+
 

 Interaction With ''overflow: auto''

 

From 01fdd70bfd9f3d9409062e7670c6eaf0304a6c45 Mon Sep 17 00:00:00 2001
From: "Tab Atkins Jr." 
Date: Tue, 25 Nov 2025 13:36:53 -0800
Subject: [PATCH 2/3] Apply suggestion from @tabatkins

---
 css-sizing-4/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css-sizing-4/Overview.bs b/css-sizing-4/Overview.bs
index 8cd2892c09c6..d6d3229a7a20 100644
--- a/css-sizing-4/Overview.bs
+++ b/css-sizing-4/Overview.bs
@@ -574,7 +574,7 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties
 			content-visibility/content-visibility-058.html
 			
 
-		: from-element
+		: from-element <>
 		:: ''from-element'' enables the responsively-sized iframes.
 			It applies only to <iframe> elements,
 			and applies regardless of the values of the ''contain'' property.

From 01a29def55c7ed68539eadf9eb8e0939446b3cb8 Mon Sep 17 00:00:00 2001
From: "Tab Atkins Jr." 
Date: Tue, 25 Nov 2025 14:36:00 -0800
Subject: [PATCH 3/3] Rewrite a bit

* Did an editorial rewrite of the "responsively-sized iframes" section; should be zero normative changes.
* Rejiggered the syntax of the properties a little, integrating it better with the existing syntax, so that 'from-element' works the same as 'auto' (being a magic source of intrinsic size) and requiring a fallback size to be specified.
---
 css-sizing-4/Overview.bs | 131 ++++++++++++++++++++++-----------------
 1 file changed, 74 insertions(+), 57 deletions(-)

diff --git a/css-sizing-4/Overview.bs b/css-sizing-4/Overview.bs
index d6d3229a7a20..877b1bc3710b 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
 
 	
 	Name: contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size
-	Value: auto? [ none | <> ] | from-element <>?
+	Value: [ auto | from-element ]? [ none | <> ]
 	Initial: none
 	Inherited: no
 	Logical property group: contain-intrinsic-size
@@ -554,35 +554,45 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties
 	usually ending up with a larger content size than specified.
 
 	

-		: auto? [ none | <> ]
+		: none | <>
+		::
+			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 <>.
+
+		: auto
 		:: 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.
 
-			Otherwise,
-			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 <>.
-
 			
 			content-visibility/content-visibility-058.html
 			
 
-		: from-element <>
-		:: ''from-element'' enables the responsively-sized iframes.
-			It applies only to <iframe> elements,
-			and applies regardless of the values of the ''contain'' property.
+		: from-element
+		:: 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 [=host language=].
+			In HTML, only <