Skip to content

Commit ae5a121

Browse files
committed
[css-contain-1] Add bikeshed wpt info
1 parent 88eca78 commit ae5a121

1 file changed

Lines changed: 214 additions & 0 deletions

File tree

css-contain-1/Overview.bs

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ Editor: Tab Atkins, Google, http://xanthir.com/contact/, w3cid 42199
1515
Editor: Florian Rivoal, On behalf of Bloomberg, https://florian.rivoal.net/, w3cid 43241
1616
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.
1717
Ignored Terms: scrollWidth, scrollHeight, clientWidth, clientHeight
18+
WPT Path Prefix: css/css-contain/
1819
</pre>
1920
<pre class="anchors">
2021
spec: css2; urlPrefix: https://www.w3.org/TR/CSS2/
@@ -65,6 +66,11 @@ Strong Containment: the 'contain' property</h2>
6566
Animation type: not animatable
6667
</pre>
6768

69+
<wpt>
70+
contain-animation-001.html
71+
inheritance.html
72+
</wpt
73+
6874
<p class=all-media>User Agents are expected to support this property on all media, including non-visual ones.</p>
6975

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

138+
<wpt>
139+
contain-layout-size-003.html
140+
contain-paint-size-001.html
141+
contain-paint-size-002.html
142+
contain-paint-size-003.html
143+
contain-strict-001.html
144+
contain-strict-002.html
145+
contain-strict-003.html
146+
</wpt>
147+
132148
<span id="contain-applies">This property generally applies to all elements (including [[css-pseudo-4#generated-content]])</span>,
133149
although some types of containment have no effect on some elements,
134150
as detailed in [[#containment-types]].
@@ -194,6 +210,22 @@ Size Containment</h3>
194210
size containment has no effect.
195211
Otherwise, giving an element <dfn export>size containment</dfn> has the following effects:
196212

213+
<wpt>
214+
contain-size-001.html
215+
contain-size-002.html
216+
contain-size-003.html
217+
contain-size-004.html
218+
contain-size-005.html
219+
contain-size-006.html
220+
contain-size-007.html
221+
contain-size-008.html
222+
contain-size-009.html
223+
contain-size-010.html
224+
contain-size-012.html
225+
contain-size-051.html
226+
contain-size-052.html
227+
</wpt>
228+
197229
Note: Internal table elements,
198230
which do not include table captions,
199231
are excluded,
@@ -207,24 +239,65 @@ Size Containment</h3>
207239
which are perfectly capable of having a fixed size
208240
that is independent of their content.
209241

242+
<wpt>
243+
contain-size-011.html
244+
contain-size-056.html
245+
</wpt>
246+
210247
1. When calculating the size of the containing element,
211248
it must be treated as having no contents.
212249

250+
<wpt>
251+
contain-size-021.html
252+
contain-size-023.html
253+
contain-size-025.html
254+
contain-size-027.html
255+
contain-size-061.html
256+
contain-size-062.html
257+
contain-size-borders.html
258+
contain-size-fieldset-001.html
259+
contain-size-scrollbars-001.html
260+
261+
contain-size-button-001.html
262+
contain-size-flexbox-001.html
263+
contain-size-grid-001.html
264+
</wpt>
265+
213266
Note: Even when the element's [=sizing properties=] are ''height/auto''
214267
this does not necessarily make the element zero-sized:
215268
properties set on the element itself,
216269
such as the 'columns' property or the 'grid' property,
217270
continue to be taken into account.
218271

272+
<wpt>
273+
contain-size-grid-002.html
274+
contain-size-multicol-001.html
275+
</wpt>
276+
219277
Then,
220278
its contents must then be laid out into the containing element's resolved size.
221279

222280
Note: [=size containment=] does not suppress baseline alignment.
223281
See [=layout containment=] for that.
224282

283+
<wpt>
284+
contain-size-baseline-001.html
285+
</wpt>
286+
225287
<a>Replaced elements</a> must be treated as having an intrinsic width and height of 0.
288+
289+
<wpt>
290+
contain-size-013.html
291+
contain-size-041.html
292+
contain-size-042.html
293+
</wpt>
226294
2. Elements with <a>size containment</a> are <a spec=css-break-3>monolithic</a> (See [[CSS-BREAK-3#possible-breaks]]).
227295

296+
<wpt>
297+
contain-size-breaks-001.html
298+
contain-size-monolithic-001.html
299+
</wpt>
300+
228301
By itself, <a>size containment</a> does not offer much optimization opportunity.
229302
Its primary benefit on its own is that tools which want to lay out the containing element's contents
230303
based on the containing element's size
@@ -257,8 +330,29 @@ Layout Containment</h3>
257330
layout containment has no effect.
258331
Otherwise, giving an element <dfn export>layout containment</dfn> has the following effects:
259332

333+
<wpt>
334+
contain-layout-001.html
335+
contain-layout-002.html
336+
contain-layout-003.html
337+
contain-layout-004.html
338+
contain-layout-005.html
339+
contain-layout-009.html
340+
contain-layout-010.html
341+
contain-layout-011.html
342+
contain-layout-012.html
343+
contain-layout-013.html
344+
contain-layout-014.html
345+
contain-layout-independent-formatting-context-003.html
346+
</wpt>
347+
260348
1. The element [=establishes an independent formatting context=].
261349

350+
<wpt>
351+
contain-layout-ifc-022.html
352+
contain-layout-independent-formatting-context-001.html
353+
contain-layout-independent-formatting-context-002.html
354+
</wpt>
355+
262356
2. If at least one [=fragmentation container=] of a [=fragmentation context=] has [=layout containment=],
263357
or if at least one [=fragmentation container=] of a [=fragmentation context=] is a descendant of an element with layout containment
264358
<strong>and</strong> at least one subsequent [=fragmentation container=] of the same [=fragmentation context=]
@@ -325,13 +419,42 @@ Layout Containment</h3>
325419
either ''overflow/visible'' or ''overflow/clip'' or a combination thereof,
326420
any overflow must be treated as [=ink overflow=].
327421

422+
<wpt>
423+
contain-layout-ink-overflow-013.html
424+
contain-layout-ink-overflow-014.html
425+
contain-layout-ink-overflow-015.html
426+
contain-layout-ink-overflow-016.html
427+
contain-layout-ink-overflow-017.html
428+
contain-layout-ink-overflow-018.html
429+
contain-layout-ink-overflow-019.html
430+
contain-layout-ink-overflow-020.html
431+
</wpt>
432+
328433
4. The element acts as a containing block for absolutely positioned and fixed positioned descendants.
329434

435+
<wpt>
436+
contain-layout-006.html
437+
contain-layout-007.html
438+
contain-layout-cell-001.html
439+
contain-layout-cell-002.html
440+
</wpt>
441+
330442
5. The element creates a <a>stacking context</a>.
331443

444+
<wpt>
445+
contain-layout-016.html
446+
contain-layout-017.html
447+
contain-layout-018.html
448+
</wpt>
449+
332450
6. [=Forced breaks=] are allowed within elements with [=layout containment=],
333451
but do not propagate to the parent as otherwise described in [[CSS-BREAK-3#break-between]].
334452

453+
<wpt>
454+
contain-layout-breaks-001.html
455+
contain-layout-breaks-002.html
456+
</wpt>
457+
335458
Note: This introduces the previously non-existent possibility that [=forced breaks=]
336459
may occur between a box and its container (See [[CSS-BREAK-3#possible-breaks]]).
337460

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

467+
<wpt>
468+
contain-layout-baseline-001.html
469+
</wpt>
470+
344471
Possible optimizations that can be enabled by <a>layout containment</a> include (but are not limited to):
345472

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

497+
<wpt>
498+
contain-style-counters-001.html
499+
contain-style-counters-002.html
500+
contain-style-counters-003.html
501+
contain-style-counters-004.html
502+
</wpt>
503+
370504
2. The effects of the 'content' property's
371505
''content/open-quote'', ''content/close-quote'', ''content/no-open-quote'' and ''content/no-close-quote''
372506
must be <a for=property>scoped to the element's sub-tree</a>.
@@ -376,6 +510,22 @@ Style Containment</h3>
376510
but that changes to the depth of quote nesting by these values inside the subtree
377511
do not affect the depth of quote nesting outside the subtree.
378512

513+
<wpt>
514+
quote-scoping-001.html
515+
quote-scoping-002.html
516+
quote-scoping-003.html
517+
quote-scoping-004.html
518+
</wpt>
519+
520+
<wpt>
521+
contain-style-baseline-001.html
522+
contain-style-breaks-001.html
523+
contain-style-breaks-002.html
524+
contain-style-breaks-003.html
525+
contain-style-breaks-004.html
526+
contain-style-breaks-005.html
527+
</wpt>
528+
379529
Note: [[CSS-REGIONS-1]] has normative requirements on how <a>style containment</a> affects regions.
380530

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

549+
<wpt>
550+
counter-scoping-001.html
551+
counter-scoping-002.html
552+
counter-scoping-003.html
553+
</wpt>
554+
399555
<div class=example>
400556
As 'counter-increment' is scoped to an element's subtree,
401557
the first use of it within the subtree acts as if the named counter were set to 0 at the scoping element,
@@ -437,6 +593,23 @@ Paint Containment</h3>
437593
paint containment has no effect.
438594
Otherwise, giving an element <dfn export>paint containment</dfn> has the following effects:
439595

596+
<wpt>
597+
contain-paint-002.html
598+
contain-paint-005.html
599+
contain-paint-006.html
600+
contain-paint-007.html
601+
contain-paint-008.html
602+
contain-paint-011.html
603+
contain-paint-012.html
604+
contain-paint-014.html
605+
contain-paint-015.html
606+
contain-paint-016.html
607+
contain-paint-017.html
608+
contain-paint-018.html
609+
contain-paint-019.html
610+
contain-paint-independent-formatting-context-003.html
611+
</wpt>
612+
440613
1. The contents of the element
441614
including both the paint of the descendants and their geometry
442615
must be clipped to the <a>padding edge</a> of the element's <a>principal box</a>,
@@ -446,10 +619,51 @@ Paint Containment</h3>
446619
nor does it inhibit the creation of any such mechanism through other properties,
447620
<span class=informative>such as 'overflow', 'resize', or 'text-overflow'</span>.
448621
<span class=note>This is as if ''overflow: visible'' was changed to ''overflow: clip'' at used value.</span>
622+
623+
<wpt>
624+
contain-paint-001.html
625+
contain-paint-004.html
626+
contain-paint-047.html
627+
contain-paint-048.html
628+
contain-paint-cell-001.html
629+
contain-paint-cell-002.html
630+
contain-paint-clip-011.html
631+
contain-paint-clip-012.html
632+
contain-paint-clip-013.html
633+
contain-paint-clip-014.html
634+
contain-paint-clip-015.html
635+
contain-paint-clip-016.html
636+
contain-paint-clip-017.html
637+
contain-paint-clip-018.html
638+
</wpt>
449639
2. The element acts as a containing block for absolutely positioned and fixed positioned descendants.
640+
641+
<wpt>
642+
contain-paint-009.html
643+
contain-paint-010.html
644+
contain-paint-022.html
645+
contain-paint-023.html
646+
contain-paint-024.html
647+
</wpt>
450648
3. The element creates a <a>stacking context</a>.
649+
650+
<wpt>
651+
contain-paint-020.html
652+
contain-paint-021.html
653+
contain-paint-025.html
654+
</wpt>
451655
4. The element [=establishes an independent formatting context=].
452656

657+
<wpt>
658+
contain-paint-ifc-011.html
659+
contain-paint-independent-formatting-context-001.html
660+
contain-paint-independent-formatting-context-002.html
661+
</wpt>
662+
663+
<wpt>
664+
contain-paint-baseline-001.html
665+
</wpt>
666+
453667
<div class=informative>
454668
Possible optimizations that can be enabled by <a>paint containment</a> include (but are not limited to):
455669

0 commit comments

Comments
 (0)