Skip to content

[css-contain-1] Add bikeshed wpt info #3180

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Sep 29, 2018
Merged

[css-contain-1] Add bikeshed wpt info #3180

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ae5a121
[css-contain-1] Add bikeshed wpt info
frivoal Sep 28, 2018
938685f
[css-contain] Add references to latest wpt tests
frivoal Sep 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
219 changes: 218 additions & 1 deletion css-contain-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/
</pre>
<pre class="anchors">
spec: css2; urlPrefix: https://www.w3.org/TR/CSS2/
Expand Down Expand Up @@ -65,6 +66,11 @@ Strong Containment: the 'contain' property</h2>
Animation type: not animatable
</pre>

<wpt>
contain-animation-001.html
inheritance.html
</wpt

<p class=all-media>User Agents are expected to support this property on all media, including non-visual ones.</p>

The 'contain' property allows an author to indicate that an element and its contents are,
Expand Down Expand Up @@ -129,6 +135,16 @@ Strong Containment: the 'contain' property</h2>
its descendants are also guaranteed to be not visible.
</dl>

<wpt>
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
</wpt>

<span id="contain-applies">This property generally applies to all elements (including [[css-pseudo-4#generated-content]])</span>,
although some types of containment have no effect on some elements,
as detailed in [[#containment-types]].
Expand Down Expand Up @@ -194,6 +210,22 @@ Size Containment</h3>
size containment has no effect.
Otherwise, giving an element <dfn export>size containment</dfn> has the following effects:

<wpt>
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
</wpt>

Note: Internal table elements,
which do not include table captions,
are excluded,
Expand All @@ -207,24 +239,65 @@ Size Containment</h3>
which are perfectly capable of having a fixed size
that is independent of their content.

<wpt>
contain-size-011.html
contain-size-056.html
</wpt>

1. When calculating the size of the containing element,
it must be treated as having no contents.

<wpt>
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
</wpt>

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.

<wpt>
contain-size-grid-002.html
contain-size-multicol-001.html
</wpt>

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.

<wpt>
contain-size-baseline-001.html
</wpt>

<a>Replaced elements</a> must be treated as having an intrinsic width and height of 0.

<wpt>
contain-size-013.html
contain-size-041.html
contain-size-042.html
</wpt>
2. Elements with <a>size containment</a> are <a spec=css-break-3>monolithic</a> (See [[CSS-BREAK-3#possible-breaks]]).

<wpt>
contain-size-breaks-001.html
contain-size-monolithic-001.html
</wpt>

By itself, <a>size containment</a> 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
Expand Down Expand Up @@ -257,8 +330,29 @@ Layout Containment</h3>
layout containment has no effect.
Otherwise, giving an element <dfn export>layout containment</dfn> has the following effects:

<wpt>
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
</wpt>

1. The element [=establishes an independent formatting context=].

<wpt>
contain-layout-ifc-022.html
contain-layout-independent-formatting-context-001.html
contain-layout-independent-formatting-context-002.html
</wpt>

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
<strong>and</strong> at least one subsequent [=fragmentation container=] of the same [=fragmentation context=]
Expand Down Expand Up @@ -325,13 +419,42 @@ Layout Containment</h3>
either ''overflow/visible'' or ''overflow/clip'' or a combination thereof,
any overflow must be treated as [=ink overflow=].

<wpt>
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
</wpt>

4. The element acts as a containing block for absolutely positioned and fixed positioned descendants.

<wpt>
contain-layout-006.html
contain-layout-007.html
contain-layout-cell-001.html
contain-layout-cell-002.html
</wpt>

5. The element creates a <a>stacking context</a>.

<wpt>
contain-layout-016.html
contain-layout-017.html
contain-layout-018.html
</wpt>

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]].

<wpt>
contain-layout-breaks-001.html
contain-layout-breaks-002.html
</wpt>

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]]).

Expand All @@ -341,6 +464,13 @@ Layout Containment</h3>
to something other than its descendants,
the containing element is treated as having no baseline.

<wpt>
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
</wpt>

Possible optimizations that can be enabled by <a>layout containment</a> include (but are not limited to):

1. When laying out the page,
Expand All @@ -367,6 +497,13 @@ Style Containment</h3>
must be <a for=property>scoped to the element's sub-tree</a>
and create a new counter.

<wpt>
contain-style-counters-001.html
contain-style-counters-002.html
contain-style-counters-003.html
contain-style-counters-004.html
</wpt>

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 <a for=property>scoped to the element's sub-tree</a>.
Expand All @@ -376,6 +513,22 @@ Style Containment</h3>
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.

<wpt>
quote-scoping-001.html
quote-scoping-002.html
quote-scoping-003.html
quote-scoping-004.html
</wpt>

<wpt>
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
</wpt>

Note: [[CSS-REGIONS-1]] has normative requirements on how <a>style containment</a> affects regions.

A <dfn export for=property lt="scoped | scoped property | scoped properties">scoped property</dfn> has its effects scoped to a particular element or subtree.
Expand All @@ -396,6 +549,12 @@ Style Containment</h3>
When considering the effects of the scoped property on elements <em>inside</em> the subtree,
the element at the base of the subtree is treated as if it was the root of the document.

<wpt>
counter-scoping-001.html
counter-scoping-002.html
counter-scoping-003.html
</wpt>

<div class=example>
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,
Expand Down Expand Up @@ -437,6 +596,23 @@ Paint Containment</h3>
paint containment has no effect.
Otherwise, giving an element <dfn export>paint containment</dfn> has the following effects:

<wpt>
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
</wpt>

1. The contents of the element
including both the paint of the descendants and their geometry
must be clipped to the <a>padding edge</a> of the element's <a>principal box</a>,
Expand All @@ -446,10 +622,52 @@ Paint Containment</h3>
nor does it inhibit the creation of any such mechanism through other properties,
<span class=informative>such as 'overflow', 'resize', or 'text-overflow'</span>.
<span class=note>This is as if ''overflow: visible'' was changed to ''overflow: clip'' at used value.</span>

<wpt>
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
</wpt>
2. The element acts as a containing block for absolutely positioned and fixed positioned descendants.

<wpt>
contain-paint-009.html
contain-paint-010.html
contain-paint-022.html
contain-paint-023.html
contain-paint-024.html
</wpt>
3. The element creates a <a>stacking context</a>.

<wpt>
contain-paint-020.html
contain-paint-021.html
contain-paint-025.html
</wpt>
4. The element [=establishes an independent formatting context=].

<wpt>
contain-paint-ifc-011.html
contain-paint-independent-formatting-context-001.html
contain-paint-independent-formatting-context-002.html
</wpt>

<wpt>
contain-paint-baseline-001.html
</wpt>

<div class=informative>
Possible optimizations that can be enabled by <a>paint containment</a> include (but are not limited to):

Expand All @@ -470,7 +688,6 @@ Paint Containment</h3>
scrolling elements can be painted into a single GPU layer.
</div>


Privacy and Security Considerations {#privsec}
==============================================

Expand Down