diff --git a/css-contain-1/Overview.bs b/css-contain-1/Overview.bs index aa34c142ad7..7894602d7f4 100644 --- a/css-contain-1/Overview.bs +++ b/css-contain-1/Overview.bs @@ -15,6 +15,7 @@ Editor: Tab Atkins, Google, http://xanthir.com/contact/, w3cid 42199 Editor: Florian Rivoal, On behalf of Bloomberg, https://florian.rivoal.net/, w3cid 43241 Abstract: This CSS module describes the 'contain' property, which indicates that the element's subtree is independent of the rest of the page. This enables heavy optimizations by user agents when used well. Ignored Terms: scrollWidth, scrollHeight, clientWidth, clientHeight +WPT Path Prefix: css/css-contain/ 
 spec: css2; urlPrefix: https://www.w3.org/TR/CSS2/
@@ -65,6 +66,11 @@ Strong Containment: the 'contain' property
 		Animation type: not animatable
+ + contain-animation-001.html + inheritance.html + User Agents are expected to support this property on all media, including non-visual ones.

The 'contain' property allows an author to indicate that an element and its contents are, @@ -129,6 +135,16 @@ Strong Containment: the 'contain' property its descendants are also guaranteed to be not visible. + + contain-layout-size-003.html + contain-paint-size-001.html + contain-paint-size-002.html + contain-paint-size-003.html + contain-strict-001.html + contain-strict-002.html + contain-strict-003.html + + This property generally applies to all elements (including [[css-pseudo-4#generated-content]]), although some types of containment have no effect on some elements, as detailed in [[#containment-types]]. @@ -194,6 +210,22 @@ Size Containment size containment has no effect. Otherwise, giving an element size containment has the following effects: + + contain-size-001.html + contain-size-002.html + contain-size-003.html + contain-size-004.html + contain-size-005.html + contain-size-006.html + contain-size-007.html + contain-size-008.html + contain-size-009.html + contain-size-010.html + contain-size-012.html + contain-size-051.html + contain-size-052.html + + Note: Internal table elements, which do not include table captions, are excluded, @@ -207,24 +239,65 @@ Size Containment which are perfectly capable of having a fixed size that is independent of their content. + + contain-size-011.html + contain-size-056.html + + 1. When calculating the size of the containing element, it must be treated as having no contents. + + contain-size-021.html + contain-size-023.html + contain-size-025.html + contain-size-027.html + contain-size-061.html + contain-size-062.html + contain-size-borders.html + contain-size-fieldset-001.html + contain-size-scrollbars-001.html + + contain-size-button-001.html + contain-size-flexbox-001.html + contain-size-grid-001.html + + Note: Even when the element's [=sizing properties=] are ''height/auto'' this does not necessarily make the element zero-sized: properties set on the element itself, such as the 'columns' property or the 'grid' property, continue to be taken into account. + + contain-size-grid-002.html + contain-size-multicol-001.html + + Then, its contents must then be laid out into the containing element's resolved size. Note: [=size containment=] does not suppress baseline alignment. See [=layout containment=] for that. + + contain-size-baseline-001.html + + Replaced elements must be treated as having an intrinsic width and height of 0. + + + contain-size-013.html + contain-size-041.html + contain-size-042.html + 2. Elements with size containment are monolithic (See [[CSS-BREAK-3#possible-breaks]]). + + contain-size-breaks-001.html + contain-size-monolithic-001.html + + By itself, size containment does not offer much optimization opportunity. Its primary benefit on its own is that tools which want to lay out the containing element's contents based on the containing element's size @@ -257,8 +330,29 @@ Layout Containment layout containment has no effect. Otherwise, giving an element layout containment has the following effects: + + contain-layout-001.html + contain-layout-002.html + contain-layout-003.html + contain-layout-004.html + contain-layout-005.html + contain-layout-009.html + contain-layout-010.html + contain-layout-011.html + contain-layout-012.html + contain-layout-013.html + contain-layout-014.html + contain-layout-independent-formatting-context-003.html + + 1. The element [=establishes an independent formatting context=]. + + contain-layout-ifc-022.html + contain-layout-independent-formatting-context-001.html + contain-layout-independent-formatting-context-002.html + + 2. If at least one [=fragmentation container=] of a [=fragmentation context=] has [=layout containment=], or if at least one [=fragmentation container=] of a [=fragmentation context=] is a descendant of an element with layout containment and at least one subsequent [=fragmentation container=] of the same [=fragmentation context=] @@ -325,13 +419,42 @@ Layout Containment either ''overflow/visible'' or ''overflow/clip'' or a combination thereof, any overflow must be treated as [=ink overflow=]. + + contain-layout-ink-overflow-013.html + contain-layout-ink-overflow-014.html + contain-layout-ink-overflow-015.html + contain-layout-ink-overflow-016.html + contain-layout-ink-overflow-017.html + contain-layout-ink-overflow-018.html + contain-layout-ink-overflow-019.html + contain-layout-ink-overflow-020.html + + 4. The element acts as a containing block for absolutely positioned and fixed positioned descendants. + + contain-layout-006.html + contain-layout-007.html + contain-layout-cell-001.html + contain-layout-cell-002.html + + 5. The element creates a stacking context. + + contain-layout-016.html + contain-layout-017.html + contain-layout-018.html + + 6. [=Forced breaks=] are allowed within elements with [=layout containment=], but do not propagate to the parent as otherwise described in [[CSS-BREAK-3#break-between]]. + + contain-layout-breaks-001.html + contain-layout-breaks-002.html + + Note: This introduces the previously non-existent possibility that [=forced breaks=] may occur between a box and its container (See [[CSS-BREAK-3#possible-breaks]]). @@ -341,6 +464,13 @@ Layout Containment to something other than its descendants, the containing element is treated as having no baseline. + + contain-layout-baseline-001.html + css/css-contain/contain-layout-button-001.html + css/css-contain/contain-layout-flexbox-001.html + css/css-contain/contain-layout-grid-001.html + + Possible optimizations that can be enabled by layout containment include (but are not limited to): 1. When laying out the page, @@ -367,6 +497,13 @@ Style Containment must be scoped to the element's sub-tree and create a new counter. + + contain-style-counters-001.html + contain-style-counters-002.html + contain-style-counters-003.html + contain-style-counters-004.html + + 2. The effects of the 'content' property's ''content/open-quote'', ''content/close-quote'', ''content/no-open-quote'' and ''content/no-close-quote'' must be scoped to the element's sub-tree. @@ -376,6 +513,22 @@ Style Containment but that changes to the depth of quote nesting by these values inside the subtree do not affect the depth of quote nesting outside the subtree. + + quote-scoping-001.html + quote-scoping-002.html + quote-scoping-003.html + quote-scoping-004.html + + + + contain-style-baseline-001.html + contain-style-breaks-001.html + contain-style-breaks-002.html + contain-style-breaks-003.html + contain-style-breaks-004.html + contain-style-breaks-005.html + + Note: [[CSS-REGIONS-1]] has normative requirements on how style containment affects regions. A scoped property has its effects scoped to a particular element or subtree. @@ -396,6 +549,12 @@ Style Containment When considering the effects of the scoped property on elements inside the subtree, the element at the base of the subtree is treated as if it was the root of the document. + + counter-scoping-001.html + counter-scoping-002.html + counter-scoping-003.html + +
As 'counter-increment' is scoped to an element's subtree, the first use of it within the subtree acts as if the named counter were set to 0 at the scoping element, @@ -437,6 +596,23 @@ Paint Containment paint containment has no effect. Otherwise, giving an element paint containment has the following effects: + + contain-paint-002.html + contain-paint-005.html + contain-paint-006.html + contain-paint-007.html + contain-paint-008.html + contain-paint-011.html + contain-paint-012.html + contain-paint-014.html + contain-paint-015.html + contain-paint-016.html + contain-paint-017.html + contain-paint-018.html + contain-paint-019.html + contain-paint-independent-formatting-context-003.html + + 1. The contents of the element including both the paint of the descendants and their geometry must be clipped to the padding edge of the element's principal box, @@ -446,10 +622,52 @@ Paint Containment nor does it inhibit the creation of any such mechanism through other properties, such as 'overflow', 'resize', or 'text-overflow'. This is as if ''overflow: visible'' was changed to ''overflow: clip'' at used value. + + + contain-paint-001.html + contain-paint-004.html + contain-paint-047.html + contain-paint-048.html + contain-paint-cell-001.html + contain-paint-cell-002.html + contain-paint-clip-011.html + contain-paint-clip-012.html + contain-paint-clip-013.html + contain-paint-clip-014.html + contain-paint-clip-015.html + contain-paint-clip-016.html + contain-paint-clip-017.html + contain-paint-clip-018.html + contain-paint-clip-019.html + 2. The element acts as a containing block for absolutely positioned and fixed positioned descendants. + + + contain-paint-009.html + contain-paint-010.html + contain-paint-022.html + contain-paint-023.html + contain-paint-024.html + 3. The element creates a stacking context. + + + contain-paint-020.html + contain-paint-021.html + contain-paint-025.html + 4. The element [=establishes an independent formatting context=]. + + contain-paint-ifc-011.html + contain-paint-independent-formatting-context-001.html + contain-paint-independent-formatting-context-002.html + + + + contain-paint-baseline-001.html + +
Possible optimizations that can be enabled by paint containment include (but are not limited to): @@ -470,7 +688,6 @@ Paint Containment scrolling elements can be painted into a single GPU layer.
- Privacy and Security Considerations {#privsec} ==============================================