@@ -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}
11601168SVG 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
11921237MathML Elements {#unbox-mathml}
11931238-------------------------------
0 commit comments