Skip to content

Commit 2cdf747

Browse files
authored
Display contents svg (#2599)
* [css-display] Describe SVG unboxing with element categories Fixes #2118 * [css-display] Clarify impact of display: contents on SVG attributes Addresses #2502 * [css-display] Add an issue re SVG attributes & display: contents
1 parent a0721d8 commit 2cdf747

File tree

1 file changed

+62
-17
lines changed

1 file changed

+62
-17
lines changed

css-display-3/Overview.bs

+62-17
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,14 @@ spec:css-pseudo-4; type:selector;
3535
text: ::first-line
3636
text: ::before
3737
text: ::after
38+
spec: svg2;
39+
type:dfn;
40+
text: container element
41+
text: text content child element
42+
text: renderable element
43+
text: non-rendered element
44+
text: rendered element
45+
text: presentation attribute
3846
</pre>
3947

4048
<h2 id="intro">
@@ -1160,34 +1168,71 @@ HTML Elements {#unbox-html}
11601168
SVG Elements {#unbox-svg}
11611169
---------------------------
11621170

1163-
: Root <{svg}>
1171+
: An <{svg}> element that has CSS box layout
1172+
(this includes all <{svg}> whose parent is an HTML element,
1173+
as well as document root elements)
11641174
::
11651175
''display: contents'' behaves as ''display: none''.
11661176

1167-
: Nested <{svg}>
1168-
: <{a}>
1169-
: <{g}>
1170-
: <{use}> (treated as a Shadow DOM container)
1171-
: <{tspan}>
1172-
: <{textPath}>
1173-
: unknown elements
1177+
: All other SVG [=container elements=] that are also [=renderable elements=]
1178+
: SVG [=text content child elements=]
1179+
: <{use}>
11741180
::
11751181
''display: contents'' strips the element from the formatting tree,
11761182
and hoists its contents up to display in its place.
1183+
These contents include the shadow-DOM content for <{use}>.
11771184

11781185
: any other SVG elements
11791186
::
11801187
''display: contents'' behaves as ''display: none''.
1188+
1189+
When an element is stripped from the formatting tree,
1190+
then any SVG attributes on that element
1191+
that control the layout and formatting of its child content
1192+
(or shadow DOM content)
1193+
are ignored when rendering the contents.
1194+
However, SVG [=presentation attributes=]
1195+
continue to affect CSS property inheritance,
1196+
the same as CSS styles set in any other way.
1197+
1198+
Issue(w3c/csswg-drafts#2502):
1199+
Is this description clear enough to identify
1200+
the SVG attributes affected by ''display: contents''?
1201+
1202+
1203+
<div class="note">
1204+
1205+
The intention here is that
1206+
the ''display: none'' behavior applies
1207+
whenever the "rendering context" inside the element
1208+
is different than the context outside of it.
1209+
If the element's child elements would not be valid children
1210+
of the element's parent,
1211+
you cannot simply hoist them up the formatting tree.
1212+
1213+
For example, text content and text formatting elements in SVG
1214+
require a <{text}> element context;
1215+
if you remove a <{text}>,
1216+
its child text content and elements are no longer valid.
1217+
For that reason, ''display: contents'' on <{text}>
1218+
prevents the entire text element from being rendered.
1219+
In contrast, any content inside a <{tspan}> or <{textPath}>
1220+
is also valid content inside the parent text formatting context,
1221+
so the hoisting behavior applies for these elements.
1222+
1223+
Similarly, if hoisting would convert the children from
1224+
[=non-rendered elements=]
1225+
(e.g., a shape inside a <{pattern}> or <{symbol}>)
1226+
to [=rendered elements=]
1227+
(e.g., a shape that is a direct child of the <{svg}>),
1228+
that is an invalid change of rendering context.
1229+
Never-rendered container elements therefore cannot be "un-boxed"
1230+
by ''display: contents''.
1231+
(Also, authors cannot override the 'display' property on these elements:
1232+
it is forced to ''none'' by an ''!important'' user agent style rule.)
1233+
1234+
</div>
11811235

1182-
Note: The intention here is that "nested container" elements--
1183-
elements which have the same sort of "rendering context"
1184-
both outside and inside themselves,
1185-
such that it's <em>meaningful</em> to put their contents
1186-
into the context of their parents--
1187-
get stripped and hoist their contents like normal for ''display: contents''.
1188-
Anything else,
1189-
where their contents are handled in a totally separate context from their parent,
1190-
just removes itself entirely.
11911236

11921237
MathML Elements {#unbox-mathml}
11931238
-------------------------------

0 commit comments

Comments
 (0)