Skip to content

Commit a04a392

Browse files
frivoalfrivoal
committed
[css-contain-1] Drop at risk feature, prepare for PR
1 parent 09ada70 commit a04a392

File tree

1 file changed

+41
-150
lines changed

1 file changed

+41
-150
lines changed

‎css-contain-1/Overview.bs‎

Lines changed: 41 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ Title: CSS Containment Module Level 1
33
Level: 1
44
Shortname: css-contain
55
Status: ED
6-
Work Status: stable
6+
Work Status: completed
77
Group: csswg
88
ED: https://drafts.csswg.org/css-contain/
99
TR: https://www.w3.org/TR/css-contain-1/
@@ -16,28 +16,20 @@ Previous Version: https://www.w3.org/TR/2017/WD-css-contain-1-20170221/
1616
Editor: Tab Atkins, Google, http://xanthir.com/contact/, w3cid 42199
1717
Editor: Florian Rivoal, On behalf of Bloomberg, https://florian.rivoal.net/, w3cid 43241
1818
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.
19-
Ignored Terms: scrollWidth, scrollHeight, clientWidth, clientHeight
19+
Status Text: A <a href="https://drafts.csswg.org/css-contain/issues-2019-cr.html">Disposition of Comments</a> and an <a href="https://drafts.csswg.org/css-contain/implementation-report-2019-09">Implementation Report</a> are available.
2020
WPT Path Prefix: css/css-contain/
21-
At risk: [=style containment=] and the ''contain: style'' value
2221
</pre>
2322
<pre class="anchors">
2423
spec: css2; urlPrefix: https://www.w3.org/TR/CSS2/
25-
type: property; url: generate.html#propdef-content; text: content
2624
type: property; url: visudet.html#propdef-vertical-align; text: vertical-align
27-
type: value; for: content; url: generate.html#value-def-open-quote; text: open-quote
28-
type: value; for: content; url: generate.html#value-def-close-quote; text: close-quote
29-
type: value; for: content; url: generate.html#value-def-no-open-quote; text: no-open-quote
30-
type: value; for: content; url: generate.html#value-def-no-close-quote; text: no-close-quote
3125
type: dfn; url: box.html#padding-edge; text: padding edge
3226

3327
spec: css-backgrounds-3;
3428
type: dfn; url: https://drafts.csswg.org/css-backgrounds-3/#corner-clipping; text: corner clipping
3529
</pre>
3630
<pre class=link-defaults>
3731
spec:css2; type:dfn; text:stacking context
38-
spec:css2; type:property; text:content
3932
spec:css-display-3; type:property; text:display
40-
spec:css2; type:property; text:counter-increment
4133
spec:css-ui-3; type:property; text:text-overflow
4234
spec:css-grid-1; type:property; text:grid
4335
spec:css-break-3; type:dfn; text:forced break
@@ -46,6 +38,7 @@ spec:css-break-3; type:dfn; text:fragmentation container
4638
spec:css-break-3; type:dfn; text:fragmentation context
4739
spec:css-break-3; type:dfn; text:fragmented flow
4840
</pre>
41+
4942
<h2 id='intro'>
5043
Introduction</h2>
5144

@@ -67,7 +60,7 @@ Strong Containment: the 'contain' property</h2>
6760

6861
<pre class='propdef'>
6962
Name: contain
70-
Value: none | strict | content | [ size || layout || style || paint ]
63+
Value: none | strict | content | [ size || layout || paint ]
7164
Initial: none
7265
Inherited: no
7366
Applies to: See <a href="#contain-applies">below</a>
@@ -108,28 +101,25 @@ Strong Containment: the 'contain' property</h2>
108101

109102
<dt><dfn>strict</dfn>
110103
<dd>
111-
This value turns on all forms of <a>containment</a> <em>except</em> <a>style containment</a> for the element.
104+
This value turns on all forms of <a>containment</a> for the element.
112105
In other words, it behaves the same as ''contain: size layout paint;''.
113106

114107
<wpt>
115108
contain-strict-001.html
116109
contain-strict-002.html
117110
contain-strict-003.html
118-
contain-strict-011.html
119111
</wpt>
120112

121113
<dt><dfn>content</dfn>
122114
<dd>
123-
This value turns on all forms of <a>containment</a> <em>except</em> <a>size containment</a> and <a>style containment</a> for the element.
115+
This value turns on all forms of <a>containment</a> <em>except</em> <a>size containment</a> for the element.
124116
In other words, it behaves the same as ''contain: layout paint;''.
125117

126118
<wpt>
127119
contain-content-001.html
128120
contain-content-002.html
129121
contain-content-003.html
130122
contain-content-004.html
131-
contain-content-011.html
132-
133123
</wpt>
134124

135125
Note: ''contain: content'' is reasonably "safe" to apply widely;
@@ -138,7 +128,7 @@ Strong Containment: the 'contain' property</h2>
138128
However, because it doesn't apply <a>size containment</a>,
139129
the element can still respond to the size of its contents,
140130
which can cause layout-invalidation to percolate further up the tree than desired.
141-
Use ''contain: strict'' or ''contain: strict style'' when possible,
131+
Use ''contain: strict'' when possible,
142132
to gain as much containment as you can.
143133

144134
<dt><dfn>size</dfn>
@@ -258,35 +248,6 @@ Strong Containment: the 'contain' property</h2>
258248
contain-subgrid-001.html
259249
</wpt>
260250

261-
<dt><dfn>style</dfn>
262-
<dd>
263-
This value turns on <a>style containment</a> for the element.
264-
This ensures that,
265-
for properties which can have effects on more than just an element and its descendants,
266-
those effects don't escape the element.
267-
268-
<wpt>
269-
contain-style-baseline-001.html
270-
contain-style-breaks-001.html
271-
contain-style-breaks-002.html
272-
contain-style-breaks-003.html
273-
contain-style-breaks-004.html
274-
contain-style-breaks-005.html
275-
contain-style-counters-001.html
276-
contain-style-counters-002.html
277-
contain-style-counters-003.html
278-
contain-style-counters-004.html
279-
counter-scoping-001.html
280-
counter-scoping-002.html
281-
counter-scoping-003.html
282-
quote-scoping-001.html
283-
quote-scoping-002.html
284-
quote-scoping-003.html
285-
quote-scoping-004.html
286-
</wpt>
287-
288-
Note: This value is at-risk.
289-
290251
<dt><dfn>paint</dfn>
291252
<dd>
292253
This value turns on <a>paint containment</a> for the element.
@@ -714,107 +675,6 @@ Layout Containment</h3>
714675
(When paired with <a>size containment</a>,
715676
this optimization can be applied more liberally.)
716677

717-
<h3 id='containment-style'>
718-
Style Containment</h3>
719-
720-
Note: Style Containment is at-risk.
721-
722-
Giving an element <dfn export>style containment</dfn>
723-
and has the following effects:
724-
725-
1. The 'counter-increment' and 'counter-set' properties
726-
must be <a for=property>scoped to the element's sub-tree</a>
727-
and create a new counter.
728-
729-
<wpt>
730-
contain-style-counters-001.html
731-
contain-style-counters-002.html
732-
contain-style-counters-003.html
733-
contain-style-counters-004.html
734-
</wpt>
735-
736-
2. The effects of the 'content' property's
737-
''content/open-quote'', ''content/close-quote'', ''content/no-open-quote'' and ''content/no-close-quote''
738-
must be <a for=property>scoped to the element's sub-tree</a>.
739-
740-
Note: This implies that the depth of quote nesting in the subtree
741-
is unchanged and starts at the value that its context normally implies,
742-
but that changes to the depth of quote nesting by these values inside the subtree
743-
do not affect the depth of quote nesting outside the subtree.
744-
745-
<wpt>
746-
quote-scoping-001.html
747-
quote-scoping-002.html
748-
quote-scoping-003.html
749-
quote-scoping-004.html
750-
</wpt>
751-
752-
<wpt>
753-
contain-style-baseline-001.html
754-
contain-style-breaks-001.html
755-
contain-style-breaks-002.html
756-
contain-style-breaks-003.html
757-
contain-style-breaks-004.html
758-
contain-style-breaks-005.html
759-
</wpt>
760-
761-
Note: [[CSS-REGIONS-1]] has normative requirements on how <a>style containment</a> affects regions.
762-
763-
A <dfn export for=property lt="scoped | scoped property | scoped properties">scoped property</dfn> has its effects scoped to a particular element or subtree.
764-
765-
* If <dfn export for=property lt="scoped to an element | scoped to the element">scoped to an element</dfn>,
766-
it must act as if the scoping element was the root of the document
767-
for the purpose of evaluating the property's effects:
768-
any uses of the property outside the scoping element must have no effect on the uses of the property on or in the scoping element,
769-
and vice versa.
770-
771-
Note: “Scoping to an element” is currently unused.
772-
It is defined as an extension point for future specifications to use.
773-
774-
* If <dfn export for=property lt="scoped to a sub-tree | scoped to the sub-tree | scoped to the element's sub-tree | scoped to an element's sub-tree">scoped to a sub-tree</dfn>, it's the same,
775-
except the scoping element itself is counted as "outside" the tree,
776-
like the rest of the document,
777-
and the effects of the property on that element are unaffected by scoping.
778-
When considering the effects of the scoped property on elements <em>inside</em> the subtree,
779-
the element at the base of the subtree is treated as if it was the root of the document.
780-
781-
<wpt>
782-
counter-scoping-001.html
783-
counter-scoping-002.html
784-
counter-scoping-003.html
785-
</wpt>
786-
787-
<div class=example>
788-
As 'counter-increment' is scoped to an element's subtree,
789-
the first use of it within the subtree acts as if the named counter were set to 0 at the scoping element,
790-
regardless of whether the counter had been used outside the scoping element.
791-
Any increments made within the subtree have no effect on counters of the same name outside the scoping element.
792-
However, the ''content/counter()'' and ''content/counters()'' value of the 'content' property is not itself scoped,
793-
and can refer to counters established outside of the subtree.
794-
Therefore, the following code results in <q><samp>1 1.2</samp></q> being displayed:
795-
<pre><code highlight=markup>
796-
&lt;div>&lt;/div>
797-
</code></pre>
798-
<pre><code highlight=css>
799-
div {
800-
contain: style;
801-
counter-increment: n;
802-
}
803-
div::before, div::after {
804-
content: counters(n, '.') " ";
805-
}
806-
div::after {
807-
counter-increment: n 2;
808-
}
809-
</code></pre>
810-
</div>
811-
812-
Possible optimizations that can be enabled by <a>style containment</a> include (but are not limited to):
813-
814-
1. Whenever a property is changed on a descendant of an element with [=style containment=],
815-
calculating what part of the DOM tree is "dirtied" and might need to have its style recalculated
816-
can stop at the containing box.
817-
818678
<h3 id='containment-paint'>
819679
Paint Containment</h3>
820680

@@ -993,12 +853,43 @@ Answers are provided below.
993853

994854
This appendix is <em>informative</em>.
995855

996-
<h3 id="2019-11-08-changes">Changes from the
856+
<h3 id="2019-04-30-changes">Changes from the
997857
<a href="https://www.w3.org/TR/2019/CR-css-contain-1-20190430/">Candidate Recommendation of 30 April 2019</a></h3>
998858

999-
<p>A full <a href="https://drafts.csswg.org/css-contain/issues-2019-cr.html">Disposition of Comments</a> is available.
859+
<ul>
860+
<li>
861+
Editorial tweaks
862+
863+
<li>
864+
<span id=valdef-contain-style></span>
865+
<span id=containment-style></span>
866+
<span id=style-containment></span>
867+
<span id=property-scoped></span>
868+
<span id=property-scoped-to-an-element></span>
869+
<span id=property-scoped-to-a-sub-tree></span>
870+
Drop the at-risk “style containment” feature from this specification, move it [[CSS-CONTAIN-2]]
1000871

1001-
* Editorial tweaks
872+
<wpt>
873+
contain-strict-011.html
874+
contain-content-011.html
875+
contain-style-baseline-001.html
876+
contain-style-breaks-001.html
877+
contain-style-breaks-002.html
878+
contain-style-breaks-003.html
879+
contain-style-breaks-004.html
880+
contain-style-breaks-005.html
881+
contain-style-counters-001.html
882+
contain-style-counters-002.html
883+
contain-style-counters-003.html
884+
contain-style-counters-004.html
885+
counter-scoping-001.html
886+
counter-scoping-002.html
887+
counter-scoping-003.html
888+
quote-scoping-001.html
889+
quote-scoping-002.html
890+
quote-scoping-003.html
891+
quote-scoping-004.html
892+
</wpt>
1002893

1003894
<h3 id="2018-11-08-changes">Changes from the
1004895
<a href="https://www.w3.org/TR/2018/CR-css-contain-1-20181108/">Candidate Recommendation of 08 November 2018</a></h3>

0 commit comments

Comments
 (0)