-
Notifications
You must be signed in to change notification settings - Fork 791
[css-sizing-4] Add the frame-sizing property
#13701
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- Loading branch information
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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> | ||
|
|
@@ -1198,7 +1182,17 @@ Interaction With ''overflow: auto''</h4> | |
| --> | ||
|
|
||
| <h3 id='responsive-iframes' dfn lt="responsively-sized iframe" export> | ||
| Responsively-sized iframes</h3> | ||
| 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. | ||
|
|
@@ -1208,7 +1202,7 @@ Responsively-sized iframes</h3> | |
| 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' | ||
| 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>. | ||
|
|
||
|
|
@@ -1218,17 +1212,27 @@ Responsively-sized iframes</h3> | |
| 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><meta name=responsize-embedded-sizing></code> element. | ||
| via a <code><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><head></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 | ||
| 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. | ||
| 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: | ||
|
|
||
|
|
@@ -1241,19 +1245,21 @@ Responsively-sized iframes</h3> | |
|
|
||
| <pre highlight=css> | ||
| iframe { | ||
| contain-intrinsic-block-size: from-element 150px; | ||
| frame-sizing: content-height; | ||
| } | ||
| </pre> | ||
|
|
||
| The height of the <{iframe}> will initially be ''150px'', | ||
| 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> | ||
|
|
||
| Issue: Should this apply even when ''contain:size'' isn't specified? | ||
|
|
||
| In addition, | ||
| the internal document can call {{window/requestResize()|window.requestResize()}}; | ||
| if the document still has the required <{meta}> element, | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This seems to go against the philosophy of freezing the meta value, and I guess would require us to track exactly which
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good catch, thanks. Can you take a look at updated text and see if it's good for readers? |
||
| its [=internal layout intrinsic size=]'s height | ||
| is updated to its new current [=natural height=]. | ||
| 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. | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is no longer relevant, now that
frame-sizingis what's controlling the behavior.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removed, thanks!