[css-sizing-4] Add the frame-sizing property (#13701)

* Move Responsively-sized iframes section to Section 5.3

* Define frame-sizing and add meta tag immutability

* Update the `meta` condition for `requestResize`

* Removed an obsolete issue

Author: kojiishi

css-sizing-4/Overview.bs

@@ -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
@@ -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,
@@ -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>
@@ -1108,66 +1092,6 @@ Last Remembered Size</h4>
 		contain-intrinsic-size/auto-013.html
 	</wpt>
 
-<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 [=document 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>
@@ -1257,6 +1181,89 @@ Interaction With ''overflow: auto''</h4>
  ███▌   ███▌  █▌   ▐▌   █▌   █▌  █▌ ████ ████▌   ███▌ 
 -->
 
+<h3 id='responsive-iframes' dfn lt="responsively-sized iframe" export>
+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.
+	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 'frame-sizing' property
+	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 [=document 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=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,
+	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:
+
+	  <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 {
+				frame-sizing: content-height;
+			}
+		</pre>
+
+		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>
+
+	In addition,
+	the internal document can call {{window/requestResize()|window.requestResize()}};
+	if the document has the required <{meta}> element
+	at the time of parsing as described above,
+	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.
+
+
 <h3 id="intrinsic-contribution">
 Intrinsic Size Contributions</h3>