[css-sizing-4] Add responsively-sized iframes (#13099)

* [css-sizing-4] Add responsively-sized iframes

Based on the resolutions at:
#1771 (comment)

* Apply suggestion from @tabatkins

* 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.

---------

Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>

Author: kojiishi

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 | from-element ]? [ none | <<length [0,∞]>> ]
 	Initial: none
 	Inherited: no
 	Logical property group: contain-intrinsic-size
@@ -554,25 +554,45 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties</h3>
 	usually ending up with a larger content size than specified.
 
 	<dl dfn-type=value dfn-for="contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size, contain-intrinsic-size">
-		: <dfn>auto</dfn>? [ <dfn>none</dfn> | <<length>> ]
+		: <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.
 
-			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 <<length>>.
-
 			<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 [=host 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,
@@ -600,7 +620,7 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties</h3>
 
 	<pre class="propdef shorthand">
 	Name: contain-intrinsic-size
-	Value: [ auto? [ none | <<length>> ] ]{1,2}
+	Value: [ [ auto | from-element ]? [ none | <<length [0,∞]>> ] ]{1,2}
 	</pre>
 
 	'contain-intrinsic-size' is a shorthand property
@@ -656,6 +676,67 @@ Last Remembered Size</h4>
 		even across changes such as going to/from ''display: none''.
 	</div>
 
+<h4 id='responsive-iframes' dfn lt="responsively-sized iframe" export>
+Responsively-sized iframes</h4>
+
+	Some [=replaced elements=] can contain "normal" flowed content,
+	such as HTML <{iframe}>s.
+	For privacy and security reasons,
+	these elements do not, by default,
+	expose any information about their internal contents' sizing
+	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'
+	allows these elements to opt into exposing their actual content size,
+	known as their <dfn export>internal layout intrinsic size</dfn>.
+
+	Which elements have an [=internal layout intrinsic size=],
+	and how it's determined,
+	are decided by the host language.
+	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.
+
+	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.
+	Subsequent changes to content, styling or layout of the embedded document
+	do not affect the [=internal layout intrinsic size=].
+
+	<div class='example'>
+		When the embedded document has the following HTML:
+
+	  <xmp highlight=html>
+			<meta name="responsive-embedded-sizing">
+			<div style="height: 500px"></div>
+		</xmp>
+
+		and the embedding document has the following CSS:
+
+	  <pre highlight=css>
+			iframe {
+				contain-intrinsic-block-size: from-element 150px;
+			}
+		</pre>
+
+		The height of the <{iframe}> will initially be ''150px'',
+		but will be updated to ''500px'' once the iframe's document loads.
+	</div>
+
+	In addition,
+	the internal document can call {{window/requestResize()|window.requestResize()}};
+	if the document still has the required <{meta}> element,
+	its [=internal layout intrinsic size=]'s height
+	is updated to its new current [=natural height=].
+
+	Note: If the required <{meta}> element is not present,
+	the call throws a {{NotAllowedError}} {{DOMException}} instead.
+
 <h4 id='cis-scrollbars'>
 Interaction With ''overflow: auto''</h4>