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

Based on the resolutions at:
#1771 (comment)

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? [ none | <<length [0,∞]>> ] | from-element <<length [0,∞]>>?
 	Initial: none
 	Inherited: no
 	Logical property group: contain-intrinsic-size
@@ -573,6 +573,16 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties</h3>
 			<wpt pathprefix="css/css-contain/">
 			content-visibility/content-visibility-058.html
 			</wpt>
+
+		: <dfn>from-element
+		:: ''from-element'' enables the <a>responsively-sized iframes</a>.
+			It applies only to <code>&lt;iframe></code> 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.
 	</dl>
 
 	If an element has an [=explicit intrinsic inner size=] in an axis,
@@ -600,7 +610,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? [ none | <<length [0,∞]>> ] ]{1,2} | from-element <<length [0,∞]>> {0,2}
 	</pre>
 
 	'contain-intrinsic-size' is a shorthand property
@@ -656,6 +666,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>