Skip to content

Commit b677c01

Browse files
frivoalfrivoal
committed
[css-contain] remove style containment from keywords that aren't 'style' and mark 'style' at risk
Closes w3c#3280
1 parent eadad99 commit b677c01

File tree

3 files changed

+99
-7
lines changed

3 files changed

+99
-7
lines changed

‎css-contain-1/Overview.bs‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ Editor: Florian Rivoal, On behalf of Bloomberg, https://florian.rivoal.net/, w3c
1717
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.
1818
Ignored Terms: scrollWidth, scrollHeight, clientWidth, clientHeight
1919
WPT Path Prefix: css/css-contain/
20+
At risk: [=style containment=] and the ''contain: style'' value
2021
</pre>
2122
<pre class="anchors">
2223
spec: css2; urlPrefix: https://www.w3.org/TR/CSS2/
@@ -60,7 +61,7 @@ Strong Containment: the 'contain' property</h2>
6061

6162
<pre class='propdef'>
6263
Name: contain
63-
Value: none | strict | content | [ size || layout || style || paint ]
64+
Value: none | [strict | content | [ size || layout || paint ] ] || style
6465
Initial: none
6566
Inherited: no
6667
Applies to: See <a href="#contain-applies">below</a>
@@ -94,22 +95,21 @@ Strong Containment: the 'contain' property</h2>
9495

9596
<dt><dfn>strict</dfn>
9697
<dd>
97-
This value turns on all forms of <a>containment</a> for the element.
98-
In other words, it behaves the same as ''contain: size layout style paint;'',
99-
so that its contents are guaranteed to have no effect on the rest of the page outside the element's bounds.
98+
This value turns on all forms of <a>containment</a> <em>except</em> <a>style containment</a> for the element.
99+
In other words, it behaves the same as ''contain: size layout paint;''.
100100

101101
<dt><dfn>content</dfn>
102102
<dd>
103-
This value turns on all forms of <a>containment</a> <em>except</em> <a>size containment</a> for the element.
104-
In other words, it behaves the same as ''contain: layout style paint;''.
103+
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.
104+
In other words, it behaves the same as ''contain: layout paint;''.
105105

106106
Note: ''contain: content'' is reasonably "safe" to apply widely;
107107
its effects are fairly minor in practice,
108108
and most content won't run afoul of its restrictions.
109109
However, because it doesn't apply <a>size containment</a>,
110110
the element can still respond to the size of its contents,
111111
which can cause layout-invalidation to percolate further up the tree than desired.
112-
Use ''contain: strict'' when possible,
112+
Use ''contain: strict'' or ''contain: strict style'' when possible,
113113
to gain as much containment as you can.
114114

115115
<dt><dfn>size</dfn>
@@ -132,6 +132,8 @@ Strong Containment: the 'contain' property</h2>
132132
for properties which can have effects on more than just an element and its descendants,
133133
those effects don't escape the containing element.
134134

135+
Note: This value is at-risk.
136+
135137
<dt><dfn>paint</dfn>
136138
<dd>
137139
This value turns on <a>paint containment</a> for the element.
@@ -500,6 +502,8 @@ Layout Containment</h3>
500502
<h3 id='containment-style'>
501503
Style Containment</h3>
502504

505+
Note: Style Containment is at-risk.
506+
503507
Giving an element <dfn export>style containment</dfn> has the following effects:
504508

505509
1. The 'counter-increment' and 'counter-set' properties
@@ -768,6 +772,13 @@ Answers are provided below.
768772

769773
This appendix is <em>informative</em>.
770774

775+
<h3 id="2018-11-08-changes">Changes from the
776+
<a href="https://www.w3.org/TR/2018/CR-css-contain-1-20181108/">Candidate Recommendation of 08 November 2018</a></h3>
777+
778+
<p>A full <a href="https://drafts.csswg.org/css-contain/issues-2018-11-cr.html">Disposition of Comments</a> is available.
779+
780+
* Exclude [=style containment=] from ''contain: strict'' and ''contain: content'', and mark it at risk.
781+
771782
<h3 id="2018-05-24-changes">Changes from the
772783
<a href="https://www.w3.org/TR/2018/CR-css-contain-1-20180524/">Candidate Recommendation of 24 May 2018</a></h3>
773784

‎css-contain-1/issues-2018-11-cr.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Contain Level 1 Disposition of Comments for 2018-11-08 CR</title>
4+
<style>
5+
.a { background: lightgreen }
6+
.d { background: lightblue }
7+
.r { background: orange }
8+
.fo { background: red }
9+
.open { border: solid red; padding: 0.2em; }
10+
:target { box-shadow: 0.25em 0.25em 0.25em; }
11+
</style>
12+
13+
<h1>CSS Contain Level 1 Disposition of Comments for 2018-11-08 CR</h1>
14+
15+
<p>Review document: <a href="https://www.w3.org/TR/2018/CR-css-contain-1-20181108/">https://www.w3.org/TR/2018/CR-css-contain-1-20181108/</a>
16+
17+
<p>Editor's draft: <a href="http://dev.w3.org/csswg/css-contain-1/">http://dev.w3.org/csswg/css-contain-1/</a>
18+
19+
<p>The following color coding convention is used for comments:</p>
20+
21+
<ul>
22+
<li class="a">Accepted or Rejected and positive response
23+
<li class="r">Rejected and no response
24+
<li class="fo">Rejected and negative response
25+
<li class="d">Deferred
26+
<li class="oi">Out-of-Scope or Invalid and not verified
27+
</ul>
28+
29+
<p class=open>Open issues are marked like this</p>
30+
31+
<p>An issue can be closed as <code>Accepted</code>, <code>OutOfScope</code>,
32+
<code>Invalid</code>, <code>Rejected</code>, or <code>Retracted</code>.
33+
<code>Verified</code> indicates commentor's acceptance of the response.</p>
34+
<pre class='a' id='issue-1'>
35+
Issue 1. <a href='#issue-1'>#</a>
36+
Summary: Style containment is difficult to implement, and should not hold up the rest
37+
From: Emilio
38+
Comment: <a href='https://github.com/w3c/csswg-drafts/issues/3280'>https://github.com/w3c/csswg-drafts/issues/3280</a>
39+
Closed: Accepted
40+
Resolved: <a href='https://github.com/w3c/csswg-drafts/issues/3280#issuecomment-467588765'>https://github.com/w3c/csswg-drafts/issues/3280#issuecomment-467588765</a></pre>
41+
<script>
42+
(function () {
43+
var sheet = document.styleSheets[0];
44+
function addCheckbox(className) {
45+
var element = document.querySelector('*.' + className);
46+
var label = document.createElement('label');
47+
label.innerHTML = element.innerHTML;
48+
element.innerHTML = null;
49+
var check = document.createElement('input');
50+
check.type = 'checkbox';
51+
if (className == 'open') {
52+
check.checked = false;
53+
sheet.insertRule('pre:not(.open)' + '{}', sheet.cssRules.length);
54+
check.onchange = function (e) {
55+
rule.style.display = this.checked ? 'none' : 'block';
56+
}
57+
}
58+
else {
59+
check.checked = true;
60+
sheet.insertRule('pre.' + className + '{}', sheet.cssRules.length);
61+
check.onchange = function (e) {
62+
rule.style.display = this.checked ? 'block' : 'none';
63+
}
64+
}
65+
var rule = sheet.cssRules[sheet.cssRules.length - 1];
66+
element.appendChild(label);
67+
label.insertBefore(check, label.firstChild);
68+
}
69+
['a', 'd', 'fo', 'oi', 'r', 'open'].forEach(addCheckbox);
70+
}());
71+
</script>

‎css-contain-1/issues-2018-11-cr.txt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Draft: https://www.w3.org/TR/2018/CR-css-contain-1-20181108/
2+
Title: CSS Contain Level 1
3+
4+
----
5+
Issue 1.
6+
Summary: Style containment is difficult to implement, and should not hold up the rest
7+
From: Emilio
8+
Comment: https://github.com/w3c/csswg-drafts/issues/3280
9+
Closed: Accepted
10+
Resolved: https://github.com/w3c/csswg-drafts/issues/3280#issuecomment-467588765

0 commit comments

Comments
 (0)