diff --git a/css-sizing-4/Overview.bs b/css-sizing-4/Overview.bs index d7135b202c3..7a5d89c693b 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-*' propertiesName: contain-intrinsic-size - Value: [ auto? [ none | <'contain-intrinsic-size' is a shorthand property @@ -656,6 +666,60 @@ Last Remembered Size even across changes such as going to/from ''display: none''. +> ] ]{1,2} + Value: [ auto? [ none | < > ] ]{1,2} | from-element < > {0,2} +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 + theDOMContentLoadedandloadevents, + 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: ++ + In addition, + the embedded document can call+ <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. +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''