Skip to content

Commit 26216a7

Browse files
tabatkinstabatkins
committed
[css-containment] Initial rewrite to have three independent notions of containment, per WG discussion.
1 parent d652f0e commit 26216a7

1 file changed

Lines changed: 73 additions & 34 deletions

File tree

‎css-containment/Overview.bs‎

Lines changed: 73 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@ Introduction</h2>
2828
and allow strong, predictable isolation of a subtree from the rest of the page,
2929
this specification defines a 'contain' property.
3030

31-
<h2 id='containment'>
31+
<h2 id='contain-property'>
3232
Strong Containment: the 'contain' property</h2>
3333

3434
<pre class='propdef'>
3535
Name: contain
36-
Value: none | strict
36+
Value: none | strict | [ layout || style || paint ]
3737
Initial: none
3838
Inherited: no
3939
Applies to: all elements
@@ -57,14 +57,30 @@ Strong Containment: the 'contain' property</h2>
5757

5858
<dt><dfn>strict</dfn>
5959
<dd>
60-
The ''contain/strict'' value indicates that the element is <a>strictly contained</a>,
60+
This value turns on all forms of <a>containment</a> for the element.
61+
In other words, it behaves the same as ''contain: layout style paint;'',
6162
so that its contents are guaranteed to have no effect on the rest of the page outside the element's bounds.
62-
</dl>
6363

64-
<p class='issue'>
65-
Do we want to break this apart,
66-
so people can opt into particular forms of containment without going whole-hog,
67-
if they really need to?
64+
<dt><dfn>layout</dfn>
65+
<dd>
66+
This value turns on <a>layout containment</a> for the element.
67+
The ensures that the containing element "traps" any layout-related effects of its descendants,
68+
so the rest of the document is guaranteed to not be affected by the layout of the containing element's descendants.
69+
70+
<dt><dfn>style</dfn>
71+
<dd>
72+
This value turns on <a>style containment</a> for the element.
73+
This ensures that,
74+
for properties which can have effects on more than just an element and its descendants,
75+
those effects dont' escape the containing element.
76+
77+
<dt><dfn>paint</dfn>
78+
<dd>
79+
This value turns on <a>paint containment</a> for the element.
80+
This ensures that the descendants of the containing element don't display outside its bounds,
81+
so if an element is off-screen or otherwise not visible,
82+
its descendants are also guaranteed to be not visible.
83+
</dl>
6884

6985
<div class='example'>
7086
'contain' is useful when used widely on a page,
@@ -96,42 +112,47 @@ Strong Containment: the 'contain' property</h2>
96112
so it can optimize the page and skip a lot of computation for messages that are off-screen.
97113
</div>
98114

99-
An element that is <dfn export>strictly contained</dfn> operates under the following restrictions:
100115

101-
<ol>
102-
<li>
103-
The contents of the element must be clipped to the element's content box.
116+
<h2 id='containment-types'>
117+
Types of Containment</h2>
118+
119+
There are several varieties of <dfn export>containment</dfn> that an element can be subject to,
120+
restricting the effects that its descendants can have on the rest of the page in various ways.
121+
<a>Containment</a> enables much more powerful optimizations by user agents,
122+
and helps authors compose their page out of functional units,
123+
as it limits how widely an effect a given change can have on a document.
124+
125+
<h3 id='containment-layout'>
126+
Layout Containment</h3>
127+
128+
Giving an element <dfn export>layout containment</dfn> has the following effects:
104129

105-
<li>
106-
The element must not provide a scrolling user interface (such as a scrollbar),
107-
nor be scrollable by any other means, such as dragging or script-based interaction.
130+
1. When laying out the containing element,
131+
it must be treated as having no contents.
108132

109-
<li>
110-
The <a attribute>scrollWidth</a> and <a attribute>scrollHeight</a> attributes of the element's <code>DOM</code> must return the same values as the <a attribute>clientWidth</a> and <a attribute>clientHeight</a> attributes, respectively.
133+
After layout of the element is complete,
134+
its contents must then be laid out into the containing element's resolved size.
111135

112-
<p class='issue'>
113-
Make sure this is the right way to define this. Also, ensure it's sane.
136+
2. The element must be a <a>formatting context</a>.
114137

115-
<li>
116-
The element must act as a containing block for absolutely positioned and fixed positioned descendants.
138+
Possible optimizations that can be enabled by <a>layout containment</a> include (but are not limited to):
117139

118-
<li>
119-
The element must be a <a>formatting context</a>.
140+
...
120141

121-
<li>
122-
The following properties must have no effect on descendants of the element:
142+
<h3 id='containment-style'>
143+
Style Containment</h3>
123144

124-
<ul>
125-
<li>'break-*' (and the related aliases)
126-
<li>'bookmark-*'
127-
<li>'string-set'
128-
</ul>
145+
Giving an element <dfn export>style containment</dfn> has the following effects:
129146

130-
<li>
131-
The 'counter-increment', 'counter-set', 'flow-from', 'flow-into', and 'content' (for the purpose of ''open-quote''/etc values) properties must be <a lt='scoped property'>scoped</a> to the element's sub-tree.
132-
</ol>
147+
1. The following properties must have no effect on descendants of the element:
133148

134-
A <dfn export>scoped property</dfn> has its effects scoped to a particular element or subtree.
149+
* 'break-*' (and the related aliases)
150+
* 'bookmark-*'
151+
* 'string-set'
152+
153+
2. The 'counter-increment', 'counter-set', 'flow-from', 'flow-into', and 'content' (for the purpose of ''open-quote''/etc values) properties must be <a>scoped</a> to the element's sub-tree.
154+
155+
A <dfn export local-lt="scoped">scoped property</dfn> has its effects scoped to a particular element or subtree.
135156
It must act as if the scoping element was the root of the document
136157
for the purpose of evaluating the property's effects:
137158
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,
@@ -144,3 +165,21 @@ Strong Containment: the 'contain' property</h2>
144165
the first use of it within the subtree acts as if the named counter were set to 0 at the scoping element,
145166
regardless of whether the counter had been used outside the scoping element.
146167
Any increments made within the subtree have no effect on counters of the same name outside the scoping element.
168+
169+
Possible optimizations that can be enabled by <a>style containment</a> include (but are not limited to):
170+
171+
...
172+
173+
<h3 id='containment-paint'>
174+
Paint Containment</h3>
175+
176+
Giving an element <dfn export>paint containment</dfn> has the following effects:
177+
178+
1. The contents of the element must be clipped to the element's content box.
179+
2. The element must act as a containing block for absolutely positioned and fixed positioned descendants.
180+
3. The element must be a <a>formatting context</a>.
181+
182+
Possible optimizations that can be enabled by <a>paint containment</a> include (but are not limited to):
183+
184+
...
185+

0 commit comments

Comments
 (0)