Merge pull request #3180 from frivoal/contain-bikeshed-wpt

[css-contain-1] Add bikeshed wpt info

Author: frivoal

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/
 </pre>
 <pre class="anchors">
 spec: css2; urlPrefix: https://www.w3.org/TR/CSS2/
@@ -66,6 +67,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,
@@ -130,6 +136,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]].
@@ -195,6 +211,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,
@@ -208,24 +240,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
@@ -258,8 +331,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=]
@@ -326,13 +420,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]]).
 
@@ -342,6 +465,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,
@@ -368,6 +498,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>.
@@ -377,6 +514,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.
@@ -397,6 +550,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,
@@ -438,6 +597,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>,
@@ -447,10 +623,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):
 
@@ -471,7 +689,6 @@ Paint Containment</h3>
 		scrolling elements can be painted into a single GPU layer.
 </div>
 
-
 Privacy and Security Considerations {#privsec}
 ==============================================